1import {P as P$1}from'./chunk-D5Fd4def.js';import'./chunk-BxiKEY2y.js';import {H as He,c as cD,R as R$1,F as Fi,a2 as fT,by as dT,s as il,o as xh,Q as Fh,w as Xv,a3 as pT,z as Sh,a6 as bT}from'./main-3HMYRIFC.js';import {g}from'./chunk-dB41Dv6I.js';import {u,x as x$1}from'./chunk-BepkDnWI.js';var S=["purple","magenta","orange","red"];var P=(t,s)=>s.color;function R(t,s){if(t&1&&(Fi(0,"app-storybook-example",3),xh(1,"ui-kit-labeled-progress-bar",23),il()),t&2){let e=s.$implicit;Sh("label",e),Xv(),Sh("color",e)("value",64)("max",100);}}function h(t,s){if(t&1&&xh(0,"ui-kit-labeled-progress-bar",17),t&2){let e=s.$implicit,n=bT();Sh("color",e.color)("label",e.label)("value",e.value)("loading",n.isReloading());}}var B=2e3,x=class t{colors=S;dynamicItems=[{color:"purple",label:"Storage used",value:64},{color:"magenta",label:"Bandwidth used",value:38},{color:"orange",label:"Tickets resolved",value:82},{color:"red",label:"Budget spent",value:95}];isReloading=He(true);_fillTimeoutId=void 0;constructor(){this._scheduleFill();}simulateReload(){this.isReloading.set(true),this._scheduleFill();}_scheduleFill(){clearTimeout(this._fillTimeoutId),this._fillTimeoutId=setTimeout(()=>this.isReloading.set(false),B);}static \u0275fac=function(e){return new(e||t)};static \u0275cmp=cD({type:t,selectors:[["app-storybook-labeled-progress-bar-page"]],decls:29,vars:11,consts:[["title","Labeled Progress Bar","description","`ui-kit-labeled-progress-bar` renders a label + value row above a track/fill bar. It has no business logic \u2014 it only renders the value it's given."],["title","Colors","description","All 4 supported fill colors."],[1,"storybook-labeled-progress-bar-page__column"],[3,"label"],["title","Display format","description","`percent` shows the fill ratio rounded to a whole percentage, `raw` shows the value as-is."],["label","percent"],["color","purple","label","Storage used","displayFormat","percent",1,"storybook-labeled-progress-bar-page__item",3,"value","max"],["label","raw"],["color","purple","label","Tickets resolved","displayFormat","raw",1,"storybook-labeled-progress-bar-page__item",3,"value","max"],["title","Loading","description","`loading` renders the shared skeleton in place of the track/fill bar; the label/value row still renders."],["label","loading: false"],["color","orange","label","Storage used",1,"storybook-labeled-progress-bar-page__item",3,"value"],["label","loading: true"],["color","orange","label","Storage used",1,"storybook-labeled-progress-bar-page__item",3,"value","loading"],["title","Retrigger loading","description","On page load, these 4 bars start in `loading` and automatically fill after 2s. The button replays that same sequence for all of them at once."],[1,"storybook-labeled-progress-bar-page__actions"],["label","Simulate reload","variant","primary","size","small",3,"clicked"],[1,"storybook-labeled-progress-bar-page__item",3,"color","label","value","loading"],["title","Clamping","description","`value` is always clamped into [0, max] \u2014 out-of-range inputs never overflow or invert the fill."],["label","value > max"],["color","red","label","Over budget",1,"storybook-labeled-progress-bar-page__item",3,"value","max"],["label","value < 0"],["color","magenta","label","Negative value",1,"storybook-labeled-progress-bar-page__item",3,"value","max"],["label","Storage used",1,"storybook-labeled-progress-bar-page__item",3,"color","value","max"]],template:function(e,n){e&1&&(Fi(0,"app-storybook-page",0)(1,"app-storybook-section",1)(2,"div",2),fT(3,R,2,4,"app-storybook-example",3,dT),il()(),Fi(5,"app-storybook-section",4)(6,"div",2)(7,"app-storybook-example",5),xh(8,"ui-kit-labeled-progress-bar",6),il(),Fi(9,"app-storybook-example",7),xh(10,"ui-kit-labeled-progress-bar",8),il()()(),Fi(11,"app-storybook-section",9)(12,"div",2)(13,"app-storybook-example",10),xh(14,"ui-kit-labeled-progress-bar",11),il(),Fi(15,"app-storybook-example",12),xh(16,"ui-kit-labeled-progress-bar",13),il()()(),Fi(17,"app-storybook-section",14)(18,"div",15)(19,"ui-kit-button",16),Fh("clicked",function(){return n.simulateReload()}),il()(),Fi(20,"div",2),fT(21,h,1,4,"ui-kit-labeled-progress-bar",17,P),il()(),Fi(23,"app-storybook-section",18)(24,"div",2)(25,"app-storybook-example",19),xh(26,"ui-kit-labeled-progress-bar",20),il(),Fi(27,"app-storybook-example",21),xh(28,"ui-kit-labeled-progress-bar",22),il()()()()),e&2&&(Xv(3),pT(n.colors),Xv(5),Sh("value",44)("max",100),Xv(2),Sh("value",234)("max",500),Xv(4),Sh("value",64),Xv(2),Sh("value",64)("loading",true),Xv(5),pT(n.dynamicItems),Xv(5),Sh("value",150)("max",100),Xv(2),Sh("value",-20)("max",100));},dependencies:[R$1,P$1,u,x$1,g],styles:[".storybook-labeled-progress-bar-page__column[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:24px}.storybook-labeled-progress-bar-page__item[_ngcontent-%COMP%]{display:block;width:275px}.storybook-labeled-progress-bar-page__actions[_ngcontent-%COMP%]{display:flex;margin-bottom:8px}"]})};export{x as LabeledProgressBarPage};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.