@bethinkpl/design-system 25.0.10 → 26.0.1

package/docs/assets/OverlayHeader-jylszhPO.js

@@ -0,0 +1 @@
+import{I as L}from"./IconButton-COzU-vlz.js";import{D as A,a as C}from"./Divider-D2yDhW46.js";import{D as I,c as f}from"./Dropdown-BfX0EVaK.js";import{D}from"./Skeleton-BbafKE6W.js";import{T as b,a as g}from"./Tooltip-BxZlo6cR.js";import{I as w,i as H,h}from"./Button-CBZkgukP.js";import{I as c}from"./Icon-BiVaixmr.js";import{d as k,t as U,o,c as s,g as r,h as t,f as n,n as u,k as T,a as d,F as R,e as _,r as l}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const p={NEUTRAL_GHOST:"neutralGhost",NEUTRAL:"neutral",SUCCESS:"success",FAIL:"fail",WARNING:"warning"},O={DEFAULT:"default",LOADING:"loading"},V=e=>(e==null?void 0:e.tagName)==="INPUT"||(e==null?void 0:e.tagName)==="SELECT"||(e==null?void 0:e.tagName)==="TEXTAREA"||!!(e!=null&&e.isContentEditable),S=k({name:"OverlayHeader",components:{DsIconButton:L,DsDivider:A,DsDropdown:I,DsSkeleton:D,DsTooltip:b},props:{title:{type:String,required:!0},shortTitle:{type:String,default:null},eyebrowText:{type:String,default:null},borderColor:{type:String,default:p.NEUTRAL_GHOST,validator:e=>Object.values(p).includes(e)},isTitleInteractive:{type:Boolean,default:!1},state:{type:String,default:O.DEFAULT,validator(e){return Object.values(O).includes(e)}},dropdownIcon:{type:Object,default:()=>c.FA_ELLIPSIS_VERTICAL,validator(e){return Object.values(c).includes(U(e))}}},emits:{close:()=>!0,titleClick:()=>!0},data(){return{ICON_BUTTON_SIZES:Object.freeze(w),ICON_BUTTON_COLORS:Object.freeze(H),ICON_BUTTON_STATES:Object.freeze(h),ICONS:Object.freeze(c),DIVIDER_PROMINENCES:Object.freeze(C),OVERLAY_HEADER_BORDER_COLORS:Object.freeze(p),OVERLAY_HEADER_STATES:Object.freeze(O),DROPDOWN_PLACEMENTS:Object.freeze(f),isDropdownOpen:!1,TOOLTIP_PLACEMENTS:Object.freeze(g)}},computed:{isLoading(){return this.state===O.LOADING}},beforeUnmount(){window.removeEventListener("keydown",this.onKeydown)},mounted(){window.addEventListener("keydown",this.onKeydown)},methods:{onKeydown(e){if(!V(e.target))switch(e.key){case"q":case"Q":e.stopPropagation(),this.$emit("close");break}},onTitleClick(){this.isTitleInteractive&&this.$emit("titleClick")}}}),$={key:0,class:"ds-overlayHeader__loadingWrapper"},P={key:1,class:"ds-overlayHeader__accessory"},M={key:2,class:"ds-overlayHeader__content"},j={key:0,class:"ds-overlayHeader__eyebrow"},z=["title"],F={key:1,class:"ds-overlayHeader__eyebrowAccessory"},G={class:"ds-overlayHeader__main"},Y={key:0,class:"ds-overlayHeader__titleLeading"},W=["title"],Z={class:"ds-overlayHeader__title -ds-desktop"},K={class:"ds-overlayHeader__title -ds-mobile"},q={key:2,class:"ds-overlayHeader__titleTrailingWrapper"},Q={class:"ds-overlayHeader__titleTrailing"},X={class:"ds-overlayHeader__actions"};function J(e,a,x,ee,oe,se){const E=l("ds-skeleton"),y=l("ds-divider"),v=l("ds-icon-button"),N=l("ds-dropdown"),m=l("ds-tooltip");return o(),s("div",{class:u(["ds-overlayHeader",{"-ds-borderNeutral":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.NEUTRAL,"-ds-borderSuccess":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.SUCCESS,"-ds-borderFail":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.FAIL,"-ds-borderWarning":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.WARNING}])},[e.isLoading?(o(),s("div",$,[r(E,{width:"50%",height:"12px"}),r(E,{class:"ds-overlayHeader__loadingBar -ds-desktop",width:"100%",height:"20px"}),r(E,{class:"ds-overlayHeader__loadingBar -ds-mobile",width:"100%",height:"18px"})])):t("",!0),!e.isLoading&&e.$slots.accessory?(o(),s("div",P,[n(e.$slots,"accessory",{},void 0,!0)])):t("",!0),e.isLoading?t("",!0):(o(),s("div",M,[e.eyebrowText||e.$slots.eyebrowAccessory?(o(),s("div",j,[e.eyebrowText?(o(),s("div",{key:0,class:u(["ds-overlayHeader__eyebrowText",{"-ds-withRightMargin":e.$slots.eyebrowAccessory}]),title:e.eyebrowText},T(e.eyebrowText),11,z)):t("",!0),e.$slots.eyebrowAccessory?(o(),s("div",F,[n(e.$slots,"eyebrowAccessory",{},void 0,!0)])):t("",!0)])):t("",!0),d("div",G,[e.$slots.titleLeading?(o(),s("div",Y,[n(e.$slots,"titleLeading",{},void 0,!0)])):t("",!0),e.title||e.shortTitle?(o(),s("div",{key:1,class:u(["ds-overlayHeader__titleWrapper",{"-ds-interactive":e.isTitleInteractive}]),title:e.title,onClick:a[0]||(a[0]=(...i)=>e.onTitleClick&&e.onTitleClick(...i))},[d("div",Z,T(e.title),1),d("div",K,T(e.shortTitle||e.title),1)],10,W)):t("",!0),e.$slots.titleTrailing?(o(),s("div",q,[d("div",Q,[n(e.$slots,"titleTrailing",{},void 0,!0)])])):t("",!0)])])),!e.isLoading&&e.$slots.actions?(o(),s(R,{key:3},[d("div",X,[n(e.$slots,"actions",{},void 0,!0)]),r(y,{class:"ds-overlayHeader__divider -ds-mobileHidden",prominence:e.DIVIDER_PROMINENCES.STRONG,"is-vertical":""},null,8,["prominence"])],64)):t("",!0),!e.isLoading&&e.$slots.dropdown?(o(),s(R,{key:4},[r(N,{"boundaries-selector":"body",placement:e.DROPDOWN_PLACEMENTS.BOTTOM_END,onShow:a[1]||(a[1]=i=>e.isDropdownOpen=!0),onHide:a[2]||(a[2]=i=>e.isDropdownOpen=!1)},{reference:_(()=>[r(v,{icon:e.dropdownIcon,size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,state:e.isDropdownOpen?e.ICON_BUTTON_STATES.HOVERED:e.ICON_BUTTON_STATES.DEFAULT},null,8,["icon","size","color","state"])]),default:_(({close:i})=>[n(e.$slots,"dropdown",{close:i},void 0,!0)]),_:3},8,["placement"]),r(y,{class:"ds-overlayHeader__divider",prominence:e.DIVIDER_PROMINENCES.STRONG,"is-vertical":""},null,8,["prominence"])],64)):t("",!0),r(m,{"is-pointer-visible":!1,placement:e.TOOLTIP_PLACEMENTS.LEFT,text:"Zamknij — Q"},{default:_(()=>[r(v,{"data-test-selector":"overlay-header-close-button",icon:e.ICONS.FA_XMARK,size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,onClick:a[3]||(a[3]=i=>e.$emit("close"))},null,8,["icon","size","color"])]),_:1},8,["placement"])],2)}const ce=B(S,[["render",J],["__scopeId","data-v-fc6a5a13"]]);S.__docgenInfo={displayName:"OverlayHeader",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"shortTitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"eyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"borderColor",type:{name:"string"},defaultValue:{func:!1,value:"OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST"}},{name:"isTitleInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"OVERLAY_HEADER_STATES.DEFAULT"}},{name:"dropdownIcon",type:{name:"object"},defaultValue:{func:!0,value:"() => ICONS.FA_ELLIPSIS_VERTICAL"}}],events:[{name:"close"},{name:"titleClick"}],slots:[{name:"accessory"},{name:"eyebrowAccessory"},{name:"titleLeading"},{name:"titleTrailing"},{name:"actions"},{name:"dropdown",scoped:!0,bindings:[{name:"close",title:"binding"}]}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue"]};export{ce as O,p as a,O as b};

package/docs/assets/OverlayHeader.stories-bjFfL93l.js

