@trendyol/baklava 3.0.0-beta.25 → 3.0.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baklava-react.d.ts +16 -0
- package/dist/baklava-react.d.ts.map +1 -1
- package/dist/baklava-react.js +1 -1
- package/dist/baklava-react.js.map +3 -3
- package/dist/baklava-vue.d.ts +2 -0
- package/dist/baklava.d.ts +2 -0
- package/dist/baklava.d.ts.map +1 -1
- package/dist/baklava.js +1 -1
- package/dist/{chunk-Y3PONRYW.js → chunk-5HU4KWMX.js} +2 -2
- package/dist/chunk-CYLRPJKP.js +6 -0
- package/dist/chunk-CYLRPJKP.js.map +7 -0
- package/dist/{chunk-LPHOBDYM.js → chunk-D5MPTIGC.js} +2 -2
- package/dist/{chunk-LXYK2N4C.js → chunk-G7WWTJW4.js} +5 -5
- package/dist/chunk-G7WWTJW4.js.map +7 -0
- package/dist/chunk-KOWS266A.js +77 -0
- package/dist/chunk-KOWS266A.js.map +7 -0
- package/dist/{chunk-OB455JKN.js → chunk-N43OCCSL.js} +2 -2
- package/dist/chunk-N43OCCSL.js.map +7 -0
- package/dist/{chunk-YP2JT77B.js → chunk-P7J47Z2J.js} +10 -14
- package/dist/chunk-P7J47Z2J.js.map +7 -0
- package/dist/chunk-VU6LRFZR.js +26 -0
- package/dist/chunk-VU6LRFZR.js.map +7 -0
- package/dist/chunk-WEEGH2F4.js +2 -0
- package/dist/chunk-WEEGH2F4.js.map +7 -0
- package/dist/{chunk-P4FHU5BE.js → chunk-X2XFV2S3.js} +2 -2
- package/dist/components/button/bl-button.d.ts +1 -0
- package/dist/components/button/bl-button.d.ts.map +1 -1
- package/dist/components/button/bl-button.js +1 -1
- package/dist/components/calendar/bl-calendar.constant.d.ts +13 -0
- package/dist/components/calendar/bl-calendar.constant.d.ts.map +1 -0
- package/dist/components/calendar/bl-calendar.constant.js +2 -0
- package/dist/components/calendar/bl-calendar.constant.js.map +7 -0
- package/dist/components/calendar/bl-calendar.d.ts +81 -0
- package/dist/components/calendar/bl-calendar.d.ts.map +1 -0
- package/dist/components/calendar/bl-calendar.js +2 -0
- package/dist/components/calendar/bl-calendar.js.map +7 -0
- package/dist/components/calendar/bl-calendar.types.d.ts +15 -0
- package/dist/components/calendar/bl-calendar.types.d.ts.map +1 -0
- package/dist/components/calendar/bl-calendar.types.js +1 -0
- package/dist/components/calendar/bl-calendar.types.js.map +7 -0
- package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
- package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
- package/dist/components/dialog/bl-dialog.js +1 -1
- package/dist/components/dialog/bl-dialog.stories.d.ts +1 -0
- package/dist/components/dialog/bl-dialog.stories.d.ts.map +1 -1
- package/dist/components/dialog/bl-dialog.stories.js +25 -4
- package/dist/components/dialog/bl-dialog.stories.js.map +3 -3
- package/dist/components/drawer/bl-drawer.js +1 -1
- package/dist/components/dropdown/bl-dropdown.js +1 -1
- package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
- package/dist/components/input/bl-input.d.ts +4 -0
- package/dist/components/input/bl-input.d.ts.map +1 -1
- package/dist/components/input/bl-input.js +1 -1
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/components/select/bl-select.d.ts.map +1 -1
- package/dist/components/select/bl-select.js +1 -1
- package/dist/components/spinner/bl-spinner.d.ts +34 -0
- package/dist/components/spinner/bl-spinner.d.ts.map +1 -0
- package/dist/components/spinner/bl-spinner.js +2 -0
- package/dist/components/spinner/bl-spinner.js.map +7 -0
- package/dist/components/spinner/bl-spinner.test.d.ts +2 -0
- package/dist/components/spinner/bl-spinner.test.d.ts.map +1 -0
- package/dist/components/split-button/bl-split-button.js +1 -1
- package/dist/components/table/table-cell/bl-table-cell.js +1 -1
- package/dist/components/table/table-header-cell/bl-table-header-cell.js +1 -1
- package/dist/components/table/table-row/bl-table-row.js +1 -1
- package/dist/components/textarea/bl-textarea.js +1 -1
- package/dist/custom-elements.json +226 -0
- package/package.json +1 -1
- package/dist/chunk-LXYK2N4C.js.map +0 -7
- package/dist/chunk-N6FMS7MM.js +0 -21
- package/dist/chunk-N6FMS7MM.js.map +0 -7
- package/dist/chunk-OB455JKN.js.map +0 -7
- package/dist/chunk-YP2JT77B.js.map +0 -7
- /package/dist/{chunk-Y3PONRYW.js.map → chunk-5HU4KWMX.js.map} +0 -0
- /package/dist/{chunk-LPHOBDYM.js.map → chunk-D5MPTIGC.js.map} +0 -0
- /package/dist/{chunk-P4FHU5BE.js.map → chunk-X2XFV2S3.js.map} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as f}from"./chunk-MND5TXTF.js";import{c as m}from"./chunk-EG7U7PM3.js";import{a as g}from"./chunk-XDUIVR6I.js";import{a as u}from"./chunk-
|
|
1
|
+
import{a as f}from"./chunk-MND5TXTF.js";import{c as m}from"./chunk-EG7U7PM3.js";import{a as g}from"./chunk-XDUIVR6I.js";import{a as u}from"./chunk-VU6LRFZR.js";import{a as p}from"./chunk-6LT7O7T2.js";import{a as r}from"./chunk-DINNT5P2.js";import{a as n}from"./chunk-GRL4DWKG.js";import{a as v,b as i,c,e as b}from"./chunk-5MOOXA2X.js";import{a as h,b as l,f as d}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var S=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size="large"]) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size="small"]) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(
|
|
2
2
|
var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -
|
|
3
3
|
var(--border-size)
|
|
4
4
|
) 0 calc(
|
|
@@ -13,11 +13,11 @@ import{a as f}from"./chunk-MND5TXTF.js";import{c as m}from"./chunk-EG7U7PM3.js";
|
|
|
13
13
|
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**
|
|
14
14
|
* Some browsers doesn't allow setting background-color
|
|
15
15
|
* https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
|
|
16
|
-
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name="eye_on"]{display:inline-block}.password-visible bl-icon[name="eye_on"]{display:none}.password-visible bl-icon[name="eye_off"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}`,y=S;var C={date:"calendar","datetime-local":"calendar",month:"calendar",week:"calendar",time:"clock",search:"search"},e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&u(this.form)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.validationTarget.showPicker()}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let o=a.target.value;this.value=o,this.onInput(o)}changeHandler(a){let o=a.target.value;this.dirty=!0,this.value=o,this.onChange(o)}firstUpdated(){this.setValue(this.value),this.icon||(this.icon=C[this.type])}async updated(a){a.size>0&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}render(){let a=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
16
|
+
*/box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name="eye_on"]{display:inline-block}.password-visible bl-icon[name="eye_on"]{display:none}.password-visible bl-icon[name="eye_off"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}`,y=S;var C={date:"calendar","datetime-local":"calendar",month:"calendar",week:"calendar",time:"clock",search:"search"},e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.loading=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.readonly=!1;this.labelFixed=!1;this.onKeydown=a=>{a.code==="Enter"&&this.form&&u(this.form)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(a){this._customInvalidText=a,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var a;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),(a=this.form)==null||a.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.validationTarget.showPicker()}validityCallback(){var a;return this.onInvalid(this.internals.validity),this.customInvalidText||((a=this.validationTarget)==null?void 0:a.validationMessage)}async forceCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}async clearCustomError(){await this.updateComplete,this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(a){let o=a.target.value;this.value=o,this.onInput(o)}changeHandler(a){let o=a.target.value;this.dirty=!0,this.value=o,this.onChange(o)}firstUpdated(){this.setValue(this.value),this.icon||(this.icon=C[this.type])}async updated(a){a.size>0&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}get _hasIconSlot(){return this.querySelector(':scope > [slot="icon"]')!==null}render(){let a=this.checkValidity()?"":l`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
17
17
|
${this.validationMessage}
|
|
18
18
|
</p>`,o=this.helpText?l`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=l`
|
|
19
19
|
<slot name="icon">
|
|
20
|
-
${this.icon?l`<bl-icon name="${this.icon}"></bl-icon>`:l`<bl-icon class="error-icon" name="alert"></bl-icon>`}
|
|
20
|
+
${this.loading&&this.type==="search"&&this.value!==""&&this.value!==null?l`<bl-spinner></bl-spinner>`:this.icon?l`<bl-icon name="${this.icon}"></bl-icon>`:l`<bl-icon class="error-icon" name="alert"></bl-icon>`}
|
|
21
21
|
</slot>
|
|
22
22
|
`,w=this.label?l`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?l`<bl-button
|
|
23
23
|
size="small"
|
|
@@ -59,5 +59,5 @@ import{a as f}from"./chunk-MND5TXTF.js";import{c as m}from"./chunk-EG7U7PM3.js";
|
|
|
59
59
|
<div class="icon">${k} ${x}</div>
|
|
60
60
|
</fieldset>
|
|
61
61
|
<div class="hint">${a} ${o}</div>
|
|
62
|
-
</div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=f,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({reflect:!0})],e.prototype,"min",2),t([i({reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
|
|
63
|
-
//# sourceMappingURL=chunk-
|
|
62
|
+
</div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=f,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({reflect:!0})],e.prototype,"min",2),t([i({type:Boolean,reflect:!0})],e.prototype,"loading",2),t([i({reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,reflect:!0})],e.prototype,"readonly",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
|
|
63
|
+
//# sourceMappingURL=chunk-G7WWTJW4.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size=\"large\"]) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size=\"small\"]) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:none;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding) -\n var(--border-size)\n ) 0 calc(\n var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding) -\n var(--border-size)\n );background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in 0.1s;font:var(--input-font);top:var(--padding-vertical);left:var(--bl-input-padding-start, var(--padding-horizontal));right:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) + var(--icon-size) +\n var(--padding-vertical)\n )}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0 0 0 var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input::-webkit-calendar-picker-indicator{display:none}input::-moz-calendar-picker-indicator{display:none}input:autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);/**\n * Some browsers doesn't allow setting background-color\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill\n */box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon),::slotted(bl-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name=\"eye_on\"]{display:inline-block}.password-visible bl-icon[name=\"eye_on\"]{display:none}.password-visible bl-icon[name=\"eye_off\"]{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out 0.4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding));right:calc(var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within, .has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { FormControlMixin } from \"@open-wc/form-control\";\nimport { submit } from \"@open-wc/form-helpers\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { innerInputValidators } from \"../../utilities/form-control\";\nimport \"../button/bl-button\";\nimport \"../icon/bl-icon\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport style from \"./bl-input.css\";\n\nexport type InputType =\n | \"text\"\n | \"email\"\n | \"date\"\n | \"time\"\n | \"datetime-local\"\n | \"month\"\n | \"week\"\n | \"password\"\n | \"number\"\n | \"tel\"\n | \"url\"\n | \"search\";\n\nconst inputTypeIcons: Partial<Record<InputType, BaklavaIcon>> = {\n \"date\": \"calendar\",\n \"datetime-local\": \"calendar\",\n \"month\": \"calendar\",\n \"week\": \"calendar\",\n \"time\": \"clock\",\n \"search\": \"search\",\n};\n\nexport type InputSize = \"small\" | \"medium\" | \"large\";\n/**\n * @tag bl-input\n * @summary Baklava Input component\n *\n * @cssproperty [--bl-input-padding-start] Sets the padding start\n * @cssproperty [--bl-input-padding-end] Sets the padding end\n */\n@customElement(\"bl-input\")\nexport default class BlInput extends FormControlMixin(LitElement) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = innerInputValidators;\n\n @query(\"input\")\n validationTarget: HTMLInputElement;\n\n /**\n * Sets name of the input\n */\n @property({ reflect: true })\n name?: string;\n\n /**\n * Type of the input. It's used to set `type` attribute of native input inside.\n */\n @property({ reflect: true })\n type: InputType = \"text\";\n\n /**\n * Sets label of the input\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets placeholder of the input\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets initial value of the input\n */\n @property({ reflect: true })\n value = \"\";\n\n /**\n * Makes input a mandatory field\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Sets minimum length of the input\n */\n @property({ type: Number, reflect: true })\n minlength?: number;\n\n /**\n * Sets maximum length of the input\n */\n @property({ type: Number, reflect: true })\n maxlength?: number;\n\n /**\n * Sets the minimum acceptable value for the input\n */\n @property({ reflect: true })\n min?: number | string;\n\n /**\n * Sets the loading value for the input\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Sets the maximum acceptable value for the input\n */\n @property({ reflect: true })\n max?: number | string;\n\n /**\n * Sets a regex pattern form the input validation\n */\n @property({ type: String, reflect: true })\n pattern?: string;\n\n /**\n * Sets the increase and decrease step to a `number` input\n */\n @property({ type: Number, reflect: true })\n step?: number;\n\n /**\n * Hints browser to autocomplete this field.\n */\n @property({ type: String, reflect: true })\n autocomplete: string;\n\n /**\n * Sets the input mode of the field for asking browser to show the desired keyboard.\n */\n @property({ type: String, reflect: true })\n inputmode: \"none\" | \"text\" | \"decimal\" | \"numeric\" | \"tel\" | \"search\" | \"email\" | \"url\";\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the custom icon name. `bl-icon` component is used to show an icon\n */\n @property({ type: String, reflect: true })\n icon?: BaklavaIcon;\n\n /**\n * Sets input size.\n */\n @property({ type: String, reflect: true })\n size?: InputSize = \"medium\";\n\n /**\n * Disables the input\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Makes the input readonly.\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Makes label as fixed positioned\n */\n @property({ type: Boolean, attribute: \"label-fixed\", reflect: true })\n labelFixed = false;\n\n /**\n * Overrides error message. This message will override default error messages\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n set customInvalidText(value: string) {\n this._customInvalidText = value;\n this.setValue(this.value);\n }\n\n get customInvalidText(): string {\n return this._customInvalidText;\n }\n\n private _customInvalidText: string;\n\n /**\n * Adds help text\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText?: string;\n\n /**\n * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n */\n @event(\"bl-change\") private onChange: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event(\"bl-input\") private onInput: EventDispatcher<string>;\n\n /**\n * Fires when the value of an input element has been changed.\n */\n @event(\"bl-invalid\") private onInvalid: EventDispatcher<ValidityState>;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.onKeydown);\n\n this.form?.addEventListener(\"submit\", () => {\n this.reportValidity();\n });\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.onKeydown);\n }\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === \"Enter\" && this.form) {\n submit(this.form);\n }\n };\n\n @state() private dirty = false;\n\n @state() private passwordVisible = false;\n\n private textVisibilityToggle() {\n this.passwordVisible = !this.passwordVisible;\n }\n\n showPicker() {\n if (\"showPicker\" in HTMLInputElement.prototype) {\n this.validationTarget.showPicker();\n }\n }\n\n validityCallback(): string | void {\n this.onInvalid(this.internals.validity);\n return this.customInvalidText || this.validationTarget?.validationMessage;\n }\n\n /**\n * Force to set input as in invalid state.\n */\n async forceCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity(this.customInvalidText || \"An error occurred\");\n this.setValue(this.value);\n this.reportValidity();\n }\n\n /**\n * Clear forced invalid state\n */\n async clearCustomError() {\n await this.updateComplete;\n this.validationTarget.setCustomValidity(\"\");\n this.setValue(this.value);\n this.reportValidity();\n }\n\n reportValidity() {\n this.dirty = true;\n this.requestUpdate();\n return this.checkValidity();\n }\n\n private inputHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.value = value;\n this.onInput(value);\n }\n\n private changeHandler(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n\n this.dirty = true;\n this.value = value;\n this.onChange(value);\n }\n\n firstUpdated() {\n this.setValue(this.value);\n if (!this.icon) this.icon = inputTypeIcons[this.type];\n }\n\n protected async updated(changedProperties: PropertyValues) {\n if (changedProperties.size > 0) {\n this.setValue(this.value);\n\n await this.validationComplete;\n\n this.requestUpdate();\n }\n }\n\n private inputId = Math.random().toString(36).substring(2);\n\n private get _hasIconSlot() {\n return this.querySelector(':scope > [slot=\"icon\"]') !== null;\n }\n\n render(): TemplateResult {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : \"\";\n const helpMessage = this.helpText\n ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n : \"\";\n\n const icon = html`\n <slot name=\"icon\">\n ${this.loading && this.type === \"search\" && this.value !== \"\" && this.value !== null\n ? html`<bl-spinner></bl-spinner>`\n : this.icon\n ? html`<bl-icon name=\"${this.icon}\"></bl-icon>`\n : html`<bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>`}\n </slot>\n `;\n\n const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : \"\";\n const passwordInput = this.type === \"password\";\n\n const revealButton = passwordInput\n ? html`<bl-button\n size=\"small\"\n kind=\"neutral\"\n variant=\"tertiary\"\n class=\"${classMap({\n \"reveal-button\": true,\n \"password-visible\": this.passwordVisible,\n })}\"\n aria-label=\"Toggle password reveal\"\n @bl-click=\"${this.textVisibilityToggle}\"\n >\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n </bl-button>`\n : \"\";\n\n const hasCustomIcon = this.icon || this._hasIconSlot;\n const classes = {\n \"wrapper\": true,\n \"dirty\": this.dirty,\n \"invalid\": !this.checkValidity(),\n \"has-icon\": passwordInput || hasCustomIcon || (this.dirty && !this.checkValidity()),\n \"has-value\": this.value !== null && this.value !== \"\",\n };\n\n const passwordType = this.passwordVisible ? \"text\" : \"password\";\n const inputType = passwordInput ? passwordType : this.type;\n\n return html`<div class=${classMap(classes)}>\n ${label}\n <fieldset class=\"input-wrapper\">\n <legend><span>${this.label}</span></legend>\n <input\n id=${this.inputId}\n type=${inputType}\n .value=${live(this.value)}\n inputmode=\"${ifDefined(this.inputmode)}\"\n ?autofocus=${this.autofocus}\n autocomplete=\"${ifDefined(this.autocomplete)}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n minlength=\"${ifDefined(this.minlength)}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n min=\"${ifDefined(this.min)}\"\n max=\"${ifDefined(this.max)}\"\n pattern=\"${ifDefined(this.pattern)}\"\n step=\"${ifDefined(this.step)}\"\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @change=${this.changeHandler}\n @input=${this.inputHandler}\n aria-invalid=${this.checkValidity() ? \"false\" : \"true\"}\n aria-describedby=${ifDefined(this.helpText ? \"helpText\" : undefined)}\n aria-errormessage=${ifDefined(this.checkValidity() ? undefined : \"errorMessage\")}\n />\n <div class=\"icon\">${revealButton} ${icon}</div>\n </fieldset>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-input\": BlInput;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_input_default", "inputTypeIcons", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "x", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "hasCustomIcon", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import{a as _,b}from"./chunk-WEEGH2F4.js";import{a as M}from"./chunk-6LT7O7T2.js";import{a as Y}from"./chunk-GRL4DWKG.js";import{a as S,b as f,c as D}from"./chunk-5MOOXA2X.js";import{a as x,b as y,f as R}from"./chunk-4OT5AMS5.js";import{d as n}from"./chunk-IZ2LK5GK.js";var C=x`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:16px;flex-direction:column;align-items:center;gap:16px;border-radius:var(--bl-border-radius-s);width:fit-content;border:1px solid var(--bl-color-primary);background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;gap:2px}.arrow{flex: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:8px}.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%;&.today-day {
|
|
2
|
+
--bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}&.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)}&.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}}
|
|
3
|
+
|
|
4
|
+
.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:8px 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:8px}.calendar-text{font:var(--bl-font-title-3-regular)}`,A=C;var a=class extends R{constructor(){super(...arguments);this.type="single";this.startOfWeek=0;this.locale=document.documentElement.lang;this._selectedDates=[];this._selectedRangeDates={startDate:void 0,endDate:void 0};this.today=new Date;this._calendarMonth=this.today.getMonth();this._calendarYear=this.today.getFullYear();this._calendarView="days";this._calendarYears=[];this._calendarDays=[]}get defaultValue(){return this._defaultValue}set defaultValue(e){this.type==="single"&&Array.isArray(e)?console.warn("Invalid prop value for defaultValue"):this.defaultValue&&(Array.isArray(this.defaultValue)?this._selectedDates={...this.defaultValue}:this._selectedDates=[this.defaultValue])}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}))}static get styles(){return[A]}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=[];for(let t=12;t>0;t--)this._calendarYears.push(e-t)}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=[];for(let t=1;t<=12;t++)this._calendarYears.push(e+t)}this.type==="range"&&this.setHoverClass()}setCurrentCalendarView(e){this._calendarView!==e?this._calendarView=e:this._calendarView="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===0&&(this._calendarYears=Array.from({length:12},(e,t)=>this._calendarYear-4+t))}clearRangePickerStyles(){var e,t,r;(e=this.shadowRoot)==null||e.querySelectorAll(".range-day").forEach(d=>{d.classList.remove("range-day")}),(t=this.shadowRoot)==null||t.querySelectorAll(".range-start-day").forEach(d=>{d.classList.remove("range-start-day")}),(r=this.shadowRoot)==null||r.querySelectorAll(".range-end-day").forEach(d=>{d.classList.remove("range-end-day")})}handleDate(e){this.type!=="range"&&(e.getMonth()<this._calendarMonth?this.setPreviousCalendarView():e.getMonth()>this._calendarMonth&&this.setNextCalendarView()),this.type==="single"?this.handleSingleSelectCalendar(e):this.type==="multiple"?this.handleMultipleSelectCalendar(e):this.type==="range"&&this.handleRangeSelectCalendar(e),this._onBlCalendarChange(this._selectedDates),this.requestUpdate()}handleSingleSelectCalendar(e){this._selectedDates.splice(0,1),this._selectedDates.push(e)}handleMultipleSelectCalendar(e){this._selectedDates.find(function(r){return r.getTime()===e.getTime()})?this._selectedDates.splice(this._selectedDates.findIndex(r=>r.getTime()===e.getTime()),1):this._selectedDates.push(e)}handleRangeSelectCalendar(e){if(!this._selectedRangeDates.startDate)this._selectedRangeDates.startDate=e,this._selectedDates.push(e);else if(this._selectedRangeDates.startDate&&!this._selectedRangeDates.endDate){if(e.getTime()>this._selectedRangeDates.startDate.getTime())this._selectedRangeDates.endDate=e,this._selectedDates.push(e);else if(e.getTime()<this._selectedRangeDates.startDate.getTime()){let t=this._selectedRangeDates.startDate;this._selectedRangeDates.startDate=e,this._selectedRangeDates.endDate=t,this._selectedDates.splice(0,this._selectedDates.length,this._selectedRangeDates.startDate,this._selectedRangeDates.endDate)}}else this._selectedRangeDates.startDate&&this._selectedRangeDates.endDate&&(this._selectedRangeDates.startDate=e,this._selectedRangeDates.endDate=void 0,this._selectedDates.splice(0,this._selectedDates.length,this._selectedRangeDates.startDate));this.setHoverClass()}checkIfSelectedDate(e){return!!this._selectedDates.find(r=>e.getTime()===r.getTime())}checkIfDateIsToday(e){let t=new Date;return t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}checkIfDateIsDisabled(e){var t,r;return e.getTime()<((t=this.minDate)==null?void 0:t.getTime())||e.getTime()>((r=this.maxDate)==null?void 0:r.getTime())?!0:Array.isArray(this.disabledDates)?!!this.disabledDates.find(s=>e.getTime()===new Date(s).getTime()):!1}setHoverClass(){this.clearRangePickerStyles(),this._selectedRangeDates.startDate&&this._selectedRangeDates.endDate&&setTimeout(()=>{var d,s,l,o,g,h,i,u,c;let e=(l=(s=this.shadowRoot)==null?void 0:s.getElementById(`${(d=this._selectedRangeDates.startDate)==null?void 0:d.getTime()}`))==null?void 0:l.parentElement;e==null||e.classList.add("range-start-day");let t=(h=(g=this.shadowRoot)==null?void 0:g.getElementById(`${(o=this._selectedRangeDates.endDate)==null?void 0:o.getTime()}`))==null?void 0:h.parentElement;t==null||t.classList.add("range-end-day");let r=[...this.createCalendarDays().values()].flat().filter(m=>{var p,v,w,k;return m.getTime()>(((v=(p=this._selectedRangeDates)==null?void 0:p.startDate)==null?void 0:v.getTime())||0)&&m.getTime()<(((k=(w=this._selectedRangeDates)==null?void 0:w.endDate)==null?void 0:k.getTime())||0)});for(let m=0;m<r.length;m++){let p=(u=(i=this.shadowRoot)==null?void 0:i.getElementById(`${r[m].getTime()}`))==null?void 0:u.parentElement;(c=p==null?void 0:p.classList)==null||c.add("range-day")}})}createCalendarDays(){var g,h;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),r=t<this.startOfWeek?7-(this.startOfWeek-t):t-this.startOfWeek,d=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth-1),s=this.getDayNumInAMonth(this._calendarYear,this._calendarMonth),l=this.startOfWeek;for(let i=r;i>0;i--){let u=l%7,c=new Date(this._calendarYear,this._calendarMonth-1,d-i+1);e.set(this.days[u].name,[c]),l+=1}for(let i=1;i<=s;i++){let u=l%7,c=new Date(this._calendarYear,this._calendarMonth,i);e.get(this.days[u].name)?(g=e.get(this.days[u].name))==null||g.push(c):e.set(this.days[u].name,[c]),l+=1}let o=this._calendarDays.findIndex(i=>i.value===l%7);if(o!==0)for(let i=1;i<=this._calendarDays.length-o;i++){let u=l%7,c=new Date(this._calendarYear,this._calendarMonth+1,i);(h=e.get(this.days[u].name))==null||h.push(c),l+=1}return e}render(){let e=d=>{if(d==="days"){let s=this.createCalendarDays(),l=Array.from(s.values());return y`<div class="week-row">
|
|
5
|
+
${[...s.keys()].map(o=>y` <div class="calendar-text weekday-text">${o}</div> `)}</div>
|
|
6
|
+
<div class="days-wrapper">
|
|
7
|
+
${[...Array(l[0].length).keys()].map(o=>y`<div class="week-row">
|
|
8
|
+
${l.map(g=>{let h=g[o],i=this.checkIfSelectedDate(h),u=this.checkIfDateIsToday(h),c=this.checkIfDateIsDisabled(h),m=M({day:!0,"calendar-text":!0,"today-day":u,"selected-day":i,"other-month-day":g[o].getMonth()!==this._calendarMonth,"disabled-day":c});return y`
|
|
9
|
+
<div class="day-wrapper">
|
|
10
|
+
<bl-button
|
|
11
|
+
id=${h.getTime()}
|
|
12
|
+
variant="tertiary"
|
|
13
|
+
kind="neutral"
|
|
14
|
+
size="small"
|
|
15
|
+
class=${m}
|
|
16
|
+
?disabled=${c}
|
|
17
|
+
@click="${()=>!c&&this.handleDate(h)}"
|
|
18
|
+
>
|
|
19
|
+
${h.getDate()}
|
|
20
|
+
</bl-button>
|
|
21
|
+
</div>
|
|
22
|
+
`})}
|
|
23
|
+
</div>`)}
|
|
24
|
+
</div>
|
|
25
|
+
</div>`}else return d==="months"?y`<div class="grid-content">
|
|
26
|
+
${this.months.map((s,l)=>{let o=s.value===this._calendarMonth?"primary":"tertiary",g=s.value===this._calendarMonth?"default":"neutral";return y`<bl-button
|
|
27
|
+
variant=${o}
|
|
28
|
+
kind=${g}
|
|
29
|
+
class="grid-item"
|
|
30
|
+
size="small"
|
|
31
|
+
@click="${()=>this.setMonthAndCalendarView(l)}"
|
|
32
|
+
><span class="calendar-text">${s.name}</span></bl-button
|
|
33
|
+
>`})}
|
|
34
|
+
</div>`:(this.generateSurroundingYears(),y`<div class="grid-content">
|
|
35
|
+
${this._calendarYears.map(s=>{let l=s===this._calendarYear?"primary":"tertiary",o=s===this._calendarYear?"default":"neutral";return y`<bl-button
|
|
36
|
+
variant=${l}
|
|
37
|
+
kind=${o}
|
|
38
|
+
class="grid-item"
|
|
39
|
+
@click="${()=>this.setYearAndCalendarView(s)}"
|
|
40
|
+
><span class="calendar-text">${s}</span></bl-button
|
|
41
|
+
>`})}
|
|
42
|
+
</div>`)},t=this._calendarView==="months"?"header-text-hover":"",r=this._calendarView==="years"?"header-text-hover":"";return y`<div>
|
|
43
|
+
<div class="calendar-content">
|
|
44
|
+
<div class="calendar-header">
|
|
45
|
+
<bl-button
|
|
46
|
+
class="arrow"
|
|
47
|
+
icon="arrow_left"
|
|
48
|
+
variant="tertiary"
|
|
49
|
+
kind="neutral"
|
|
50
|
+
@click="${()=>this.setPreviousCalendarView()}"
|
|
51
|
+
></bl-button>
|
|
52
|
+
<bl-button
|
|
53
|
+
variant="tertiary"
|
|
54
|
+
kind="neutral"
|
|
55
|
+
class="header-text ${t}"
|
|
56
|
+
@click="${()=>this.setCurrentCalendarView("months")}"
|
|
57
|
+
>${this.months[this._calendarMonth].name}</bl-button
|
|
58
|
+
>
|
|
59
|
+
<bl-button
|
|
60
|
+
variant="tertiary"
|
|
61
|
+
kind="neutral"
|
|
62
|
+
class="header-text ${r}"
|
|
63
|
+
@click="${()=>this.setCurrentCalendarView("years")}"
|
|
64
|
+
>${this._calendarYear}</bl-button
|
|
65
|
+
>
|
|
66
|
+
<bl-button
|
|
67
|
+
class="arrow"
|
|
68
|
+
icon="arrow_right"
|
|
69
|
+
variant="tertiary"
|
|
70
|
+
kind="neutral"
|
|
71
|
+
@click="${()=>this.setNextCalendarView()}"
|
|
72
|
+
></bl-button>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="calendar">${e(this._calendarView)}</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div> `}};n([f()],a.prototype,"type",2),n([f({type:Date,attribute:"min-date",reflect:!0})],a.prototype,"minDate",2),n([f({type:Date,attribute:"max-date",reflect:!0})],a.prototype,"maxDate",2),n([f({type:Number,attribute:"start-of-week",reflect:!0})],a.prototype,"startOfWeek",2),n([f({type:Array,attribute:"disabled-dates",reflect:!0})],a.prototype,"disabledDates",2),n([f()],a.prototype,"locale",2),n([D()],a.prototype,"_selectedDates",2),n([D()],a.prototype,"_selectedRangeDates",2),n([D()],a.prototype,"today",2),n([D()],a.prototype,"_calendarMonth",2),n([D()],a.prototype,"_calendarYear",2),n([D()],a.prototype,"_calendarView",2),n([D()],a.prototype,"_calendarYears",2),n([D()],a.prototype,"_calendarDays",2),n([f({type:Array,attribute:"default-value",reflect:!0})],a.prototype,"defaultValue",1),n([Y("bl-calendar-change")],a.prototype,"_onBlCalendarChange",2),a=n([S("bl-calendar")],a);export{a};
|
|
77
|
+
//# sourceMappingURL=chunk-KOWS266A.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/calendar/bl-calendar.css", "../src/components/calendar/bl-calendar.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.calendar{display:flex;flex-direction:column}.calendar-content{display:flex;padding:16px;flex-direction:column;align-items:center;gap:16px;border-radius:var(--bl-border-radius-s);width:fit-content;border:1px solid var(--bl-color-primary);background:var(--bl-color-neutral-full)}.calendar-header{display:flex;justify-content:space-between;width:100%;align-items:center;gap:2px}.arrow{flex: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:8px}.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%;&.today-day {\n --bl-color-neutral-darker:var(--bl-color-primary);--bl-color-neutral-darkest:var(--bl-color-primary)}&.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)}&.other-month-day{--bl-color-neutral-darker:var(--bl-color-neutral-dark)}}\n\n.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:8px 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:8px}.calendar-text{font:var(--bl-font-title-3-regular)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\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 {\n Calendar,\n CalendarDate,\n CalendarType,\n CalendarView,\n CalendarDay,\n DayValues,\n RangePickerDates,\n} from \"./bl-calendar.types\";\n\n/**\n * @tag bl-calendar\n * @summary Baklava Calendar component\n **/\n@customElement(\"bl-calendar\")\nexport default class BlCalendar extends LitElement {\n /**\n * Defines the calendar types, available types are single, multiple and range\n */\n @property()\n type: CalendarType = CALENDAR_TYPES.SINGLE;\n\n /**\n * Defines the minimum date value for the calendar\n */\n @property({ type: Date, attribute: \"min-date\", reflect: true })\n minDate: Date;\n\n /**\n * Defines the maximum date value for the calendar\n */\n @property({ type: Date, attribute: \"max-date\", reflect: true })\n maxDate: Date;\n\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 /**\n * Defines the unselectable dates for calendar\n */\n @property({ type: Array, attribute: \"disabled-dates\", reflect: true })\n disabledDates: Date[];\n\n /**\n * Defines the calendar language\n */\n @property()\n locale: string = document.documentElement.lang;\n\n @state()\n private _selectedDates: CalendarDate[] = [];\n\n @state()\n private _selectedRangeDates: RangePickerDates = { startDate: undefined, endDate: undefined };\n\n @state()\n private today = new Date();\n\n @state()\n private _calendarMonth: number = this.today.getMonth();\n\n @state()\n private _calendarYear: number = this.today.getFullYear();\n\n @state()\n private _calendarView: CalendarView = CALENDAR_VIEWS.DAYS;\n\n @state()\n private _calendarYears: number[] = [];\n\n @state()\n private _calendarDays: CalendarDay[] = [];\n\n private _defaultValue: Date | Date[];\n\n /**\n * Defines the default selected date value for the calendar\n */\n @property({ type: Array, attribute: \"default-value\", reflect: true })\n get defaultValue(): Date | Date[] {\n return this._defaultValue;\n }\n set defaultValue(defaultValue) {\n if (this.type === CALENDAR_TYPES.SINGLE && Array.isArray(defaultValue)) {\n console.warn(\"Invalid prop value for defaultValue\");\n } else if (this.defaultValue) {\n if (Array.isArray(this.defaultValue)) {\n this._selectedDates = { ...this.defaultValue };\n } else this._selectedDates = [this.defaultValue];\n }\n }\n get months() {\n return [...Array(12).keys()].map(month => {\n return {\n name: new Date(0, month + 1, 0).toLocaleString(this.locale, {\n month: \"long\",\n }),\n value: month,\n };\n });\n }\n get days() {\n return [...Array(7).keys()].map(day => {\n return {\n name: new Date(0, 0, day).toLocaleString(this.locale, { weekday: \"short\" }),\n value: day,\n };\n });\n }\n /**\n * Fires when date selection changes\n */\n @event(\"bl-calendar-change\") private _onBlCalendarChange: EventDispatcher<Date[]>;\n static get styles(): CSSResultGroup {\n return [style];\n }\n getDayNumInAMonth(year: number, month: number) {\n return new Date(year, month + 1, 0).getDate();\n }\n getWeekDayOfDate(year: number, month: number) {\n return new Date(year, month, 1).getDay();\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 = [];\n for (let i = 12; i > 0; i--) {\n this._calendarYears.push(fromYear - i);\n }\n }\n if (this.type === CALENDAR_TYPES.RANGE) {\n 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 = [];\n for (let i = 1; i <= 12; i++) {\n this._calendarYears.push(fromYear + i);\n }\n }\n if (this.type === CALENDAR_TYPES.RANGE) {\n this.setHoverClass();\n }\n }\n\n setCurrentCalendarView(view: CalendarView) {\n if (this._calendarView !== view) {\n this._calendarView = view;\n } else this._calendarView = 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) {\n 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) {\n this.setHoverClass();\n }\n }\n\n generateSurroundingYears() {\n if (this._calendarYears.length === 0) {\n this._calendarYears = Array.from(\n { length: 12 },\n (_, index) => this._calendarYear - 4 + index\n );\n }\n }\n clearRangePickerStyles() {\n this.shadowRoot?.querySelectorAll(\".range-day\").forEach(day => {\n day.classList.remove(\"range-day\");\n });\n this.shadowRoot?.querySelectorAll(\".range-start-day\").forEach(day => {\n day.classList.remove(\"range-start-day\");\n });\n this.shadowRoot?.querySelectorAll(\".range-end-day\").forEach(day => {\n day.classList.remove(\"range-end-day\");\n });\n }\n handleDate(date: CalendarDate) {\n if (this.type !== CALENDAR_TYPES.RANGE) {\n if (date.getMonth() < this._calendarMonth) {\n this.setPreviousCalendarView();\n } else if (date.getMonth() > this._calendarMonth) {\n this.setNextCalendarView();\n }\n }\n\n if (this.type === CALENDAR_TYPES.SINGLE) {\n this.handleSingleSelectCalendar(date);\n } else if (this.type === CALENDAR_TYPES.MULTIPLE) {\n this.handleMultipleSelectCalendar(date);\n } else if (this.type === CALENDAR_TYPES.RANGE) {\n this.handleRangeSelectCalendar(date);\n }\n\n this._onBlCalendarChange(this._selectedDates);\n this.requestUpdate();\n }\n handleSingleSelectCalendar(calendarDate: CalendarDate) {\n this._selectedDates.splice(0, 1);\n this._selectedDates.push(calendarDate);\n }\n handleMultipleSelectCalendar(calendarDate: CalendarDate) {\n const dateExist = this._selectedDates.find(function (selectedDate) {\n return selectedDate.getTime() === calendarDate.getTime();\n });\n\n if (dateExist)\n this._selectedDates.splice(\n this._selectedDates.findIndex(date => date.getTime() === calendarDate.getTime()),\n 1\n );\n else this._selectedDates.push(calendarDate);\n }\n handleRangeSelectCalendar(calendarDate: CalendarDate) {\n if (!this._selectedRangeDates.startDate) {\n this._selectedRangeDates.startDate = calendarDate;\n this._selectedDates.push(calendarDate);\n } else if (this._selectedRangeDates.startDate && !this._selectedRangeDates.endDate) {\n if (calendarDate.getTime() > this._selectedRangeDates.startDate.getTime()) {\n this._selectedRangeDates.endDate = calendarDate;\n this._selectedDates.push(calendarDate);\n } else if (calendarDate.getTime() < this._selectedRangeDates.startDate.getTime()) {\n const temp = this._selectedRangeDates.startDate;\n\n this._selectedRangeDates.startDate = calendarDate;\n this._selectedRangeDates.endDate = temp;\n this._selectedDates.splice(\n 0,\n this._selectedDates.length,\n this._selectedRangeDates.startDate,\n this._selectedRangeDates.endDate\n );\n }\n } else if (this._selectedRangeDates.startDate && this._selectedRangeDates.endDate) {\n this._selectedRangeDates.startDate = calendarDate;\n this._selectedRangeDates.endDate = undefined;\n this._selectedDates.splice(0, this._selectedDates.length, this._selectedRangeDates.startDate);\n }\n this.setHoverClass();\n }\n\n checkIfSelectedDate(calendarDate: CalendarDate) {\n const day = this._selectedDates.find(selectedDate => {\n return calendarDate.getTime() === selectedDate.getTime();\n });\n\n return !!day;\n }\n checkIfDateIsToday(calendarDate: CalendarDate) {\n const today = new Date();\n\n return (\n today.getDate() === calendarDate.getDate() &&\n today.getMonth() === calendarDate.getMonth() &&\n today.getFullYear() === calendarDate.getFullYear()\n );\n }\n checkIfDateIsDisabled(calendarDate: CalendarDate) {\n if (\n calendarDate.getTime() < this.minDate?.getTime() ||\n calendarDate.getTime() > this.maxDate?.getTime()\n ) {\n return true;\n }\n\n if (Array.isArray(this.disabledDates)) {\n const day = this.disabledDates.find(disabledDate => {\n return calendarDate.getTime() === new Date(disabledDate).getTime();\n });\n\n return !!day;\n }\n return false;\n }\n\n setHoverClass() {\n this.clearRangePickerStyles();\n\n if (this._selectedRangeDates.startDate && this._selectedRangeDates.endDate) {\n setTimeout(() => {\n const startDateParentElement = this.shadowRoot?.getElementById(\n `${this._selectedRangeDates.startDate?.getTime()}`\n )?.parentElement;\n\n startDateParentElement?.classList.add(\"range-start-day\");\n\n const endDateParentElement = this.shadowRoot?.getElementById(\n `${this._selectedRangeDates.endDate?.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._selectedRangeDates?.startDate?.getTime() || 0) &&\n date.getTime() < (this._selectedRangeDates?.endDate?.getTime() || 0)\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 render() {\n const getCalendarView = (calendarView: CalendarView) => {\n if (calendarView === CALENDAR_VIEWS.DAYS) {\n const calendarDays = this.createCalendarDays();\n const valuesArray = Array.from(calendarDays.values());\n\n return html`<div class=\"week-row\">\n ${[...calendarDays.keys()].map(key => {\n return html` <div class=\"calendar-text weekday-text\">${key}</div> `;\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 } else if (calendarView === CALENDAR_VIEWS.MONTHS) {\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 } else {\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 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`<div>\n <div class=\"calendar-content\">\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}</bl-button\n >\n <bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n class=\"header-text ${showYearSelected}\"\n @click=\"${() => this.setCurrentCalendarView(CALENDAR_VIEWS.YEARS)}\"\n >${this._calendarYear}</bl-button\n >\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 <div class=\"calendar\">${getCalendarView(this._calendarView)}</div>\n </div>\n </div> `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_calendar_default", "BlCalendar", "s", "defaultValue", "month", "day", "bl_calendar_default", "year", "fromYear", "i", "view", "_", "index", "_a", "_b", "_c", "date", "calendarDate", "selectedDate", "temp", "today", "disabledDate", "_d", "_e", "_f", "_g", "_h", "_i", "startDateParentElement", "endDateParentElement", "rangeDays", "element", "calendar", "currentMonthStartWeekDay", "lastMonthDaysCount", "previousMonthDayCount", "currentMonthDayCount", "dayOfTheWeek", "lastMonthDaysIterator", "mod", "currentMonthDaysIterator", "nextMonthDaysIterator", "getCalendarView", "calendarView", "calendarDays", "valuesArray", "x", "key", "values", "isSelectedDay", "isDayToday", "isDisabledDay", "classes", "o", "variant", "neutral", "showMonthSelected", "showYearSelected", "__decorateClass", "e", "t", "event"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as y,b as d,e as c}from"./chunk-5MOOXA2X.js";import{a as m,b as r,f as w}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var k=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}`,E=k;var t=class extends w{constructor(){super(...arguments);this.open=!1;this.critical=!1;this.polyfilled=!0;this.clickOutsideHandler=e=>{if(this.critical)return;e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&!this.critical&&(e.preventDefault(),this.closeDialog("keyboard"))};this.toggleFooterShadow=()=>{var l,n,s,p,f,
|
|
1
|
+
import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";import{a as y,b as d,e as c}from"./chunk-5MOOXA2X.js";import{a as m,b as r,f as w}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var k=m`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`,E=k;var t=class extends w{constructor(){super(...arguments);this.open=!1;this.critical=!1;this.polyfilled=!0;this.clickOutsideHandler=e=>{if(this.critical)return;e.composedPath().includes(this.container)||this.closeDialog("backdrop")};this.onKeydown=e=>{e.code==="Escape"&&this.open&&!this.critical&&(e.preventDefault(),this.closeDialog("keyboard"))};this.toggleFooterShadow=()=>{var l,n,s,p,b,f,g;let e=(l=this.content)==null?void 0:l.scrollTop,i=(n=this.content)==null?void 0:n.scrollHeight,a=(s=this.content)==null?void 0:s.clientHeight;e+a>=i?(b=(p=this.footer)==null?void 0:p.classList)==null||b.remove("shadow"):(g=(f=this.footer)==null?void 0:f.classList)==null||g.add("shadow")}}static get styles(){return[E]}updated(e){(e.has("open")||e.has("polyfilled"))&&this.toggleDialogHandler()}get _hasFooter(){return[...this.childNodes].some(e=>e.nodeName==="BL-BUTTON")}toggleDialogHandler(){var e,i,a,l,n,s;this.open?((i=(e=this.dialog)==null?void 0:e.showModal)==null||i.call(e),this.onOpen({isOpen:!0}),document.body.style.overflow="hidden",this.toggleFooterShadow(),window==null||window.addEventListener("keydown",p=>this.onKeydown(p)),window==null||window.addEventListener("resize",this.toggleFooterShadow),(a=this.content)==null||a.addEventListener("scroll",this.toggleFooterShadow)):((n=(l=this.dialog)==null?void 0:l.close)==null||n.call(l),this.onClose({isOpen:!1},{bubbles:!1}),document.body.style.overflow="auto",window==null||window.removeEventListener("keydown",this.onKeydown),window==null||window.removeEventListener("resize",this.toggleFooterShadow),(s=this.content)==null||s.removeEventListener("scroll",this.toggleFooterShadow))}closeDialog(e){this.onRequestClose({source:e},{cancelable:!0}).defaultPrevented||(this.open=!1)}renderFooter(){return this._hasFooter?r`<footer>
|
|
2
2
|
<slot name="primary-action"></slot>
|
|
3
3
|
<slot name="secondary-action"></slot>
|
|
4
4
|
<slot name="tertiary-action"></slot>
|
|
@@ -27,4 +27,4 @@ import{a as x}from"./chunk-6LT7O7T2.js";import{a as h}from"./chunk-GRL4DWKG.js";
|
|
|
27
27
|
${this.renderContainer()}
|
|
28
28
|
</dialog>
|
|
29
29
|
`}};o([d({type:Boolean,reflect:!0,hasChanged(u,v){return u===!1&&v===void 0?!1:u!==v}})],t.prototype,"open",2),o([d({type:String})],t.prototype,"caption",2),o([d({type:Boolean,reflect:!0})],t.prototype,"critical",2),o([d({type:Boolean,reflect:!0})],t.prototype,"polyfilled",2),o([c(".dialog")],t.prototype,"dialog",2),o([c("footer")],t.prototype,"footer",2),o([c(".container")],t.prototype,"container",2),o([c(".content")],t.prototype,"content",2),o([h("bl-dialog-open")],t.prototype,"onOpen",2),o([h("bl-dialog-request-close")],t.prototype,"onRequestClose",2),o([h("bl-dialog-close")],t.prototype,"onClose",2),t=o([y("bl-dialog")],t);export{t as a};
|
|
30
|
-
//# sourceMappingURL=chunk-
|
|
30
|
+
//# sourceMappingURL=chunk-N43OCCSL.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/dialog/bl-dialog.css", "../src/components/dialog/bl-dialog.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:contents}.container{--background-color:var(--bl-color-neutral-full);display:flex;flex-direction:column;background:var(--background-color);max-width:calc(100vw - var(--bl-size-4xl));max-height:calc(100vh - var(--bl-size-4xl));min-width:424px;padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog,.dialog-polyfill .container{padding:0;border:0;border-radius:var(--bl-border-radius-l)}.dialog-polyfill .container{position:fixed;z-index:var(--bl-index-dialog)}.dialog::backdrop{background-color:#273142b3}.dialog-polyfill{display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;align-items:center;justify-content:center;z-index:var(--bl-index-dialog);background-color:#273142b3}:host([open]) .dialog-polyfill{display:flex}header{display:flex;justify-content:space-between;align-items:center;gap:var(--bl-size-2xs);padding:var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl)}header bl-button{margin-left:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;padding:0}.content{padding:var(--bl-size-xl);overflow:auto}:host([critical]) .content{padding-top:0}.container.has-footer .content{padding-bottom:0}footer{padding:var(--bl-size-xl);display:flex;flex-flow:row-reverse wrap;gap:var(--bl-size-m)}footer.shadow{/* FIXME: Use variables for sizes */box-shadow:0 -4px 15px #27314226}@media only screen and (max-width: 471px){.container{max-width:calc(100vw - var(--bl-size-2xl));max-height:calc(100vh - var(--bl-size-2xl));min-width:auto;min-height:auto}footer{flex-flow:column wrap}}::slotted(bl-tab-group){display:block;transform:translateX(calc(var(--bl-size-xl) * -1));width:calc(100% + calc(var(--bl-size-xl) * 2))}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport style from \"./bl-dialog.css\";\n\ntype DialogElement = {\n showModal: () => void;\n close: () => void;\n};\n\n/**\n * @tag bl-dialog\n * @summary Baklava Dialog component\n */\n@customElement(\"bl-dialog\")\nexport default class BlDialog extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets dialog open-close status\n */\n @property({\n type: Boolean,\n reflect: true,\n hasChanged(newVal: boolean, oldVal: boolean | undefined) {\n if (newVal === false && oldVal === undefined) {\n // Assume that the initial value is false\n return false;\n }\n return newVal !== oldVal;\n },\n })\n open = false;\n\n /**\n * Sets the dialog title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Determines if the dialog is critical, which disables closing through keyboard, backdrop, and close button interactions.\n */\n @property({ type: Boolean, reflect: true })\n critical = false;\n\n /**\n * Determines if dialog currently uses polyfilled version instead of native HTML Dialog. By\n * default, it uses native Dialog if the browser supports it, otherwise polyfills. You can force\n * using polyfill by setting this to true in some cases like to show some content on top of dialog\n * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some\n * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.\n *\n * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,\n * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.\n * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set\n * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.\n * For more information, refer to the comment linked below:\n *\n * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413\n */\n @property({ type: Boolean, reflect: true })\n polyfilled = true;\n\n @query(\".dialog\")\n private dialog: HTMLDialogElement & DialogElement;\n\n @query(\"footer\")\n private footer: HTMLElement;\n\n @query(\".container\")\n private container: HTMLElement;\n\n @query(\".content\")\n private content: HTMLElement;\n\n /**\n * Fires when the dialog is opened\n */\n @event(\"bl-dialog-open\") private onOpen: EventDispatcher<object>;\n\n /**\n * Fires before the dialog is closed with internal actions like clicking close button,\n * pressing Escape key or clicking backdrop. Can be prevented by calling `event.preventDefault()`\n */\n @event(\"bl-dialog-request-close\") private onRequestClose: EventDispatcher<{\n source: \"close-button\" | \"keyboard\" | \"backdrop\";\n }>;\n\n /**\n * Fires when the dialog is closed\n */\n @event(\"bl-dialog-close\") private onClose: EventDispatcher<object>;\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"open\") || changedProperties.has(\"polyfilled\")) {\n this.toggleDialogHandler();\n }\n }\n\n private get _hasFooter() {\n return [...this.childNodes].some(node => node.nodeName === \"BL-BUTTON\");\n }\n\n private toggleDialogHandler() {\n if (this.open) {\n this.dialog?.showModal?.();\n this.onOpen({ isOpen: true });\n document.body.style.overflow = \"hidden\";\n this.toggleFooterShadow();\n window?.addEventListener(\"keydown\", event => this.onKeydown(event));\n window?.addEventListener(\"resize\", this.toggleFooterShadow);\n this.content?.addEventListener(\"scroll\", this.toggleFooterShadow);\n } else {\n this.dialog?.close?.();\n this.onClose({ isOpen: false }, { bubbles: false });\n document.body.style.overflow = \"auto\";\n window?.removeEventListener(\"keydown\", this.onKeydown);\n window?.removeEventListener(\"resize\", this.toggleFooterShadow);\n this.content?.removeEventListener(\"scroll\", this.toggleFooterShadow);\n }\n }\n\n private closeDialog(source: \"close-button\" | \"keyboard\" | \"backdrop\") {\n const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });\n\n if (requestCloseEvent.defaultPrevented) {\n return;\n }\n\n this.open = false;\n }\n\n private clickOutsideHandler = (event: MouseEvent) => {\n if (this.critical) return;\n\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath.includes(this.container)) {\n this.closeDialog(\"backdrop\");\n }\n };\n\n private onKeydown = (event: KeyboardEvent): void => {\n if (event.code === \"Escape\" && this.open && !this.critical) {\n event.preventDefault();\n this.closeDialog(\"keyboard\");\n }\n };\n\n private toggleFooterShadow = () => {\n const scrollTop = this.content?.scrollTop;\n const scrollHeight = this.content?.scrollHeight;\n const clientHeight = this.content?.clientHeight;\n\n if (scrollTop + clientHeight >= scrollHeight) {\n this.footer?.classList?.remove(\"shadow\");\n } else {\n this.footer?.classList?.add(\"shadow\");\n }\n };\n\n private renderFooter() {\n return this._hasFooter\n ? html`<footer>\n <slot name=\"primary-action\"></slot>\n <slot name=\"secondary-action\"></slot>\n <slot name=\"tertiary-action\"></slot>\n </footer>`\n : \"\";\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"dialog-caption\">${this.caption}</h2>` : \"\";\n const closeButton = !this.critical\n ? html`<bl-button\n @click=\"${() => this.closeDialog(\"close-button\")}\"\n icon=\"close\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>`\n : null;\n\n const classes = {\n \"container\": true,\n \"has-footer\": this._hasFooter,\n };\n\n return html` <div class=\"${classMap(classes)}\">\n <header>${title} ${closeButton}</header>\n <section class=\"content\"><slot></slot></section>\n ${this.renderFooter()}\n </div>`;\n }\n\n render(): TemplateResult {\n return this.polyfilled || !window.HTMLDialogElement\n ? html`<div\n class=\"dialog-polyfill\"\n role=\"dialog\"\n aria-labelledby=\"dialog-caption\"\n @click=${this.clickOutsideHandler}\n >\n ${this.renderContainer()}\n </div>`\n : html`\n <dialog\n class=\"dialog\"\n aria-labelledby=\"dialog-caption\"\n @click=${this.clickOutsideHandler}\n >\n ${this.renderContainer()}\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-dialog\": BlDialog;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_dialog_default", "BlDialog", "s", "event", "_a", "_b", "_c", "_d", "_e", "_f", "_g", "scrollTop", "scrollHeight", "clientHeight", "bl_dialog_default", "changedProperties", "node", "source", "x", "title", "closeButton", "classes", "o", "__decorateClass", "e", "newVal", "oldVal", "i"]
|
|
7
|
+
}
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as $}from"./chunk-EG7U7PM3.js";import{a as k}from"./chunk-XDUIVR6I.js";import{a as f}from"./chunk-6LT7O7T2.js";import{a as z,c as b}from"./chunk-HBPBDC7T.js";import{a as y}from"./chunk-ECPWEUBG.js";import{a as x}from"./chunk-DINNT5P2.js";import{a as m}from"./chunk-GRL4DWKG.js";import{a as T,b as a,c as h,e as v,f as S}from"./chunk-5MOOXA2X.js";import{a as w,b as d,f as g}from"./chunk-4OT5AMS5.js";import{d as l}from"./chunk-IZ2LK5GK.js";var R=w`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .select-input .selected-options{color:var(--bl-color-neutral-light)}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:", "}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .additional-selection-count{color:var(--bl-color-neutral-light)}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}:host(:empty) .popover{display:none}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host([placeholder]) :where(.select-open, .selected) .label,:host(:not([placeholder])) .selected .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);/* Make sure option focus doesn't overflow */box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:"";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:none;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:none}.search-loading-icon{animation:spin 1s linear infinite}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.actions bl-icon{padding:4px}`,P=R;var A,i=class extends k(g){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this.viewSelectAll=!1;this.searchBar=!1;this.searchBarLoadingState=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._searchText="";this.userLang=((A=document.querySelector("html"))==null?void 0:A.getAttribute("lang"))||navigator.language;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var o;let t=e.composedPath();(o=t==null?void 0:t.find(s=>s.tagName==="BL-SELECT"))!=null&&o.contains(this)||this.close()};this.focusedOptionIndex=-1;this.lastKeyPressedTime=0;this.typedCharacters="";this.keyPressThreshold=500}static get styles(){return[P]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let t=new FormData;e.forEach(o=>t.append(this.name,`${o}`)),this.setValue(t)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get noResultFound(){return this._searchText!==""&&this._connectedOptions.every(e=>e.hidden)}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this.searchBar&&setTimeout(()=>{var e,t,o;(o=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("input"))==null||o.focus()},100),this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._handleSearchOptions({target:{value:""}}),this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=L(this._selectInput,this._popover,()=>{V(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[C(),E(8),I({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",t=>{this.reportValidity()||t.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){var O;let e=d`<ul class="selected-options">
|
|
1
|
+
import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as $}from"./chunk-EG7U7PM3.js";import{a as k}from"./chunk-XDUIVR6I.js";import{a as f}from"./chunk-6LT7O7T2.js";import{a as z,c as b}from"./chunk-HBPBDC7T.js";import{a as y}from"./chunk-ECPWEUBG.js";import{a as x}from"./chunk-DINNT5P2.js";import{a as m}from"./chunk-GRL4DWKG.js";import{a as T,b as a,c as h,e as v,f as S}from"./chunk-5MOOXA2X.js";import{a as w,b as d,f as g}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var R=w`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .select-input .selected-options{color:var(--bl-color-neutral-light)}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:", "}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .additional-selection-count{color:var(--bl-color-neutral-light)}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}:host(:empty) .popover{display:none}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host([placeholder]) :where(.select-open, .selected) .label,:host(:not([placeholder])) .selected .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);/* Make sure option focus doesn't overflow */box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:"";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:none;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:none}.search-spinner{padding-inline-end:var(--bl-font-size-2xs)}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}.actions bl-icon{padding:4px}`,P=R;var A,i=class extends k(g){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this.viewSelectAll=!1;this.searchBar=!1;this.searchBarLoadingState=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._searchText="";this.userLang=((A=document.querySelector("html"))==null?void 0:A.getAttribute("lang"))||navigator.language;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var l;let t=e.composedPath();(l=t==null?void 0:t.find(s=>s.tagName==="BL-SELECT"))!=null&&l.contains(this)||this.close()};this.focusedOptionIndex=-1;this.lastKeyPressedTime=0;this.typedCharacters="";this.keyPressThreshold=500}static get styles(){return[P]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let t=new FormData;e.forEach(l=>t.append(this.name,`${l}`)),this.setValue(t)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get noResultFound(){return this._searchText!==""&&this._connectedOptions.every(e=>e.hidden)}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this.searchBar&&setTimeout(()=>{var e,t,l;(l=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("input"))==null||l.focus()},100),this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._handleSearchOptions({target:{value:""}}),this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=L(this._selectInput,this._popover,()=>{V(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[C(),E(8),I({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:t})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${t}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",t=>{this.reportValidity()||t.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){var O;let e=d`<ul class="selected-options">
|
|
2
2
|
${this._selectedOptions.map(p=>d`<li>${p.getAttribute("label")||p.textContent}</li>`)}
|
|
3
|
-
</ul>`,
|
|
3
|
+
</ul>`,l=!(this._selectedOptions.length>0&&this._selectedOptions.every(p=>p.disabled))&&(this.clearable||this.multiple),s=l?d`<bl-button
|
|
4
4
|
class="remove-all"
|
|
5
5
|
size="small"
|
|
6
6
|
variant="tertiary"
|
|
7
7
|
kind="neutral"
|
|
8
8
|
icon="close"
|
|
9
9
|
@click=${this._onClickRemove}
|
|
10
|
-
></bl-button>`:"",n=this.searchBar&&this.opened,c=this._selectedOptions.length>0,r=n||c&&
|
|
10
|
+
></bl-button>`:"",n=this.searchBar&&this.opened,c=this._selectedOptions.length>0,r=n||c&&l,u=(O=this.searchBarPlaceholder)!=null?O:b("Search",{desc:"bl-select: search placeholder text"}),M=d`<bl-icon
|
|
11
11
|
class="search-mag-icon"
|
|
12
12
|
name="search"
|
|
13
13
|
style="color: var(--bl-color-primary);font-size: var(--bl-font-size-s)"
|
|
14
|
-
></bl-icon>`,D=d`<bl-
|
|
15
|
-
class="search-loading-icon"
|
|
16
|
-
name="loading"
|
|
17
|
-
style="color: var(--bl-color-primary);font-size: var(--bl-font-size-s)"
|
|
18
|
-
></bl-icon>`,_=r?d`<div class="action-divider"></div>`:"",F=d`<fieldset
|
|
14
|
+
></bl-icon>`,D=d`<bl-spinner class="search-spinner"></bl-spinner>`,_=r?d`<div class="action-divider"></div>`:"",F=d`<fieldset
|
|
19
15
|
class=${f({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
|
|
20
16
|
tabindex="${this.disabled?"-1":0}"
|
|
21
17
|
.autofocus=${this.autofocus}
|
|
@@ -71,7 +67,7 @@ import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as
|
|
|
71
67
|
|
|
72
68
|
<bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
|
|
73
69
|
</div>
|
|
74
|
-
</fieldset>`}selectAllTemplate(){var s;if(!this.multiple||!this.viewSelectAll||this.noResultFound)return null;let e=this._connectedOptions.filter(n=>!n.hidden).every(n=>n.selected),t=this._selectedOptions.filter(n=>!n.hidden).length>0,
|
|
70
|
+
</fieldset>`}selectAllTemplate(){var s;if(!this.multiple||!this.viewSelectAll||this.noResultFound)return null;let e=this._connectedOptions.filter(n=>!n.hidden).every(n=>n.selected),t=this._selectedOptions.filter(n=>!n.hidden).length>0,l=(s=this.selectAllText)!=null?s:b("Select All",{desc:"bl-select: select all text"});return d`<bl-checkbox
|
|
75
71
|
class="select-all"
|
|
76
72
|
.checked="${e}"
|
|
77
73
|
.indeterminate="${t&&!e}"
|
|
@@ -79,14 +75,14 @@ import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as
|
|
|
79
75
|
aria-selected="${e}"
|
|
80
76
|
@bl-checkbox-change="${this._handleSelectAll}"
|
|
81
77
|
>
|
|
82
|
-
${
|
|
78
|
+
${l}
|
|
83
79
|
</bl-checkbox>`}render(){var c,r;let e=this.checkValidity()?"":d`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
84
80
|
${this.validationMessage}
|
|
85
|
-
</p>`,t=this.helpText?d`<p class="help-text">${this.helpText}</p>`:"",
|
|
81
|
+
</p>`,t=this.helpText?d`<p class="help-text">${this.helpText}</p>`:"",l=this.label?d`<label id="label">${this.label}</label>`:"",s=(c=this.searchNotFoundText)!=null?c:b("No Data Found",{desc:"bl-select: search no data text"}),n=(r=this.popoverClearSearchText)!=null?r:b("Clear Search",{desc:"bl-select: clear search button text"});return d`<div
|
|
86
82
|
class=${f({"select-wrapper":!0,"select-open":this.opened,selected:this._selectedOptions.length>0,invalid:!this.validity.valid,dirty:this.dirty})}
|
|
87
83
|
@keydown=${this.handleKeydown}
|
|
88
84
|
>
|
|
89
|
-
${
|
|
85
|
+
${l} ${this.inputTemplate()}
|
|
90
86
|
<div
|
|
91
87
|
class="popover"
|
|
92
88
|
tabindex="${x(this._isPopoverOpen?void 0:"-1")}"
|
|
@@ -107,5 +103,5 @@ import{b as C,d as E,f as I,g as L,h as V}from"./chunk-EZSEQHRH.js";import{a as
|
|
|
107
103
|
</div>`:""}
|
|
108
104
|
</div>
|
|
109
105
|
<div class="hint">${e} ${t}</div>
|
|
110
|
-
</div> `}handleFocusOptionByKey(e){let t=Date.now();t-this.lastKeyPressedTime>this.keyPressThreshold&&(this.typedCharacters=""),this.lastKeyPressedTime=t,this.typedCharacters+=e.toLowerCase();let s=this.options.findIndex(n=>n.disabled?!1:n.innerText.trim().toLowerCase().startsWith(this.typedCharacters));s!==-1&&(this.focusedOptionIndex=s,this.options[s].focus())}handleKeydown(e){if(this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code))this._togglePopover(),e.preventDefault();else if(this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code))this.open(),e.preventDefault();else if(e.code==="Escape")this.close(),e.preventDefault();else if(this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)){let t=this.options.filter(
|
|
111
|
-
//# sourceMappingURL=chunk-
|
|
106
|
+
</div> `}handleFocusOptionByKey(e){let t=Date.now();t-this.lastKeyPressedTime>this.keyPressThreshold&&(this.typedCharacters=""),this.lastKeyPressedTime=t,this.typedCharacters+=e.toLowerCase();let s=this.options.findIndex(n=>n.disabled?!1:n.innerText.trim().toLowerCase().startsWith(this.typedCharacters));s!==-1&&(this.focusedOptionIndex=s,this.options[s].focus())}handleKeydown(e){if(this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code))this._togglePopover(),e.preventDefault();else if(this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code))this.open(),e.preventDefault();else if(e.code==="Escape")this.close(),e.preventDefault();else if(this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)){let t=this.options.filter(l=>!l.disabled);e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,t.length-1)),t[this.focusedOptionIndex].focus(),e.preventDefault()}else this._isPopoverOpen&&!this.searchBar&&this.handleFocusOptionByKey(e.key)}_togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){let e=this._selectedOptions.map(t=>({value:t.value,selected:t.selected,text:t.textContent}));this.multiple?this._onBlSelect(e):this._onBlSelect(e[0])}_handleSearchEvent(){this._onBlSearch(this._searchText)}_handleSearchOptions(e){this.searchBar&&(this._searchText=e.target.value,this._handleSearchEvent(),this._connectedOptions.forEach(t=>{var s;let l=(s=t.textContent)==null?void 0:s.toLocaleLowerCase(this.userLang).includes(this._searchText.toLocaleLowerCase(this.userLang));t.hidden=!l}),this._selectedOptions=this.options.filter(t=>t.selected),this._handleLastVisibleSearchedOption(),this.requestUpdate())}_handleLastVisibleSearchedOption(){var t,l;let e=[...this.options].reverse().find(s=>!s.hidden);e&&((l=(t=e==null?void 0:e.shadowRoot)==null?void 0:t.querySelector("div"))==null||l.classList.add("no-border-bottom")),this.options.map(s=>{var n,c;!s.hidden&&s!==e&&((c=(n=s.shadowRoot)==null?void 0:n.querySelector("div"))==null||c.classList.remove("no-border-bottom"))})}_handleSingleSelect(e){this.value=e.value,this._searchText="",this._handleSelectEvent(),this.close()}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let t=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(t)}_handleSelectAll(e){var c;let t=(c=this.shadowRoot)==null?void 0:c.querySelector(".select-all"),l=e.detail,n=this._connectedOptions.filter(r=>!r.selected&&!r.hidden).every(r=>r.disabled);if(l&&n){setTimeout(()=>{var u;let r=(u=t==null?void 0:t.shadowRoot)==null?void 0:u.querySelector("input");r==null||r.click()},0);return}this._connectedOptions.forEach(r=>{r.disabled||r.hidden||(r.selected=l)}),this._handleMultipleSelect()}_onClickRemove(e){e.stopPropagation(),this._searchText="";let t=this._selectedOptions.filter(l=>l.disabled);this._connectedOptions.filter(l=>!l.disabled&&l.selected).forEach(l=>{l.selected=!1}),this.value=t.length?t.map(l=>l.value):null,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(t=>t.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.multiple?this.value=[]:this.value=null),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),e.has("_selectedOptions")&&this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};i.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},i.formControlValidators=[$],o([a()],i.prototype,"name",2),o([a()],i.prototype,"value",1),o([a({reflect:!0})],i.prototype,"label",2),o([a({reflect:!0})],i.prototype,"placeholder",2),o([a({type:String,reflect:!0})],i.prototype,"size",2),o([a({type:Boolean,reflect:!0})],i.prototype,"required",2),o([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2),o([a({type:Boolean,reflect:!0})],i.prototype,"clearable",2),o([a({type:Boolean,reflect:!0})],i.prototype,"multiple",2),o([a({type:Boolean,reflect:!0})],i.prototype,"autofocus",2),o([a({type:Boolean,attribute:"label-fixed",reflect:!0})],i.prototype,"labelFixed",2),o([a({type:String,attribute:"help-text",reflect:!0})],i.prototype,"helpText",2),o([a({type:String,attribute:"invalid-text",reflect:!0})],i.prototype,"customInvalidText",2),o([a({type:Boolean,attribute:"view-select-all",converter:y()})],i.prototype,"viewSelectAll",2),o([a({type:String,attribute:"select-all-text"})],i.prototype,"selectAllText",2),o([a({type:Boolean,attribute:"search-bar",reflect:!0})],i.prototype,"searchBar",2),o([a({type:String,attribute:"search-bar-placeholder",reflect:!0})],i.prototype,"searchBarPlaceholder",2),o([a({type:Boolean,attribute:"search-bar-loading-state",converter:y()})],i.prototype,"searchBarLoadingState",2),o([a({type:String,attribute:"search-not-found-text",reflect:!0})],i.prototype,"searchNotFoundText",2),o([a({type:String,attribute:"popover-clear-search-text",reflect:!0})],i.prototype,"popoverClearSearchText",2),o([h()],i.prototype,"_isPopoverOpen",2),o([h()],i.prototype,"_additionalSelectedOptionCount",2),o([h()],i.prototype,"_searchText",2),o([v(".selected-options")],i.prototype,"selectedOptionsContainer",2),o([S(".selected-options li")],i.prototype,"selectedOptionsItems",2),o([v(".popover")],i.prototype,"_popover",2),o([v(".select-input")],i.prototype,"_selectInput",2),o([m("bl-select")],i.prototype,"_onBlSelect",2),o([m("bl-search")],i.prototype,"_onBlSearch",2),o([h()],i.prototype,"_selectedOptions",2),o([h()],i.prototype,"dirty",2),o([v(".select-input")],i.prototype,"validationTarget",2),i=o([T("bl-select"),z()],i);export{i as a};
|
|
107
|
+
//# sourceMappingURL=chunk-P7J47Z2J.js.map
|