@trendyol/baklava 3.3.0-beta.21 → 3.3.0-beta.23

package/README.md

@@ -1,5 +1,4 @@
 
-[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/Trendyol/baklava/badge)](https://scorecard.dev/viewer/?uri=github.com/Trendyol/baklava)
 <p align="center"><img src="https://user-images.githubusercontent.com/127687/233114483-c5b0a8e7-c072-4ced-a7b5-76bce1be4b21.svg" width="200" alt="Baklava Design System Logo" /></p>
 
 <h1 align="center">Baklava Design System</h1>
@@ -20,6 +19,9 @@
   <a href="https://github.com/semantic-release/semantic-release">
     <img src="https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release" alt="semantic-release: angular" />
   </a>
+  <a href="https://scorecard.dev/viewer/?uri=github.com/Trendyol/baklava">
+    <img src="https://api.scorecard.dev/projects/github.com/Trendyol/baklava/badge" alt="OpenSSF Scorecard" />
+  </a>
 </p>
 
 Baklava is a design system provided by [Trendyol](https://github.com/trendyol) to create a consistent UI/UX for app users.

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as z}from"./chunk-N4GAO7FQ.js";import{b as q}from"./chunk-CAIHRZ24.js";import{b as j}from"./chunk-JAZGOWKA.js";import{b as O}from"./chunk-VJRVHJVZ.js";import{b as y}from"./chunk-T5EQ4OXS.js";import{d as v}from"./chunk-STMCW2R6.js";import{a as I}from"./chunk-KBNVATXF.js";import{a as t}from"./chunk-X73CSBRO.js";import{b as N}from"./chunk-UZJOCLOO.js";import{a as b}from"./chunk-GMVJABPT.js";import{c as T,f as P}from"./chunk-FVBGMXMC.js";import{b as R}from"./chunk-J45OQI7D.js";import{a as D}from"./chunk-5TPDRTCU.js";import{a as w}from"./chunk-YZRAUVUQ.js";import{a as C}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-FCEMOH4J.js";import{b as G,d as k,f as A}from"./chunk-ILK55FB6.js";import{b as S}from"./chunk-73RGV4UX.js";import{b as H}from"./chunk-75V3FKJS.js";import{a as c}from"./chunk-5VEXMTA4.js";import{a as i}from"./chunk-OAF3R4PW.js";import{a as n}from"./chunk-WXWKIQAK.js";import{b as u,e as x}from"./chunk-FTQX7CEW.js";import{a as F}from"./chunk-QPODIOFV.js";import{a as h}from"./chunk-QMVEWMEI.js";import{b as g}from"./chunk-BNUJWONI.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-757CMI4A.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-4KQZCR3J.js";import"./chunk-IPYZIIRV.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-AYJMIZZ3.js";import{a as B}from"./chunk-GXDVWGFU.js";import{b as d}from"./chunk-VU6LRFZR.js";import{b as p}from"./chunk-IGNJQVQF.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-NGJM4NWA.js";import{a as l}from"./chunk-4QFXDW3W.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-4BZSILLM.js";import{a as e,b as a,c as r}from"./chunk-BH64QNLE.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-5MOOXA2X.js";import"./chunk-4OT5AMS5.js";import"./chunk-IZ2LK5GK.js";export{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,F as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,g as BlPopover,b as BlProgressIndicator,T as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,w as BlTab,D as BlTabGroup,C as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,I as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
+import{b as z}from"./chunk-N4GAO7FQ.js";import{b as q}from"./chunk-CAIHRZ24.js";import{b as j}from"./chunk-JAZGOWKA.js";import{b as O}from"./chunk-VJRVHJVZ.js";import{b as y}from"./chunk-T5EQ4OXS.js";import{d as v}from"./chunk-STMCW2R6.js";import{a as I}from"./chunk-KBNVATXF.js";import{a as t}from"./chunk-X73CSBRO.js";import{b as N}from"./chunk-UZJOCLOO.js";import{a as b}from"./chunk-GMVJABPT.js";import{c as T,f as P}from"./chunk-FVBGMXMC.js";import{b as R}from"./chunk-J45OQI7D.js";import{a as D}from"./chunk-5TPDRTCU.js";import{a as w}from"./chunk-YZRAUVUQ.js";import{a as C}from"./chunk-QF4LGACD.js";import{a as s}from"./chunk-FCEMOH4J.js";import{b as G,d as k,f as A}from"./chunk-ILK55FB6.js";import{b as S}from"./chunk-73RGV4UX.js";import{b as H}from"./chunk-75V3FKJS.js";import{a as c}from"./chunk-5VEXMTA4.js";import{a as i}from"./chunk-OAF3R4PW.js";import{a as n}from"./chunk-WXWKIQAK.js";import{b as u,e as x}from"./chunk-FTQX7CEW.js";import{a as F}from"./chunk-CJDCQC7C.js";import{a as h}from"./chunk-QMVEWMEI.js";import{b as g}from"./chunk-BNUJWONI.js";import"./chunk-EZSEQHRH.js";import{a as m}from"./chunk-757CMI4A.js";import"./chunk-23PSWIUF.js";import{b as E}from"./chunk-S6HEBXIR.js";import"./chunk-IPYZIIRV.js";import"./chunk-WEEGH2F4.js";import"./chunk-EG7U7PM3.js";import"./chunk-XDUIVR6I.js";import"./chunk-HZ6A5QFC.js";import"./chunk-AYJMIZZ3.js";import{a as B}from"./chunk-GXDVWGFU.js";import{b as d}from"./chunk-VU6LRFZR.js";import{b as p}from"./chunk-IGNJQVQF.js";import"./chunk-6LT7O7T2.js";import"./chunk-HBPBDC7T.js";import{a as o}from"./chunk-NGJM4NWA.js";import{a as l}from"./chunk-4QFXDW3W.js";import"./chunk-ECPWEUBG.js";import"./chunk-DINNT5P2.js";import{a as f}from"./chunk-4BZSILLM.js";import{a as e,b as a,c as r}from"./chunk-BH64QNLE.js";import"./chunk-GRL4DWKG.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-5MOOXA2X.js";import"./chunk-4OT5AMS5.js";import"./chunk-IZ2LK5GK.js";export{t as BlAccordion,o as BlAccordionGroup,l as BlAlert,f as BlBadge,d as BlButton,E as BlCalendar,u as BlCheckbox,x as BlCheckboxGroup,F as BlDatePicker,B as BlDialog,s as BlDrawer,A as BlDropdown,S as BlDropdownGroup,k as BlDropdownItem,r as BlIcon,m as BlInput,H as BlNotification,N as BlNotificationCard,c as BlPagination,g as BlPopover,b as BlProgressIndicator,T as BlRadio,P as BlRadioGroup,i as BlSelect,n as BlSelectOption,p as BlSpinner,G as BlSplitButton,R as BlSwitch,w as BlTab,D as BlTabGroup,C as BlTabPanel,v as BlTable,O as BlTableBody,z as BlTableCell,y as BlTableHeader,q as BlTableHeaderCell,j as BlTableRow,I as BlTextarea,h as BlTooltip,a as getIconPath,e as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/{chunk-QPODIOFV.js → chunk-CJDCQC7C.js}

@@ -1,4 +1,4 @@
-import{a as g}from"./chunk-4KQZCR3J.js";import{a as f}from"./chunk-GRL4DWKG.js";import{a as b,b as r,c,e as _}from"./chunk-5MOOXA2X.js";import{a as m,b as p}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var D=m`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width, auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`,E=D;var i=class extends g{constructor(){super(...arguments);this.size="medium";this.labelFixed=!1;this.valueFormatter=null;this._inputValue="";this._floatingDateCount=0;this._fittingDateCount=0}static get styles(){return[E]}defaultInputValueFormatter(){var t,e,n,l,a,s,d,u;if(this.type==="single")this._inputValue=this.formatDate((t=this._calendarEl)==null?void 0:t._dates[0]),this.closePopoverWithTimeout();else if(this.type==="multiple"){this.setFloatingDates();let h=(e=this._calendarEl)==null?void 0:e._dates.slice(0,this._fittingDateCount).map(v=>this.formatDate(v));this._inputValue=h.join(",")+(this._floatingDateCount>0?" ,...":"")}else this.type==="range"&&((n=this._calendarEl)!=null&&n._dates[0]&&(this._inputValue=this.formatDate((l=this._calendarEl)==null?void 0:l._dates[0])),(a=this._calendarEl)!=null&&a._dates[1]&&(this._inputValue=`${this._inputValue}-${this.formatDate((s=this._calendarEl)==null?void 0:s._dates[1])}`),(d=this._calendarEl)!=null&&d._dates[0]&&((u=this._calendarEl)!=null&&u._dates[1])&&this.closePopoverWithTimeout())}closePopoverWithTimeout(){setTimeout(()=>{this.closePopover(),this._inputEl.blur()},200)}setFloatingDates(){var l,a,s;let t=(l=this.shadowRoot)==null?void 0:l.getElementById("datepicker-input"),e=(a=this.shadowRoot)==null?void 0:a.getElementById("icon-container"),n=t.offsetWidth-e.offsetWidth;this._fittingDateCount=Math.floor(n/90),this._floatingDateCount=((s=this._calendarEl)==null?void 0:s._dates.length)-this._fittingDateCount}setDatePickerInput(){var t,e;(t=this._calendarEl)!=null&&t._dates.length?this.valueFormatter?this._inputValue=this.valueFormatter((e=this._calendarEl)==null?void 0:e._dates):this.defaultInputValueFormatter():this._inputValue=""}formatDate(t){return`${String(t==null?void 0:t.getDate()).padStart(2,"0")}/${String((t==null?void 0:t.getMonth())+1).padStart(2,"0")}/${t==null?void 0:t.getFullYear()}`}clearDatepicker(){this._calendarEl.handleClearSelectedDates(),this._inputValue="",this._floatingDateCount=0}openPopover(){this._popoverEl.target=this._inputEl,this._popoverEl.show()}closePopover(){this._popoverEl.hide()}_togglePopover(){this._popoverEl.visible?this.closePopover():this.openPopover()}formatAdditionalDates(t){let e=t.split(",");return e==null?void 0:e.reduce((n,l,a)=>(a>0&&a%3===0&&n.push(p`<br />`),n.push(p`<span>${l.trim()}${a<e.length-1?", ":""}</span>`),n),[])}async firstUpdated(){var t,e,n;this._onCalendarMouseDown=l=>{var a;l.preventDefault(),(a=this._inputEl)==null||a.focus()},this._onInputMouseDown=l=>{var a;l.preventDefault(),(a=this._inputEl)==null||a.focus()},(t=this._calendarEl)==null||t.addEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.addEventListener("mousedown",this._onInputMouseDown),(n=this._calendarEl)!=null&&n._dates&&this.setDatePickerInput()}onCalendarChange(){var t;this.setDatePickerInput(),this._onBlDatepickerChange((t=this._calendarEl)==null?void 0:t._dates)}disconnectedCallback(){var t,e;super.disconnectedCallback(),(t=this._calendarEl)==null||t.removeEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.removeEventListener("mousedown",this._onInputMouseDown)}render(){var s,d,u,h;let t=p`
+import{a as g}from"./chunk-S6HEBXIR.js";import{a as f}from"./chunk-GRL4DWKG.js";import{a as b,b as r,c,e as _}from"./chunk-5MOOXA2X.js";import{a as m,b as p}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var D=m`:host{width:314px;display:block}.datepicker-content{--bl-input-cursor:pointer;--icon-size:var(--line-height);--icon-color:var(--bl-color-neutral-light);width:100%;position:relative;display:grid}.datepicker-input{width:var(--bl-datepicker-input-width, auto);white-space:nowrap;text-overflow:ellipsis}.icon-container{display:flex;gap:var(--bl-size-3xs);align-items:center}.calendar-icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;margin-right:var(--label-padding);font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.action-divider{display:block;height:var(--bl-size-m);width:1px;background-color:var(--bl-color-neutral-lighter);margin-right:var(--bl-size-3xs)}bl-popover{--bl-popover-padding:0;--bl-popover-background-color:transparent}`,E=D;var i=class extends g{constructor(){super(...arguments);this.size="medium";this.labelFixed=!1;this.valueFormatter=null;this._inputValue="";this._floatingDateCount=0;this._fittingDateCount=0}static get styles(){return[E]}defaultInputValueFormatter(){var t,e,n,l,a,s,d,u;if(this.type==="single")this._inputValue=this.formatDate((t=this._calendarEl)==null?void 0:t._dates[0]),this.closePopoverWithTimeout();else if(this.type==="multiple"){this.setFloatingDates();let h=(e=this._calendarEl)==null?void 0:e._dates.slice(0,this._fittingDateCount).map(v=>this.formatDate(v));this._inputValue=h.join(",")+(this._floatingDateCount>0?" ,...":"")}else this.type==="range"&&((n=this._calendarEl)!=null&&n._dates[0]&&(this._inputValue=this.formatDate((l=this._calendarEl)==null?void 0:l._dates[0])),(a=this._calendarEl)!=null&&a._dates[1]&&(this._inputValue=`${this._inputValue}-${this.formatDate((s=this._calendarEl)==null?void 0:s._dates[1])}`),(d=this._calendarEl)!=null&&d._dates[0]&&((u=this._calendarEl)!=null&&u._dates[1])&&this.closePopoverWithTimeout())}closePopoverWithTimeout(){setTimeout(()=>{this.closePopover(),this._inputEl.blur()},200)}setFloatingDates(){var l,a,s;let t=(l=this.shadowRoot)==null?void 0:l.getElementById("datepicker-input"),e=(a=this.shadowRoot)==null?void 0:a.getElementById("icon-container"),n=t.offsetWidth-e.offsetWidth;this._fittingDateCount=Math.floor(n/90),this._floatingDateCount=((s=this._calendarEl)==null?void 0:s._dates.length)-this._fittingDateCount}setDatePickerInput(){var t,e;(t=this._calendarEl)!=null&&t._dates.length?this.valueFormatter?this._inputValue=this.valueFormatter((e=this._calendarEl)==null?void 0:e._dates):this.defaultInputValueFormatter():this._inputValue=""}formatDate(t){return`${String(t==null?void 0:t.getDate()).padStart(2,"0")}/${String((t==null?void 0:t.getMonth())+1).padStart(2,"0")}/${t==null?void 0:t.getFullYear()}`}clearDatepicker(){this._calendarEl.handleClearSelectedDates(),this._inputValue="",this._floatingDateCount=0}openPopover(){this._popoverEl.target=this._inputEl,this._popoverEl.show()}closePopover(){this._popoverEl.hide()}_togglePopover(){this._popoverEl.visible?this.closePopover():this.openPopover()}formatAdditionalDates(t){let e=t.split(",");return e==null?void 0:e.reduce((n,l,a)=>(a>0&&a%3===0&&n.push(p`<br />`),n.push(p`<span>${l.trim()}${a<e.length-1?", ":""}</span>`),n),[])}async firstUpdated(){var t,e,n;this._onCalendarMouseDown=l=>{var a;l.preventDefault(),(a=this._inputEl)==null||a.focus()},this._onInputMouseDown=l=>{var a;l.preventDefault(),(a=this._inputEl)==null||a.focus()},(t=this._calendarEl)==null||t.addEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.addEventListener("mousedown",this._onInputMouseDown),(n=this._calendarEl)!=null&&n._dates&&this.setDatePickerInput()}onCalendarChange(){var t;this.setDatePickerInput(),this._onBlDatepickerChange((t=this._calendarEl)==null?void 0:t._dates)}disconnectedCallback(){var t,e;super.disconnectedCallback(),(t=this._calendarEl)==null||t.removeEventListener("mousedown",this._onCalendarMouseDown),(e=this._inputEl)==null||e.removeEventListener("mousedown",this._onInputMouseDown)}render(){var s,d,u,h;let t=p`
       <bl-popover target="datepicker-content" placement="bottom-start">
         <bl-calendar
           type=${this.type}
@@ -47,4 +47,4 @@ import{a as g}from"./chunk-4KQZCR3J.js";import{a as f}from"./chunk-GRL4DWKG.js";
         ${t}
       </div>
     `}};o([r({type:String,attribute:"placeholder",reflect:!0})],i.prototype,"placeholder",2),o([r({type:String,reflect:!0})],i.prototype,"size",2),o([r({type:Boolean,attribute:"label-fixed",reflect:!0})],i.prototype,"labelFixed",2),o([r({type:String,attribute:"label",reflect:!0})],i.prototype,"label",2),o([r({type:Function,attribute:"value-formatter"})],i.prototype,"valueFormatter",2),o([r({type:Boolean})],i.prototype,"disabled",2),o([r({type:String,attribute:"help-text",reflect:!0})],i.prototype,"helpText",2),o([c()],i.prototype,"_inputValue",2),o([c()],i.prototype,"_floatingDateCount",2),o([c()],i.prototype,"_fittingDateCount",2),o([_("bl-calendar")],i.prototype,"_calendarEl",2),o([_("bl-popover")],i.prototype,"_popoverEl",2),o([_("bl-input")],i.prototype,"_inputEl",2),o([f("bl-datepicker-change")],i.prototype,"_onBlDatepickerChange",2),i=o([b("bl-datepicker")],i);export{i as a};
-//# sourceMappingURL=chunk-QPODIOFV.js.map
+//# sourceMappingURL=chunk-CJDCQC7C.js.map

package/dist/{chunk-4KQZCR3J.js → chunk-S6HEBXIR.js}

@@ -1,4 +1,4 @@
-import{a as V}from"./chunk-IPYZIIRV.js";import{a as Y,b as k}from"./chunk-WEEGH2F4.js";import{a as M}from"./chunk-6LT7O7T2.js";import{a as A}from"./chunk-HBPBDC7T.js";import{a as T}from"./chunk-GRL4DWKG.js";import{a as S,b as y,c as f}from"./chunk-5MOOXA2X.js";import{a as x,b as h,f as C}from"./chunk-4OT5AMS5.js";import{d as s}from"./chunk-IZ2LK5GK.js";function v(u){let D=[],e=u.split(",");return e==null||e.forEach(t=>{let a=new Date(t.trim());isNaN(a.getTime())||D.push(a)}),D}var d=class extends C{constructor(){super(...arguments);this.startOfWeek=0;this.locale=document.documentElement.lang||"en-EN";this._disabledDates=[];this._value=[]}get disabledDates(){return this._disabledDates}set disabledDates(e){let t=[];typeof e=="string"?t=v(e):Array.isArray(e)&&(t=e.filter(a=>!isNaN(a.getTime()))),this.requestUpdate("disabledDates",t),this._disabledDates=t}get maxDate(){return this._maxDate}set maxDate(e){if(e&&isNaN(new Date(e).getTime())){console.warn("Invalid maxDate value.");return}this._minDate&&this._minDate>=e?console.warn("maxDate cannot be smaller than minDate."):(this._maxDate=new Date(e),this.requestUpdate("maxDate",e))}get minDate(){return this._minDate}set minDate(e){if(e&&isNaN(new Date(e).getTime())){console.warn("Invalid minDate value.");return}this._maxDate&&this._maxDate<=e?console.warn("minDate cannot be greater than maxDate."):(this._minDate=new Date(e),this.requestUpdate("minDate",e))}set value(e){let t=this._value;this._value=e,this.requestUpdate("value",t)}get value(){return this._value}};s([y()],d.prototype,"type",2),s([y({type:Number,attribute:"start-of-week",reflect:!0})],d.prototype,"startOfWeek",2),s([y()],d.prototype,"locale",2),s([y({attribute:"disabled-dates",reflect:!0})],d.prototype,"disabledDates",1),s([y({type:Date,attribute:"max-date",reflect:!0})],d.prototype,"maxDate",1),s([y({type:Date,attribute:"min-date",reflect:!0})],d.prototype,"minDate",1),s([y({attribute:"value",reflect:!0})],d.prototype,"value",1);function E(u){return typeof u=="string"?v(u):u instanceof Date?[u]:u}var N=x`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:var(--bl-size-m);flex-direction:column;align-items:center;gap:var(--bl-size-m);border-radius:var(--bl-border-radius-s);width:fit-content;background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;padding-bottom:var(--bl-size-s)}.arrow{flex:1}:host([dir="rtl"]) .arrow{transform:scale(-1)}.header-text{flex:3}.header-text-hover{background:var(--bl-color-neutral-lightest);border-radius:var(--bl-border-radius-s)}.days-wrapper{display:flex;flex-direction:column}.day-wrapper{display:flex;align-items:center;justify-content:center}.week-row{display:flex;align-items:center;flex-direction:row;padding-bottom:var(--bl-size-2xs)}.day{display:flex;align-items:center;width:40px;--bl-button-focus-border-color:#000;--bl-font-title-4-medium:var(--bl-font-weight-regular) var(--bl-font-size-m);--bl-size-xl:40px;--bl-border-radius-m:50%;--bl-border-radius-l:50%}.day.today-day{--bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}.day.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}.day.other-month-day.selected-day{--bl-color-neutral-darker:var(--bl-color-neutral-full)}.day.selected-day{background:var(--bl-color-primary);border-radius:50%;--bl-button-focus-border-color:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full)}.range-day{background:var(--bl-color-primary-contrast);--bl-color-neutral-lightest:var(--bl-color-primary-contrast)}.range-end-day,.range-start-day,.selected-day{--bl-color-neutral-lightest:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full);--bl-color-neutral-darkest:var(--bl-color-neutral-full) !important}.range-start-day{background:var(--bl-color-primary-contrast);border-top-left-radius:50%;border-bottom-left-radius:50%}.range-end-day{background:var(--bl-color-primary-contrast);border-top-right-radius:50%;border-bottom-right-radius:50%}.weekday-text{color:var(--bl-color-neutral-dark);text-align:center;padding:var(--bl-size-2xs) 0;width:40px}.grid-content{display:grid;grid-template-columns:auto auto auto;text-align:center}.grid-item{width:93.33px;--bl-size-3xs:15px}.grid-item:not(:nth-last-child(-n + 3)){padding-bottom:var(--bl-size-2xs)}.calendar-text{font:var(--bl-font-title-3-regular)}`,$=N;var o=class extends d{constructor(){super(...arguments);this.today=new Date;this._calendarMonth=this.today.getMonth();this._calendarYear=this.today.getFullYear();this._calendarView="days";this._calendarYears=[];this._calendarDays=[];this._dates=[];this.handleClearSelectedDates=()=>{this._dates=[],this._onBlCalendarChange([]),this.clearRangePickerStyles()}}static get styles(){return[$]}connectedCallback(){super.connectedCallback(),V(this)}get months(){return[...Array(12).keys()].map(e=>({name:new Date(0,e+1,0).toLocaleString(this.locale,{month:"long"}),value:e}))}get days(){return[...Array(7).keys()].map(e=>({name:new Date(0,0,e).toLocaleString(this.locale,{weekday:"short"}),value:e}))}getDayNumInAMonth(e,t){return new Date(e,t+1,0).getDate()}getWeekDayOfDate(e,t){return new Date(e,t,1).getDay()}setPreviousCalendarView(){if(this.clearRangePickerStyles(),this._calendarView==="days")this._calendarMonth===0?(this._calendarMonth=11,this._calendarYear-=1):this._calendarMonth-=1;else if(this._calendarView==="months")this._calendarYear-=1;else if(this._calendarView==="years"){let e=this._calendarYears[0];this._calendarYears=Array.from({length:12},(t,a)=>e-(a+1))}this.type==="range"&&this.setHoverClass()}setNextCalendarView(){if(this.clearRangePickerStyles(),this._calendarView==="days")this._calendarMonth===11?(this._calendarMonth=0,this._calendarYear+=1):this._calendarMonth+=1;else if(this._calendarView==="months")this._calendarYear+=1;else if(this._calendarView==="years"){let e=this._calendarYears[11];this._calendarYears=Array.from({length:12},(t,a)=>e+(a+1))}this.setHoverClass()}setCurrentCalendarView(e){this._calendarView=this._calendarView!==e?e:"days",this.setHoverClass()}setMonthAndCalendarView(e){this._calendarMonth=e,this._calendarView="days",this.type==="range"&&this.setHoverClass()}setYearAndCalendarView(e){this._calendarYear=e,this._calendarView="days",this.type==="range"&&this.setHoverClass()}generateSurroundingYears(){this._calendarYears.length||(this._calendarYears=Array.from({length:12},(e,t)=>this._calendarYear-4+t))}clearRangePickerStyles(){var e;(e=this.shadowRoot)==null||e.querySelectorAll(".range-day, .range-start-day, .range-end-day").forEach(t=>t.classList.remove("range-day","range-start-day","range-end-day"))}handleDate(e){if(this.type!=="range"){let t=e.getFullYear()<this._calendarYear||e.getFullYear()===this._calendarYear&&e.getMonth()<this._calendarMonth,a=e.getFullYear()>this._calendarYear||e.getFullYear()===this._calendarYear&&e.getMonth()>this._calendarMonth;t?this.setPreviousCalendarView():a&&this.setNextCalendarView()}switch(this.type){case"single":this.handleSingleSelectCalendar(e);break;case"multiple":this.handleMultipleSelectCalendar(e);break;case"range":this.handleRangeSelectCalendar(e);break}this._onBlCalendarChange(this._dates),this.requestUpdate()}handleSingleSelectCalendar(e){this._dates=[e]}handleMultipleSelectCalendar(e){var a,l,r;((a=this._dates)==null?void 0:a.some(n=>n.getTime()===e.getTime()))?(r=this._dates)==null||r.splice((l=this._dates)==null?void 0:l.findIndex(n=>n.getTime()===e.getTime()),1):this._dates.push(e)}handleRangeSelectCalendar(e){if(!this._dates[0])this._dates[0]=e;else if(this._dates[1])this._dates=[],this._dates[0]=e;else if(e.getTime()>this._dates[0].getTime())this._dates[1]=e;else{let t=this._dates[0];this._dates[0]=e,this._dates[1]=t}this.setHoverClass()}checkIfSelectedDate(e){var t;return(t=this._dates)==null?void 0:t.some(a=>a.getFullYear()===e.getFullYear()&&a.getMonth()===e.getMonth()&&a.getDate()===e.getDate())}checkIfDateIsToday(e){let t=this.today;return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}checkIfDateIsDisabled(e){var t,a,l;return e.getTime()<((t=this.minDate)==null?void 0:t.getTime())||e.getTime()>((a=this.maxDate)==null?void 0:a.getTime())?!0:this.disabledDates.length>0?(l=this.disabledDates)==null?void 0:l.some(r=>e.getDate()===r.getDate()&&e.getMonth()===r.getMonth()&&e.getFullYear()===r.getFullYear()):!1}setHoverClass(){this.clearRangePickerStyles(),this._dates[0]&&this._dates[1]&&setTimeout(()=>{var l,r,n,b,m,_,i,c,g;let e=(n=(r=this.shadowRoot)==null?void 0:r.getElementById(`${(l=this._dates[0])==null?void 0:l.getTime()}`))==null?void 0:n.parentElement;e==null||e.classList.add("range-start-day");let t=(_=(m=this.shadowRoot)==null?void 0:m.getElementById(`${(b=this._dates[1])==null?void 0:b.getTime()}`))==null?void 0:_.parentElement;t==null||t.classList.add("range-end-day");let a=[...this.createCalendarDays().values()].flat().filter(p=>p.getTime()>this._dates[0].getTime()&&p.getTime()<this._dates[1].getTime());for(let p=0;p<a.length;p++){let w=(c=(i=this.shadowRoot)==null?void 0:i.getElementById(`${a[p].getTime()}`))==null?void 0:c.parentElement;(g=w==null?void 0:w.classList)==null||g.add("range-day")}})}createCalendarDays(){var m,_;let e=new Map;this._calendarDays=this.days.slice(this.startOfWeek).concat(this.days.slice(0,this.startOfWeek));let t=this.getWeekDayOfDate(this._calendarYear,this._calendarMonth),a=t<this.startOfWeek?7-(this.startOfWeek-t):t-this.startOfWeek,l=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth-1),r=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth),n=this.startOfWeek;for(let i=a;i>0;i--){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth-1,l-i+1);e.set(this.days[c].name,[g]),n+=1}for(let i=1;i<=r;i++){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth,i);e.get(this.days[c].name)?(m=e.get(this.days[c].name))==null||m.push(g):e.set(this.days[c].name,[g]),n+=1}let b=this._calendarDays.findIndex(i=>i.value===n%7);if(b!==0)for(let i=1;i<=this._calendarDays.length-b;i++){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth+1,i);(_=e.get(this.days[c].name))==null||_.push(g),n+=1}return e}updated(e){if(e.has("value")){let t=E(this._value);t.length?t==null||t.forEach(a=>{this.handleDate(a)}):(this._dates=[],this._onBlCalendarChange([]))}}renderCalendarHeader(){let e=this._calendarView==="months"?"header-text-hover":"",t=this._calendarView==="years"?"header-text-hover":"";return h`
+import{a as V}from"./chunk-IPYZIIRV.js";import{a as Y,b as k}from"./chunk-WEEGH2F4.js";import{a as M}from"./chunk-6LT7O7T2.js";import{a as A}from"./chunk-HBPBDC7T.js";import{a as T}from"./chunk-GRL4DWKG.js";import{a as S,b as y,c as f}from"./chunk-5MOOXA2X.js";import{a as x,b as h,f as C}from"./chunk-4OT5AMS5.js";import{d as s}from"./chunk-IZ2LK5GK.js";function v(u){let D=[],e=u.split(",");return e==null||e.forEach(t=>{let a=new Date(t.trim());isNaN(a.getTime())||D.push(a)}),D}var d=class extends C{constructor(){super(...arguments);this.startOfWeek=0;this.locale=document.documentElement.lang||"en-EN";this._disabledDates=[];this._value=[]}get disabledDates(){return this._disabledDates}set disabledDates(e){let t=[];typeof e=="string"?t=v(e):Array.isArray(e)&&(t=e.filter(a=>!isNaN(a.getTime()))),this.requestUpdate("disabledDates",t),this._disabledDates=t}get maxDate(){return this._maxDate}set maxDate(e){if(e&&isNaN(new Date(e).getTime())){console.warn("Invalid maxDate value.");return}this._minDate&&this._minDate>=e?console.warn("maxDate cannot be smaller than minDate."):(this._maxDate=new Date(e),this.requestUpdate("maxDate",e))}get minDate(){return this._minDate}set minDate(e){if(e&&isNaN(new Date(e).getTime())){console.warn("Invalid minDate value.");return}this._maxDate&&this._maxDate<=e?console.warn("minDate cannot be greater than maxDate."):(this._minDate=new Date(e),this.requestUpdate("minDate",e))}set value(e){let t=this._value;this._value=e,this.requestUpdate("value",t)}get value(){return this._value}};s([y()],d.prototype,"type",2),s([y({type:Number,attribute:"start-of-week",reflect:!0})],d.prototype,"startOfWeek",2),s([y()],d.prototype,"locale",2),s([y({attribute:"disabled-dates",reflect:!0})],d.prototype,"disabledDates",1),s([y({type:Date,attribute:"max-date",reflect:!0})],d.prototype,"maxDate",1),s([y({type:Date,attribute:"min-date",reflect:!0})],d.prototype,"minDate",1),s([y({attribute:"value",reflect:!0})],d.prototype,"value",1);function E(u){return typeof u=="string"?v(u):u instanceof Date?[u]:u}var N=x`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:var(--bl-size-m);flex-direction:column;align-items:center;gap:var(--bl-size-m);border-radius:var(--bl-border-radius-s);width:fit-content;background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;padding-bottom:var(--bl-size-s)}.arrow{flex:1}:host([dir="rtl"]) .arrow{transform:scale(-1)}.header-text{flex:3}.header-text-hover{background:var(--bl-color-neutral-lightest);border-radius:var(--bl-border-radius-s)}.days-wrapper{display:flex;flex-direction:column}.day-wrapper{display:flex;align-items:center;justify-content:center}.week-row{display:flex;align-items:center;flex-direction:row;padding-bottom:var(--bl-size-2xs)}.day{display:flex;align-items:center;width:40px;--bl-button-focus-border-color:#000;--bl-font-title-4-medium:var(--bl-font-weight-regular) var(--bl-font-size-m);--bl-size-xl:40px;--bl-border-radius-m:50%;--bl-border-radius-l:50%}.day.today-day{--bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}.day.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}.day.other-month-day.selected-day{--bl-color-neutral-darker:var(--bl-color-neutral-full)}.day.selected-day{background:var(--bl-color-primary);border-radius:50%;--bl-button-focus-border-color:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full)}.range-day{background:var(--bl-color-primary-contrast);--bl-color-neutral-lightest:var(--bl-color-primary-contrast)}.range-end-day,.range-start-day,.selected-day{--bl-color-neutral-lightest:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full);--bl-color-neutral-darkest:var(--bl-color-neutral-full) !important}.range-start-day{background:var(--bl-color-primary-contrast);border-start-start-radius:50%;border-end-start-radius:50%}.range-end-day{background:var(--bl-color-primary-contrast);border-start-end-radius:50%;border-end-end-radius:50%}.weekday-text{color:var(--bl-color-neutral-dark);text-align:center;padding:var(--bl-size-2xs) 0;width:40px}.grid-content{display:grid;grid-template-columns:auto auto auto;text-align:center}.grid-item{width:93.33px;--bl-size-3xs:15px}.grid-item:not(:nth-last-child(-n + 3)){padding-bottom:var(--bl-size-2xs)}.calendar-text{font:var(--bl-font-title-3-regular)}`,$=N;var o=class extends d{constructor(){super(...arguments);this.today=new Date;this._calendarMonth=this.today.getMonth();this._calendarYear=this.today.getFullYear();this._calendarView="days";this._calendarYears=[];this._calendarDays=[];this._dates=[];this.handleClearSelectedDates=()=>{this._dates=[],this._onBlCalendarChange([]),this.clearRangePickerStyles()}}static get styles(){return[$]}connectedCallback(){super.connectedCallback(),V(this)}get months(){return[...Array(12).keys()].map(e=>({name:new Date(0,e+1,0).toLocaleString(this.locale,{month:"long"}),value:e}))}get days(){return[...Array(7).keys()].map(e=>({name:new Date(0,0,e).toLocaleString(this.locale,{weekday:"short"}),value:e}))}getDayNumInAMonth(e,t){return new Date(e,t+1,0).getDate()}getWeekDayOfDate(e,t){return new Date(e,t,1).getDay()}setPreviousCalendarView(){if(this.clearRangePickerStyles(),this._calendarView==="days")this._calendarMonth===0?(this._calendarMonth=11,this._calendarYear-=1):this._calendarMonth-=1;else if(this._calendarView==="months")this._calendarYear-=1;else if(this._calendarView==="years"){let e=this._calendarYears[0];this._calendarYears=Array.from({length:12},(t,a)=>e-(a+1))}this.type==="range"&&this.setHoverClass()}setNextCalendarView(){if(this.clearRangePickerStyles(),this._calendarView==="days")this._calendarMonth===11?(this._calendarMonth=0,this._calendarYear+=1):this._calendarMonth+=1;else if(this._calendarView==="months")this._calendarYear+=1;else if(this._calendarView==="years"){let e=this._calendarYears[11];this._calendarYears=Array.from({length:12},(t,a)=>e+(a+1))}this.setHoverClass()}setCurrentCalendarView(e){this._calendarView=this._calendarView!==e?e:"days",this.setHoverClass()}setMonthAndCalendarView(e){this._calendarMonth=e,this._calendarView="days",this.type==="range"&&this.setHoverClass()}setYearAndCalendarView(e){this._calendarYear=e,this._calendarView="days",this.type==="range"&&this.setHoverClass()}generateSurroundingYears(){this._calendarYears.length||(this._calendarYears=Array.from({length:12},(e,t)=>this._calendarYear-4+t))}clearRangePickerStyles(){var e;(e=this.shadowRoot)==null||e.querySelectorAll(".range-day, .range-start-day, .range-end-day").forEach(t=>t.classList.remove("range-day","range-start-day","range-end-day"))}handleDate(e){if(this.type!=="range"){let t=e.getFullYear()<this._calendarYear||e.getFullYear()===this._calendarYear&&e.getMonth()<this._calendarMonth,a=e.getFullYear()>this._calendarYear||e.getFullYear()===this._calendarYear&&e.getMonth()>this._calendarMonth;t?this.setPreviousCalendarView():a&&this.setNextCalendarView()}switch(this.type){case"single":this.handleSingleSelectCalendar(e);break;case"multiple":this.handleMultipleSelectCalendar(e);break;case"range":this.handleRangeSelectCalendar(e);break}this._onBlCalendarChange(this._dates),this.requestUpdate()}handleSingleSelectCalendar(e){this._dates=[e]}handleMultipleSelectCalendar(e){var a,l,r;((a=this._dates)==null?void 0:a.some(n=>n.getTime()===e.getTime()))?(r=this._dates)==null||r.splice((l=this._dates)==null?void 0:l.findIndex(n=>n.getTime()===e.getTime()),1):this._dates.push(e)}handleRangeSelectCalendar(e){if(!this._dates[0])this._dates[0]=e;else if(this._dates[1])this._dates=[],this._dates[0]=e;else if(e.getTime()>this._dates[0].getTime())this._dates[1]=e;else{let t=this._dates[0];this._dates[0]=e,this._dates[1]=t}this.setHoverClass()}checkIfSelectedDate(e){var t;return(t=this._dates)==null?void 0:t.some(a=>a.getFullYear()===e.getFullYear()&&a.getMonth()===e.getMonth()&&a.getDate()===e.getDate())}checkIfDateIsToday(e){let t=this.today;return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}checkIfDateIsDisabled(e){var t,a,l;return e.getTime()<((t=this.minDate)==null?void 0:t.getTime())||e.getTime()>((a=this.maxDate)==null?void 0:a.getTime())?!0:this.disabledDates.length>0?(l=this.disabledDates)==null?void 0:l.some(r=>e.getDate()===r.getDate()&&e.getMonth()===r.getMonth()&&e.getFullYear()===r.getFullYear()):!1}setHoverClass(){this.clearRangePickerStyles(),this._dates[0]&&this._dates[1]&&setTimeout(()=>{var l,r,n,b,m,_,i,c,g;let e=(n=(r=this.shadowRoot)==null?void 0:r.getElementById(`${(l=this._dates[0])==null?void 0:l.getTime()}`))==null?void 0:n.parentElement;e==null||e.classList.add("range-start-day");let t=(_=(m=this.shadowRoot)==null?void 0:m.getElementById(`${(b=this._dates[1])==null?void 0:b.getTime()}`))==null?void 0:_.parentElement;t==null||t.classList.add("range-end-day");let a=[...this.createCalendarDays().values()].flat().filter(p=>p.getTime()>this._dates[0].getTime()&&p.getTime()<this._dates[1].getTime());for(let p=0;p<a.length;p++){let w=(c=(i=this.shadowRoot)==null?void 0:i.getElementById(`${a[p].getTime()}`))==null?void 0:c.parentElement;(g=w==null?void 0:w.classList)==null||g.add("range-day")}})}createCalendarDays(){var m,_;let e=new Map;this._calendarDays=this.days.slice(this.startOfWeek).concat(this.days.slice(0,this.startOfWeek));let t=this.getWeekDayOfDate(this._calendarYear,this._calendarMonth),a=t<this.startOfWeek?7-(this.startOfWeek-t):t-this.startOfWeek,l=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth-1),r=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth),n=this.startOfWeek;for(let i=a;i>0;i--){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth-1,l-i+1);e.set(this.days[c].name,[g]),n+=1}for(let i=1;i<=r;i++){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth,i);e.get(this.days[c].name)?(m=e.get(this.days[c].name))==null||m.push(g):e.set(this.days[c].name,[g]),n+=1}let b=this._calendarDays.findIndex(i=>i.value===n%7);if(b!==0)for(let i=1;i<=this._calendarDays.length-b;i++){let c=n%7,g=new Date(this._calendarYear,this._calendarMonth+1,i);(_=e.get(this.days[c].name))==null||_.push(g),n+=1}return e}updated(e){if(e.has("value")){let t=E(this._value);t.length?t==null||t.forEach(a=>{this.handleDate(a)}):(this._dates=[],this._onBlCalendarChange([]))}}renderCalendarHeader(){let e=this._calendarView==="months"?"header-text-hover":"",t=this._calendarView==="years"?"header-text-hover":"";return h`
       <div class="calendar-header">
         <bl-button
           class="arrow"
@@ -81,4 +81,4 @@ import{a as V}from"./chunk-IPYZIIRV.js";import{a as Y,b as k}from"./chunk-WEEGH2
         </div>
       </div>
     `}};s([f()],o.prototype,"today",2),s([f()],o.prototype,"_calendarMonth",2),s([f()],o.prototype,"_calendarYear",2),s([f()],o.prototype,"_calendarView",2),s([f()],o.prototype,"_calendarYears",2),s([f()],o.prototype,"_calendarDays",2),s([f()],o.prototype,"_dates",2),s([T("bl-calendar-change")],o.prototype,"_onBlCalendarChange",2),o=s([S("bl-calendar"),A()],o);export{d as a,o as b};