@@ -0,0 +1,67 @@
+import{O as o,a as s,b as n}from"./OverlayHeader-jylszhPO.js";import{I as l}from"./Icon-BiVaixmr.js";import"./IconButton-COzU-vlz.js";import"./Button-CBZkgukP.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./device-9fgosCm4.js";import"./Divider-D2yDhW46.js";import"./Dropdown-BfX0EVaK.js";import"./vue-popper-BJbr8Gin.js";import"./_commonjsHelpers-Chg3vePA.js";import"./Skeleton-BbafKE6W.js";import"./Tooltip-BxZlo6cR.js";const A={title:"Components/Headers/OverlayHeader",component:o},d=i=>({components:{OverlayHeader:o},setup(){return{args:i}},methods:{onClose(){console.log("OverlayHeader emitted close event")}},data(){return{ICONS:Object.freeze(l)}},template:`
+        <div style="height: 300px">
+            <overlay-header v-bind=args :dropdown-icon="ICONS[args.dropdownIcon]" @close="onClose">
+                <template v-if="args.accessorySlot" #accessory>
+                    <div style="background: var(--raw-gray-300); height: 100%">{{ args.accessorySlot }}</div>
+                </template>
+                <template v-if="args.eyebrowAccessorySlot" #eyebrowAccessory>
+                    <div style="background: var(--raw-gray-300); font-size: 10px">{{ args.eyebrowAccessorySlot }}</div>
+                </template>
+                <template v-if="args.titleLeadingSlot" #titleLeading>
+                    <div style="background: var(--raw-gray-300);">{{ args.titleLeadingSlot }}</div>
+                </template>
+                <template v-if="args.titleTrailingSlot" #titleTrailing>
+                    <div style="background: var(--raw-gray-300); white-space: nowrap">{{ args.titleTrailingSlot }}</div>
+                </template>
+                <template v-if="args.actionsSlot" #actions>
+                    <div style="background: var(--raw-gray-300); height: 100%">{{ args.actionsSlot }}</div>
+                </template>
+                <template v-if="args.dropdownSlot" #dropdown="{ close }">
+                    <div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
+                    <div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
+                </template>
+            </overlay-header>
+        </div>`}),e=d.bind({}),c={title:"Zadanie #123",shortTitle:"#123",eyebrowText:"Eyebrow",accessorySlot:"accessory",actionsSlot:"actions slot",dropdownSlot:"dropdown slot",dropdownIcon:"FA_ELLIPSIS_VERTICAL",eyebrowAccessorySlot:"eyebrowAccessory",titleLeadingSlot:"leading",titleTrailingSlot:"trailing",isTitleInteractive:!1,borderColor:s.NEUTRAL_GHOST,state:n.DEFAULT},g={borderColor:{control:"select",options:Object.values(s)},state:{control:"select",options:Object.values(n)},dropdownIcon:{control:"select",options:Object.keys(l)}};e.argTypes=g;e.args=c;e.parameters={layout:"fullscreen",design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5867%3A99215&t=gnx09suYyI8a6jHh-0"}};var t,r,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
+  components: {
+    OverlayHeader
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  methods: {
+    onClose() {
+      console.log('OverlayHeader emitted close event');
+    }
+  },
+  data() {
+    return {
+      ICONS: Object.freeze(ICONS)
+    };
+  },
+  template: \`
+        <div style="height: 300px">
+            <overlay-header v-bind=args :dropdown-icon="ICONS[args.dropdownIcon]" @close="onClose">
+                <template v-if="args.accessorySlot" #accessory>
+                    <div style="background: var(--raw-gray-300); height: 100%">{{ args.accessorySlot }}</div>
+                </template>
+                <template v-if="args.eyebrowAccessorySlot" #eyebrowAccessory>
+                    <div style="background: var(--raw-gray-300); font-size: 10px">{{ args.eyebrowAccessorySlot }}</div>
+                </template>
+                <template v-if="args.titleLeadingSlot" #titleLeading>
+                    <div style="background: var(--raw-gray-300);">{{ args.titleLeadingSlot }}</div>
+                </template>
+                <template v-if="args.titleTrailingSlot" #titleTrailing>
+                    <div style="background: var(--raw-gray-300); white-space: nowrap">{{ args.titleTrailingSlot }}</div>
+                </template>
+                <template v-if="args.actionsSlot" #actions>
+                    <div style="background: var(--raw-gray-300); height: 100%">{{ args.actionsSlot }}</div>
+                </template>
+                <template v-if="args.dropdownSlot" #dropdown="{ close }">
+                    <div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
+                    <div style="background: var(--raw-gray-300);">{{ args.dropdownSlot }}</div>
+                </template>
+            </overlay-header>
+        </div>\`
+})`,...(a=(r=e.parameters)==null?void 0:r.docs)==null?void 0:a.source}}};const k=["Interactive"];export{e as Interactive,k as __namedExportsOrder,A as default};

package/docs/assets/PageHeader-CTbdU4IG.js

@@ -0,0 +1 @@
+import{D as p}from"./Divider-D2yDhW46.js";import{d as u,o as a,c as s,a as t,f as n,h as r,k as d,b as c,n as _,r as m}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const o={VERTICAL:"vertical",HORIZONTAL:"horizontal"},i=u({name:"PageHeader",components:{DsDivider:p},props:{pageTitle:{type:String,required:!0},supportingInfo:{type:String,default:null},divider:{type:Boolean,default:!0},mobileLayout:{type:String,default:o.VERTICAL,validator:e=>Object.values(o).includes(e)}},data(){return{PAGE_HEADER_MOBILE_LAYOUTS:Object.freeze(o)}}}),f={class:"ds-pageHeader__wrapper"},v={key:0,class:"ds-pageHeader__breadcrumbs"},E={class:"ds-pageHeader__contentWrapper"},H={class:"ds-pageHeader__textWrapper"},y={class:"ds-pageHeader__title"},A={key:0,class:"ds-pageHeader__supportingText"},b={key:0,class:"ds-pageHeader__actions"};function L(e,I,O,T,h,P){const l=m("ds-divider");return a(),s("div",{class:_(["ds-pageHeader",{"-ds-horizontal":e.mobileLayout===e.PAGE_HEADER_MOBILE_LAYOUTS.HORIZONTAL}])},[t("div",f,[e.$slots.breadcrumbs?(a(),s("div",v,[n(e.$slots,"breadcrumbs",{},void 0,!0)])):r("",!0),t("div",E,[t("div",H,[t("div",y,d(e.pageTitle),1),e.supportingInfo?(a(),s("div",A,d(e.supportingInfo),1)):r("",!0)]),e.$slots.actions?(a(),s("div",b,[n(e.$slots,"actions",{},void 0,!0)])):r("",!0)])]),e.divider?(a(),c(l,{key:0})):r("",!0)],2)}const S=g(i,[["render",L],["__scopeId","data-v-12863c4d"]]);i.__docgenInfo={displayName:"PageHeader",exportName:"default",description:"",tags:{},props:[{name:"pageTitle",type:{name:"string"},required:!0},{name:"supportingInfo",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"divider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"mobileLayout",type:{name:"string"},defaultValue:{func:!1,value:"PAGE_HEADER_MOBILE_LAYOUTS.VERTICAL"}}],slots:[{name:"breadcrumbs"},{name:"actions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Headers/PageHeader/PageHeader.vue"]};export{S as P,o as a};

package/docs/assets/PageHeader.stories-DeNf1zoa.js

@@ -0,0 +1,9 @@
+import{P as r,a as i}from"./PageHeader-CTbdU4IG.js";import{w as p}from"./decorator-CSnIf-k5.js";import"./Divider-D2yDhW46.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const f={title:"Components/Headers/PageHeader",component:r,decorators:[p]},n=s=>({components:{PageHeader:r},setup(){return s},template:'<page-header :page-title="pageTitle" :supporting-info="supportingInfo" :mobile-layout="mobileLayout" :divider="divider"><template v-if="breadcrumbs" #breadcrumbs><div v-html="breadcrumbs" /></template><template v-if="actions" #actions><div v-html="actions" /></template></page-header>'}),e=n.bind({}),m={breadcrumbs:"",actions:"",pageTitle:"Page title",supportingInfo:"Supporting info write here",divider:!0,mobileLayout:i.VERTICAL},d={breadcrumbs:{control:"text"},actions:{control:"text"},pageTitle:{control:"text"},supportingInfo:{control:"text"},divider:{control:"boolean"},mobileLayout:{control:"select",options:Object.values(i)}};e.argTypes=d;e.args=m;e.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6984-129711&t=ivzu5dM9vSgW20Re-0"}};var t,a,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => ({
+  components: {
+    PageHeader
+  },
+  setup() {
+    return args;
+  },
+  template: '<page-header' + ' :page-title="pageTitle"' + ' :supporting-info="supportingInfo"' + ' :mobile-layout="mobileLayout"' + ' :divider="divider"' + '>' + '<template v-if="breadcrumbs" #breadcrumbs><div v-html="breadcrumbs" /></template>' + '<template v-if="actions" #actions><div v-html="actions" /></template>' + '</page-header>'
+})`,...(o=(a=e.parameters)==null?void 0:a.docs)==null?void 0:o.source}}};const h=["Interactive"];export{e as Interactive,h as __namedExportsOrder,f as default};

package/docs/assets/Pagination-dSOJSh7t.js

@@ -0,0 +1 @@
+import{I as y}from"./IconButton-COzU-vlz.js";import{I as B,i as U,h as L}from"./Button-CBZkgukP.js";import{I as M}from"./Icon-BiVaixmr.js";import{D as b,c as k,b as F}from"./Dropdown-BfX0EVaK.js";import{S as $}from"./SelectList-CTXM5G8Z.js";import{S as V}from"./SelectListItem-_c4CA-YM.js";import{d as z,o as n,c as o,a as i,F as g,m as I,h as P,g as T,A as G,k as N,f as w,n as u,r as m,e as _,b as S}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as W}from"./_plugin-vue_export-helper-DlAUqK2U.js";const j=30,Z=7,C="ellipsis",d=1,E=z({name:"Pagination",components:{IconButton:y,Dropdown:b,SelectListItem:V,SelectList:$},props:{currentPage:{type:Number,default:d,validator(e){return e>0}},forceCompact:{type:Boolean,default:!1},isCentered:{type:Boolean,default:!1},itemsPerPage:{type:Number,default:j,validator(e){return e>0}},itemsTotalAmount:{type:Number,required:!0}},emits:["change-page"],data(){return{DROPDOWN_PLACEMENTS:Object.freeze(k),DROPDOWN_RADIUSES:Object.freeze(F),ICON_BUTTON_SIZES:Object.freeze(B),ICON_BUTTON_COLORS:Object.freeze(U),ICON_BUTTON_STATES:Object.freeze(L),ICONS:Object.freeze(M),FIRST_PAGE_NUMBER:d}},computed:{lastPage(){return Math.ceil(this.itemsTotalAmount/this.itemsPerPage)||d},navigationItems(){let e;this.lastPage<=Z?e=7:e=this.currentPage>4&&this.currentPage<this.lastPage-3?2:4;const t={start:Math.round(this.currentPage-e/2),end:Math.round(this.currentPage+e/2)};(t.start-1===1||t.end+1===this.lastPage)&&(t.start+=1,t.end+=1);let a=this.currentPage>e?this.getRange(Math.min(t.start,this.lastPage-e),Math.min(t.end,this.lastPage)):this.getRange(1,Math.min(this.lastPage,e+1));const r=(O,f)=>a.length+1!==this.lastPage?f:[O];return a[0]!==1&&(a=r(1,[1,C]).concat(a)),a[a.length-1]<this.lastPage&&(a=a.concat(r(this.lastPage,[C,this.lastPage]))),a},navigationItemsForDropdown(){return this.getRange(d,this.lastPage).map(e=>{const t=(e-1)*this.itemsPerPage,a=e<this.lastPage?t+this.itemsPerPage:this.itemsTotalAmount;return{label:`${e} (${t+1} - ${a})`,value:e}})}},methods:{ellipsisAsSecond(e){return e===1},getRange(e,t){return Array(t-e+1).fill(null).map((a,r)=>r+e)},changePage(e){this.currentPage!==e&&this.$emit("change-page",e)},isPage(e){return typeof e=="number"},onInputValueConfirmed(e){const t=+e.target.value;this.changePage(t)},onDropdownClick(e,t){this.changePage(e),t()}}}),q={class:"ds-pagination__itemsWrapper"},K={key:0,class:"ds-pagination__items -ds-default"},H=["onClick"],X={class:"ds-pagination__itemWrapper -ds-touchable"},J={key:1,class:"ds-pagination__items -ds-compact"},Q={class:"ds-pagination__compactItem"},Y=["value","min","max"],x={class:"ds-pagination__text"},ee={class:"ds-pagination__accessorySlot"};function te(e,t,a,r,O,f){const A=m("select-list-item"),D=m("select-list"),v=m("dropdown"),h=m("icon-button");return n(),o("div",{class:u(["ds-pagination",{"-ds-forceCompact":e.forceCompact,"-ds-centered":e.isCentered&&!e.$slots.accessory}])},[i("div",q,[e.navigationItems.length>1&&!e.forceCompact?(n(),o("div",K,[(n(!0),o(g,null,I(e.navigationItems,(s,c)=>(n(),o(g,null,[e.isPage(s)?(n(),o("div",{key:c,class:u(["ds-pagination__itemWrapper",{"-ds-touchable":e.currentPage!==s}]),role:"link",onClick:l=>e.changePage(s)},[i("span",{class:u(["ds-pagination__item",{"-ds-selected":e.currentPage===s}])},N(s),3)],10,H)):(n(),o("div",{key:`ellipsis${c}`},[T(v,{radius:e.DROPDOWN_RADIUSES.BOTTOM,"max-height":"250px",placement:e.ellipsisAsSecond(c)?e.DROPDOWN_PLACEMENTS.BOTTOM_START:e.DROPDOWN_PLACEMENTS.BOTTOM_END},{reference:_(({isOpened:l})=>[i("div",X,[i("span",{class:u(["ds-pagination__item",{"-ds-selected":l}])},"…",2)])]),default:_(({close:l})=>[e.navigationItemsForDropdown.length?(n(),S(D,{key:0},{default:_(()=>[(n(!0),o(g,null,I(e.navigationItemsForDropdown,(p,R)=>(n(),S(A,{key:R,label:p.label,"is-selected":e.currentPage===p.value,onClick:ae=>e.onDropdownClick(p.value,l)},null,8,["label","is-selected","onClick"]))),128))]),_:2},1024)):P("",!0)]),_:2},1032,["radius","placement"])]))],64))),256))])):P("",!0),e.navigationItems.length>1?(n(),o("div",J,[T(h,{size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,icon:e.ICONS.FA_ANGLE_LEFT,state:e.currentPage<=e.FIRST_PAGE_NUMBER?e.ICON_BUTTON_STATES.DISABLED:e.ICON_BUTTON_STATES.DEFAULT,onClick:t[0]||(t[0]=s=>e.changePage(e.currentPage-1))},null,8,["size","color","icon","state"]),i("div",Q,[i("input",{class:"ds-pagination__input",type:"number",value:e.currentPage,min:e.FIRST_PAGE_NUMBER,step:1,max:e.lastPage,onChange:t[1]||(t[1]=(...s)=>e.onInputValueConfirmed&&e.onInputValueConfirmed(...s)),onKeyup:t[2]||(t[2]=G((...s)=>e.onInputValueConfirmed&&e.onInputValueConfirmed(...s),["enter"]))},null,40,Y),i("span",x,"z "+N(e.lastPage),1)]),T(h,{size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,icon:e.ICONS.FA_ANGLE_RIGHT,state:e.currentPage>=e.lastPage?e.ICON_BUTTON_STATES.DISABLED:e.ICON_BUTTON_STATES.DEFAULT,onClick:t[3]||(t[3]=s=>e.changePage(e.currentPage+1))},null,8,["size","color","icon","state"])])):P("",!0)]),i("div",ee,[w(e.$slots,"accessory",{},void 0,!0)])],2)}const de=W(E,[["render",te],["__scopeId","data-v-ef895fca"]]);E.__docgenInfo={displayName:"Pagination",exportName:"default",description:"",tags:{},props:[{name:"currentPage",type:{name:"number"},defaultValue:{func:!1,value:"FIRST_PAGE_NUMBER"}},{name:"forceCompact",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isCentered",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"itemsPerPage",type:{name:"number"},defaultValue:{func:!1,value:"PAGINATION_DEFAULT_ITEMS_PER_PAGE"}},{name:"itemsTotalAmount",type:{name:"number"},required:!0}],events:[{name:"change-page",type:{names:["undefined"]}}],slots:[{name:"accessory"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Pagination/Pagination.vue"]};export{de as P};

package/docs/assets/Pagination.stories-CMg8WaRV.js

@@ -0,0 +1,31 @@
+import{P as o}from"./Pagination-dSOJSh7t.js";import"./IconButton-COzU-vlz.js";import"./Icon-BiVaixmr.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Button-CBZkgukP.js";import"./device-9fgosCm4.js";import"./Dropdown-BfX0EVaK.js";import"./vue-popper-BJbr8Gin.js";import"./_commonjsHelpers-Chg3vePA.js";import"./SelectList-CTXM5G8Z.js";import"./SelectListItem-_c4CA-YM.js";const{useArgs:c}=__STORYBOOK_MODULE_PREVIEW_API__,I={title:"Components/Pagination",component:o},m=r=>{const[p,s]=c();return{components:{Pagination:o},setup(){return{args:r}},methods:{onChangePage(i){s({currentPage:i})}},template:`
+            <Pagination v-bind=args @change-page="onChangePage">
+                <template #accessory>
+                    <div v-if="args.accessory" v-html="args.accessory" />
+                </template>
+            </Pagination>`}},e=m.bind({}),g={currentPage:{control:{type:"number",min:1}},forceCompact:{control:"boolean"},isCentered:{control:"boolean"},itemsPerPage:{control:{type:"number",min:1}},itemsTotalAmount:{control:{type:"number",min:1}},accessory:{control:"text"}};e.argTypes=g;e.args={currentPage:1,forceCompact:!1,isCentered:!1,itemsPerPage:30,itemsTotalAmount:600,accessory:"accessory slot"};e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5163%3A83788&t=5NKcvxgSeUb4Ped9-4"}};var t,n,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      Pagination
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    methods: {
+      onChangePage(currentPage) {
+        updateArgs({
+          currentPage
+        });
+      }
+    },
+    template: \`
+            <Pagination v-bind=args @change-page="onChangePage">
+                <template #accessory>
+                    <div v-if="args.accessory" v-html="args.accessory" />
+                </template>
+            </Pagination>\`
+  };
+}`,...(a=(n=e.parameters)==null?void 0:n.docs)==null?void 0:a.source}}};const O=["Interactive"];export{e as Interactive,O as __namedExportsOrder,I as default};

package/docs/assets/PopOver-BPD1Ttq1.js