-//# sourceMappingURL=chunk-4KQZCR3J.js.map
+//# sourceMappingURL=chunk-S6HEBXIR.js.map

package/dist/{chunk-4KQZCR3J.js.map → chunk-S6HEBXIR.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/utilities/string-to-date-converter.ts", "../src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts", "../src/utilities/format-to-date-array.ts", "../src/components/calendar/bl-calendar.css", "../src/components/calendar/bl-calendar.ts"],
-  "sourcesContent": ["export function stringToDateArray(value: string): Date[] {\n  const tempValue: Date[] = [];\n  const splitDates = value.split(\",\");\n\n  splitDates?.forEach(date => {\n    const isDate = new Date(date.trim());\n\n    if (!isNaN(isDate.getTime())) {\n      tempValue.push(isDate);\n    }\n  });\n  return tempValue;\n}\n", "import { LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { CalendarType, DayValues } from \"../../components/calendar/bl-calendar.types\";\nimport { stringToDateArray } from \"../../utilities/string-to-date-converter\";\n\nexport default class DatepickerCalendarMixin extends LitElement {\n  /**\n   * Defines the calendar types, available types are single, multiple and range\n   */\n  @property()\n  type: CalendarType;\n  /**\n   * Defines the start day of the calendar (1 defines monday)\n   */\n  @property({ type: Number, attribute: \"start-of-week\", reflect: true })\n  startOfWeek: DayValues = 0;\n  /**\n   * Defines the calendar language\n   */\n  @property()\n  locale: string = document.documentElement.lang || \"en-EN\";\n\n  /**\n   * Defines the unselectable dates for calendar\n   */\n  protected _disabledDates: Date[] = [];\n\n  get disabledDates(): Date[] {\n    return this._disabledDates;\n  }\n\n  @property({\n    attribute: \"disabled-dates\",\n    reflect: true,\n  })\n  set disabledDates(disabledDates: Date[] | string) {\n    // Now we are using 1.6.0 version of @lit/reactive-elements and in this version even if our property has property decorator it doesn't run request update inside.\n    // We added similar implementations to update when there is a change.\n    // When we update the lit to 2.0 or upper versions we can remove the requestUpdate here\n\n    let newVal: Date[] = [];\n\n    if (typeof disabledDates === \"string\") {\n      newVal = stringToDateArray(disabledDates);\n    } else if (Array.isArray(disabledDates)) {\n      newVal = disabledDates.filter(d => !isNaN(d.getTime()));\n    }\n\n    this.requestUpdate(\"disabledDates\", newVal);\n    this._disabledDates = newVal;\n  }\n\n  /**\n   * Defines the maximum date value for the calendar\n   */\n  _maxDate: Date;\n\n  get maxDate() {\n    return this._maxDate;\n  }\n\n  @property({ type: Date, attribute: \"max-date\", reflect: true })\n  set maxDate(maxDate: Date) {\n    if (maxDate && isNaN(new Date(maxDate).getTime())) {\n      console.warn(\"Invalid maxDate value.\");\n      return;\n    }\n    if (this._minDate && this._minDate >= maxDate) {\n      console.warn(\"maxDate cannot be smaller than minDate.\");\n    } else {\n      this._maxDate = new Date(maxDate);\n      this.requestUpdate(\"maxDate\", maxDate);\n    }\n  }\n\n  /**\n   * Defines the minimum date value for the calendar\n   */\n  _minDate: Date;\n\n  get minDate() {\n    return this._minDate;\n  }\n\n  @property({ type: Date, attribute: \"min-date\", reflect: true })\n  set minDate(minDate: Date) {\n    if (minDate && isNaN(new Date(minDate).getTime())) {\n      console.warn(\"Invalid minDate value.\");\n      return;\n    }\n    if (this._maxDate && this._maxDate <= minDate) {\n      console.warn(\"minDate cannot be greater than maxDate.\");\n    } else {\n      this._minDate = new Date(minDate);\n      this.requestUpdate(\"minDate\", minDate);\n    }\n  }\n\n  @property({ attribute: \"value\", reflect: true })\n  set value(value: string | Date | Date[]) {\n    const oldValue = this._value;\n\n    this._value = value;\n    this.requestUpdate(\"value\", oldValue);\n  }\n\n  get value(): string | Date | Date[] {\n    return this._value;\n  }\n\n  _value: string | Date | Date[] = [];\n}\n", "import { stringToDateArray } from \"./string-to-date-converter\";\n\nexport function formatToDateArray(value: string | Date | Date[]): Date[] {\n  if (typeof value === \"string\") {\n    return stringToDateArray(value);\n  } else if (value instanceof Date) {\n    return [value];\n  } else {\n    return value;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:var(--bl-size-m);flex-direction:column;align-items:center;gap:var(--bl-size-m);border-radius:var(--bl-border-radius-s);width:fit-content;background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;padding-bottom:var(--bl-size-s)}.arrow{flex:1}:host([dir=\"rtl\"]) .arrow{transform:scale(-1)}.header-text{flex:3}.header-text-hover{background:var(--bl-color-neutral-lightest);border-radius:var(--bl-border-radius-s)}.days-wrapper{display:flex;flex-direction:column}.day-wrapper{display:flex;align-items:center;justify-content:center}.week-row{display:flex;align-items:center;flex-direction:row;padding-bottom:var(--bl-size-2xs)}.day{display:flex;align-items:center;width:40px;--bl-button-focus-border-color:#000;--bl-font-title-4-medium:var(--bl-font-weight-regular) var(--bl-font-size-m);--bl-size-xl:40px;--bl-border-radius-m:50%;--bl-border-radius-l:50%}.day.today-day{--bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}.day.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}.day.other-month-day.selected-day{--bl-color-neutral-darker:var(--bl-color-neutral-full)}.day.selected-day{background:var(--bl-color-primary);border-radius:50%;--bl-button-focus-border-color:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full)}.range-day{background:var(--bl-color-primary-contrast);--bl-color-neutral-lightest:var(--bl-color-primary-contrast)}.range-end-day,.range-start-day,.selected-day{--bl-color-neutral-lightest:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full);--bl-color-neutral-darkest:var(--bl-color-neutral-full) !important}.range-start-day{background:var(--bl-color-primary-contrast);border-top-left-radius:50%;border-bottom-left-radius:50%}.range-end-day{background:var(--bl-color-primary-contrast);border-top-right-radius:50%;border-bottom-right-radius:50%}.weekday-text{color:var(--bl-color-neutral-dark);text-align:center;padding:var(--bl-size-2xs) 0;width:40px}.grid-content{display:grid;grid-template-columns:auto auto auto;text-align:center}.grid-item{width:93.33px;--bl-size-3xs:15px}.grid-item:not(:nth-last-child(-n + 3)){padding-bottom:var(--bl-size-2xs)}.calendar-text{font:var(--bl-font-title-3-regular)}`;\nexport default styles;\n", "import { CSSResultGroup, html, PropertyValues } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { localized } from \"@lit/localize\";\nimport DatepickerCalendarMixin from \"../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { formatToDateArray } from \"../../utilities/format-to-date-array\";\nimport \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport {\n  CALENDAR_TYPES,\n  CALENDAR_VIEWS,\n  FIRST_MONTH_INDEX,\n  LAST_MONTH_INDEX,\n} from \"./bl-calendar.constant\";\nimport style from \"./bl-calendar.css\";\nimport { Calendar, CalendarDay, CalendarView } from \"./bl-calendar.types\";\n\n/**\n * @tag bl-calendar\n * @summary Baklava Calendar component\n **/\n@customElement(\"bl-calendar\")\n@localized()\nexport default class BlCalendar extends DatepickerCalendarMixin {\n  @state()\n  today = new Date();\n  @state()\n  _calendarMonth: number = this.today.getMonth();\n  @state()\n  _calendarYear: number = this.today.getFullYear();\n  @state()\n  _calendarView: CalendarView = CALENDAR_VIEWS.DAYS;\n  @state()\n  _calendarYears: number[] = [];\n  @state()\n  _calendarDays: CalendarDay[] = [];\n  @state()\n  _dates: Date[] = [];\n  /**\n   * Fires when date selection changes\n   */\n  @event(\"bl-calendar-change\") _onBlCalendarChange: EventDispatcher<Date[]>;\n\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    setDirectionProperty(this);\n  }\n\n  get months() {\n    return [...Array(12).keys()].map(month => ({\n      name: new Date(0, month + 1, 0).toLocaleString(this.locale, { month: \"long\" }),\n      value: month,\n    }));\n  }\n\n  get days() {\n    return [...Array(7).keys()].map(day => ({\n      name: new Date(0, 0, day).toLocaleString(this.locale, { weekday: \"short\" }),\n      value: day,\n    }));\n  }\n\n  public handleClearSelectedDates = () => {\n    this._dates = [];\n    this._onBlCalendarChange([]);\n    this.clearRangePickerStyles();\n  };\n\n  getDayNumInAMonth(year: number, month: number) {\n    return new Date(year, month + 1, 0).getDate();\n  }\n\n  getWeekDayOfDate(year: number, month: number) {\n    return new Date(year, month, 1).getDay();\n  }\n\n  setPreviousCalendarView() {\n    this.clearRangePickerStyles();\n    if (this._calendarView === CALENDAR_VIEWS.DAYS) {\n      if (this._calendarMonth === FIRST_MONTH_INDEX) {\n        this._calendarMonth = LAST_MONTH_INDEX;\n        this._calendarYear -= 1;\n      } else this._calendarMonth -= 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.MONTHS) {\n      this._calendarYear -= 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.YEARS) {\n      const fromYear = this._calendarYears[0];\n\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => fromYear - (i + 1));\n    }\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  setNextCalendarView() {\n    this.clearRangePickerStyles();\n    if (this._calendarView === CALENDAR_VIEWS.DAYS) {\n      if (this._calendarMonth === LAST_MONTH_INDEX) {\n        this._calendarMonth = FIRST_MONTH_INDEX;\n        this._calendarYear += 1;\n      } else this._calendarMonth += 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.MONTHS) {\n      this._calendarYear += 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.YEARS) {\n      const fromYear = this._calendarYears[11];\n\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => fromYear + (i + 1));\n    }\n    this.setHoverClass();\n  }\n\n  setCurrentCalendarView(view: CalendarView) {\n    this._calendarView = this._calendarView !== view ? view : CALENDAR_VIEWS.DAYS;\n    this.setHoverClass();\n  }\n\n  setMonthAndCalendarView(month: number) {\n    this._calendarMonth = month;\n    this._calendarView = CALENDAR_VIEWS.DAYS;\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  setYearAndCalendarView(year: number) {\n    this._calendarYear = year;\n    this._calendarView = CALENDAR_VIEWS.DAYS;\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  generateSurroundingYears() {\n    if (!this._calendarYears.length) {\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => this._calendarYear - 4 + i);\n    }\n  }\n\n  clearRangePickerStyles() {\n    this.shadowRoot\n      ?.querySelectorAll(\".range-day, .range-start-day, .range-end-day\")\n      .forEach(day => day.classList.remove(\"range-day\", \"range-start-day\", \"range-end-day\"));\n  }\n\n  handleDate(date: Date) {\n    if (this.type !== CALENDAR_TYPES.RANGE) {\n      const isDateBeforeThanCalendar =\n        date.getFullYear() < this._calendarYear ||\n        (date.getFullYear() === this._calendarYear && date.getMonth() < this._calendarMonth);\n\n      const isDateAfterThanCalendar =\n        date.getFullYear() > this._calendarYear ||\n        (date.getFullYear() === this._calendarYear && date.getMonth() > this._calendarMonth);\n\n      if (isDateBeforeThanCalendar) {\n        this.setPreviousCalendarView();\n      } else if (isDateAfterThanCalendar) {\n        this.setNextCalendarView();\n      }\n    }\n\n    switch (this.type) {\n      case CALENDAR_TYPES.SINGLE:\n        this.handleSingleSelectCalendar(date);\n        break;\n      case CALENDAR_TYPES.MULTIPLE:\n        this.handleMultipleSelectCalendar(date);\n        break;\n      case CALENDAR_TYPES.RANGE:\n        this.handleRangeSelectCalendar(date);\n        break;\n    }\n\n    this._onBlCalendarChange(this._dates);\n    this.requestUpdate();\n  }\n\n  handleSingleSelectCalendar(calendarDate: Date) {\n    this._dates = [calendarDate];\n  }\n\n  handleMultipleSelectCalendar(calendarDate: Date) {\n    const dateExist = this._dates?.some(d => d.getTime() === calendarDate.getTime());\n\n    dateExist\n      ? this._dates?.splice(\n          this._dates?.findIndex(d => d.getTime() === calendarDate.getTime()),\n          1\n        )\n      : this._dates.push(calendarDate);\n  }\n\n  handleRangeSelectCalendar(calendarDate: Date) {\n    if (!this._dates[0]) {\n      this._dates[0] = calendarDate;\n    } else if (!this._dates[1]) {\n      if (calendarDate.getTime() > this._dates[0].getTime()) {\n        this._dates[1] = calendarDate;\n      } else {\n        const tempEndDate = this._dates[0];\n\n        this._dates[0] = calendarDate;\n        this._dates[1] = tempEndDate;\n      }\n    } else {\n      this._dates = [];\n      this._dates[0] = calendarDate;\n    }\n    this.setHoverClass();\n  }\n\n  checkIfSelectedDate(calendarDate: Date) {\n    return this._dates?.some(\n      date =>\n        date.getFullYear() === calendarDate.getFullYear() &&\n        date.getMonth() === calendarDate.getMonth() &&\n        date.getDate() === calendarDate.getDate()\n    );\n  }\n\n  checkIfDateIsToday(calendarDate: Date) {\n    const today = this.today;\n\n    return (\n      today.getDate() === calendarDate.getDate() &&\n      today.getMonth() === calendarDate.getMonth() &&\n      today.getFullYear() === calendarDate.getFullYear()\n    );\n  }\n\n  checkIfDateIsDisabled(calendarDate: Date) {\n    if (\n      calendarDate.getTime() < this.minDate?.getTime() ||\n      calendarDate.getTime() > this.maxDate?.getTime()\n    ) {\n      return true;\n    }\n    if (this.disabledDates.length > 0) {\n      return this.disabledDates?.some(disabledDate => {\n        return (\n          calendarDate.getDate() === disabledDate.getDate() &&\n          calendarDate.getMonth() === disabledDate.getMonth() &&\n          calendarDate.getFullYear() === disabledDate.getFullYear()\n        );\n      });\n    }\n    return false;\n  }\n\n  setHoverClass() {\n    this.clearRangePickerStyles();\n\n    if (this._dates[0] && this._dates[1]) {\n      setTimeout(() => {\n        const startDateParentElement = this.shadowRoot?.getElementById(\n          `${this._dates[0]?.getTime()}`\n        )?.parentElement;\n\n        startDateParentElement?.classList.add(\"range-start-day\");\n\n        const endDateParentElement = this.shadowRoot?.getElementById(\n          `${this._dates[1]?.getTime()}`\n        )?.parentElement;\n\n        endDateParentElement?.classList.add(\"range-end-day\");\n        const rangeDays = [...this.createCalendarDays().values()]\n          .flat()\n          .filter(\n            date =>\n              date.getTime() > this._dates[0]!.getTime() &&\n              date.getTime() < this._dates[1]!.getTime()\n          );\n\n        for (let i = 0; i < rangeDays.length; i++) {\n          const element = this.shadowRoot?.getElementById(\n            `${rangeDays[i].getTime()}`\n          )?.parentElement;\n\n          element?.classList?.add(\"range-day\");\n        }\n      });\n    }\n  }\n\n  createCalendarDays() {\n    const calendar: Calendar = new Map();\n\n    this._calendarDays = this.days\n      .slice(this.startOfWeek)\n      .concat(this.days.slice(0, this.startOfWeek));\n\n    const currentMonthStartWeekDay = this.getWeekDayOfDate(this._calendarYear, this._calendarMonth); // 1\n\n    const lastMonthDaysCount =\n      currentMonthStartWeekDay < this.startOfWeek\n        ? 7 - (this.startOfWeek - currentMonthStartWeekDay)\n        : currentMonthStartWeekDay - this.startOfWeek;\n\n    const previousMonthDayCount = this.getDayNumInAMonth(\n      this._calendarYear,\n      this._calendarMonth - 1\n    );\n\n    const currentMonthDayCount = this.getDayNumInAMonth(this._calendarYear, this._calendarMonth);\n\n    let dayOfTheWeek = this.startOfWeek; // from sunday\n\n    for (\n      let lastMonthDaysIterator = lastMonthDaysCount;\n      lastMonthDaysIterator > 0;\n      lastMonthDaysIterator--\n    ) {\n      const mod = dayOfTheWeek % 7;\n      const date = new Date(\n        this._calendarYear,\n        this._calendarMonth - 1,\n        previousMonthDayCount - lastMonthDaysIterator + 1\n      );\n\n      calendar.set(this.days[mod].name, [date]);\n\n      dayOfTheWeek += 1;\n    }\n    for (\n      let currentMonthDaysIterator = 1;\n      currentMonthDaysIterator <= currentMonthDayCount;\n      currentMonthDaysIterator++\n    ) {\n      const mod = dayOfTheWeek % 7;\n      const day = new Date(this._calendarYear, this._calendarMonth, currentMonthDaysIterator);\n\n      if (calendar.get(this.days[mod].name)) {\n        calendar.get(this.days[mod].name)?.push(day);\n      } else {\n        calendar.set(this.days[mod].name, [day]);\n      }\n      dayOfTheWeek += 1;\n    }\n\n    const index = this._calendarDays.findIndex(day => day.value === dayOfTheWeek % 7);\n\n    if (index !== 0) {\n      for (\n        let nextMonthDaysIterator = 1;\n        nextMonthDaysIterator <= this._calendarDays.length - index;\n        nextMonthDaysIterator++\n      ) {\n        const mod = dayOfTheWeek % 7;\n        const date = new Date(this._calendarYear, this._calendarMonth + 1, nextMonthDaysIterator);\n\n        calendar.get(this.days[mod].name)?.push(date);\n\n        dayOfTheWeek += 1;\n      }\n    }\n    return calendar;\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (changedProperties.has(\"value\")) {\n      const dates = formatToDateArray(this._value);\n\n      if (!dates.length) {\n        this._dates = [];\n        this._onBlCalendarChange([]);\n      } else {\n        dates?.forEach(date => {\n          this.handleDate(date);\n        });\n      }\n    }\n  }\n\n  renderCalendarHeader() {\n    const showMonthSelected =\n      this._calendarView === CALENDAR_VIEWS.MONTHS ? \"header-text-hover\" : \"\";\n    const showYearSelected = this._calendarView === CALENDAR_VIEWS.YEARS ? \"header-text-hover\" : \"\";\n\n    return html`\n      <div class=\"calendar-header\">\n        <bl-button\n          class=\"arrow\"\n          icon=\"arrow_left\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          @click=\"${() => this.setPreviousCalendarView()}\"\n        ></bl-button>\n        <bl-button\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          class=\"header-text ${showMonthSelected}\"\n          @click=\"${() => this.setCurrentCalendarView(CALENDAR_VIEWS.MONTHS)}\"\n          >${this.months[this._calendarMonth].name}\n        </bl-button>\n        <bl-button\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          class=\"header-text ${showYearSelected}\"\n          @click=\"${() => this.setCurrentCalendarView(CALENDAR_VIEWS.YEARS)}\"\n          >${this._calendarYear}\n        </bl-button>\n        <bl-button\n          class=\"arrow\"\n          icon=\"arrow_right\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          @click=\"${() => this.setNextCalendarView()}\"\n        ></bl-button>\n      </div>\n    `;\n  }\n\n  renderCalendarDays() {\n    const calendarDays = this.createCalendarDays();\n    const valuesArray = Array.from(calendarDays.values());\n\n    return html`\n      <div class=\"week-row\">\n        ${[...calendarDays.keys()].map(key => {\n          return html` <div class=\"calendar-text weekday-text\">${key}</div> `;\n        })}\n      </div>\n      <div class=\"days-wrapper\">\n        ${[...Array(valuesArray[0].length).keys()].map(key => {\n          return html` <div class=\"week-row\">\n            ${valuesArray.map(values => {\n              const date = values[key];\n              const isSelectedDay = this.checkIfSelectedDate(date);\n              const isDayToday = this.checkIfDateIsToday(date);\n              const isDisabledDay = this.checkIfDateIsDisabled(date);\n\n              const classes = classMap({\n                \"day\": true,\n                \"calendar-text\": true,\n                \"today-day\": isDayToday,\n                \"selected-day\": isSelectedDay,\n                \"other-month-day\": values[key].getMonth() !== this._calendarMonth,\n                \"disabled-day\": isDisabledDay,\n              });\n\n              return html`\n                <div class=\"day-wrapper\">\n                  <bl-button\n                    id=${date.getTime()}\n                    variant=\"tertiary\"\n                    kind=\"neutral\"\n                    size=\"small\"\n                    class=${classes}\n                    ?disabled=${isDisabledDay}\n                    @click=\"${() => !isDisabledDay && this.handleDate(date)}\"\n                  >\n                    ${date.getDate()}\n                  </bl-button>\n                </div>\n              `;\n            })}\n          </div>`;\n        })}\n      </div>\n      </div>`;\n  }\n\n  renderCalendarMonths() {\n    return html` <div class=\"grid-content\">\n      ${this.months.map((month, index) => {\n        const variant = month.value === this._calendarMonth ? \"primary\" : \"tertiary\";\n        const neutral = month.value === this._calendarMonth ? \"default\" : \"neutral\";\n\n        return html` <bl-button\n          variant=${variant}\n          kind=${neutral}\n          class=\"grid-item\"\n          size=\"small\"\n          @click=\"${() => this.setMonthAndCalendarView(index)}\"\n          ><span class=\"calendar-text\">${month.name}</span></bl-button\n        >`;\n      })}\n    </div>`;\n  }\n\n  renderCalendarYears() {\n    this.generateSurroundingYears();\n    return html` <div class=\"grid-content\">\n      ${this._calendarYears.map(year => {\n        const variant = year === this._calendarYear ? \"primary\" : \"tertiary\";\n        const neutral = year === this._calendarYear ? \"default\" : \"neutral\";\n\n        return html` <bl-button\n          variant=${variant}\n          kind=${neutral}\n          class=\"grid-item\"\n          @click=\"${() => this.setYearAndCalendarView(year)}\"\n          ><span class=\"calendar-text\">${year}</span></bl-button\n        >`;\n      })}\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <div>\n        <div class=\"calendar-content\">\n          <div class=\"calendar\">\n            ${this.renderCalendarHeader()}\n            ${this._calendarView === CALENDAR_VIEWS.DAYS ? this.renderCalendarDays() : \"\"}\n            ${this._calendarView === CALENDAR_VIEWS.MONTHS ? this.renderCalendarMonths() : \"\"}\n            ${this._calendarView === CALENDAR_VIEWS.YEARS ? this.renderCalendarYears() : \"\"}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["export function stringToDateArray(value: string): Date[] {\n  const tempValue: Date[] = [];\n  const splitDates = value.split(\",\");\n\n  splitDates?.forEach(date => {\n    const isDate = new Date(date.trim());\n\n    if (!isNaN(isDate.getTime())) {\n      tempValue.push(isDate);\n    }\n  });\n  return tempValue;\n}\n", "import { LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { CalendarType, DayValues } from \"../../components/calendar/bl-calendar.types\";\nimport { stringToDateArray } from \"../../utilities/string-to-date-converter\";\n\nexport default class DatepickerCalendarMixin extends LitElement {\n  /**\n   * Defines the calendar types, available types are single, multiple and range\n   */\n  @property()\n  type: CalendarType;\n  /**\n   * Defines the start day of the calendar (1 defines monday)\n   */\n  @property({ type: Number, attribute: \"start-of-week\", reflect: true })\n  startOfWeek: DayValues = 0;\n  /**\n   * Defines the calendar language\n   */\n  @property()\n  locale: string = document.documentElement.lang || \"en-EN\";\n\n  /**\n   * Defines the unselectable dates for calendar\n   */\n  protected _disabledDates: Date[] = [];\n\n  get disabledDates(): Date[] {\n    return this._disabledDates;\n  }\n\n  @property({\n    attribute: \"disabled-dates\",\n    reflect: true,\n  })\n  set disabledDates(disabledDates: Date[] | string) {\n    // Now we are using 1.6.0 version of @lit/reactive-elements and in this version even if our property has property decorator it doesn't run request update inside.\n    // We added similar implementations to update when there is a change.\n    // When we update the lit to 2.0 or upper versions we can remove the requestUpdate here\n\n    let newVal: Date[] = [];\n\n    if (typeof disabledDates === \"string\") {\n      newVal = stringToDateArray(disabledDates);\n    } else if (Array.isArray(disabledDates)) {\n      newVal = disabledDates.filter(d => !isNaN(d.getTime()));\n    }\n\n    this.requestUpdate(\"disabledDates\", newVal);\n    this._disabledDates = newVal;\n  }\n\n  /**\n   * Defines the maximum date value for the calendar\n   */\n  _maxDate: Date;\n\n  get maxDate() {\n    return this._maxDate;\n  }\n\n  @property({ type: Date, attribute: \"max-date\", reflect: true })\n  set maxDate(maxDate: Date) {\n    if (maxDate && isNaN(new Date(maxDate).getTime())) {\n      console.warn(\"Invalid maxDate value.\");\n      return;\n    }\n    if (this._minDate && this._minDate >= maxDate) {\n      console.warn(\"maxDate cannot be smaller than minDate.\");\n    } else {\n      this._maxDate = new Date(maxDate);\n      this.requestUpdate(\"maxDate\", maxDate);\n    }\n  }\n\n  /**\n   * Defines the minimum date value for the calendar\n   */\n  _minDate: Date;\n\n  get minDate() {\n    return this._minDate;\n  }\n\n  @property({ type: Date, attribute: \"min-date\", reflect: true })\n  set minDate(minDate: Date) {\n    if (minDate && isNaN(new Date(minDate).getTime())) {\n      console.warn(\"Invalid minDate value.\");\n      return;\n    }\n    if (this._maxDate && this._maxDate <= minDate) {\n      console.warn(\"minDate cannot be greater than maxDate.\");\n    } else {\n      this._minDate = new Date(minDate);\n      this.requestUpdate(\"minDate\", minDate);\n    }\n  }\n\n  @property({ attribute: \"value\", reflect: true })\n  set value(value: string | Date | Date[]) {\n    const oldValue = this._value;\n\n    this._value = value;\n    this.requestUpdate(\"value\", oldValue);\n  }\n\n  get value(): string | Date | Date[] {\n    return this._value;\n  }\n\n  _value: string | Date | Date[] = [];\n}\n", "import { stringToDateArray } from \"./string-to-date-converter\";\n\nexport function formatToDateArray(value: string | Date | Date[]): Date[] {\n  if (typeof value === \"string\") {\n    return stringToDateArray(value);\n  } else if (value instanceof Date) {\n    return [value];\n  } else {\n    return value;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:var(--bl-size-m);flex-direction:column;align-items:center;gap:var(--bl-size-m);border-radius:var(--bl-border-radius-s);width:fit-content;background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;padding-bottom:var(--bl-size-s)}.arrow{flex:1}:host([dir=\"rtl\"]) .arrow{transform:scale(-1)}.header-text{flex:3}.header-text-hover{background:var(--bl-color-neutral-lightest);border-radius:var(--bl-border-radius-s)}.days-wrapper{display:flex;flex-direction:column}.day-wrapper{display:flex;align-items:center;justify-content:center}.week-row{display:flex;align-items:center;flex-direction:row;padding-bottom:var(--bl-size-2xs)}.day{display:flex;align-items:center;width:40px;--bl-button-focus-border-color:#000;--bl-font-title-4-medium:var(--bl-font-weight-regular) var(--bl-font-size-m);--bl-size-xl:40px;--bl-border-radius-m:50%;--bl-border-radius-l:50%}.day.today-day{--bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}.day.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}.day.other-month-day.selected-day{--bl-color-neutral-darker:var(--bl-color-neutral-full)}.day.selected-day{background:var(--bl-color-primary);border-radius:50%;--bl-button-focus-border-color:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full)}.range-day{background:var(--bl-color-primary-contrast);--bl-color-neutral-lightest:var(--bl-color-primary-contrast)}.range-end-day,.range-start-day,.selected-day{--bl-color-neutral-lightest:var(--bl-color-primary);--bl-color-neutral-darker:var(--bl-color-neutral-full);--bl-color-neutral-darkest:var(--bl-color-neutral-full) !important}.range-start-day{background:var(--bl-color-primary-contrast);border-start-start-radius:50%;border-end-start-radius:50%}.range-end-day{background:var(--bl-color-primary-contrast);border-start-end-radius:50%;border-end-end-radius:50%}.weekday-text{color:var(--bl-color-neutral-dark);text-align:center;padding:var(--bl-size-2xs) 0;width:40px}.grid-content{display:grid;grid-template-columns:auto auto auto;text-align:center}.grid-item{width:93.33px;--bl-size-3xs:15px}.grid-item:not(:nth-last-child(-n + 3)){padding-bottom:var(--bl-size-2xs)}.calendar-text{font:var(--bl-font-title-3-regular)}`;\nexport default styles;\n", "import { CSSResultGroup, html, PropertyValues } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { localized } from \"@lit/localize\";\nimport DatepickerCalendarMixin from \"../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { formatToDateArray } from \"../../utilities/format-to-date-array\";\nimport \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport {\n  CALENDAR_TYPES,\n  CALENDAR_VIEWS,\n  FIRST_MONTH_INDEX,\n  LAST_MONTH_INDEX,\n} from \"./bl-calendar.constant\";\nimport style from \"./bl-calendar.css\";\nimport { Calendar, CalendarDay, CalendarView } from \"./bl-calendar.types\";\n\n/**\n * @tag bl-calendar\n * @summary Baklava Calendar component\n **/\n@customElement(\"bl-calendar\")\n@localized()\nexport default class BlCalendar extends DatepickerCalendarMixin {\n  @state()\n  today = new Date();\n  @state()\n  _calendarMonth: number = this.today.getMonth();\n  @state()\n  _calendarYear: number = this.today.getFullYear();\n  @state()\n  _calendarView: CalendarView = CALENDAR_VIEWS.DAYS;\n  @state()\n  _calendarYears: number[] = [];\n  @state()\n  _calendarDays: CalendarDay[] = [];\n  @state()\n  _dates: Date[] = [];\n  /**\n   * Fires when date selection changes\n   */\n  @event(\"bl-calendar-change\") _onBlCalendarChange: EventDispatcher<Date[]>;\n\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    setDirectionProperty(this);\n  }\n\n  get months() {\n    return [...Array(12).keys()].map(month => ({\n      name: new Date(0, month + 1, 0).toLocaleString(this.locale, { month: \"long\" }),\n      value: month,\n    }));\n  }\n\n  get days() {\n    return [...Array(7).keys()].map(day => ({\n      name: new Date(0, 0, day).toLocaleString(this.locale, { weekday: \"short\" }),\n      value: day,\n    }));\n  }\n\n  public handleClearSelectedDates = () => {\n    this._dates = [];\n    this._onBlCalendarChange([]);\n    this.clearRangePickerStyles();\n  };\n\n  getDayNumInAMonth(year: number, month: number) {\n    return new Date(year, month + 1, 0).getDate();\n  }\n\n  getWeekDayOfDate(year: number, month: number) {\n    return new Date(year, month, 1).getDay();\n  }\n\n  setPreviousCalendarView() {\n    this.clearRangePickerStyles();\n    if (this._calendarView === CALENDAR_VIEWS.DAYS) {\n      if (this._calendarMonth === FIRST_MONTH_INDEX) {\n        this._calendarMonth = LAST_MONTH_INDEX;\n        this._calendarYear -= 1;\n      } else this._calendarMonth -= 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.MONTHS) {\n      this._calendarYear -= 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.YEARS) {\n      const fromYear = this._calendarYears[0];\n\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => fromYear - (i + 1));\n    }\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  setNextCalendarView() {\n    this.clearRangePickerStyles();\n    if (this._calendarView === CALENDAR_VIEWS.DAYS) {\n      if (this._calendarMonth === LAST_MONTH_INDEX) {\n        this._calendarMonth = FIRST_MONTH_INDEX;\n        this._calendarYear += 1;\n      } else this._calendarMonth += 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.MONTHS) {\n      this._calendarYear += 1;\n    } else if (this._calendarView === CALENDAR_VIEWS.YEARS) {\n      const fromYear = this._calendarYears[11];\n\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => fromYear + (i + 1));\n    }\n    this.setHoverClass();\n  }\n\n  setCurrentCalendarView(view: CalendarView) {\n    this._calendarView = this._calendarView !== view ? view : CALENDAR_VIEWS.DAYS;\n    this.setHoverClass();\n  }\n\n  setMonthAndCalendarView(month: number) {\n    this._calendarMonth = month;\n    this._calendarView = CALENDAR_VIEWS.DAYS;\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  setYearAndCalendarView(year: number) {\n    this._calendarYear = year;\n    this._calendarView = CALENDAR_VIEWS.DAYS;\n    if (this.type === CALENDAR_TYPES.RANGE) this.setHoverClass();\n  }\n\n  generateSurroundingYears() {\n    if (!this._calendarYears.length) {\n      this._calendarYears = Array.from({ length: 12 }, (_, i) => this._calendarYear - 4 + i);\n    }\n  }\n\n  clearRangePickerStyles() {\n    this.shadowRoot\n      ?.querySelectorAll(\".range-day, .range-start-day, .range-end-day\")\n      .forEach(day => day.classList.remove(\"range-day\", \"range-start-day\", \"range-end-day\"));\n  }\n\n  handleDate(date: Date) {\n    if (this.type !== CALENDAR_TYPES.RANGE) {\n      const isDateBeforeThanCalendar =\n        date.getFullYear() < this._calendarYear ||\n        (date.getFullYear() === this._calendarYear && date.getMonth() < this._calendarMonth);\n\n      const isDateAfterThanCalendar =\n        date.getFullYear() > this._calendarYear ||\n        (date.getFullYear() === this._calendarYear && date.getMonth() > this._calendarMonth);\n\n      if (isDateBeforeThanCalendar) {\n        this.setPreviousCalendarView();\n      } else if (isDateAfterThanCalendar) {\n        this.setNextCalendarView();\n      }\n    }\n\n    switch (this.type) {\n      case CALENDAR_TYPES.SINGLE:\n        this.handleSingleSelectCalendar(date);\n        break;\n      case CALENDAR_TYPES.MULTIPLE:\n        this.handleMultipleSelectCalendar(date);\n        break;\n      case CALENDAR_TYPES.RANGE:\n        this.handleRangeSelectCalendar(date);\n        break;\n    }\n\n    this._onBlCalendarChange(this._dates);\n    this.requestUpdate();\n  }\n\n  handleSingleSelectCalendar(calendarDate: Date) {\n    this._dates = [calendarDate];\n  }\n\n  handleMultipleSelectCalendar(calendarDate: Date) {\n    const dateExist = this._dates?.some(d => d.getTime() === calendarDate.getTime());\n\n    dateExist\n      ? this._dates?.splice(\n          this._dates?.findIndex(d => d.getTime() === calendarDate.getTime()),\n          1\n        )\n      : this._dates.push(calendarDate);\n  }\n\n  handleRangeSelectCalendar(calendarDate: Date) {\n    if (!this._dates[0]) {\n      this._dates[0] = calendarDate;\n    } else if (!this._dates[1]) {\n      if (calendarDate.getTime() > this._dates[0].getTime()) {\n        this._dates[1] = calendarDate;\n      } else {\n        const tempEndDate = this._dates[0];\n\n        this._dates[0] = calendarDate;\n        this._dates[1] = tempEndDate;\n      }\n    } else {\n      this._dates = [];\n      this._dates[0] = calendarDate;\n    }\n    this.setHoverClass();\n  }\n\n  checkIfSelectedDate(calendarDate: Date) {\n    return this._dates?.some(\n      date =>\n        date.getFullYear() === calendarDate.getFullYear() &&\n        date.getMonth() === calendarDate.getMonth() &&\n        date.getDate() === calendarDate.getDate()\n    );\n  }\n\n  checkIfDateIsToday(calendarDate: Date) {\n    const today = this.today;\n\n    return (\n      today.getDate() === calendarDate.getDate() &&\n      today.getMonth() === calendarDate.getMonth() &&\n      today.getFullYear() === calendarDate.getFullYear()\n    );\n  }\n\n  checkIfDateIsDisabled(calendarDate: Date) {\n    if (\n      calendarDate.getTime() < this.minDate?.getTime() ||\n      calendarDate.getTime() > this.maxDate?.getTime()\n    ) {\n      return true;\n    }\n    if (this.disabledDates.length > 0) {\n      return this.disabledDates?.some(disabledDate => {\n        return (\n          calendarDate.getDate() === disabledDate.getDate() &&\n          calendarDate.getMonth() === disabledDate.getMonth() &&\n          calendarDate.getFullYear() === disabledDate.getFullYear()\n        );\n      });\n    }\n    return false;\n  }\n\n  setHoverClass() {\n    this.clearRangePickerStyles();\n\n    if (this._dates[0] && this._dates[1]) {\n      setTimeout(() => {\n        const startDateParentElement = this.shadowRoot?.getElementById(\n          `${this._dates[0]?.getTime()}`\n        )?.parentElement;\n\n        startDateParentElement?.classList.add(\"range-start-day\");\n\n        const endDateParentElement = this.shadowRoot?.getElementById(\n          `${this._dates[1]?.getTime()}`\n        )?.parentElement;\n\n        endDateParentElement?.classList.add(\"range-end-day\");\n        const rangeDays = [...this.createCalendarDays().values()]\n          .flat()\n          .filter(\n            date =>\n              date.getTime() > this._dates[0]!.getTime() &&\n              date.getTime() < this._dates[1]!.getTime()\n          );\n\n        for (let i = 0; i < rangeDays.length; i++) {\n          const element = this.shadowRoot?.getElementById(\n            `${rangeDays[i].getTime()}`\n          )?.parentElement;\n\n          element?.classList?.add(\"range-day\");\n        }\n      });\n    }\n  }\n\n  createCalendarDays() {\n    const calendar: Calendar = new Map();\n\n    this._calendarDays = this.days\n      .slice(this.startOfWeek)\n      .concat(this.days.slice(0, this.startOfWeek));\n\n    const currentMonthStartWeekDay = this.getWeekDayOfDate(this._calendarYear, this._calendarMonth); // 1\n\n    const lastMonthDaysCount =\n      currentMonthStartWeekDay < this.startOfWeek\n        ? 7 - (this.startOfWeek - currentMonthStartWeekDay)\n        : currentMonthStartWeekDay - this.startOfWeek;\n\n    const previousMonthDayCount = this.getDayNumInAMonth(\n      this._calendarYear,\n      this._calendarMonth - 1\n    );\n\n    const currentMonthDayCount = this.getDayNumInAMonth(this._calendarYear, this._calendarMonth);\n\n    let dayOfTheWeek = this.startOfWeek; // from sunday\n\n    for (\n      let lastMonthDaysIterator = lastMonthDaysCount;\n      lastMonthDaysIterator > 0;\n      lastMonthDaysIterator--\n    ) {\n      const mod = dayOfTheWeek % 7;\n      const date = new Date(\n        this._calendarYear,\n        this._calendarMonth - 1,\n        previousMonthDayCount - lastMonthDaysIterator + 1\n      );\n\n      calendar.set(this.days[mod].name, [date]);\n\n      dayOfTheWeek += 1;\n    }\n    for (\n      let currentMonthDaysIterator = 1;\n      currentMonthDaysIterator <= currentMonthDayCount;\n      currentMonthDaysIterator++\n    ) {\n      const mod = dayOfTheWeek % 7;\n      const day = new Date(this._calendarYear, this._calendarMonth, currentMonthDaysIterator);\n\n      if (calendar.get(this.days[mod].name)) {\n        calendar.get(this.days[mod].name)?.push(day);\n      } else {\n        calendar.set(this.days[mod].name, [day]);\n      }\n      dayOfTheWeek += 1;\n    }\n\n    const index = this._calendarDays.findIndex(day => day.value === dayOfTheWeek % 7);\n\n    if (index !== 0) {\n      for (\n        let nextMonthDaysIterator = 1;\n        nextMonthDaysIterator <= this._calendarDays.length - index;\n        nextMonthDaysIterator++\n      ) {\n        const mod = dayOfTheWeek % 7;\n        const date = new Date(this._calendarYear, this._calendarMonth + 1, nextMonthDaysIterator);\n\n        calendar.get(this.days[mod].name)?.push(date);\n\n        dayOfTheWeek += 1;\n      }\n    }\n    return calendar;\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (changedProperties.has(\"value\")) {\n      const dates = formatToDateArray(this._value);\n\n      if (!dates.length) {\n        this._dates = [];\n        this._onBlCalendarChange([]);\n      } else {\n        dates?.forEach(date => {\n          this.handleDate(date);\n        });\n      }\n    }\n  }\n\n  renderCalendarHeader() {\n    const showMonthSelected =\n      this._calendarView === CALENDAR_VIEWS.MONTHS ? \"header-text-hover\" : \"\";\n    const showYearSelected = this._calendarView === CALENDAR_VIEWS.YEARS ? \"header-text-hover\" : \"\";\n\n    return html`\n      <div class=\"calendar-header\">\n        <bl-button\n          class=\"arrow\"\n          icon=\"arrow_left\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          @click=\"${() => this.setPreviousCalendarView()}\"\n        ></bl-button>\n        <bl-button\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          class=\"header-text ${showMonthSelected}\"\n          @click=\"${() => this.setCurrentCalendarView(CALENDAR_VIEWS.MONTHS)}\"\n          >${this.months[this._calendarMonth].name}\n        </bl-button>\n        <bl-button\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          class=\"header-text ${showYearSelected}\"\n          @click=\"${() => this.setCurrentCalendarView(CALENDAR_VIEWS.YEARS)}\"\n          >${this._calendarYear}\n        </bl-button>\n        <bl-button\n          class=\"arrow\"\n          icon=\"arrow_right\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          @click=\"${() => this.setNextCalendarView()}\"\n        ></bl-button>\n      </div>\n    `;\n  }\n\n  renderCalendarDays() {\n    const calendarDays = this.createCalendarDays();\n    const valuesArray = Array.from(calendarDays.values());\n\n    return html`\n      <div class=\"week-row\">\n        ${[...calendarDays.keys()].map(key => {\n          return html` <div class=\"calendar-text weekday-text\">${key}</div> `;\n        })}\n      </div>\n      <div class=\"days-wrapper\">\n        ${[...Array(valuesArray[0].length).keys()].map(key => {\n          return html` <div class=\"week-row\">\n            ${valuesArray.map(values => {\n              const date = values[key];\n              const isSelectedDay = this.checkIfSelectedDate(date);\n              const isDayToday = this.checkIfDateIsToday(date);\n              const isDisabledDay = this.checkIfDateIsDisabled(date);\n\n              const classes = classMap({\n                \"day\": true,\n                \"calendar-text\": true,\n                \"today-day\": isDayToday,\n                \"selected-day\": isSelectedDay,\n                \"other-month-day\": values[key].getMonth() !== this._calendarMonth,\n                \"disabled-day\": isDisabledDay,\n              });\n\n              return html`\n                <div class=\"day-wrapper\">\n                  <bl-button\n                    id=${date.getTime()}\n                    variant=\"tertiary\"\n                    kind=\"neutral\"\n                    size=\"small\"\n                    class=${classes}\n                    ?disabled=${isDisabledDay}\n                    @click=\"${() => !isDisabledDay && this.handleDate(date)}\"\n                  >\n                    ${date.getDate()}\n                  </bl-button>\n                </div>\n              `;\n            })}\n          </div>`;\n        })}\n      </div>\n      </div>`;\n  }\n\n  renderCalendarMonths() {\n    return html` <div class=\"grid-content\">\n      ${this.months.map((month, index) => {\n        const variant = month.value === this._calendarMonth ? \"primary\" : \"tertiary\";\n        const neutral = month.value === this._calendarMonth ? \"default\" : \"neutral\";\n\n        return html` <bl-button\n          variant=${variant}\n          kind=${neutral}\n          class=\"grid-item\"\n          size=\"small\"\n          @click=\"${() => this.setMonthAndCalendarView(index)}\"\n          ><span class=\"calendar-text\">${month.name}</span></bl-button\n        >`;\n      })}\n    </div>`;\n  }\n\n  renderCalendarYears() {\n    this.generateSurroundingYears();\n    return html` <div class=\"grid-content\">\n      ${this._calendarYears.map(year => {\n        const variant = year === this._calendarYear ? \"primary\" : \"tertiary\";\n        const neutral = year === this._calendarYear ? \"default\" : \"neutral\";\n\n        return html` <bl-button\n          variant=${variant}\n          kind=${neutral}\n          class=\"grid-item\"\n          @click=\"${() => this.setYearAndCalendarView(year)}\"\n          ><span class=\"calendar-text\">${year}</span></bl-button\n        >`;\n      })}\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <div>\n        <div class=\"calendar-content\">\n          <div class=\"calendar\">\n            ${this.renderCalendarHeader()}\n            ${this._calendarView === CALENDAR_VIEWS.DAYS ? this.renderCalendarDays() : \"\"}\n            ${this._calendarView === CALENDAR_VIEWS.MONTHS ? this.renderCalendarMonths() : \"\"}\n            ${this._calendarView === CALENDAR_VIEWS.YEARS ? this.renderCalendarYears() : \"\"}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["stringToDateArray", "value", "tempValue", "splitDates", "date", "isDate", "DatepickerCalendarMixin", "s", "disabledDates", "newVal", "stringToDateArray", "d", "maxDate", "minDate", "value", "oldValue", "__decorateClass", "e", "formatToDateArray", "value", "stringToDateArray", "styles", "i", "bl_calendar_default", "BlCalendar", "DatepickerCalendarMixin", "bl_calendar_default", "setDirectionProperty", "month", "day", "year", "fromYear", "_", "i", "view", "_a", "date", "isDateBeforeThanCalendar", "isDateAfterThanCalendar", "calendarDate", "_b", "_c", "d", "tempEndDate", "today", "disabledDate", "_d", "_e", "_f", "_g", "_h", "_i", "startDateParentElement", "endDateParentElement", "rangeDays", "element", "calendar", "currentMonthStartWeekDay", "lastMonthDaysCount", "previousMonthDayCount", "currentMonthDayCount", "dayOfTheWeek", "lastMonthDaysIterator", "mod", "currentMonthDaysIterator", "index", "nextMonthDaysIterator", "changedProperties", "dates", "formatToDateArray", "showMonthSelected", "showYearSelected", "x", "calendarDays", "valuesArray", "key", "values", "isSelectedDay", "isDayToday", "isDisabledDay", "classes", "o", "variant", "neutral", "__decorateClass", "t", "event", "e", "localized"]
 }

package/dist/components/calendar/bl-calendar.js

@@ -1,2 +1,2 @@
-import{b as a}from"../../chunk-4KQZCR3J.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{b as a}from"../../chunk-S6HEBXIR.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-calendar.js.map

package/dist/components/calendar/bl-calendar.types.d.ts

@@ -1,7 +1,7 @@
-import { CALENDAR_TYPES, CALENDAR_VIEWS } from "./bl-calendar.constant";
+import { CALENDAR_VIEWS } from "./bl-calendar.constant";
 export type DayValues = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CalendarView = CALENDAR_VIEWS;
-export type CalendarType = CALENDAR_TYPES;
+export type CalendarType = "single" | "multiple" | "range";
 export type CalendarDay = {
     value: number;
     name: string;

package/dist/components/calendar/bl-calendar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-calendar.types.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/bl-calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC;AAC1C,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC"}
+{"version":3,"file":"bl-calendar.types.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/bl-calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC"}

package/dist/components/datepicker/bl-datepicker.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-QPODIOFV.js";import"../../chunk-QMVEWMEI.js";import"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-757CMI4A.js";import"../../chunk-23PSWIUF.js";import"../../chunk-4KQZCR3J.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
+import{a}from"../../chunk-CJDCQC7C.js";import"../../chunk-QMVEWMEI.js";import"../../chunk-BNUJWONI.js";import"../../chunk-EZSEQHRH.js";import"../../chunk-757CMI4A.js";import"../../chunk-23PSWIUF.js";import"../../chunk-S6HEBXIR.js";import"../../chunk-IPYZIIRV.js";import"../../chunk-WEEGH2F4.js";import"../../chunk-EG7U7PM3.js";import"../../chunk-XDUIVR6I.js";import"../../chunk-HZ6A5QFC.js";import"../../chunk-AYJMIZZ3.js";import"../../chunk-VU6LRFZR.js";import"../../chunk-IGNJQVQF.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-HBPBDC7T.js";import"../../chunk-DINNT5P2.js";import"../../chunk-BH64QNLE.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-5MOOXA2X.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";export{a as default};
 //# sourceMappingURL=bl-datepicker.js.map

package/dist/components/dialog/bl-dialog.stories.d.ts

@@ -28,4 +28,5 @@ export declare const DialogWithFullWidthActions: Story;
 export declare const DialogWithTabGroup: Story;
 export declare const CriticalDialog: Story;
 export declare const CaptionLineClampDialog: Story;
+export declare const RTLSupport: Story;
 //# sourceMappingURL=bl-dialog.stories.d.ts.map

package/dist/components/dialog/bl-dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAkKlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC"}
+{"version":3,"file":"bl-dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/bl-dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAOhE,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAkMlC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAYrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAGF,eAAO,MAAM,0BAA0B,EAAE,KAUxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC"}

package/dist/components/dialog/bl-dialog.stories.js

@@ -1,4 +1,4 @@
-import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT5P2.js";import{b as l}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var m={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[c],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},q=m,t=i=>async()=>{let a=document.getElementById(i);a.open=!0},o=i=>e`
+import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT5P2.js";import{b as s}from"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import{b as e}from"../../chunk-4OT5AMS5.js";import"../../chunk-IZ2LK5GK.js";var d={title:"Components/Dialog",component:"bl-dialog",parameters:{chromatic:{viewports:[1e3]},controls:{exclude:["id"]}},decorators:[c],argTypes:{open:{control:"boolean"},polyfilled:{control:"boolean"},caption:{control:"text"},content:{control:"text"}}},q=d,t=i=>async()=>{let a=document.getElementById(i);a.open=!0},o=i=>e`
 <bl-button @bl-click="${t(i.id)}" variant="secondary">Open Dialog</bl-button>
 
 <bl-dialog
@@ -8,7 +8,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
   ?open="${i.open}"
   ?polyfilled="${i.polyfilled}"
   ?critical="${i.critical}">
-    ${l(i.content)}${i.primaryAction?e`
+    ${s(i.content)}${i.primaryAction?e`
 
   <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusPrimary} size="large">${i.primaryAction}</bl-button>`:""}${i.secondaryAction?e`
   <bl-button slot="secondary-action" variant="secondary" ?autofocus=${i.focusSecondary} size="large">${i.secondaryAction}</bl-button>`:""}${i.tertiaryAction?e`
@@ -16,7 +16,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
   ${i.closeAction?e`
     <bl-button slot="primary-action" variant="primary" ?autofocus=${i.focusSecondary} size="large" @click=${a=>{var r;return(r=a.target.closest("bl-dialog"))==null?void 0:r.toggleAttribute("open")}}>${i.closeAction}</bl-button>`:""}
 </bl-dialog>
-`,s=i=>e`
+`,l=i=>e`
 <style>
   bl-dialog.full-width-actions bl-button {
     --bl-button-display: block;
@@ -25,7 +25,7 @@ import{a as c}from"../../chunk-HSVSMABT.js";import{a as n}from"../../chunk-DINNT
 </style>
 
 ${o({...i,className:"full-width-actions"})}
-`,d=i=>e`
+`,m=i=>e`
 <style>
   bl-dialog.limited-width .content {
     max-width: 500px;
@@ -124,7 +124,7 @@ when an unknown printer took a galley of type and scrambled it to make a type sp
 </p>
 
 `})}
-`,y=i=>e`
+`,b=i=>e`
 <style>
   #dl-caption-line-clamp {
     --bl-dialog-width: 31rem;
@@ -133,5 +133,35 @@ when an unknown printer took a galley of type and scrambled it to make a type sp
 </style>
 
 ${o({...i,caption:"I am a very long text I am a very long text I am a very long text",content:"You can adjust the line clamp"})}
-`,v={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},L={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:d,play:t("dl-sticky-footer")},w={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel",caption:"I am a long text but I will not block the width."},render:u,play:t("dl-sizing")},k={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},D={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},C={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:s,play:t("dl-full-width-action")},T={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:s,play:t("dl-full-width-actions")},$={args:{id:"dl-tab-group",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:p,play:t("dl-tab-group")},I={args:{id:"dl-critical",caption:"Critical Action Required",content:"<p>This action is irreversible. Please confirm to proceed.</p>",closeAction:"Confirm",critical:!0},render:s,play:t("dl-critical")},S={args:{id:"dl-caption-line-clamp",closeAction:"Confirm"},render:y,play:t("dl-caption-line-clamp")};export{v as BasicUsage,S as CaptionLineClampDialog,I as CriticalDialog,w as DialogSizing,k as DialogWithFocusedAction,D as DialogWithFocusedInput,C as DialogWithFullWidthAction,T as DialogWithFullWidthActions,L as DialogWithStickyFooter,$ as DialogWithTabGroup,q as default};
+`,y=i=>e`
+  <div style="display: flex; gap: 32px;">
+    <!-- LTR Example -->
+    <div>
+      <bl-button @bl-click="${t(`${i.id}-ltr`)}" variant="secondary">Open LTR Dialog</bl-button>
+      <bl-dialog
+        id="${i.id}-ltr"
+        caption="Delete Confirmation"
+        ?critical="${i.critical}">
+        <p>Are you sure you want to delete this file? This action cannot be undone.</p>
+        <bl-alert icon variant="warning">All associated data will be permanently deleted.</bl-alert>
+        <bl-button slot="primary-action" variant="primary" size="large">Delete</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">Cancel</bl-button>
+      </bl-dialog>
+    </div>
+
+    <!-- RTL Example -->
+    <div dir="rtl">
+      <bl-button @bl-click="${t(`${i.id}-rtl`)}" variant="secondary">Open RTL Dialog</bl-button>
+      <bl-dialog
+        id="${i.id}-rtl"
+        caption="تأكيد الحذف"
+        ?critical="${i.critical}">
+        <p>هل أنت متأكد أنك تريد حذف هذا الملف؟ لا يمكن التراجع عن هذا الإجراء.</p>
+        <bl-alert icon variant="warning">سيتم حذف جميع البيانات المرتبطة بشكل دائم.</bl-alert>
+        <bl-button slot="primary-action" variant="primary" size="large">حذف</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">إلغاء</bl-button>
+      </bl-dialog>
+    </div>
+  </div>
+`,L={args:{id:"dl-basic",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:o,play:t("dl-basic")},T={args:{id:"dl-sticky-footer",caption:"Terms And Conditions",primaryAction:"Agree",secondaryAction:"Disagree"},render:m,play:t("dl-sticky-footer")},w={args:{id:"dl-sizing",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel",caption:"I am a long text but I will not block the width."},render:u,play:t("dl-sizing")},D={args:{id:"dl-focused-action",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",focusSecondary:!0,tertiaryAction:"Cancel"},render:o,play:t("dl-focused-action")},$={args:{id:"dl-focused-input",caption:"Name your file",content:'<p>Please provide a name for your file</p><bl-input placeholder="filename.pdf" autofocus></bl-input>',primaryAction:"OK",tertiaryAction:"Cancel"},render:o,play:t("dl-focused-input")},k={args:{id:"dl-full-width-action",caption:"Action completed",content:"<p>Your process is done!</p>",primaryAction:"OK"},render:l,play:t("dl-full-width-action")},C={args:{id:"dl-full-width-actions",caption:"Are you sure to delete?",content:"<p>Do you want to really delete the file?</p>",primaryAction:"Delete",secondaryAction:"Cancel"},render:l,play:t("dl-full-width-actions")},S={args:{id:"dl-tab-group",caption:"Use location service?",content:"Let us help determine location. This means sending anonymous location data to us.",primaryAction:"Agree",secondaryAction:"Disagree",tertiaryAction:"Cancel"},render:p,play:t("dl-tab-group")},I={args:{id:"dl-critical",caption:"Critical Action Required",content:"<p>This action is irreversible. Please confirm to proceed.</p>",closeAction:"Confirm",critical:!0},render:l,play:t("dl-critical")},U={args:{id:"dl-caption-line-clamp",closeAction:"Confirm"},render:b,play:t("dl-caption-line-clamp")},E={args:{id:"dl-rtl"},render:y,parameters:{docs:{description:{story:'The dialog component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir="rtl"` attribute on the parent element.'}}}};export{L as BasicUsage,U as CaptionLineClampDialog,I as CriticalDialog,w as DialogSizing,D as DialogWithFocusedAction,$ as DialogWithFocusedInput,k as DialogWithFullWidthAction,C as DialogWithFullWidthActions,T as DialogWithStickyFooter,S as DialogWithTabGroup,E as RTLSupport,q as default};
 //# sourceMappingURL=bl-dialog.stories.js.map

package/dist/components/dialog/bl-dialog.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog/bl-dialog.stories.ts"],
-  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n  critical?: boolean;\n  closeAction?: string;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\"\n  ?critical=\"${args.critical}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n  ${\n    args.closeAction ? html`\n    <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusSecondary} size=\"large\" @click=${(e: CustomEvent) => (e.target as HTMLElement).closest(\"bl-dialog\")?.toggleAttribute(\"open\")}>${args.closeAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-sizing {\n    --bl-dialog-width: 31rem;\n  }\n\n  .my-dialog-content {\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nconst TabGroupTemplate = (args: DialogArgs) => html`\n<style>\n  .tab-dialog-content {\n    height:50px;\n    margin-top: 20px;\n  }\n</style>\n\n${BasicTemplate({...args, content: `\n<bl-tab-group>\n  <bl-tab name=\"test-1\" slot=\"tabs\" caption=\"Caption\">Tab 1</bl-tab>\n  <bl-tab name=\"test-2\" slot=\"tabs\">Tab 2</bl-tab>\n  <bl-tab name=\"test-3\" slot=\"tabs\" disabled caption=\"Caption\">Tab 3</bl-tab>\n</bl-tab-group>\n<p class=\"tab-dialog-content\">\nNormal dialog contents has default padding in bl-dialog component. But bl-tab-group has full width in bl-dialog component.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.\n</p>\n\n` })}\n`;\n\nconst CaptionLineClampTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-caption-line-clamp {\n    --bl-dialog-width: 31rem;\n    --bl-dialog-caption-line-clamp: 2;\n  }\n</style>\n\n${BasicTemplate({...args, caption: \"I am a very long text I am a very long text I am a very long text\", content: \"You can adjust the line clamp\" })}\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n    caption: \"I am a long text but I will not block the width.\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n\nexport const DialogWithTabGroup: Story = {\n  args: {\n    id: \"dl-tab-group\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: TabGroupTemplate,\n  play: dialogOpener(\"dl-tab-group\")\n};\n\nexport const CriticalDialog: Story = {\n  args: {\n    id: \"dl-critical\",\n    caption: \"Critical Action Required\",\n    content: \"<p>This action is irreversible. Please confirm to proceed.</p>\",\n    closeAction: \"Confirm\",\n    critical: true,\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-critical\")\n};\n\nexport const CaptionLineClampDialog: Story = {\n  args: {\n    id: \"dl-caption-line-clamp\",\n    closeAction: \"Confirm\"\n  },\n  render: CaptionLineClampTemplate,\n  play: dialogOpener(\"dl-caption-line-clamp\")\n};\n"],
-  "mappings": "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",
-  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "e", "_a", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "TabGroupTemplate", "CaptionLineClampTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions", "DialogWithTabGroup", "CriticalDialog", "CaptionLineClampDialog"]
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type BlDialog from \"./bl-dialog\";\n\nconst meta: Meta = {\n  title: \"Components/Dialog\",\n  component: \"bl-dialog\",\n  parameters: {\n    chromatic: {\n      viewports: [1000]\n    },\n    controls: {\n      exclude: [\"id\"],\n    }\n  },\n  decorators: [\n    fullscreenLayout,\n  ],\n  argTypes: {\n    open: {\n      control: \"boolean\",\n    },\n    polyfilled: {\n      control: \"boolean\",\n    },\n    caption: {\n      control: \"text\"\n    },\n    content: {\n      control: \"text\"\n    }\n  }\n};\n\nexport default meta;\n\ninterface DialogArgs {\n  id: string;\n  className?: string;\n  caption?: string;\n  open?: boolean;\n  polyfilled?: boolean;\n  content?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  tertiaryAction?: string;\n  focusPrimary?: boolean;\n  focusSecondary?: boolean;\n  focusTertiary?: boolean;\n  critical?: boolean;\n  closeAction?: string;\n}\n\ntype Story = StoryObj<DialogArgs>;\n\nconst dialogOpener = (dialogId: string) => async () => {\n  const dialog = document.getElementById(dialogId) as BlDialog;\n\n  dialog.open = true;\n};\n\nconst BasicTemplate = (args: DialogArgs) => html`\n<bl-button @bl-click=\"${dialogOpener(args.id)}\" variant=\"secondary\">Open Dialog</bl-button>\n\n<bl-dialog\n  id=${args.id}\n  class=\"${ifDefined(args.className)}\"\n  caption=\"${ifDefined(args.caption)}\"\n  ?open=\"${args.open}\"\n  ?polyfilled=\"${args.polyfilled}\"\n  ?critical=\"${args.critical}\">\n    ${\n      unsafeHTML(args.content)\n    }${\n      args.primaryAction ? html`\n\n  <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusPrimary} size=\"large\">${args.primaryAction}</bl-button>` : \"\"}${\n      args.secondaryAction ? html`\n  <bl-button slot=\"secondary-action\" variant=\"secondary\" ?autofocus=${args.focusSecondary} size=\"large\">${args.secondaryAction}</bl-button>` : \"\"}${\n      args.tertiaryAction ? html`\n  <bl-button slot=\"tertiary-action\" variant=\"tertiary\" ?autofocus=${args.focusTertiary} size=\"large\">${args.tertiaryAction}</bl-button>` : \"\"}\n  ${\n    args.closeAction ? html`\n    <bl-button slot=\"primary-action\" variant=\"primary\" ?autofocus=${args.focusSecondary} size=\"large\" @click=${(e: CustomEvent) => (e.target as HTMLElement).closest(\"bl-dialog\")?.toggleAttribute(\"open\")}>${args.closeAction}</bl-button>` : \"\"}\n</bl-dialog>\n`;\n\nconst FullWidthActionsTemplate = (args: DialogArgs) => html`\n<style>\n  bl-dialog.full-width-actions bl-button {\n    --bl-button-display: block;\n    flex: 1;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"full-width-actions\"})}\n`;\n\nconst TemplateWithStickyFooter = (args: DialogArgs) => html`\n<style>\n  bl-dialog.limited-width .content {\n    max-width: 500px;\n    max-height: 500px;\n  }\n</style>\n\n${BasicTemplate({...args, className: \"limited-width\", content: `<div class=\"content\">\n  <bl-alert icon>Please read all terms and conditions.</bl-alert>\n  <h4>Lorem ipsum dolor sit amet</h4>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n   Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.\n  Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form\n  accompanied by English versions from the 1914 translation by H. Rackham.</p>\n  <h4>Quis autem vel eum iure reprehenderit qui</h4>\n  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry\n  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scramble\n  it to make a type specimen book.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <ul>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>\n    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>\n  </ul>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun ut labore et dolore magna aliqua.\n  Ut enim ad minim veniam, quis nostrud exercitatioullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n</div>`\n})}`;\n\nconst SizingTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-sizing {\n    --bl-dialog-width: 31rem;\n  }\n\n  .my-dialog-content {\n    height:200px;\n    margin:0;\n    padding:0;\n  }\n</style>\n\n${BasicTemplate({...args, content: `<p class=\"my-dialog-content\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,\nremaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.\nContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,\na Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites\nof the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\"\n(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,\n\"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>` })}\n`;\n\nconst TabGroupTemplate = (args: DialogArgs) => html`\n<style>\n  .tab-dialog-content {\n    height:50px;\n    margin-top: 20px;\n  }\n</style>\n\n${BasicTemplate({...args, content: `\n<bl-tab-group>\n  <bl-tab name=\"test-1\" slot=\"tabs\" caption=\"Caption\">Tab 1</bl-tab>\n  <bl-tab name=\"test-2\" slot=\"tabs\">Tab 2</bl-tab>\n  <bl-tab name=\"test-3\" slot=\"tabs\" disabled caption=\"Caption\">Tab 3</bl-tab>\n</bl-tab-group>\n<p class=\"tab-dialog-content\">\nNormal dialog contents has default padding in bl-dialog component. But bl-tab-group has full width in bl-dialog component.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\nwhen an unknown printer took a galley of type and scrambled it to make a type specimen book.\n</p>\n\n` })}\n`;\n\nconst CaptionLineClampTemplate = (args: DialogArgs) => html`\n<style>\n  #dl-caption-line-clamp {\n    --bl-dialog-width: 31rem;\n    --bl-dialog-caption-line-clamp: 2;\n  }\n</style>\n\n${BasicTemplate({...args, caption: \"I am a very long text I am a very long text I am a very long text\", content: \"You can adjust the line clamp\" })}\n`;\n\nconst RTLTemplate = (args: DialogArgs) => html`\n  <div style=\"display: flex; gap: 32px;\">\n    <!-- LTR Example -->\n    <div>\n      <bl-button @bl-click=\"${dialogOpener(`${args.id}-ltr`)}\" variant=\"secondary\">Open LTR Dialog</bl-button>\n      <bl-dialog\n        id=\"${args.id}-ltr\"\n        caption=\"Delete Confirmation\"\n        ?critical=\"${args.critical}\">\n        <p>Are you sure you want to delete this file? This action cannot be undone.</p>\n        <bl-alert icon variant=\"warning\">All associated data will be permanently deleted.</bl-alert>\n        <bl-button slot=\"primary-action\" variant=\"primary\" size=\"large\">Delete</bl-button>\n        <bl-button slot=\"secondary-action\" variant=\"secondary\" size=\"large\">Cancel</bl-button>\n      </bl-dialog>\n    </div>\n\n    <!-- RTL Example -->\n    <div dir=\"rtl\">\n      <bl-button @bl-click=\"${dialogOpener(`${args.id}-rtl`)}\" variant=\"secondary\">Open RTL Dialog</bl-button>\n      <bl-dialog\n        id=\"${args.id}-rtl\"\n        caption=\"\u062A\u0623\u0643\u064A\u062F \u0627\u0644\u062D\u0630\u0641\"\n        ?critical=\"${args.critical}\">\n        <p>\u0647\u0644 \u0623\u0646\u062A \u0645\u062A\u0623\u0643\u062F \u0623\u0646\u0643 \u062A\u0631\u064A\u062F \u062D\u0630\u0641 \u0647\u0630\u0627 \u0627\u0644\u0645\u0644\u0641\u061F \u0644\u0627 \u064A\u0645\u0643\u0646 \u0627\u0644\u062A\u0631\u0627\u062C\u0639 \u0639\u0646 \u0647\u0630\u0627 \u0627\u0644\u0625\u062C\u0631\u0627\u0621.</p>\n        <bl-alert icon variant=\"warning\">\u0633\u064A\u062A\u0645 \u062D\u0630\u0641 \u062C\u0645\u064A\u0639 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0645\u0631\u062A\u0628\u0637\u0629 \u0628\u0634\u0643\u0644 \u062F\u0627\u0626\u0645.</bl-alert>\n        <bl-button slot=\"primary-action\" variant=\"primary\" size=\"large\">\u062D\u0630\u0641</bl-button>\n        <bl-button slot=\"secondary-action\" variant=\"secondary\" size=\"large\">\u0625\u0644\u063A\u0627\u0621</bl-button>\n      </bl-dialog>\n    </div>\n  </div>\n`;\n\nexport const BasicUsage: Story = {\n  args: {\n    id: \"dl-basic\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-basic\")\n};\n\nexport const DialogWithStickyFooter: Story = {\n  args: {\n    id: \"dl-sticky-footer\",\n    caption: \"Terms And Conditions\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n  },\n  render: TemplateWithStickyFooter,\n  play: dialogOpener(\"dl-sticky-footer\")\n};\n\nexport const DialogSizing: Story = {\n  args: {\n    id: \"dl-sizing\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n    caption: \"I am a long text but I will not block the width.\"\n  },\n  render: SizingTemplate,\n  play: dialogOpener(\"dl-sizing\")\n};\n\nexport const DialogWithFocusedAction: Story = {\n  args: {\n    id: \"dl-focused-action\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    focusSecondary: true,\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-action\")\n};\n\nexport const DialogWithFocusedInput: Story = {\n  args: {\n    id: \"dl-focused-input\",\n    caption: \"Name your file\",\n    content: '<p>Please provide a name for your file</p><bl-input placeholder=\"filename.pdf\" autofocus></bl-input>',\n    primaryAction: \"OK\",\n    tertiaryAction: \"Cancel\"\n  },\n  render: BasicTemplate,\n  play: dialogOpener(\"dl-focused-input\")\n};\n\nexport const DialogWithFullWidthAction: Story = {\n  args: {\n    id: \"dl-full-width-action\",\n    caption: \"Action completed\",\n    content: \"<p>Your process is done!</p>\",\n    primaryAction: \"OK\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-action\")\n};\n\n\nexport const DialogWithFullWidthActions: Story = {\n  args: {\n    id: \"dl-full-width-actions\",\n    caption: \"Are you sure to delete?\",\n    content: \"<p>Do you want to really delete the file?</p>\",\n    primaryAction: \"Delete\",\n    secondaryAction: \"Cancel\"\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-full-width-actions\")\n};\n\nexport const DialogWithTabGroup: Story = {\n  args: {\n    id: \"dl-tab-group\",\n    caption: \"Use location service?\",\n    content: \"Let us help determine location. This means sending anonymous location data to us.\",\n    primaryAction: \"Agree\",\n    secondaryAction: \"Disagree\",\n    tertiaryAction: \"Cancel\",\n  },\n  render: TabGroupTemplate,\n  play: dialogOpener(\"dl-tab-group\")\n};\n\nexport const CriticalDialog: Story = {\n  args: {\n    id: \"dl-critical\",\n    caption: \"Critical Action Required\",\n    content: \"<p>This action is irreversible. Please confirm to proceed.</p>\",\n    closeAction: \"Confirm\",\n    critical: true,\n  },\n  render: FullWidthActionsTemplate,\n  play: dialogOpener(\"dl-critical\")\n};\n\nexport const CaptionLineClampDialog: Story = {\n  args: {\n    id: \"dl-caption-line-clamp\",\n    closeAction: \"Confirm\"\n  },\n  render: CaptionLineClampTemplate,\n  play: dialogOpener(\"dl-caption-line-clamp\")\n};\n\nexport const RTLSupport: Story = {\n  args: {\n    id: \"dl-rtl\",\n  },\n  render: RTLTemplate,\n  parameters: {\n    docs: {\n      description: {\n        story: 'The dialog component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir=\"rtl\"` attribute on the parent element.'\n      }\n    }\n  }\n};\n"],
+  "mappings": "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",
+  "names": ["meta", "fullscreenLayout", "bl_dialog_stories_default", "dialogOpener", "dialogId", "dialog", "BasicTemplate", "args", "x", "l", "o", "e", "_a", "FullWidthActionsTemplate", "TemplateWithStickyFooter", "SizingTemplate", "TabGroupTemplate", "CaptionLineClampTemplate", "RTLTemplate", "BasicUsage", "DialogWithStickyFooter", "DialogSizing", "DialogWithFocusedAction", "DialogWithFocusedInput", "DialogWithFullWidthAction", "DialogWithFullWidthActions", "DialogWithTabGroup", "CriticalDialog", "CaptionLineClampDialog", "RTLSupport"]
 }