@@ -0,0 +1 @@
+import{V as b}from"./vue-popper-BJbr8Gin.js";import{D as g,a as v,B as E}from"./Button-CBZkgukP.js";import{d as P,o as t,c as a,f as o,b as f,e as s,r as m,a as n,h as l,k as r,n as c,l as _}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as V}from"./_plugin-vue_export-helper-DlAUqK2U.js";const u={DEFAULT:"default",NEUTRAL:"neutral"},i={CLICK:"click",HOVER:"hover",NONE:"none"},O={TOP:"top",BOTTOM:"bottom",LEFT:"left",RIGHT:"right",BOTTOM_START:"bottom-start",BOTTOM_END:"bottom-end"},d={SMALL:"small",MEDIUM:"medium"},T=P({name:"PopOver",components:{VuePopper:b,DsButton:g},props:{boundariesSelector:{type:String,default:null},triggerAction:{type:String,default:i.CLICK,validator(e){return Object.values(i).includes(e)}},placement:{type:String,default:O.BOTTOM,validator(e){return Object.values(O).includes(e)}},forceShow:{type:Boolean,default:!1},color:{type:String,default:u.DEFAULT,validator(e){return Object.values(u).includes(e)}},titleText:{type:String,default:null},subtitleText:{type:String,default:null},buttonText:{type:String,default:null},headerImageUrl:{type:String,default:null},appendToBody:{type:Boolean,default:!1},modifiers:{type:Object,default:()=>({})},size:{type:String,default:d.SMALL,validator(e){return Object.values(d).includes(e)}},maxHeight:{type:Boolean,default:!1},isPointerVisible:{type:Boolean,default:!0},rootClass:{type:String,default:""}},emits:["button-click"],data(){return{POP_OVER_COLORS:Object.freeze(u),POP_OVER_SIZES:Object.freeze(d),POP_OVER_TRIGGER_ACTIONS:Object.freeze(i),BUTTON_TYPES:Object.freeze(v),BUTTON_SIZES:Object.freeze(E),key:1}},watch:{triggerAction(){this.updateKey()},placement(){this.updateKey()},boundariesSelector(){this.updateKey()}},methods:{close(){this.$refs.popper.doClose()},updateKey(){this.key++}}}),R=["src"],h={class:"ds-popOver__content"},I={key:0,class:"ds-popOver__title"},C={key:1,class:"ds-popOver__subtitle"};function B(e,p,L,N,A,k){const y=m("ds-button"),S=m("vue-popper");return t(),a("span",null,[e.triggerAction===e.POP_OVER_TRIGGER_ACTIONS.NONE?o(e.$slots,"reference",{key:0},void 0,!0):(t(),f(S,{ref:"popper",key:e.key,"boundaries-selector":e.boundariesSelector,"force-show":e.forceShow,options:{placement:e.placement,modifiers:e.modifiers},trigger:e.triggerAction,"delay-on-mouse-over":300,"delay-on-mouse-out":300,"append-to-body":e.appendToBody,"visible-arrow":e.isPointerVisible,"root-class":e.rootClass},{reference:s(()=>[o(e.$slots,"reference",{},void 0,!0)]),default:s(()=>[n("div",{class:c(["popper ds-popOver",{"-ds-color-neutral":e.color===e.POP_OVER_COLORS.NEUTRAL,"-ds-small":e.size===e.POP_OVER_SIZES.SMALL,"-ds-medium":e.size===e.POP_OVER_SIZES.MEDIUM,"-ds-visible-arrow":e.isPointerVisible}])},[e.headerImageUrl?(t(),a("img",{key:0,class:"ds-popOver__image",src:e.headerImageUrl,alt:""},null,8,R)):l("",!0),n("div",h,[e.titleText?(t(),a("div",I,r(e.titleText),1)):l("",!0),e.subtitleText?(t(),a("div",C,r(e.subtitleText),1)):l("",!0),n("div",{class:c(["ds-popOver__contentSlot",{"-ds-maxHeight":e.maxHeight}])},[o(e.$slots,"default",{close:e.close},void 0,!0)],2)]),e.buttonText?(t(),f(y,{key:1,class:"ds-popOver__button",type:e.BUTTON_TYPES.TEXT,size:e.BUTTON_SIZES.LARGE,onClick:p[0]||(p[0]=U=>e.$emit("button-click"))},{default:s(()=>[_(r(e.buttonText),1)]),_:1},8,["type","size"])):l("",!0)],2)]),_:3},8,["boundaries-selector","force-show","options","trigger","append-to-body","visible-arrow","root-class"]))])}const G=V(T,[["render",B],["__scopeId","data-v-75d99861"]]);T.__docgenInfo={displayName:"PopOver",exportName:"default",description:"",tags:{},props:[{name:"boundariesSelector",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"triggerAction",type:{name:"string"},defaultValue:{func:!1,value:"POP_OVER_TRIGGER_ACTIONS.CLICK"}},{name:"placement",type:{name:"string"},defaultValue:{func:!1,value:"POP_OVER_PLACEMENTS.BOTTOM"}},{name:"forceShow",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"POP_OVER_COLORS.DEFAULT"}},{name:"titleText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"subtitleText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"buttonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerImageUrl",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"appendToBody",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"modifiers",type:{name:"object"},defaultValue:{func:!1,value:"{}"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"POP_OVER_SIZES.SMALL"}},{name:"maxHeight",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isPointerVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"rootClass",type:{name:"string"},defaultValue:{func:!1,value:"''"}}],events:[{name:"button-click"}],slots:[{name:"reference"},{name:"default",scoped:!0,bindings:[{name:"close",title:"binding"}]}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/PopOver/PopOver.vue"]};export{G as P,d as a,O as b,u as c,i as d};

package/docs/assets/PopOver.stories-Cl1k59cl.js

@@ -0,0 +1,15 @@
+import{P as r,a,b as n,c as u,d as l}from"./PopOver-BPD1Ttq1.js";import"./vue-popper-BJbr8Gin.js";import"./_commonjsHelpers-Chg3vePA.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./Button-CBZkgukP.js";import"./Icon-BiVaixmr.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const B={title:"Components/PopOver",component:r},g=o=>({components:{PopOver:r},setup(){return o},template:'<div style="display: flex; align-items: center; justify-content: center; height: 800px; background: var(--raw-gray-50);"><pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible"><template #reference><span style="background: var(--theme-100); border-radius: 4px; padding: 4px 8px;">click me!</span></template><div>{{ definitionSlot }}</div></pop-over></div>'}),e=g.bind({});e.args={size:a.SMALL,maxHeight:!1,placement:n.BOTTOM,color:u.DEFAULT,headerImageUrl:"https://wnl-platform-dev-kuba.s3.eu-central-1.amazonaws.com/public/illustation-StatusLekcji.png",titleText:"Lorem ipsum",subtitleText:"Dolor sit amet",buttonText:"button text",triggerAction:l.CLICK,forceShow:!1,isPointerVisible:!0,definitionSlot:"Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork."};const d={size:{control:"select",options:Object.values(a)},placement:{control:"select",options:Object.values(n)},color:{control:"select",options:Object.values(u)},triggerAction:{control:"select",options:Object.values(l)}};e.argTypes=d;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3590%3A67741"}};const f=o=>({components:{PopOver:r},props:Object.keys(o),template:'<div style="display: flex; align-items: center; justify-content: center; height: 800px"><pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :force-show="forceShow" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible"><template #reference><span>click me!</span></template><template #default><b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork. <b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.</template></pop-over></div>'}),t=f.bind({});t.args={size:a.MEDIUM,maxHeight:!0,placement:n.BOTTOM,color:u.DEFAULT,titleText:"Lorem ipsum",subtitleText:"Dolor sit amet",triggerAction:l.CLICK,forceShow:!1,isPointerVisible:!1};t.argTypes=d;var i,s,p;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`args => ({
+  components: {
+    PopOver
+  },
+  setup() {
+    return args;
+  },
+  template: '<div style="display: flex; align-items: center; justify-content: center; height: 800px; background: var(--raw-gray-50);">' + '<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' + '<template #reference><span style="background: var(--theme-100); border-radius: 4px; padding: 4px 8px;">click me!</span></template>' + '<div>{{ definitionSlot }}</div>' + '</pop-over>' + '</div>'
+})`,...(p=(s=e.parameters)==null?void 0:s.docs)==null?void 0:p.source}}};var c,m,b;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`argTypes => ({
+  components: {
+    PopOver
+  },
+  props: Object.keys(argTypes),
+  template: '<div style="display: flex; align-items: center; justify-content: center; height: 800px">' + '<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :force-show="forceShow" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' + '<template #reference><span>click me!</span></template>' + '<template #default><b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork. <b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.</template>' + '</pop-over>' + '</div>'
+})`,...(b=(m=t.parameters)==null?void 0:m.docs)==null?void 0:b.source}}};const P=["Interactive","PopOverMMaxHeightNoPointer"];export{e as Interactive,t as PopOverMMaxHeightNoPointer,P as __namedExportsOrder,B as default};

package/docs/assets/ProgressBar-4gBRbr7a.js

@@ -0,0 +1 @@
+import{d as m,o as a,c as s,a as u,k as n,n as l,h as t,l as c,F as I,m as O,b,v as _,r as g,p as L,q as B}from"./vue.esm-bundler-BSCmGRHc.js";import{a as y,I as D,b as T}from"./Icon-BiVaixmr.js";import{_ as M}from"./_plugin-vue_export-helper-DlAUqK2U.js";const w={PRIMARY_MEDIUM:"primaryMedium",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",PRIMARY_GHOST:"primaryGhost",NEUTRAL_MEDIUM:"neutralMedium",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",NEUTRAL_GHOST:"neutralGhost",INFO_MEDIUM:"infoMedium",INFO:"info",INFO_WEAK:"infoWeak",INFO_GHOST:"infoGhost",SUCCESS_MEDIUM:"successMedium",SUCCESS:"success",SUCCESS_WEAK:"successWeak",SUCCESS_GHOST:"successGhost",WARNING_MEDIUM:"warningMedium",WARNING:"warning",WARNING_WEAK:"warningWeak",WARNING_GHOST:"warningGhost",FAIL_MEDIUM:"failMedium",FAIL:"fail",FAIL_WEAK:"failWeak",FAIL_GHOST:"failGhost"},R={PRIMARY:"primary",NEUTRAL:"neutral",INFO:"info",SUCCESS:"success",WARNING:"warning",FAIL:"fail"},o={MEDIUM:"medium",SMALL:"small",XSMALL:"extra small"},S={MEDIUM:"medium",SMALL:"small"},d={DEFAULT:"default",NONE:"none"},p={DEFAULT:"default",COMPACT:"compact"},f=m({name:"ProgressBar",components:{DsIcon:y},props:{size:{type:String,default:o.SMALL,validator(e){return Object.values(o).includes(e)}},labelTextSize:{type:String,default:S.SMALL,validator(e){return Object.values(S).includes(e)}},ranges:{type:Array,required:!0,validator(e){return e.every(r=>r.start>=0&&r.length>=0&&r.start+r.length<=100)}},radius:{type:String,default:d.DEFAULT,validator(e){return Object.values(d).includes(e)}},layout:{type:String,default:p.DEFAULT,validator(e){return Object.values(p).includes(e)}},labelText:{type:String,default:null},labelData:{type:String,default:null},labelDataSupporting:{type:String,default:null},labelDataSuffix:{type:String,default:null},labelTextEllipsis:{type:Boolean,default:!1},badgePosition:{type:Number,default:null,validator(e){return e>=0&&e<=100}},badgeColor:{type:String,default:R.INFO,validator(e){return Object.values(R).includes(e)}}},data(){return{PROGRESS_BAR_SIZES:Object.freeze(o),PROGRESS_BAR_RADII:Object.freeze(d),PROGRESS_BAR_LAYOUTS:Object.freeze(p),PROGRESS_BAR_LABEL_TEXT_SIZES:Object.freeze(S),ICONS:Object.freeze(D),ICON_SIZES:Object.freeze(T)}},computed:{labelDataExists(){return this.labelData||this.labelDataSupporting||this.labelDataSuffix}}}),G=e=>(L("data-v-64356f6f"),e=e(),B(),e),N={key:0,class:"ds-progressBar__label"},P=["title"],v={key:0,class:"ds-progressBar__labelDataWrapper"},C={key:0,class:"ds-progressBar__labelData"},U={key:1,class:"ds-progressBar__labelDataSupporting"},h=G(()=>u("span",{class:"ds-progressBar__labelDataSeparator"},"/",-1)),F={key:2,class:"ds-progressBar__labelDataSuffix"};function z(e,r,W,k,Z,V){const E=g("ds-icon");return a(),s("div",{class:l(["ds-progressBar",{"-ds-compact":e.layout===e.PROGRESS_BAR_LAYOUTS.COMPACT}])},[e.labelText||e.labelDataExists?(a(),s("div",N,[u("div",{class:l(["ds-progressBar__labelText",{"-ds-medium":e.labelTextSize===e.PROGRESS_BAR_LABEL_TEXT_SIZES.MEDIUM,"-ds-ellipsis":e.labelTextEllipsis}]),title:e.labelTextEllipsis?e.labelText:null},n(e.labelText),11,P),e.labelDataExists?(a(),s("div",v,[e.labelData?(a(),s("span",C,n(e.labelData),1)):t("",!0),e.labelDataSupporting?(a(),s("span",U,[h,c(" "+n(e.labelDataSupporting),1)])):t("",!0),e.labelDataSuffix?(a(),s("span",F,n(e.labelDataSuffix),1)):t("",!0)])):t("",!0)])):t("",!0),u("div",{class:l(["ds-progressBar__barWrapper",{"-ds-small":e.size===e.PROGRESS_BAR_SIZES.SMALL,"-ds-xsmall":e.size===e.PROGRESS_BAR_SIZES.XSMALL}])},[u("div",{class:l(["ds-progressBar__bar",{"-ds-noRadius":e.radius===e.PROGRESS_BAR_RADII.NONE}])},[(a(!0),s(I,null,O(e.ranges,(i,A)=>(a(),s("div",{key:A,class:l(["ds-progressBar__range",`-ds-${i.color}`]),style:_({left:i.start+"%",width:i.length+"%"})},null,6))),128))],2),e.badgePosition!==null?(a(),b(E,{key:0,class:l(["ds-progressBar__badge",{"-ds-small":e.size!==e.PROGRESS_BAR_SIZES.MEDIUM,[`-ds-${e.badgeColor}`]:!0}]),style:_(`left: ${e.badgePosition}%`),icon:e.ICONS.FA_LOCATION_DOT,size:e.size===e.PROGRESS_BAR_SIZES.MEDIUM?e.ICON_SIZES.XX_SMALL:e.ICON_SIZES.XXX_SMALL},null,8,["class","style","icon","size"])):t("",!0)],2)],2)}const $=M(f,[["render",z],["__scopeId","data-v-64356f6f"]]);f.__docgenInfo={displayName:"ProgressBar",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"PROGRESS_BAR_SIZES.SMALL"}},{name:"labelTextSize",type:{name:"string"},defaultValue:{func:!1,value:"PROGRESS_BAR_LABEL_TEXT_SIZES.SMALL"}},{name:"ranges",type:{name:"Array<ProgressBarRange>"},required:!0},{name:"radius",type:{name:"string"},defaultValue:{func:!1,value:"PROGRESS_BAR_RADII.DEFAULT"}},{name:"layout",type:{name:"string"},defaultValue:{func:!1,value:"PROGRESS_BAR_LAYOUTS.DEFAULT"}},{name:"labelText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"labelData",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"labelDataSupporting",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"labelDataSuffix",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"labelTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"badgePosition",type:{name:"number"},defaultValue:{func:!1,value:"null"}},{name:"badgeColor",type:{name:"string"},defaultValue:{func:!1,value:"PROGRESS_BAR_BADGE_COLORS.INFO"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/ProgressBar/ProgressBar.vue"]};export{$ as P,o as a,S as b,d as c,p as d,R as e,w as f};

package/docs/assets/ProgressBar.stories-9xVTh0RH.js

@@ -0,0 +1,57 @@
+import{P as x,a as T,b as P,c as h,d as l,e as B,f as r}from"./ProgressBar-4gBRbr7a.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./Icon-BiVaixmr.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const G={title:"Components/ProgressBar",component:x},n=L=>({components:{ProgressBar:x},setup(){return{args:L}},template:`
+        <progress-bar v-bind=args></progress-bar>`}),e=n.bind({}),f={size:{control:"select",options:Object.values(T)},labelTextSize:{control:"select",options:Object.values(P)},ranges:{control:"object"},radius:{control:"select",options:Object.values(h)},layout:{control:"select",options:Object.values(l)},labelText:{control:"text"},labelData:{control:"text"},labelDataSupporting:{control:"text"},labelDataSuffix:{control:"text"},badgePosition:{control:"text"},badgeColor:{control:"select",options:Object.values(B)},labelTextEllipsis:{control:"boolean"}};e.argTypes=f;e.args={size:T.SMALL,labelTextSize:P.SMALL,ranges:[{color:r.INFO,start:0,length:30},{color:r.INFO_WEAK,start:30,length:10},{color:r.INFO_GHOST,start:40,length:10}],radius:h.DEFAULT,layout:l.DEFAULT,labelText:"Label text",labelData:"30",labelDataSupporting:"100",labelDataSuffix:"(%)",badgePosition:"50",badgeColor:B.INFO,labelTextEllipsis:!1};e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=4560%3A78921"}};const s=n.bind({});s.args={ranges:[{color:r.INFO,start:0,length:30}]};const t=n.bind({});t.args={ranges:[{color:r.INFO,start:0,length:30},{color:r.WARNING,start:30,length:30}]};const a=n.bind({});a.args={ranges:[{color:r.INFO,start:0,length:10},{color:r.INFO_WEAK,start:20,length:10},{color:r.INFO,start:40,length:10},{color:r.INFO_WEAK,start:50,length:10},{color:r.INFO,start:70,length:30}]};const o=n.bind({});o.args={layout:l.COMPACT,ranges:[{color:r.INFO,start:0,length:30}],labelText:"Label text",labelData:"30",labelDataSupporting:"100",labelDataSuffix:"(%)",labelTextEllipsis:!1};var c,p,g;e.parameters={...e.parameters,docs:{...(c=e.parameters)==null?void 0:c.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressBar
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+        <progress-bar v-bind=args></progress-bar>\`
+})`,...(g=(p=e.parameters)==null?void 0:p.docs)==null?void 0:g.source}}};var i,b,m;s.parameters={...s.parameters,docs:{...(i=s.parameters)==null?void 0:i.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressBar
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+        <progress-bar v-bind=args></progress-bar>\`
+})`,...(m=(b=s.parameters)==null?void 0:b.docs)==null?void 0:m.source}}};var u,d,S;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressBar
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+        <progress-bar v-bind=args></progress-bar>\`
+})`,...(S=(d=t.parameters)==null?void 0:d.docs)==null?void 0:S.source}}};var O,R,_;a.parameters={...a.parameters,docs:{...(O=a.parameters)==null?void 0:O.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressBar
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+        <progress-bar v-bind=args></progress-bar>\`
+})`,...(_=(R=a.parameters)==null?void 0:R.docs)==null?void 0:_.source}}};var I,A,E;o.parameters={...o.parameters,docs:{...(I=o.parameters)==null?void 0:I.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressBar
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+        <progress-bar v-bind=args></progress-bar>\`
+})`,...(E=(A=o.parameters)==null?void 0:A.docs)==null?void 0:E.source}}};const C=["Interactive","WithoutLabels","TwoColors","WithGaps","Compact"];export{o as Compact,e as Interactive,t as TwoColors,a as WithGaps,s as WithoutLabels,C as __namedExportsOrder,G as default};

package/docs/assets/ProgressDonutChart-D5uvUZva.js

@@ -0,0 +1 @@
+import{d as l,o as s,c as r,a as n,F as C,m as O,b as i,n as R,k as c,h as u,r as A,v as N}from"./vue.esm-bundler-BSCmGRHc.js";import{a as d,I,b as D}from"./Icon-BiVaixmr.js";import{_ as h}from"./_plugin-vue_export-helper-DlAUqK2U.js";const z={PRIMARY_MEDIUM:"primaryMedium",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",PRIMARY_GHOST:"primaryGhost",NEUTRAL_MEDIUM:"neutralMedium",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",NEUTRAL_GHOST:"neutralGhost",INFO_MEDIUM:"infoMedium",INFO:"info",INFO_WEAK:"infoWeak",INFO_GHOST:"infoGhost",SUCCESS_MEDIUM:"successMedium",SUCCESS:"success",SUCCESS_WEAK:"successWeak",SUCCESS_GHOST:"successGhost",WARNING_MEDIUM:"warningMedium",WARNING:"warning",WARNING_WEAK:"warningWeak",WARNING_GHOST:"warningGhost",FAIL_MEDIUM:"failMedium",FAIL:"fail",FAIL_WEAK:"failWeak",FAIL_GHOST:"failGhost"},a={DEFAULT:"default",LOADING:"loading",DONE:"done",OVERAGE:"overage"},p=90,o=40,G=4,g=o/2,m=o/2-G/2,S=l({name:"ProgressDonutChart",components:{DsIcon:d},props:{label:{type:String,default:""},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},ranges:{type:Array,required:!0,validator(e){return e.every(t=>t.start>=0&&t.length>=0&&t.start+t.length<=100)}}},data(){return{PROGRESS_DONUT_CHART_STATES:Object.freeze(a),ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(D),PROGRESS_DONUT_CHART_SIZE:o,PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT:g,PROGRESS_DONUT_CHART_CIRCLE_RADIUS:m}},computed:{labelText(){return[this.state===a.OVERAGE&&"+",this.label].filter(Boolean).join("")},calculatedRanges(){return this.ranges.map(e=>({...e,rotate:e.start/100*360+p}))}}}),U={class:"ds-progressDonutChart"},P=["width","height"],f=["cx","cy","r"],y=["cx","cy","r"],H=["cx","cy","r"],L={class:"ds-progressDonutChart__label"},M={key:0,class:"ds-progressDonutChart__loaderText"};function v(e,t,b,k,F,W){const E=A("ds-icon");return s(),r("div",U,[(s(),r("svg",{class:"ds-progressDonutChart__svg",width:e.PROGRESS_DONUT_CHART_SIZE,height:e.PROGRESS_DONUT_CHART_SIZE,xmlns:"http://www.w3.org/2000/svg"},[n("circle",{class:"ds-progressDonutChart__circle ds-progressDonutChart__thumb",cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS},null,8,f),e.state===e.PROGRESS_DONUT_CHART_STATES.LOADING?(s(),r("circle",{key:0,class:"ds-progressDonutChart__circle ds-progressDonutChart__loader",cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS},null,8,y)):(s(!0),r(C,{key:1},O(e.calculatedRanges,(_,T)=>(s(),r("circle",{key:`circle_${T}`,class:R(["ds-progressDonutChart__circle ds-progressDonutChart__track",[`-ds-${_.color}`]]),cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS,style:N(`--length: ${_.length}; transform: rotate(${_.rotate}deg);`)},null,14,H))),128))],8,P)),n("div",L,[e.state===e.PROGRESS_DONUT_CHART_STATES.LOADING?(s(),r("div",M)):e.state===e.PROGRESS_DONUT_CHART_STATES.DONE?(s(),i(E,{key:1,class:"ds-progressDonutChart__icon",icon:e.ICONS.FA_CHECK_SOLID,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])):e.label?(s(),r("div",{key:2,class:R(["ds-progressDonutChart__labelText",{"-ds-hasOverage":e.state===e.PROGRESS_DONUT_CHART_STATES.OVERAGE}])},c(e.labelText),3)):u("",!0)])])}const V=h(S,[["render",v],["__scopeId","data-v-cf6bfa68"]]);S.__docgenInfo={displayName:"ProgressDonutChart",exportName:"default",description:"",tags:{},props:[{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"state",type:{name:"ProgressDonutChartState"},defaultValue:{func:!1,value:"PROGRESS_DONUT_CHART_STATES.DEFAULT"}},{name:"ranges",type:{name:"Array<ProgressDonutChartRange>"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue"]};export{V as P,a,z as b};

package/docs/assets/ProgressDonutChart.stories-DBpwl5Vn.js

@@ -0,0 +1,17 @@
+import{P as n,a,b as r}from"./ProgressDonutChart-D5uvUZva.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./Icon-BiVaixmr.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/ProgressDonutChart",component:n},p=c=>({components:{ProgressDonutChart:n},setup(){return{args:c}},template:`
+            <ProgressDonutChart
+                    v-bind=args
+            />`}),t=p.bind({}),g={label:"70",state:a.DEFAULT,ranges:[{color:r.SUCCESS,start:0,length:30},{color:r.INFO,start:30,length:25},{color:r.FAIL_GHOST,start:55,length:25}]},l={label:{control:"text"},state:{control:"select",options:Object.values(a)},ranges:{control:"object"}};t.argTypes=l;t.args=g;t.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5867-97923&t=wQeUoflFyMwdW7Ne-4"}};var e,o,s;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`args => ({
+  components: {
+    ProgressDonutChart
+  },
+  setup() {
+    return {
+      args
+    };
+  },
+  template: \`
+            <ProgressDonutChart
+                    v-bind=args
+            />\`
+})`,...(s=(o=t.parameters)==null?void 0:o.docs)==null?void 0:s.source}}};const C=["Interactive"];export{t as Interactive,C as __namedExportsOrder,d as default};