package/dist/components/notification/bl-notification.stories.d.ts

@@ -15,4 +15,5 @@ export declare const SecondaryActionExample: Story;
 export declare const ActionsRemoveExample: Story;
 export declare const PermanentExample: Story;
 export declare const VariantsExample: Story;
+export declare const RTLExample: Story;
 //# sourceMappingURL=bl-notification.stories.d.ts.map

package/dist/components/notification/bl-notification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AA4B/C,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsChC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6BpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8F7B,CAAC"}
+{"version":3,"file":"bl-notification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/notification/bl-notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,KAAK,EAAgB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEzE,QAAA,MAAM,IAAI,EAAE,IAqEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAYpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,iBAAiB,CAAC;AAEtB,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AA4B/C,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsChC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA6BpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8F7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA8LxB,CAAC"}

package/dist/components/notification/bl-notification.stories.js

@@ -1,9 +1,9 @@
-import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e}from"../../chunk-IZ2LK5GK.js";var N={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[s],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},S=N,c=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},A=i=>JSON.stringify(i,null,6),n=i=>t`
+import{a as s}from"../../chunk-HSVSMABT.js";import{a as r}from"../../chunk-DINNT5P2.js";import{b as t}from"../../chunk-4OT5AMS5.js";import{e as n}from"../../chunk-IZ2LK5GK.js";var A={title:"Components/Notification",component:"bl-notification",parameters:{chromatic:{viewports:[1e3]}},decorators:[s],argTypes:{duration:{control:"number",description:"Duration in seconds",defaultValue:7},caption:{control:"text",description:"Caption of the notification"},description:{control:"text",description:"Description of the notification. Required."},icon:{control:"text",defaultValue:"true",description:"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon."},variant:{options:["info","warning","success","error"],default:"info",control:{type:"select"},description:"Variant of the notification"},permanent:{control:"boolean",defaultValue:!1,description:"If true, the notification will not have duration and will be removed when the user clicks on the close button."},primaryAction:{control:"object",description:"Primary action of the notification. onClick and label properties are required."},secondaryAction:{control:"object",description:"Secondary action of the notification. onClick and label properties are required."}},args:{noAnimation:!1,duration:20,caption:"Notification Caption",description:"Notification Description",icon:"true",variant:"info",permanent:!1,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}}},g=A,a=i=>{let o=document.querySelector("bl-notification");return o==null?void 0:o.addNotification(i)},b=i=>JSON.stringify(i,null,6),e=i=>t`
   <bl-notification
     ?no-animation=${i.noAnimation}