package/docs/assets/RadioButton-BwCzYjOu.js

@@ -0,0 +1 @@
+import{d as u,o as i,b as r,r as d}from"./vue.esm-bundler-BSCmGRHc.js";import{S as p,a as c,b as f,c as m}from"./SelectionControl-BxCh7N21.js";import{I as O}from"./Icon-BiVaixmr.js";import{_ as T}from"./_plugin-vue_export-helper-DlAUqK2U.js";const o={...p},a={...c},s=u({name:"RadioButton",components:{SelectionControl:f},props:{size:{type:String,default:o.SMALL,validator(e){return Object.values(o).includes(e)}},label:{type:String,default:null},isSelected:{type:Boolean,default:!1},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}}},emits:["update:is-selected","input:focus","input:blur"],data(){return{ICONS:Object.freeze(O),SELECTION_CONTROL_TYPE:Object.freeze(m)}}});function S(e,t,I,E,b,C){const l=d("selection-control");return i(),r(l,{size:e.size,label:e.label,"is-selected":e.isSelected,"selected-icon":e.ICONS.FA_DOT_CIRCLE_SOLID,"not-selected-icon":e.ICONS.FA_CIRCLE,state:e.state,type:e.SELECTION_CONTROL_TYPE.RADIO_BUTTON,"onUpdate:isSelected":t[0]||(t[0]=n=>e.$emit("update:is-selected",n)),"onInput:focus":t[1]||(t[1]=n=>e.$emit("input:focus")),"onInput:blur":t[2]||(t[2]=n=>e.$emit("input:blur"))},null,8,["size","label","is-selected","selected-icon","not-selected-icon","state","type"])}const _=T(s,[["render",S]]);s.__docgenInfo={displayName:"RadioButton",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"RadioButtonSize"},defaultValue:{func:!1,value:"RADIO_BUTTON_SIZE.SMALL"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"RadioButtonState"},defaultValue:{func:!1,value:"RADIO_BUTTON_STATE.DEFAULT"}}],events:[{name:"update:is-selected"},{name:"input:focus"},{name:"input:blur"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Form/RadioButton/RadioButton.vue"]};const y=Object.freeze(Object.defineProperty({__proto__:null,default:_},Symbol.toStringTag,{value:"Module"}));export{_ as R,a,o as b,y as c};

package/docs/assets/RadioButton.stories-CLWvDUrd.js

@@ -0,0 +1,21 @@
+import{R as n,a as r,b as a}from"./RadioButton-BwCzYjOu.js";import{a as m,b as c,t as u}from"./SelectionControl.sb.shared-BWifjoMU.js";import{w as g}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./SelectionControl-BxCh7N21.js";import"./Icon-BiVaixmr.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const{useArgs:l}=__STORYBOOK_MODULE_PREVIEW_API__,w={title:"Components/Form/RadioButton",component:n,decorators:[g]},_=p=>{const[I,i]=l();return{components:{RadioButton:n},setup(){return{args:p}},methods:{onIsSelectedUpdated(d){i({isSelected:d})}},template:u("radio-button")}},t=_.bind({});t.argTypes=m(a,r);t.args=c(a,r);t.parameters={actions:{handles:["click","toggle"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=1552-34962&t=Ui6dF84wekRpqsXb-0"}};var e,o,s;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      RadioButton
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    methods: {
+      onIsSelectedUpdated(isSelected) {
+        updateArgs({
+          isSelected
+        });
+      }
+    },
+    template: template('radio-button')
+  };
+}`,...(s=(o=t.parameters)==null?void 0:o.docs)==null?void 0:s.source}}};const y=["Interactive"];export{t as Interactive,y as __namedExportsOrder,w as default};

package/docs/assets/RichListItem.stories-DhkQky0J.js

@@ -0,0 +1,182 @@
+import{i as n,R as l,a as c,b as m,c as d,d as _,e as p,f}from"./GroupRichListItem-DMiaeyaS.js";import{c as g,I as s}from"./Icon-BiVaixmr.js";import"./BadgeScore-B0MHArlW.js";import"./Banner-Dkt_I8P3.js";import"./Button-CBZkgukP.js";import"./ToggleButton-BZ0tVYFv.js";import"./Card-B7j8o0GU.js";import"./CardExpandable-XN3wcRwV.js";import"./DatePicker-CvT_E45n.js";import"./Divider-D2yDhW46.js";import"./FeatureIcon-n65RPvyA.js";import"./IconButton-COzU-vlz.js";import"./string-CxIy_vwz.js";import"./Modal-CJ0d6Je9.js";import"./ModalDialog-CbDAxfV_.js";import"./NumberInCircle-DV0Qrx8H.js";import"./TabItem-Cx2nQ_YR.js";import"./Tile-DnH9h0Kq.js";import"./AccessStatus-DVtD0BrS.js";import"./BlockadeStatus-9_pI8WM1.js";import"./SurveyToggle-DzZyc41b.js";import"./SurveyQuestionScale-nNC7H5k0.js";import"./SurveyQuestionOpenEnded-DRFBouQB.js";import"./SectionHeader-DVwe52kA.js";import"./PageHeader-CTbdU4IG.js";import"./SectionTitle-XTc-98O5.js";import"./Drawer-CH5Qyc5B.js";import"./DrawerContent-DGzdUSmd.js";import"./DrawerDivider-DNbYnPjf.js";import"./DrawerHeader-DOWojdwp.js";import"./DrawerListItem-aepUTcTm.js";import"./DrawerListItemGroup-CnH532Dv.js";import"./DrawerTile-W2mt6fAk.js";import"./DrawerSection-pMhA5dsS.js";import"./OutlineItem-CUHef8Bo.js";import"./OutlineDivider-Cez9NlcH.js";import"./OutlineSectionHeader-DSJ4uxfr.js";import"./Chip-CBqrZ-va.js";import"./CounterToggle-BzxnFqH7.js";import"./SelectList-CTXM5G8Z.js";import"./SelectListItem-_c4CA-YM.js";import"./SelectListItemDivider-BOgD7wrO.js";import"./SelectListItemToggle-BjjMPWy0.js";import"./SelectListItemTile-BL3qYL_0.js";import"./SelectListSectionTitle-FihJb1eM.js";import"./SelectionTile-T03MPtEm.js";import"./LoadingBar-D0iVLCyJ.js";import"./PopOver-BPD1Ttq1.js";import"./Dropdown-BfX0EVaK.js";import"./ProgressBar-4gBRbr7a.js";import"./ProgressDonutChart-D5uvUZva.js";import"./IconText-DDrVXWHS.js";import"./Pagination-dSOJSh7t.js";import"./OverlayHeader-jylszhPO.js";import"./Well-vFI2CbIA.js";import"./ThreeColumnLayout-Lm3LIbid.js";import"./BasicRichListItem-CCXQ4iJg.js";import"./Switch-BWGPo7tP.js";import"./TextGroup-DQmg5luv.js";import"./Tooltip-BxZlo6cR.js";import{I as y}from"./Image-Drmyqqsn.js";import"./Skeleton-BbafKE6W.js";import{w as x}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./Checkbox-D_geau8n.js";import"./SelectionControl-BxCh7N21.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-BosoHOVU.js";import"../sb-preview/runtime.js";import"./device-9fgosCm4.js";import"./user-DY5hg_iu.js";import"./vue-popper-BJbr8Gin.js";import"./_commonjsHelpers-Chg3vePA.js";import"./v4-BZawosSj.js";const{useArgs:S}=__STORYBOOK_MODULE_PREVIEW_API__,Ve={title:"Components/RichList/RichListItem",component:n,decorators:[e=>({components:{story:e},template:"<div style='display: flex;padding: 16px;'><story /></div>"}),x]},O=(e,a={})=>(e.argTypes={type:{options:Object.values(l),control:"select"},size:{options:Object.values(c),control:"select"},layout:{options:Object.values(m),control:{type:"select"}},state:{options:Object.values(d),control:"select"},iconColor:{options:Object.values(g),control:"select"},borderColor:{options:[null,...Object.values(_)],control:"select"},icon:{options:[null,...Object.keys(s)],control:"select"},iconColorHex:{control:"text"},borderColorHex:{control:"text"},content:{control:"text"},metadata:{control:"text"},actions:{control:"text"},draggableIconClassName:{control:"text"},backgroundColor:{options:[null,...Object.values(p)],control:"select"},elevation:{options:[null,...Object.values(f)],control:"select"}},e.args={size:c.MEDIUM,type:l.DEFAULT,layout:m.HORIZONTAL,backgroundColor:p.NEUTRAL,elevation:null,isDimmed:!1,isDraggable:!0,hasDraggableHandler:!0,icon:null,iconColor:g.NEUTRAL_WEAK,iconColorHex:"",hasActionsSlotDivider:!0,isSelectable:!0,isSelected:!0,borderColor:null,borderColorHex:"",state:d.DEFAULT,isInteractive:!0,draggableIconClassName:"draggableIconClassName-1",content:"Content Slot",metadata:"Metadata Slot",actions:"ACS",...a},e.parameters={actions:{handles:["icon-click","click","update:is-selected"]},layout:"fullscreen",design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8507-129603&mode=design&t=dC5vBzU9RlP1j7G2-4"}},e),D=e=>{const[a,i]=S();return{components:{RichListItem:n},setup(){return e},data(){return{ICONS:Object.freeze(s)}},methods:{updateIsSelected(r){i({isSelected:r})}},template:`
+            <rich-list-item
+                :size="size"
+                :type="type"
+                :layout="layout"
+                :is-interactive="isInteractive"
+                :is-draggable="isDraggable"
+                :icon="ICONS[icon]"
+                :icon-color="iconColor"
+                :icon-color-hex="iconColorHex"
+                :is-dimmed="isDimmed"
+                :border-color="borderColor"
+                :border-color-hex="borderColorHex"
+                :draggable-icon-class-name="draggableIconClassName"
+                :state="state"
+                :background-color="backgroundColor"
+                :elevation="elevation"
+                :has-draggable-handler="hasDraggableHandler"
+                :has-actions-slot-divider="hasActionsSlotDivider"
+                :is-selectable="isSelectable"
+                :is-selected="isSelected"
+                @update:is-selected="updateIsSelected"
+            >
+                <template v-if="content" #content>
+                    <div v-html="content" />
+                </template>
+                <template v-if="metadata" #metadata>
+                    <div v-html="metadata" />
+                </template>
+                <template v-if="actions" #actions>
+                    <div v-html="actions" />
+                </template>
+            </rich-list-item>`}},t=D.bind({});O(t);const T=e=>{const[a,i]=S();return{components:{RichListItem:n,DsImage:y},setup(){return e},data(){return{ICONS:Object.freeze(s)}},methods:{updateIsSelected(r){i({isSelected:r})}},template:`
+            <rich-list-item
+                :size="size"
+                :type="type"
+                :layout="layout"
+                :is-interactive="isInteractive"
+                :is-draggable="isDraggable"
+                :icon="ICONS[icon]"
+                :icon-color="iconColor"
+                :icon-color-hex="iconColorHex"
+                :is-dimmed="isDimmed"
+                :border-color="borderColor"
+                :border-color-hex="borderColorHex"
+                :draggable-icon-class-name="draggableIconClassName"
+                :state="state"
+                :background-color="backgroundColor"
+                :elevation="elevation"
+                :has-draggable-handler="hasDraggableHandler"
+                :has-actions-slot-divider="hasActionsSlotDivider"
+                :is-selectable="isSelectable"
+                :is-selected="isSelected"
+                @update:is-selected="updateIsSelected"
+            >
+                <template #media>
+                    <ds-image :src="imageSrcUsedInStoryBook" />
+                </template>
+                <template v-if="content" #content>
+                    <div v-html="content" />
+                </template>
+                <template v-if="metadata" #metadata>
+                    <div v-html="metadata" />
+                </template>
+                <template v-if="actions" #actions>
+                    <div v-html="actions" />
+                </template>
+            </rich-list-item>`}},o=T.bind({});O(o,{imageSrcUsedInStoryBook:"https://storage.googleapis.com/media-manager/lek/018f6291-3956-7342-8e6b-0ee901d48643/018f6291-3a56-7213-aef6-b5da7253839f.jpg"});var u,b,v;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      RichListItem
+    },
+    setup() {
+      return args;
+    },
+    data() {
+      return {
+        ICONS: Object.freeze(ICONS)
+      };
+    },
+    methods: {
+      updateIsSelected(isSelected) {
+        updateArgs({
+          isSelected
+        });
+      }
+    },
+    template: \`
+            <rich-list-item
+                :size="size"
+                :type="type"
+                :layout="layout"
+                :is-interactive="isInteractive"
+                :is-draggable="isDraggable"
+                :icon="ICONS[icon]"
+                :icon-color="iconColor"
+                :icon-color-hex="iconColorHex"
+                :is-dimmed="isDimmed"
+                :border-color="borderColor"
+                :border-color-hex="borderColorHex"
+                :draggable-icon-class-name="draggableIconClassName"
+                :state="state"
+                :background-color="backgroundColor"
+                :elevation="elevation"
+                :has-draggable-handler="hasDraggableHandler"
+                :has-actions-slot-divider="hasActionsSlotDivider"
+                :is-selectable="isSelectable"
+                :is-selected="isSelected"
+                @update:is-selected="updateIsSelected"
+            >
+                <template v-if="content" #content>
+                    <div v-html="content" />
+                </template>
+                <template v-if="metadata" #metadata>
+                    <div v-html="metadata" />
+                </template>
+                <template v-if="actions" #actions>
+                    <div v-html="actions" />
+                </template>
+            </rich-list-item>\`
+  };
+}`,...(v=(b=t.parameters)==null?void 0:b.docs)==null?void 0:v.source}}};var I,h,C;o.parameters={...o.parameters,docs:{...(I=o.parameters)==null?void 0:I.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      RichListItem,
+      DsImage
+    },
+    setup() {
+      return args;
+    },
+    data() {
+      return {
+        ICONS: Object.freeze(ICONS)
+      };
+    },
+    methods: {
+      updateIsSelected(isSelected) {
+        updateArgs({
+          isSelected
+        });
+      }
+    },
+    template: \`
+            <rich-list-item
+                :size="size"
+                :type="type"
+                :layout="layout"
+                :is-interactive="isInteractive"
+                :is-draggable="isDraggable"
+                :icon="ICONS[icon]"
+                :icon-color="iconColor"
+                :icon-color-hex="iconColorHex"
+                :is-dimmed="isDimmed"
+                :border-color="borderColor"
+                :border-color-hex="borderColorHex"
+                :draggable-icon-class-name="draggableIconClassName"
+                :state="state"
+                :background-color="backgroundColor"
+                :elevation="elevation"
+                :has-draggable-handler="hasDraggableHandler"
+                :has-actions-slot-divider="hasActionsSlotDivider"
+                :is-selectable="isSelectable"
+                :is-selected="isSelected"
+                @update:is-selected="updateIsSelected"
+            >
+                <template #media>
+                    <ds-image :src="imageSrcUsedInStoryBook" />
+                </template>
+                <template v-if="content" #content>
+                    <div v-html="content" />
+                </template>
+                <template v-if="metadata" #metadata>
+                    <div v-html="metadata" />
+                </template>
+                <template v-if="actions" #actions>
+                    <div v-html="actions" />
+                </template>
+            </rich-list-item>\`
+  };
+}`,...(C=(h=o.parameters)==null?void 0:h.docs)==null?void 0:C.source}}};const Ze=["Interactive","WithMedia"];export{t as Interactive,o as WithMedia,Ze as __namedExportsOrder,Ve as default};