-    duration=${l(i.duration)}
+    duration=${r(i.duration)}
   ></bl-notification>
-`,f,r=(i,o="Add Notification")=>{let a=o.toLowerCase().replace(/\s/g,"-");return t(f||(f=e([`
+`,f,c=(i,o="Add Notification")=>{let l=o.toLowerCase().replace(/\s/g,"-");return t(f||(f=n([`
     <bl-button id=`,">",`</bl-button>
 
     <script>
@@ -16,7 +16,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
         });
       })();
     <\/script>
-  `])),a,o,a,A(i))},k={render(i){return t`${n(i)} ${r(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{c(i),c({...i,variant:"success"}),c({...i,variant:"warning"}),c({...i,variant:"error"})}},p,E={render(i){return t(p||(p=e([`
+  `])),l,o,l,b(i))},S={render(i){return t`${e(i)} ${c(i)} `},args:{duration:60,primaryAction:void 0,secondaryAction:void 0},play:({args:i})=>{a(i),a({...i,variant:"success"}),a({...i,variant:"warning"}),a({...i,variant:"error"})}},d,k={render(i){return t(d||(d=n([`
       `,`
       <bl-button>Remove Notification</bl-button>
 
@@ -36,7 +36,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},d,w={render(i){return t(d||(d=e([`
+    `])),e(i))}},p,E={render(i){return t(p||(p=n([`
       `,`
       <bl-button>Remove Notifications</bl-button>
 
@@ -70,7 +70,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},m,g={render(i){return t(m||(m=e([`
+    `])),e(i))}},m,h={render(i){return t(m||(m=n([`
       `,`
       <script>
         (function () {
@@ -89,7 +89,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},u,x={render(i){return t(u||(u=e([`
+    `])),e(i))}},u,w={render(i){return t(u||(u=n([`
       `,`
       <script>
         (function () {
@@ -114,7 +114,7 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))}},y,$={render(i){return t(y||(y=e([`
+    `])),e(i))}},y,$={render(i){return t(y||(y=n([`
       `,`
       <script>
         (function () {
@@ -139,11 +139,193 @@ import{a as s}from"../../chunk-HSVSMABT.js";import{a as l}from"../../chunk-DINNT
           });
         })();
       <\/script>
-    `])),n(i))},play:()=>{c({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},h={render(i){return t` ${n(i)} ${r(i)} `},args:{permanent:!0},play:({args:i})=>{c(i)}},P={render(i){return t`
-      ${n(i)}
-      ${r({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
-      ${r({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
-    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)c({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}};export{$ as ActionsRemoveExample,k as AddExample,h as PermanentExample,g as PrimaryActionExample,w as RemoveAwaitExample,E as RemoveExample,x as SecondaryActionExample,P as VariantsExample,S as default};
+    `])),e(i))},play:()=>{a({caption:"Notification Caption",description:"Notification Description",permanent:!0,primaryAction:{label:"Primary Action",onClick:i=>{i.remove()}},secondaryAction:{label:"Secondary Action",onClick:i=>{i.remove()}}})}},L={render(i){return t` ${e(i)} ${c(i)} `},args:{permanent:!0},play:({args:i})=>{a(i)}},P={render(i){return t`
+      ${e(i)}
+      ${c({caption:"Notification Caption",description:"Notification Variant: info",permanent:!0,variant:"info",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Info")}
+      ${c({caption:"Notification Caption",description:"Notification Variant: success",permanent:!0,variant:"success",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Success")}
+      ${c({caption:"Notification Caption",description:"Notification Variant: warning",permanent:!0,variant:"warning",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Warning")}
+      ${c({caption:"Notification Caption",description:"Notification Variant: error",permanent:!0,variant:"error",primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}},"Error")}
+    `},play:()=>{let i=["info","success","warning","error"];for(let o of i)a({caption:"Notification Caption",description:`Notification Variant: ${o}`,permanent:!0,variant:o,primaryAction:{label:"Primary Action",onClick(){}},secondaryAction:{label:"Secondary Action",onClick(){}}})}},N,R={render(i){return t(N||(N=n([`
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <!-- Interactive Controls -->
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <bl-button id="add-notifications" variant="primary">Add Sample Notifications</bl-button>
+          <bl-button id="clear-notifications" variant="danger">Clear All</bl-button>
+        </div>
+
+        <!-- Demo Container -->
+        <div style="display: flex; gap: 32px;">
+          <!-- LTR Example -->
+          <div style="flex: 1; min-width: 400px;">
+            <bl-notification
+                id="ltr-notification"
+                ?no-animation=`,`
+                duration=`,`
+              ></bl-notification>
+          </div>
+
+          <!-- RTL Example -->
+          <div style="flex: 1; min-width: 400px;" dir="rtl">
+            <bl-notification
+                id="rtl-notification"
+                ?no-animation=`,`
+                duration=`,`
+              ></bl-notification>
+          </div>
+        </div>
+
+        <script>
+          (function() {
+            // Store active notifications for proper cleanup
+            let activeNotifications = {
+              ltr: [],
+              rtl: []
+            };
+
+            const ltrNotification = document.getElementById('ltr-notification');
+            const rtlNotification = document.getElementById('rtl-notification');
+            const addButton = document.getElementById('add-notifications');
+            const clearButton = document.getElementById('clear-notifications');
+
+            // Sample notifications data with different variants and configurations
+            const notificationExamples = [
+              {
+                variant: 'info',
+                caption: { en: 'Welcome Message', ar: '\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628' },
+                description: {
+                  en: 'Welcome to our application! We hope you enjoy your experience.',
+                  ar: '\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.'
+                },
+                icon: 'info',
+                primaryAction: {
+                  label: { en: 'Get Started', ar: '\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646' },
+                  onClick: () => {}
+                }
+              },
+              {
+                variant: 'success',
+                caption: { en: 'Task Completed', ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629' },
+                description: {
+                  en: 'Your task has been successfully completed.',
+                  ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.'
+                },
+                icon: 'check_fill'
+              },
+              {
+                variant: 'warning',
+                caption: { en: 'Storage Alert', ar: '\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646' },
+                description: {
+                  en: 'You are running low on storage space.',
+                  ar: '\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.'
+                },
+                icon: 'warning',
+                primaryAction: {
+                  label: { en: 'Upgrade', ar: '\u062A\u0631\u0642\u064A\u0629' },
+                  onClick: () => {}
+                },
+                secondaryAction: {
+                  label: { en: 'Learn More', ar: '\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F' },
+                  onClick: () => {}
+                }
+              },
+              {
+                variant: 'error',
+                caption: { en: 'Connection Error', ar: '\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644' },
+                description: {
+                  en: 'Unable to connect to the server. Please try again.',
+                  ar: '\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.'
+                },
+                icon: 'close_fill',
+                primaryAction: {
+                  label: { en: 'Retry', ar: '\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629' },
+                  onClick: () => {}
+                }
+              }
+            ];
+
+            // Function to clear all notifications
+            const clearAllNotifications = async () => {
+              // Clear LTR notifications
+              if (activeNotifications.ltr.length > 0) {
+                for (const notification of activeNotifications.ltr) {
+                  await notification.remove();
+                }
+                activeNotifications.ltr = [];
+              }
+
+              // Clear RTL notifications
+              if (activeNotifications.rtl.length > 0) {
+                for (const notification of activeNotifications.rtl) {
+                  await notification.remove();
+                }
+                activeNotifications.rtl = [];
+              }
+            };
+
+            // Function to create notifications
+            const createNotifications = (isRTL) => {
+              const targetElement = isRTL ? rtlNotification : ltrNotification;
+              const lang = isRTL ? 'ar' : 'en';
+              const notificationList = isRTL ? activeNotifications.rtl : activeNotifications.ltr;
+
+              notificationExamples.forEach((example, index) => {
+                setTimeout(() => {
+                  const notification = targetElement.addNotification({
+                    variant: example.variant,
+                    caption: example.caption[lang],
+                    description: example.description[lang],
+                    icon: example.icon,
+                    permanent: true,
+                    ...(example.primaryAction && {
+                      primaryAction: {
+                        label: example.primaryAction.label[lang],
+                        onClick: () => {
+                          example.primaryAction.onClick();
+                          notification.remove();
+                          const index = notificationList.indexOf(notification);
+                          if (index > -1) {
+                            notificationList.splice(index, 1);
+                          }
+                        }
+                      }
+                    }),
+                    ...(example.secondaryAction && {
+                      secondaryAction: {
+                        label: example.secondaryAction.label[lang],
+                        onClick: () => {
+                          example.secondaryAction.onClick();
+                          notification.remove();
+                          const index = notificationList.indexOf(notification);
+                          if (index > -1) {
+                            notificationList.splice(index, 1);
+                          }
+                        }
+                      }
+                    })
+                  });
+
+                  // Store the notification reference
+                  notificationList.push(notification);
+                }, index * 300); // Stagger the notifications
+              });
+            };
+
+            // Add button click handler
+            addButton.addEventListener('bl-click', () => {
+              clearAllNotifications().then(() => {
+                createNotifications(false); // LTR
+                createNotifications(true);  // RTL
+              });
+            });
+
+            // Clear button click handler
+            clearButton.addEventListener('bl-click', clearAllNotifications);
+
+            // Initial notifications
+            createNotifications(false);
+            createNotifications(true);
+          })();
+        <\/script>
+      </div>
+    `])),i.noAnimation,r(i.duration),i.noAnimation,r(i.duration))},args:{noAnimation:!0,duration:0}};export{$ as ActionsRemoveExample,S as AddExample,L as PermanentExample,h as PrimaryActionExample,R as RTLExample,E as RemoveAwaitExample,k as RemoveExample,w as SecondaryActionExample,P as VariantsExample,g as default};
 //# sourceMappingURL=bl-notification.stories.js.map

package/dist/components/notification/bl-notification.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notification/bl-notification.stories.ts"],
-  "sourcesContent": ["import { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { Meta, StoryObj } from \"@storybook/web-components\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { NotificationProps, Notification } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n"],
-  "mappings": "2KAMA,IAAMA,EAAa,CACjB,MAAO,0BACP,UAAW,kBACX,WAAY,CACV,UAAW,CACT,UAAW,CAAC,GAAI,CAClB,CACF,EACA,WAAY,CAACC,CAAgB,EAC7B,SAAU,CAER,SAAU,CACR,QAAS,SACT,YAAa,sBACb,aAAc,CAChB,EACA,QAAS,CACP,QAAS,OACT,YAAa,6BACf,EACA,YAAa,CACX,QAAS,OACT,YAAa,4CACf,EACA,KAAM,CACJ,QAAS,OACT,aAAc,OACd,YACE,4JACJ,EACA,QAAS,CACP,QAAS,CAAC,OAAQ,UAAW,UAAW,OAAO,EAC/C,QAAS,OACT,QAAS,CAAE,KAAM,QAAS,EAC1B,YAAa,6BACf,EACA,UAAW,CACT,QAAS,UACT,aAAc,GACd,YACE,gHACJ,EACA,cAAe,CACb,QAAS,SACT,YAAa,gFACf,EACA,gBAAiB,CACf,QAAS,SACT,YACE,kFACJ,CACF,EACA,KAAM,CACJ,YAAa,GACb,SAAU,GACV,QAAS,uBACT,YAAa,2BACb,KAAM,OACN,QAAS,OACT,UAAW,GACX,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,CACF,EAEOC,EAAQF,EAETG,EAAmBC,GAA+B,CACtD,IAAMC,EAAK,SAAS,cAAc,iBAAiB,EAEnD,OAAOA,GAAA,YAAAA,EAAI,gBAAgBD,EAC7B,EAEME,EAAiBC,GACd,KAAK,UAAUA,EAAM,KAAM,CAAC,EAU/BC,EAAiBD,GAA2BE;AAAA;AAAA,oBAE9BF,EAAK;AAAA,eACV,EAAUA,EAAK,QAAQ;AAAA;AAAA,EAnGtCG,EAuGMC,EAAsB,CAACJ,EAAyBK,EAAc,qBAAuB,CACzF,IAAMC,EAAOD,EAAY,YAAY,EAAE,QAAQ,MAAO,GAAG,EAEzD,OAAOH,EAAAC,MAAII,EAAA;AAAA,oBACW,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA,8DAK2B;AAAA;AAAA;AAAA,gDAGC;AAAA;AAAA;AAAA;AAAA,OAR/CD,EAAQD,EAKkCC,EAGdP,EAAcC,CAAI,EAKlE,EAEaQ,EAAoB,CAC/B,OAAOR,EAAwB,CAC7B,OAAOE,IAAOD,EAAcD,CAAI,KAAKI,EAAoBJ,CAAI,IAC/D,EACA,KAAM,CACJ,SAAU,GACV,cAAe,OACf,gBAAiB,MACnB,EACA,KAAM,CAAC,CAAE,KAAAA,CAAK,IAAM,CAClBJ,EAAgBI,CAAI,EACpBJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,SAAU,CAAC,EAC/CJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,SAAU,CAAC,EAC/CJ,EAAgB,CAAE,GAAGI,EAAM,QAAS,OAAQ,CAAC,CAC/C,CACF,EAzIAS,EA2IaC,EAAuB,CAClC,OAAOV,EAAwB,CAC7B,OAAOE,EAAAO,MAAIF,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBN,EAAcD,CAAI,EAoBxB,CACF,EAnKAW,EAqKaC,EAA4B,CACvC,OAAOZ,EAAwB,CAC7B,OAAOE,EAAAS,MAAIJ,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBN,EAAcD,CAAI,EAkCxB,CACF,EA3MAa,EA6MaC,EAA8B,CACzC,OAAOd,EAAwB,CAC7B,OAAOE,EAAAW,MAAIN,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBN,EAAcD,CAAI,EAmBxB,CACF,EApOAe,EAsOaC,EAAgC,CAC3C,OAAOhB,EAAwB,CAC7B,OAAOE,EAAAa,MAAIR,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBN,EAAcD,CAAI,EAyBxB,CACF,EAnQAiB,EAqQaC,EAA8B,CACzC,OAAOlB,EAAwB,CAC7B,OAAOE,EAAAe,MAAIV,EAAA;AAAA,QACY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAnBN,EAAcD,CAAI,EAyBxB,EACA,KAAM,IAAM,CACVJ,EAAgB,CACd,QAAS,uBACT,YAAa,2BACb,UAAW,GACX,cAAe,CACb,MAAO,iBACP,QAAUuB,GAA+B,CACvCA,EAAa,OAAO,CACtB,CACF,EACA,gBAAiB,CACf,MAAO,mBACP,QAAUA,GAA+B,CACvCA,EAAa,OAAO,CACtB,CACF,CACF,CAAC,CACH,CACF,EAEaC,EAA0B,CACrC,OAAOpB,EAAwB,CAC7B,OAAOE,KAAQD,EAAcD,CAAI,KAAKI,EAAoBJ,CAAI,IAChE,EACA,KAAM,CACJ,UAAW,EACb,EACA,KAAM,CAAC,CAAE,KAAAA,CAAK,IAAM,CAClBJ,EAAgBI,CAAI,CACtB,CACF,EAEaqB,EAAyB,CACpC,OAAOrB,EAAwB,CAC7B,OAAOE;AAAA,QACHD,EAAcD,CAAI;AAAA,QAClBI,EACA,CACE,QAAS,uBACT,YAAa,6BACb,UAAW,GACX,QAAS,OACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,MACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,gCACb,UAAW,GACX,QAAS,UACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,SACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,gCACb,UAAW,GACX,QAAS,UACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,SACF;AAAA,QACEA,EACA,CACE,QAAS,uBACT,YAAa,8BACb,UAAW,GACX,QAAS,QACT,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,EACA,OACF;AAAA,KAEJ,EACA,KAAM,IAAM,CACV,IAAMkB,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EAEvD,QAAWC,KAAWD,EACpB1B,EAAgB,CACd,QAAS,uBACT,YAAa,yBAAyB2B,IACtC,UAAW,GACX,QAAAA,EACA,cAAe,CACb,MAAO,iBACP,SAAU,CAAC,CACb,EACA,gBAAiB,CACf,MAAO,mBACP,SAAU,CAAC,CACb,CACF,CAAC,CAEL,CACF",
-  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant"]
+  "sourcesContent": ["import { Meta, StoryObj } from \"@storybook/web-components\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { fullscreenLayout } from \"../../utilities/chromatic-decorators\";\nimport type { Notification, NotificationProps } from \"./bl-notification\";\n\nconst meta: Meta = {\n  title: \"Components/Notification\",\n  component: \"bl-notification\",\n  parameters: {\n    chromatic: {\n      viewports: [1000],\n    },\n  },\n  decorators: [fullscreenLayout],\n  argTypes: {\n    // Notification Card Props\n    duration: {\n      control: \"number\",\n      description: \"Duration in seconds\",\n      defaultValue: 7,\n    },\n    caption: {\n      control: \"text\",\n      description: \"Caption of the notification\",\n    },\n    description: {\n      control: \"text\",\n      description: \"Description of the notification. Required.\",\n    },\n    icon: {\n      control: \"text\",\n      defaultValue: \"true\",\n      description:\n        \"Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.\",\n    },\n    variant: {\n      options: [\"info\", \"warning\", \"success\", \"error\"],\n      default: \"info\",\n      control: { type: \"select\" },\n      description: \"Variant of the notification\",\n    },\n    permanent: {\n      control: \"boolean\",\n      defaultValue: false,\n      description:\n        \"If true, the notification will not have duration and will be removed when the user clicks on the close button.\",\n    },\n    primaryAction: {\n      control: \"object\",\n      description: \"Primary action of the notification. onClick and label properties are required.\",\n    },\n    secondaryAction: {\n      control: \"object\",\n      description:\n        \"Secondary action of the notification. onClick and label properties are required.\",\n    },\n  },\n  args: {\n    noAnimation: false,\n    duration: 20,\n    caption: \"Notification Caption\",\n    description: \"Notification Description\",\n    icon: \"true\",\n    variant: \"info\",\n    permanent: false,\n    primaryAction: {\n      label: \"Primary Action\",\n      onClick() {},\n    },\n    secondaryAction: {\n      label: \"Secondary Action\",\n      onClick() {},\n    },\n  },\n};\n\nexport default meta;\n\nconst addNotification = (options: NotificationProps) => {\n  const el = document.querySelector(\"bl-notification\");\n\n  return el?.addNotification(options);\n};\n\nconst stringifyArgs = (args: NotificationArgs | NotificationProps) => {\n  return JSON.stringify(args, null, 6);\n};\n\nexport type NotificationArgs = {\n  noAnimation: boolean;\n  duration: number;\n} & NotificationProps;\n\nexport type Story = StoryObj<NotificationArgs>;\n\nconst BasicTemplate = (args: NotificationArgs) => html`\n  <bl-notification\n    ?no-animation=${args.noAnimation}\n    duration=${ifDefined(args.duration)}\n  ></bl-notification>\n`;\n\nconst NotificationCreator = (args: NotificationProps, buttonLabel = \"Add Notification\") => {\n  const slug = buttonLabel.toLowerCase().replace(/\\s/g, \"-\");\n\n  return html`\n    <bl-button id=${slug}>${buttonLabel}</bl-button>\n\n    <script>\n      (function () {\n        const notificationElement = document.querySelector(\"bl-notification\");\n        const addButton = document.querySelector(\"bl-button#${slug}\");\n\n        addButton.addEventListener(\"bl-click\", () => {\n          notificationElement.addNotification(${stringifyArgs(args)});\n        });\n      })();\n    </script>\n  `;\n};\n\nexport const AddExample: Story = {\n  render(args: NotificationArgs) {\n    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    duration: 60,\n    primaryAction: undefined,\n    secondaryAction: undefined,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n    addNotification({ ...args, variant: \"success\" });\n    addNotification({ ...args, variant: \"warning\" });\n    addNotification({ ...args, variant: \"error\" });\n  },\n};\n\nexport const RemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notification</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", () => {\n            notification.remove(); // notificationElement.removeNotification(notification.id);\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const RemoveAwaitExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <bl-button>Remove Notifications</bl-button>\n\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n          const removeButton = document.querySelector(\"bl-button\");\n\n          const firstNotification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n          });\n\n          const secondNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Second\",\n            description: \"Notification Description Second\",\n            permanent: true,\n          });\n\n          const thirdNotification = notificationElement.addNotification({\n            caption: \"Notification Caption Third\",\n            description: \"Notification Description Third\",\n            permanent: true,\n          });\n\n          removeButton.addEventListener(\"bl-click\", async () => {\n            await secondNotification.remove();\n            await thirdNotification.remove();\n            await firstNotification.remove();\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const PrimaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const SecondaryActionExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: () => {\n                window.alert(\"Primary Action Clicked\");\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: () => {\n                window.alert(\"Secondary Action Clicked\");\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n};\n\nexport const ActionsRemoveExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      <script>\n        (function () {\n          const notificationElement = document.querySelector(\"bl-notification\");\n\n          const notification = notificationElement.addNotification({\n            caption: \"Notification Caption\",\n            description: \"Notification Description\",\n            permanent: true,\n            primaryAction: {\n              label: \"Primary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n            secondaryAction: {\n              label: \"Secondary Action\",\n              onClick: notification => {\n                notification.remove();\n              },\n            },\n          });\n        })();\n      </script>\n    `;\n  },\n  play: () => {\n    addNotification({\n      caption: \"Notification Caption\",\n      description: \"Notification Description\",\n      permanent: true,\n      primaryAction: {\n        label: \"Primary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n      secondaryAction: {\n        label: \"Secondary Action\",\n        onClick: (notification: Notification) => {\n          notification.remove();\n        },\n      },\n    });\n  },\n};\n\nexport const PermanentExample: Story = {\n  render(args: NotificationArgs) {\n    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;\n  },\n  args: {\n    permanent: true,\n  },\n  play: ({ args }) => {\n    addNotification(args);\n  },\n};\n\nexport const VariantsExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      ${BasicTemplate(args)}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: info\",\n          permanent: true,\n          variant: \"info\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Info\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: success\",\n          permanent: true,\n          variant: \"success\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Success\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: warning\",\n          permanent: true,\n          variant: \"warning\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Warning\"\n      )}\n      ${NotificationCreator(\n        {\n          caption: \"Notification Caption\",\n          description: \"Notification Variant: error\",\n          permanent: true,\n          variant: \"error\",\n          primaryAction: {\n            label: \"Primary Action\",\n            onClick() {},\n          },\n          secondaryAction: {\n            label: \"Secondary Action\",\n            onClick() {},\n          },\n        },\n        \"Error\"\n      )}\n    `;\n  },\n  play: () => {\n    const variants = [\"info\", \"success\", \"warning\", \"error\"] as const;\n\n    for (const variant of variants) {\n      addNotification({\n        caption: \"Notification Caption\",\n        description: `Notification Variant: ${variant}`,\n        permanent: true,\n        variant,\n        primaryAction: {\n          label: \"Primary Action\",\n          onClick() {},\n        },\n        secondaryAction: {\n          label: \"Secondary Action\",\n          onClick() {},\n        },\n      });\n    }\n  },\n};\n\nexport const RTLExample: Story = {\n  render(args: NotificationArgs) {\n    return html`\n      <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n        <!-- Interactive Controls -->\n        <div style=\"display: flex; gap: 16px; align-items: center;\">\n          <bl-button id=\"add-notifications\" variant=\"primary\">Add Sample Notifications</bl-button>\n          <bl-button id=\"clear-notifications\" variant=\"danger\">Clear All</bl-button>\n        </div>\n\n        <!-- Demo Container -->\n        <div style=\"display: flex; gap: 32px;\">\n          <!-- LTR Example -->\n          <div style=\"flex: 1; min-width: 400px;\">\n            <bl-notification\n                id=\"ltr-notification\"\n                ?no-animation=${args.noAnimation}\n                duration=${ifDefined(args.duration)}\n              ></bl-notification>\n          </div>\n\n          <!-- RTL Example -->\n          <div style=\"flex: 1; min-width: 400px;\" dir=\"rtl\">\n            <bl-notification\n                id=\"rtl-notification\"\n                ?no-animation=${args.noAnimation}\n                duration=${ifDefined(args.duration)}\n              ></bl-notification>\n          </div>\n        </div>\n\n        <script>\n          (function() {\n            // Store active notifications for proper cleanup\n            let activeNotifications = {\n              ltr: [],\n              rtl: []\n            };\n\n            const ltrNotification = document.getElementById('ltr-notification');\n            const rtlNotification = document.getElementById('rtl-notification');\n            const addButton = document.getElementById('add-notifications');\n            const clearButton = document.getElementById('clear-notifications');\n\n            // Sample notifications data with different variants and configurations\n            const notificationExamples = [\n              {\n                variant: 'info',\n                caption: { en: 'Welcome Message', ar: '\u0631\u0633\u0627\u0644\u0629 \u062A\u0631\u062D\u064A\u0628' },\n                description: {\n                  en: 'Welcome to our application! We hope you enjoy your experience.',\n                  ar: '\u0645\u0631\u062D\u0628\u0627\u064B \u0628\u0643 \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0646\u0627! \u0646\u062A\u0645\u0646\u0649 \u0644\u0643 \u062A\u062C\u0631\u0628\u0629 \u0645\u0645\u062A\u0639\u0629.'\n                },\n                icon: 'info',\n                primaryAction: {\n                  label: { en: 'Get Started', ar: '\u0627\u0628\u062F\u0623 \u0627\u0644\u0622\u0646' },\n                  onClick: () => {}\n                }\n              },\n              {\n                variant: 'success',\n                caption: { en: 'Task Completed', ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0627\u0644\u0645\u0647\u0645\u0629' },\n                description: {\n                  en: 'Your task has been successfully completed.',\n                  ar: '\u062A\u0645 \u0625\u0643\u0645\u0627\u0644 \u0645\u0647\u0645\u062A\u0643 \u0628\u0646\u062C\u0627\u062D.'\n                },\n                icon: 'check_fill'\n              },\n              {\n                variant: 'warning',\n                caption: { en: 'Storage Alert', ar: '\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u062A\u062E\u0632\u064A\u0646' },\n                description: {\n                  en: 'You are running low on storage space.',\n                  ar: '\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0643 \u0645\u0646\u062E\u0641\u0636\u0629.'\n                },\n                icon: 'warning',\n                primaryAction: {\n                  label: { en: 'Upgrade', ar: '\u062A\u0631\u0642\u064A\u0629' },\n                  onClick: () => {}\n                },\n                secondaryAction: {\n                  label: { en: 'Learn More', ar: '\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F' },\n                  onClick: () => {}\n                }\n              },\n              {\n                variant: 'error',\n                caption: { en: 'Connection Error', ar: '\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0627\u062A\u0635\u0627\u0644' },\n                description: {\n                  en: 'Unable to connect to the server. Please try again.',\n                  ar: '\u062A\u0639\u0630\u0631 \u0627\u0644\u0627\u062A\u0635\u0627\u0644 \u0628\u0627\u0644\u062E\u0627\u062F\u0645. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.'\n                },\n                icon: 'close_fill',\n                primaryAction: {\n                  label: { en: 'Retry', ar: '\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629' },\n                  onClick: () => {}\n                }\n              }\n            ];\n\n            // Function to clear all notifications\n            const clearAllNotifications = async () => {\n              // Clear LTR notifications\n              if (activeNotifications.ltr.length > 0) {\n                for (const notification of activeNotifications.ltr) {\n                  await notification.remove();\n                }\n                activeNotifications.ltr = [];\n              }\n\n              // Clear RTL notifications\n              if (activeNotifications.rtl.length > 0) {\n                for (const notification of activeNotifications.rtl) {\n                  await notification.remove();\n                }\n                activeNotifications.rtl = [];\n              }\n            };\n\n            // Function to create notifications\n            const createNotifications = (isRTL) => {\n              const targetElement = isRTL ? rtlNotification : ltrNotification;\n              const lang = isRTL ? 'ar' : 'en';\n              const notificationList = isRTL ? activeNotifications.rtl : activeNotifications.ltr;\n\n              notificationExamples.forEach((example, index) => {\n                setTimeout(() => {\n                  const notification = targetElement.addNotification({\n                    variant: example.variant,\n                    caption: example.caption[lang],\n                    description: example.description[lang],\n                    icon: example.icon,\n                    permanent: true,\n                    ...(example.primaryAction && {\n                      primaryAction: {\n                        label: example.primaryAction.label[lang],\n                        onClick: () => {\n                          example.primaryAction.onClick();\n                          notification.remove();\n                          const index = notificationList.indexOf(notification);\n                          if (index > -1) {\n                            notificationList.splice(index, 1);\n                          }\n                        }\n                      }\n                    }),\n                    ...(example.secondaryAction && {\n                      secondaryAction: {\n                        label: example.secondaryAction.label[lang],\n                        onClick: () => {\n                          example.secondaryAction.onClick();\n                          notification.remove();\n                          const index = notificationList.indexOf(notification);\n                          if (index > -1) {\n                            notificationList.splice(index, 1);\n                          }\n                        }\n                      }\n                    })\n                  });\n\n                  // Store the notification reference\n                  notificationList.push(notification);\n                }, index * 300); // Stagger the notifications\n              });\n            };\n\n            // Add button click handler\n            addButton.addEventListener('bl-click', () => {\n              clearAllNotifications().then(() => {\n                createNotifications(false); // LTR\n                createNotifications(true);  // RTL\n              });\n            });\n\n            // Clear button click handler\n            clearButton.addEventListener('bl-click', clearAllNotifications);\n\n            // Initial notifications\n            createNotifications(false);\n            createNotifications(true);\n          })();\n        </script>\n      </div>\n    `;\n  },\n  args: {\n    noAnimation: true,\n    duration: 0,\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["meta", "fullscreenLayout", "bl_notification_stories_default", "addNotification", "options", "el", "stringifyArgs", "args", "BasicTemplate", "x", "l", "_a", "NotificationCreator", "buttonLabel", "slug", "__template", "AddExample", "_b", "RemoveExample", "_c", "RemoveAwaitExample", "_d", "PrimaryActionExample", "_e", "SecondaryActionExample", "_f", "ActionsRemoveExample", "notification", "PermanentExample", "VariantsExample", "variants", "variant", "_g", "RTLExample"]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trendyol/baklava",
   "type": "module",
-  "version": "3.3.0-beta.21",
+  "version": "3.3.0-beta.23",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",