package/docs/assets/SectionHeader-DVwe52kA.js

@@ -0,0 +1 @@
+import{c as a,a as L,I as c,b as f}from"./Icon-BiVaixmr.js";import{I as h}from"./IconButton-COzU-vlz.js";import{I as R,i as A}from"./Button-CBZkgukP.js";import{D as T}from"./Divider-D2yDhW46.js";import{d as y,t as l,o as s,c as n,a as i,b as d,n as o,h as t,k as p,g as b,x as g,f as S,r as E}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as H}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large"},m={VERTICAL:"vertical",HORIZONTAL:"horizontal"},O={ACCENT:a.ACCENT,DANGER:a.DANGER,DEFAULT:a.DEFAULT,FAIL:a.FAIL,INFO:a.INFO,INVERTED:a.INVERTED,NEUTRAL:a.NEUTRAL,NEUTRAL_STRONG:a.NEUTRAL_STRONG,NEUTRAL_WEAK:a.NEUTRAL_WEAK,PRIMARY:a.PRIMARY,PRIMARY_WEAK:a.PRIMARY_WEAK,SUCCESS:a.SUCCESS,WARNING:a.WARNING},_=y({name:"SectionHeader",components:{DsIcon:L,DsIconButton:h,DsDivider:T},props:{isExpandable:{type:Boolean,default:!1},hideSlotWhenCollapsed:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(c).includes(l(e))}},iconLeftColor:{type:String,default:null,validator(e){return Object.values(O).includes(l(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(c).includes(l(e))}},iconRightColor:{type:String,default:null,validator(e){return Object.values(O).includes(l(e))}},isExpanded:{type:Boolean,default:!1},info:{type:Boolean,default:!1},size:{type:String,default:r.MEDIUM,validator(e){return Object.values(r).includes(e)}},title:{type:String,required:!0},titleEllipsis:{type:Boolean,default:!1},eyebrow:{type:String,default:""},supportingText:{type:String,default:null},hasDivider:{type:Boolean,default:!0},mobileLayout:{type:String,default:m.VERTICAL,validator:e=>Object.values(m).includes(e)}},emits:["info-click","update:isExpanded"],data(){return{ICONS:Object.freeze(c),ICON_SIZES:Object.freeze(f),ICON_BUTTON_SIZES:Object.freeze(R),ICON_BUTTON_COLORS:Object.freeze(A),SECTION_HEADER_MOBILE_LAYOUTS:Object.freeze(m),isExpandedInternal:!1}},computed:{chevronRotation(){return this.isExpanded?180:void 0},showSlot(){return this.isExpanded||!this.hideSlotWhenCollapsed},sizeClass(){return`-ds-size-${this.size}`},iconSize(){return this.size===r.MEDIUM||this.size===r.LARGE?f.X_SMALL:f.XX_SMALL}},watch:{isExpanded:{handler(e){e!==this.isExpandedInternal&&(this.isExpandedInternal=e)},immediate:!0}},methods:{onInfoClicked(){this.$emit("info-click")},onTitleWrapperClicked(){this.isExpandable&&(this.isExpandedInternal=!this.isExpandedInternal,this.$emit("update:isExpanded",this.isExpandedInternal))}}}),D={class:"ds-sectionHeader__wrapper"},z={class:"ds-sectionHeader__main"},U={class:"ds-sectionHeader__header"},k={class:"ds-sectionHeader__titleContainer"},M={key:0,class:"ds-sectionHeader__eyebrow"},V=["title"],B={key:0,class:"ds-sectionHeader__info"},j={key:0,class:"ds-sectionHeader__slotHorizontal"};function w(e,I,W,$,Z,F){const u=E("ds-icon"),C=E("ds-icon-button"),N=E("ds-divider");return s(),n("div",{class:o(["ds-sectionHeader",{"-ds-expandable":e.isExpandable,"-ds-horizontal":e.mobileLayout===e.SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL,[e.sizeClass]:!0}])},[i("div",D,[i("div",z,[i("div",U,[i("div",{class:"ds-sectionHeader__titleWrapper",onClick:I[0]||(I[0]=(...v)=>e.onTitleWrapperClicked&&e.onTitleWrapperClicked(...v))},[e.iconLeft?(s(),d(u,{key:0,class:o(["ds-sectionHeader__icon",{[`-ds-${e.iconLeftColor}`]:e.iconLeftColor}]),icon:e.iconLeft,size:e.iconSize},null,8,["class","icon","size"])):t("",!0),i("div",k,[e.eyebrow?(s(),n("div",M,p(e.eyebrow),1)):t("",!0),i("div",{class:o(["ds-sectionHeader__title",{"-ds-ellipsis":e.titleEllipsis}]),title:e.titleEllipsis?e.title:void 0},p(e.title),11,V)]),e.iconRight?(s(),d(u,{key:1,class:o(["ds-sectionHeader__icon",{[`-ds-${e.iconRightColor}`]:e.iconRightColor}]),icon:e.iconRight,size:e.iconSize},null,8,["class","icon","size"])):t("",!0),e.isExpandable?(s(),d(u,{key:2,class:"ds-sectionHeader__icon",icon:e.ICONS.FA_CHEVRON_DOWN,rotation:e.chevronRotation,size:e.iconSize},null,8,["icon","rotation","size"])):t("",!0)]),e.info?(s(),n("div",B,[b(C,{icon:e.ICONS.FA_CIRCLE_QUESTION,size:e.ICON_BUTTON_SIZES.X_SMALL,color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,touchable:!1,onClick:g(e.onInfoClicked,["prevent","stop"])},null,8,["icon","size","color","onClick"])])):t("",!0)]),e.$slots.default&&e.showSlot?(s(),n("div",j,[S(e.$slots,"default",{},void 0,!0)])):t("",!0)]),e.supportingText?(s(),n("div",{key:0,class:o(["ds-sectionHeader__supportingText",{"-ds-withoutPadding":!e.hasDivider||!e.hasDivider&&e.mobileLayout===e.SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL}])},p(e.supportingText),3)):t("",!0),e.$slots.default&&e.showSlot?(s(),n("div",{key:1,class:o(["ds-sectionHeader__slotVertical",{"-ds-withoutPadding":!e.hasDivider}])},[S(e.$slots,"default",{},void 0,!0)],2)):t("",!0)]),e.hasDivider?(s(),d(N,{key:0})):t("",!0)],2)}const Q=H(_,[["render",w],["__scopeId","data-v-d45ebe81"]]);_.__docgenInfo={displayName:"SectionHeader",exportName:"default",description:"",tags:{},props:[{name:"isExpandable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideSlotWhenCollapsed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"iconLeft",type:{name:"Object as () => IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconLeftColor",type:{name:"String as () => SectionHeaderIconColor"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"Object as () => IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconRightColor",type:{name:"String as () => SectionHeaderIconColor"},defaultValue:{func:!1,value:"null"}},{name:"isExpanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"info",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"SECTION_HEADER_SIZES.MEDIUM"}},{name:"title",type:{name:"string"},required:!0},{name:"titleEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"eyebrow",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"hasDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"mobileLayout",type:{name:"string"},defaultValue:{func:!1,value:"SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL"}}],events:[{name:"info-click"},{name:"update:isExpanded",type:{names:["undefined"]}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Headers/SectionHeader/SectionHeader.vue"]};export{O as S,r as a,Q as b,m as c};

package/docs/assets/SectionHeader.stories-Dd3li5ER.js

@@ -0,0 +1,24 @@
+import{b as r,a as l,S as t,c as a}from"./SectionHeader-DVwe52kA.js";import{I as o}from"./Icon-BiVaixmr.js";import{w as u}from"./decorator-CSnIf-k5.js";import"./IconButton-COzU-vlz.js";import"./Button-CBZkgukP.js";import"./vue.esm-bundler-BSCmGRHc.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./device-9fgosCm4.js";import"./Divider-D2yDhW46.js";import"./v4-BZawosSj.js";const{useArgs:m}=__STORYBOOK_MODULE_PREVIEW_API__,R={title:"Components/Headers/SectionHeader",component:r,decorators:[u]},E=d=>{const[b,p]=m();return{components:{SectionHeader:r},setup(){return d},data(){return{ICONS:Object.freeze(o)}},methods:{onIsExpandedUpdated(c){p({isExpanded:c})}},template:'<section-header :is-expandable="isExpandable" :hide-slot-when-collapsed="hideSlotWhenCollapsed" :icon-left="ICONS[iconLeft]" :icon-left-color="iconLeftColor" :icon-right="ICONS[iconRight]" :icon-right-color="iconRightColor" :is-expanded="isExpanded" :size="size" :info="info" :title="title" :title-ellipsis="titleEllipsis" :eyebrow="eyebrow" :has-divider="hasDivider" :mobile-layout="mobileLayout" :supportingText="supportingText" @update:isExpanded="onIsExpandedUpdated"><div style="border: 1px solid;">Slot content</div></section-header>'}},e=E.bind({}),g={size:l.MEDIUM,title:"Section Header",titleEllipsis:!1,supportingText:"Supporting text. Et doloribus aspernatur suscipit provident maiores. Natus natus et pariatur. Eligendi illo quo esse. Tenetur ad neque veniam.",eyebrow:"eyebrow text",iconLeft:null,iconLeftColor:t.NEUTRAL,iconRight:null,iconRightColor:t.NEUTRAL,info:!1,hasDivider:!0,isExpandable:!1,isExpanded:!1,hideSlotWhenCollapsed:!1,mobileLayout:a.VERTICAL},h={iconLeft:{control:"select",options:[null,...Object.keys(o)]},iconLeftColor:{control:"select",options:[null,...Object.values(t)]},iconRight:{control:"select",options:[null,...Object.keys(o)]},iconRightColor:{control:"select",options:[null,...Object.values(t)]},size:{control:"select",options:Object.values(l)},hasDivider:{control:"boolean"},info:{control:"boolean"},mobileLayout:{control:"select",options:Object.values(a)},titleEllipsis:{control:"boolean"}};e.argTypes=h;e.args=g;e.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6984-129711&t=ivzu5dM9vSgW20Re-0"}};var i,s,n;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`args => {
+  const [_, updateArgs] = useArgs();
+  return {
+    components: {
+      SectionHeader
+    },
+    setup() {
+      return args;
+    },
+    data() {
+      return {
+        ICONS: Object.freeze(ICONS)
+      };
+    },
+    methods: {
+      onIsExpandedUpdated(isExpanded) {
+        updateArgs({
+          isExpanded
+        });
+      }
+    },
+    template: '<section-header' + ' :is-expandable="isExpandable"' + ' :hide-slot-when-collapsed="hideSlotWhenCollapsed"' + ' :icon-left="ICONS[iconLeft]"' + ' :icon-left-color="iconLeftColor"' + ' :icon-right="ICONS[iconRight]"' + ' :icon-right-color="iconRightColor"' + ' :is-expanded="isExpanded"' + ' :size="size"' + ' :info="info"' + ' :title="title"' + ' :title-ellipsis="titleEllipsis"' + ' :eyebrow="eyebrow"' + ' :has-divider="hasDivider"' + ' :mobile-layout="mobileLayout"' + ' :supportingText="supportingText"' + ' @update:isExpanded="onIsExpandedUpdated"' + '>' + '<div style="border: 1px solid;">Slot content</div>' + '</section-header>'
+  };
+}`,...(n=(s=e.parameters)==null?void 0:s.docs)==null?void 0:n.source}}};const T=["Interactive"];export{e as Interactive,T as __namedExportsOrder,R as default};

package/docs/assets/SectionTitle-XTc-98O5.js

@@ -0,0 +1 @@
+import{d as o,o as a,c as r,a as t,k as s}from"./vue.esm-bundler-BSCmGRHc.js";import{_ as l}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={XS:"xs"},i=o({name:"SectionTitle",props:{size:{type:String,default:n.XS,validator(e){return Object.values(n).includes(e)}},supportingText:{type:String,default:null},titleText:{type:String,required:!0}}}),c={class:"ds-sectionTitle"},p={class:"ds-sectionTitle__title"},d={class:"ds-sectionTitle__supportingText"};function u(e,_,T,m,S,f){return a(),r("div",c,[t("div",p,s(e.titleText),1),t("div",d,s(e.supportingText),1)])}const y=l(i,[["render",u],["__scopeId","data-v-6a07788e"]]);i.__docgenInfo={displayName:"SectionTitle",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"SECTION_TITLE_SIZES.XS"}},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"titleText",type:{name:"string"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SectionTitle/SectionTitle.vue"]};export{y as S,n as a};