@trendyol/baklava 3.3.0-beta.1 → 3.3.0-beta.10
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 +13 -1
- 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 +1 -0
- package/dist/baklava.d.ts +1 -0
- package/dist/baklava.d.ts.map +1 -1
- package/dist/baklava.js +1 -1
- package/dist/{chunk-BCXEI2IY.js → chunk-2I4NXKV5.js} +6 -6
- package/dist/chunk-2I4NXKV5.js.map +7 -0
- package/dist/{chunk-U2GVQEOB.js → chunk-43SCA2ZJ.js} +12 -11
- package/dist/chunk-43SCA2ZJ.js.map +7 -0
- package/dist/chunk-47S2NIWC.js +5 -0
- package/dist/chunk-47S2NIWC.js.map +7 -0
- package/dist/{chunk-BJVM3LHO.js → chunk-AW5LBSEM.js} +2 -2
- package/dist/{chunk-HYB2HRRX.js → chunk-BH64QNLE.js} +2 -2
- package/dist/{chunk-HYB2HRRX.js.map → chunk-BH64QNLE.js.map} +2 -2
- package/dist/{chunk-I44SG6Y7.js → chunk-FCEMOH4J.js} +2 -1
- package/dist/{chunk-I44SG6Y7.js.map → chunk-FCEMOH4J.js.map} +2 -2
- package/dist/{chunk-JCODVOWY.js → chunk-FTQX7CEW.js} +6 -5
- package/dist/{chunk-JCODVOWY.js.map → chunk-FTQX7CEW.js.map} +2 -2
- package/dist/{chunk-2U3PTJEA.js → chunk-GMVJABPT.js} +2 -1
- package/dist/{chunk-2U3PTJEA.js.map → chunk-GMVJABPT.js.map} +2 -2
- package/dist/{chunk-7NZ7DYVG.js → chunk-GXDVWGFU.js} +2 -1
- package/dist/{chunk-7NZ7DYVG.js.map → chunk-GXDVWGFU.js.map} +2 -2
- package/dist/{chunk-OUFOJQAS.js → chunk-J45OQI7D.js} +2 -2
- package/dist/{chunk-OUFOJQAS.js.map → chunk-J45OQI7D.js.map} +2 -2
- package/dist/chunk-NGQ435PC.js +50 -0
- package/dist/chunk-NGQ435PC.js.map +7 -0
- package/dist/{chunk-2E2KYTNB.js → chunk-OAF3R4PW.js} +3 -3
- package/dist/{chunk-2E2KYTNB.js.map → chunk-OAF3R4PW.js.map} +3 -3
- package/dist/chunk-T3UQYGO3.js +84 -0
- package/dist/chunk-T3UQYGO3.js.map +7 -0
- package/dist/{chunk-7QNX2GPS.js → chunk-X73CSBRO.js} +2 -2
- package/dist/chunk-X73CSBRO.js.map +7 -0
- package/dist/components/accordion-group/accordion/bl-accordion.js +1 -1
- package/dist/components/alert/bl-alert.js +1 -1
- package/dist/components/badge/bl-badge.js +1 -1
- package/dist/components/button/bl-button.js +1 -1
- package/dist/components/calendar/bl-calendar.d.ts +26 -51
- package/dist/components/calendar/bl-calendar.d.ts.map +1 -1
- package/dist/components/calendar/bl-calendar.js +1 -1
- package/dist/components/calendar/bl-calendar.test.d.ts +2 -0
- package/dist/components/calendar/bl-calendar.test.d.ts.map +1 -0
- package/dist/components/calendar/bl-calendar.types.d.ts +3 -4
- package/dist/components/calendar/bl-calendar.types.d.ts.map +1 -1
- package/dist/components/checkbox-group/bl-checkbox-group.js +1 -1
- package/dist/components/checkbox-group/checkbox/bl-checkbox.d.ts +1 -0
- package/dist/components/checkbox-group/checkbox/bl-checkbox.d.ts.map +1 -1
- package/dist/components/checkbox-group/checkbox/bl-checkbox.js +1 -1
- package/dist/components/datepicker/bl-datepicker.d.ts +71 -0
- package/dist/components/datepicker/bl-datepicker.d.ts.map +1 -0
- package/dist/components/datepicker/bl-datepicker.js +2 -0
- package/dist/components/datepicker/bl-datepicker.js.map +7 -0
- package/dist/components/datepicker/bl-datepicker.test.d.ts +2 -0
- package/dist/components/datepicker/bl-datepicker.test.d.ts.map +1 -0
- package/dist/components/dialog/bl-dialog.d.ts.map +1 -1
- package/dist/components/dialog/bl-dialog.js +1 -1
- package/dist/components/drawer/bl-drawer.d.ts.map +1 -1
- package/dist/components/drawer/bl-drawer.js +1 -1
- package/dist/components/dropdown/bl-dropdown.d.ts +6 -2
- package/dist/components/dropdown/bl-dropdown.d.ts.map +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/icon/bl-icon.d.ts +1 -0
- package/dist/components/icon/bl-icon.d.ts.map +1 -1
- package/dist/components/icon/bl-icon.js +1 -1
- package/dist/components/input/bl-input.d.ts +2 -2
- 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/popover/bl-popover.d.ts +22 -22
- package/dist/components/popover/bl-popover.d.ts.map +1 -1
- package/dist/components/popover/bl-popover.js +1 -1
- package/dist/components/progress-indicator/bl-progress-indicator.d.ts.map +1 -1
- package/dist/components/progress-indicator/bl-progress-indicator.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/select/bl-select.test.d.ts.map +1 -1
- package/dist/components/spinner/bl-spinner.js +1 -1
- package/dist/components/split-button/bl-split-button.js +1 -1
- package/dist/components/switch/bl-switch.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/tooltip/bl-tooltip.js +1 -1
- package/dist/custom-elements.json +157 -67
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.d.ts +46 -0
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.d.ts.map +1 -0
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.d.ts +2 -0
- package/dist/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.d.ts.map +1 -0
- package/dist/utilities/string-to-date-converter.d.ts +2 -0
- package/dist/utilities/string-to-date-converter.d.ts.map +1 -0
- package/dist/utilities/string-to-date-converter.test.d.ts +2 -0
- package/dist/utilities/string-to-date-converter.test.d.ts.map +1 -0
- package/package.json +4 -2
- package/dist/chunk-7QNX2GPS.js.map +0 -7
- package/dist/chunk-BCXEI2IY.js.map +0 -7
- package/dist/chunk-GY5V7SRK.js +0 -80
- package/dist/chunk-GY5V7SRK.js.map +0 -7
- package/dist/chunk-OPTFSJFM.js +0 -5
- package/dist/chunk-OPTFSJFM.js.map +0 -7
- package/dist/chunk-U2GVQEOB.js.map +0 -7
- /package/dist/{chunk-BJVM3LHO.js.map → chunk-AW5LBSEM.js.map} +0 -0
|
@@ -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);inset-inline-start:var(--bl-input-padding-start, var(--padding-horizontal));inset-inline-end:var(--bl-input-padding-end, var(--padding-horizontal));pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{inset-inline-end: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;cursor:var(--bl-input-cursor, unset)}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within, .wrapper.has-value) input{padding-inline-start: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-inline-end: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;inset-inline-start:calc(\n var(--bl-input-padding-start, var(--padding-horizontal)) - var(--label-padding)\n );inset-inline-end:calc(\n var(--bl-input-padding-end, var(--padding-horizontal)) - var(--label-padding)\n );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: HTMLInputElement[\"autocomplete\"] = \"on\";\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: HTMLInputElement[\"inputMode\"];\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 setTimeout(() => {\n if (!event.defaultPrevented) {\n submit(this.form);\n }\n });\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=\"${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
|
+
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import{a as f}from"./chunk-73RGV4UX.js";import{a as w}from"./chunk-IPYZIIRV.js";import{a as
|
|
1
|
+
import{a as f}from"./chunk-73RGV4UX.js";import{a as w}from"./chunk-IPYZIIRV.js";import{a as s}from"./chunk-DINNT5P2.js";import{a as l}from"./chunk-GRL4DWKG.js";import{a as b,b as o,c as h,e as n}from"./chunk-5MOOXA2X.js";import{a as p,b as d,f as c}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var $=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`,x=$;var v="bl-dropdown",r=class extends c{constructor(){super(...arguments);this._isPopoverOpen=!1;this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[x]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this._button}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}handleKeyDown(i){if(["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(u)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!")}render(){return d`<bl-button
|
|
2
2
|
dropdown
|
|
3
3
|
.active=${this.opened}
|
|
4
4
|
?disabled=${this.disabled}
|
|
5
5
|
variant="${this.variant}"
|
|
6
6
|
kind="${this.kind}"
|
|
7
7
|
size="${this.size}"
|
|
8
|
+
icon="${s(this.icon)}"
|
|
8
9
|
@bl-click="${this._handleClick}"
|
|
9
10
|
>
|
|
10
11
|
${this.label}
|
|
@@ -12,28 +13,28 @@ import{a as f}from"./chunk-73RGV4UX.js";import{a as w}from"./chunk-IPYZIIRV.js";
|
|
|
12
13
|
<bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}"
|
|
13
14
|
><div class="popover-content">
|
|
14
15
|
<slot></slot></div
|
|
15
|
-
></bl-popover> `}};e([n("bl-popover")],
|
|
16
|
+
></bl-popover> `}};e([n("bl-popover")],r.prototype,"_popover",2),e([n("bl-button")],r.prototype,"_button",2),e([h()],r.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],r.prototype,"label",2),e([o({type:String,reflect:!0})],r.prototype,"variant",2),e([o({type:String,reflect:!0})],r.prototype,"kind",2),e([o({type:String,reflect:!0})],r.prototype,"size",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({type:String,reflect:!0})],r.prototype,"icon",2),e([l("bl-dropdown-open")],r.prototype,"onOpen",2),e([l("bl-dropdown-close")],r.prototype,"onClose",2),r=e([b(v)],r);var C=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,D=C;var u="bl-dropdown-item",a=class extends c{static get styles(){return[D]}_handleClick(){var i,k;(i=this.BlDropdownField)==null||i.close(),(k=this.BlSplitButtonField)==null||k.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(f),this.BlDropdownField=this.closest(v),this.BlSplitButtonField=this.closest(m),!this.BlDropdownField&&!this.BlDropdownGroupField&&!this.BlSplitButtonField&&console.warn(`bl-dropdown-item is designed to be used inside a ${f}, ${v} or ${m}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return d`<bl-button
|
|
16
17
|
variant="tertiary"
|
|
17
18
|
kind="neutral"
|
|
18
|
-
icon="${
|
|
19
|
+
icon="${s(this.icon)}"
|
|
19
20
|
role="menuitem"
|
|
20
21
|
@click="${this._handleClick}"
|
|
21
22
|
><slot></slot>
|
|
22
|
-
</bl-button>`}};e([o({type:String})],a.prototype,"icon",2),e([
|
|
23
|
+
</bl-button>`}};e([o({type:String})],a.prototype,"icon",2),e([l("bl-dropdown-item-click")],a.prototype,"onClick",2),e([n("[role=menuitem]")],a.prototype,"menuElement",2),a=e([b(u)],a);var E=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.split-button-container{display:flex}.split-main-button{width:100%;--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}:host([dir="rtl"]) .split-main-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}.split-main-button:focus{--bl-border-radius-l:calc(var(--bl-size-m) / 2) 0 0 calc(var(--bl-size-m) / 2)}.dropdown-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}:host([dir="rtl"]) .dropdown-button{--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}.dropdown-button:focus{--bl-border-radius-l:0 calc(var(--bl-size-m) / 2) calc(var(--bl-size-m) / 2) 0}:host([variant="secondary"][dir="rtl"]) .dropdown-button{inset-inline-end:-1px}:host([variant="secondary"]) .dropdown-button{inset-inline-start:-1px}:host([dropdown-disabled][variant="secondary"]) .dropdown-button{inset-inline-start:0}:host([dropdown-disabled][variant="secondary"][dir="rtl"]) .dropdown-button{inset-inline-end:0}.split-divider{display:block;height:var(--bl-size-2xl);width:1px;background-color:var(--bl-color-neutral-full)}:host([variant="secondary"]) .split-divider{display:none}:host([size="small"]) .split-divider{height:var(--bl-size-xl)}:host([size="large"]) .split-divider{height:var(--bl-size-3xl)}:host([dropdown-disabled][disabled]) .split-divider{display:block;background-color:var(--bl-color-neutral-lighter)}`,_=E;var m="bl-split-button",t=class extends c{constructor(){super(...arguments);this._isPopoverOpen=!1;this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.loading=!1;this.dropdownDisabled=!1;this.target="_self";this.autofocus=!1;this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown),w(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this.trigger,this.dropdownButton.addEventListener("bl-click",i=>i.stopPropagation()),this.mainButton.addEventListener("bl-click",i=>i.stopPropagation())}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.dropdownDisabled?this.open():this.close()}_handlePrimaryClick(){this.onClick("Click event fired!")}handleKeyDown(i){if(this._isPopoverOpen&&["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(this._isPopoverOpen&&["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(this._isPopoverOpen&&i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(u)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen&&(this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!"))}render(){return d` <div class="split-button-container" id="split-button-container">
|
|
23
24
|
<bl-button
|
|
24
25
|
id="split-main-button"
|
|
25
26
|
class="split-main-button"
|
|
26
27
|
variant="${this.variant}"
|
|
27
28
|
kind="${this.kind}"
|
|
28
29
|
size="${this.size}"
|
|
29
|
-
loading-label="${
|
|
30
|
-
icon="${
|
|
31
|
-
href="${
|
|
30
|
+
loading-label="${s(this.loadingLabel)}"
|
|
31
|
+
icon="${s(this.icon)}"
|
|
32
|
+
href="${s(this.type)}"
|
|
32
33
|
?disabled="${this.disabled}"
|
|
33
34
|
?loading="${this.loading}"
|
|
34
35
|
type="${this.type}"
|
|
35
|
-
target="${
|
|
36
|
-
form="${
|
|
36
|
+
target="${s(this.target)}"
|
|
37
|
+
form="${s(this.form)}"
|
|
37
38
|
?autofocus="${this.autofocus}"
|
|
38
39
|
@bl-click="${this._handlePrimaryClick}"
|
|
39
40
|
>
|
|
@@ -59,5 +60,5 @@ import{a as f}from"./chunk-73RGV4UX.js";import{a as w}from"./chunk-IPYZIIRV.js";
|
|
|
59
60
|
<slot></slot>
|
|
60
61
|
</div>
|
|
61
62
|
</bl-popover>
|
|
62
|
-
</div>`}};e([n("#split-button-container")],t.prototype,"trigger",2),e([n("bl-popover")],t.prototype,"_popover",2),e([n("#split-main-button")],t.prototype,"mainButton",2),e([n("#dropdown-button")],t.prototype,"dropdownButton",2),e([h()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:String,reflect:!0})],t.prototype,"href",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([o({type:Boolean,reflect:!0})],t.prototype,"loading",2),e([o({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),e([o({attribute:"dropdown-disabled",type:Boolean})],t.prototype,"dropdownDisabled",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:String})],t.prototype,"target",2),e([o({type:String})],t.prototype,"type",2),e([o({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),e([o({type:String})],t.prototype,"form",2),e([
|
|
63
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
</div>`}};e([n("#split-button-container")],t.prototype,"trigger",2),e([n("bl-popover")],t.prototype,"_popover",2),e([n("#split-main-button")],t.prototype,"mainButton",2),e([n("#dropdown-button")],t.prototype,"dropdownButton",2),e([h()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:String,reflect:!0})],t.prototype,"href",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([o({type:Boolean,reflect:!0})],t.prototype,"loading",2),e([o({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),e([o({attribute:"dropdown-disabled",type:Boolean})],t.prototype,"dropdownDisabled",2),e([o({type:String})],t.prototype,"icon",2),e([o({type:String})],t.prototype,"target",2),e([o({type:String})],t.prototype,"type",2),e([o({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),e([o({type:String})],t.prototype,"form",2),e([l("bl-dropdown-open")],t.prototype,"onOpen",2),e([l("bl-dropdown-close")],t.prototype,"onClose",2),e([l("bl-click")],t.prototype,"onClick",2),t=e([b(m)],t);export{m as a,t as b,u as c,a as d,v as e,r as f};
|
|
64
|
+
//# sourceMappingURL=chunk-43SCA2ZJ.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts", "../src/components/split-button/bl-split-button.css", "../src/components/split-button/bl-split-button.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonKind, ButtonSize, ButtonVariant } from \"../button/bl-button\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-dropdown.css\";\nimport BlDropdownItem, { blDropdownItemTag } from \"./item/bl-dropdown-item\";\n\nexport const blDropdownTag = \"bl-dropdown\";\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"bl-button\")\n private _button: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the dropdown button label\n */\n @property({ type: String, reflect: true })\n label: string;\n\n /**\n * Sets the dropdown button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = \"primary\";\n\n /**\n * Sets the dropdown button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the dropdown button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets the icon name to be displayed on the left side of the button label\n */\n @property({ type: String, reflect: true })\n icon?: string;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // `_button` will be undefined during the initial render.\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this._button;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous action\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html`<bl-button\n dropdown\n .active=${this.opened}\n ?disabled=${this.disabled}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n icon=\"${ifDefined(this.icon)}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\"\n ><div class=\"popover-content\">\n <slot></slot></div\n ></bl-popover> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownTag]: BlDropdown;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../button/bl-button\";\nimport BlButton from \"../../button/bl-button\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport type BlSplitButton from \"../../split-button/bl-split-button\";\nimport { blSplitButtonTag } from \"../../split-button/bl-split-button\";\nimport type BlDropdown from \"../bl-dropdown\";\nimport { blDropdownTag } from \"../bl-dropdown\";\nimport type BlDropdownGroup from \"../group/bl-dropdown-group\";\nimport { blDropdownGroupTag } from \"../group/bl-dropdown-group\";\nimport style from \"./bl-dropdown-item.css\";\n\nexport const blDropdownItemTag = \"bl-dropdown-item\";\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n\n @property({ type: String })\n icon?: BaklavaIcon;\n\n @event(\"bl-dropdown-item-click\") private onClick: EventDispatcher<string>;\n\n private _handleClick() {\n this.BlDropdownField?.close();\n this.BlSplitButtonField?.close();\n this.onClick(\"Action clicked!\");\n }\n\n @query(\"[role=menuitem]\") private menuElement: BlButton;\n\n /**\n * Focuses this action\n */\n focus() {\n this.menuElement.focus();\n }\n\n private BlDropdownGroupField: BlDropdownGroup | null;\n private BlDropdownField: BlDropdown | null;\n private BlSplitButtonField: BlSplitButton | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n this.BlSplitButtonField = this.closest<BlSplitButton>(blSplitButtonTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField && !this.BlSplitButtonField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag}, ${blDropdownTag} or ${blSplitButtonTag}`,\n this\n );\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n render(): TemplateResult {\n return html`<bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"${ifDefined(this.icon)}\"\n role=\"menuitem\"\n @click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.split-button-container{display:flex}.split-main-button{width:100%;--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}:host([dir=\"rtl\"]) .split-main-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}.split-main-button:focus{--bl-border-radius-l:calc(var(--bl-size-m) / 2) 0 0 calc(var(--bl-size-m) / 2)}.dropdown-button{--bl-border-radius-m:0 calc(var(--bl-size-xs) / 2) calc(var(--bl-size-xs) / 2) 0}:host([dir=\"rtl\"]) .dropdown-button{--bl-border-radius-m:calc(var(--bl-size-xs) / 2) 0 0 calc(var(--bl-size-xs) / 2)}.dropdown-button:focus{--bl-border-radius-l:0 calc(var(--bl-size-m) / 2) calc(var(--bl-size-m) / 2) 0}:host([variant=\"secondary\"][dir=\"rtl\"]) .dropdown-button{inset-inline-end:-1px}:host([variant=\"secondary\"]) .dropdown-button{inset-inline-start:-1px}:host([dropdown-disabled][variant=\"secondary\"]) .dropdown-button{inset-inline-start:0}:host([dropdown-disabled][variant=\"secondary\"][dir=\"rtl\"]) .dropdown-button{inset-inline-end:0}.split-divider{display:block;height:var(--bl-size-2xl);width:1px;background-color:var(--bl-color-neutral-full)}:host([variant=\"secondary\"]) .split-divider{display:none}:host([size=\"small\"]) .split-divider{height:var(--bl-size-xl)}:host([size=\"large\"]) .split-divider{height:var(--bl-size-3xl)}:host([dropdown-disabled][disabled]) .split-divider{display:block;background-color:var(--bl-color-neutral-lighter)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ReferenceElement } from \"@floating-ui/core\";\nimport { setDirectionProperty } from \"../../utilities/direction\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonKind, ButtonSize, ButtonVariant, TargetType } from \"../button/bl-button\";\nimport BlDropdownItem, { blDropdownItemTag } from \"../dropdown/item/bl-dropdown-item\";\nimport { BaklavaIcon } from \"../icon/icon-list\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-split-button.css\";\n\nexport const blSplitButtonTag = \"bl-split-button\";\n\n/**\n * @tag bl-split-button\n * @summary Baklava Split Button component\n */\n\n@customElement(blSplitButtonTag)\nexport default class BlSplitButton extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"#split-button-container\") private trigger: ReferenceElement;\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"#split-main-button\")\n private mainButton: BlButton;\n\n @query(\"#dropdown-button\")\n private dropdownButton: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the split button label\n */\n @property({ type: String, reflect: true })\n label: string;\n\n /**\n * Sets the split button variant\n */\n @property({ type: String, reflect: true })\n variant: Exclude<ButtonVariant, \"tertiary\"> = \"primary\";\n\n /**\n * Sets the split button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the split button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Set link url. If set, split main button will be rendered as anchor tag.\n */\n @property({ type: String, reflect: true })\n href: string;\n\n /**\n * Sets main button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets loading state of button\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Sets the button label for loading status.\n */\n @property({ type: String, attribute: \"loading-label\" })\n loadingLabel: string;\n\n /**\n * Sets dropdown button as disabled\n */\n @property({ attribute: \"dropdown-disabled\", type: Boolean })\n dropdownDisabled = false;\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n @property({ type: String })\n icon?: BaklavaIcon;\n\n /**\n * Sets the anchor target. Used when `href` is set.\n */\n @property({ type: String })\n target?: TargetType = \"_self\";\n\n /**\n * Sets the type of the button. Set `submit` to use button as the submitter of parent form.\n */\n @property({ type: String })\n type: \"submit\";\n\n /**\n * Sets button to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /**\n * Sets the associated form of the button. Use when `type` is set to `submit` and button is not inside the target form.\n */\n @property({ type: String })\n form: HTMLFormElement | string;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n /**\n * Fires when main button click\n */\n @event(\"bl-click\") private onClick: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this.handleKeyDown);\n\n setDirectionProperty(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this.trigger;\n this.dropdownButton.addEventListener(\"bl-click\", e => e.stopPropagation());\n this.mainButton.addEventListener(\"bl-click\", e => e.stopPropagation());\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.dropdownDisabled ? this.open() : this.close();\n }\n\n private _handlePrimaryClick() {\n this.onClick(\"Click event fired!\");\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if (this._isPopoverOpen && [\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n // Previous action\n } else if (this._isPopoverOpen && [\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (this._isPopoverOpen && event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n if (!this._isPopoverOpen) {\n return;\n }\n\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html` <div class=\"split-button-container\" id=\"split-button-container\">\n <bl-button\n id=\"split-main-button\"\n class=\"split-main-button\"\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n loading-label=\"${ifDefined(this.loadingLabel)}\"\n icon=\"${ifDefined(this.icon)}\"\n href=\"${ifDefined(this.type)}\"\n ?disabled=\"${this.disabled}\"\n ?loading=\"${this.loading}\"\n type=\"${this.type}\"\n target=\"${ifDefined(this.target)}\"\n form=\"${ifDefined(this.form)}\"\n ?autofocus=\"${this.autofocus}\"\n @bl-click=\"${this._handlePrimaryClick}\"\n >\n ${this.label}\n </bl-button>\n <div class=\"split-divider\"></div>\n <bl-button\n id=\"dropdown-button\"\n class=\"dropdown-button\"\n .active=\"${this.opened}\"\n icon=\"${this.opened ? \"arrow_up\" : \"arrow_down\"}\"\n ?disabled=\"${this.dropdownDisabled}\"\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n ?loading=\"${this.loading}\"\n label=\"split-dropdown-button\"\n @bl-click=\"${this._handleClick}\"\n >\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\">\n <div class=\"popover-content\">\n <slot></slot>\n </div>\n </bl-popover>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSplitButtonTag]: BlSplitButton;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "bl_dropdown_default", "event", "blDropdownItemTag", "x", "l", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "_a", "_b", "blDropdownGroupTag", "blDropdownTag", "blSplitButtonTag", "x", "l", "__decorateClass", "e", "event", "i", "styles", "i", "bl_split_button_default", "blSplitButtonTag", "BlSplitButton", "s", "bl_split_button_default", "setDirectionProperty", "e", "event", "blDropdownItemTag", "x", "l", "__decorateClass", "i", "t"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{a as w,b as f,c as E,d as y,e as x,f as _,g as k,h as M}from"./chunk-EZSEQHRH.js";import{a as g}from"./chunk-6LT7O7T2.js";import{a as l}from"./chunk-GRL4DWKG.js";import{a as u,b as a,c as n,e as s}from"./chunk-5MOOXA2X.js";import{a as c,b as m,f as b}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";function z(i){return typeof i=="string"?document.getElementById(i):i instanceof Element?i:null}var S=c`:host{display:contents}.popover{--arrow-display:var(--bl-popover-arrow-display, none);--background-color:var(--bl-popover-background-color, var(--bl-color-neutral-full));--border-color:var(--bl-popover-border-color, var(--bl-color-primary-highlight));--border-size:var(--bl-popover-border-size, 1px);--padding:var(--bl-popover-padding, var(--bl-size-m));--border-radius:var(--bl-popover-border-radius, var(--bl-size-3xs));--position:var(--bl-popover-position, fixed);--max-width:var(--bl-popover-max-width, 100vw);--max-viewport:calc(100vw - var(--bl-size-s));position:var(--position);box-sizing:border-box;border:var(--border-size) solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:var(--bl-index-popover);max-width:min(var(--max-viewport), var(--max-width));width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;--size:var(--bl-size-2xs);--arrow-position:calc((var(--size) / -2) - var(--border-size));box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--size);height:var(--size);transform:rotate(var(--arrow-rotation));border:var(--border-size) solid var(--border-color);border-bottom:none;border-inline-end:none}.popover[data-placement*="bottom"] .arrow{top:var(--arrow-position)}.popover[data-placement*="top"] .arrow{--arrow-rotation:225deg;bottom:var(--arrow-position)}.popover[data-placement*="left"] .arrow{--arrow-rotation:135deg;right:var(--arrow-position)}.popover[data-placement*="right"] .arrow{--arrow-rotation:315deg;left:var(--arrow-position)}`,C=S;var t=class extends b{constructor(){super(...arguments);this.placement="bottom";this.fitSize=!1;this.offset=8;this._visible=!1;this._handleClickOutside=e=>{let r=e.composedPath();!r.includes(this._target)&&!r.includes(this)&&this.hide()}}static get styles(){return[C]}get target(){return this._target}set target(e){let r=z(e);if(!r){console.warn("BlPopover target only accepts an Element instance or a string id of a DOM element.");return}this._target=r}get visible(){return this._visible}connectedCallback(){super.connectedCallback(),this._handlePopoverShowEvent=this._handlePopoverShowEvent.bind(this),this._handleKeydownEvent=this._handleKeydownEvent.bind(this),this._handleClickOutside=this._handleClickOutside.bind(this)}disconnectedCallback(){super.disconnectedCallback(),this.popoverAutoUpdateCleanup&&this.popoverAutoUpdateCleanup()}show(){this._visible=!0,this.setPopover(),this.onBlPopoverShow(""),document.addEventListener("click",this._handleClickOutside),document.addEventListener("keydown",this._handleKeydownEvent),document.addEventListener("bl-popover-show",this._handlePopoverShowEvent)}hide(){this._visible=!1,document.removeEventListener("click",this._handleClickOutside),document.removeEventListener("keydown",this._handleKeydownEvent),document.removeEventListener("bl-popover-show",this._handlePopoverShowEvent),this.onBlPopoverHide("")}render(){let e=g({popover:!0,visible:this._visible});return m` <div class=${e}>
|
|
2
|
+
<slot id="popover" aria-live=${this._visible?"polite":"off"}></slot>
|
|
3
|
+
<div class="arrow" aria-hidden="true"></div>
|
|
4
|
+
</div>`}getMiddleware(){let e=[];return e.push(y(this.offset),E(),f(),x({padding:4})),this.fitSize&&e.push(_({apply(r){r.elements.floating&&r.elements.reference&&Object.assign(r.elements.floating.style,{"min-width":`${r.elements.reference.getBoundingClientRect().width}px`})}})),e.push(w({element:this.arrow,padding:5})),e}setPopover(){this.target&&(this.popoverAutoUpdateCleanup=k(this.target,this._popover,()=>{M(this.target,this._popover,{placement:this.placement,strategy:"fixed",middleware:this.getMiddleware()}).then(({x:e,y:r,placement:d,middlewareData:p})=>{if(Object.assign(this._popover.style,{left:`${e}px`,top:`${r}px`}),this._popover.dataset.placement=d,p.arrow){let{x:v,y:h}=p.arrow;Object.assign(this.arrow.style,{left:v!=null?`${v}px`:"",top:h!=null?`${h}px`:""})}})}))}_handlePopoverShowEvent(e){if(e.target!==this){let{parentElement:r}=e.target;!this.contains(r)&&e.target.tagName===this.tagName&&this.hide()}}_handleKeydownEvent(e){e.key==="Escape"&&this.visible&&(e.preventDefault(),this.hide())}};o([a({type:String})],t.prototype,"placement",2),o([a({type:Boolean,attribute:"fit-size"})],t.prototype,"fitSize",2),o([a({type:Number})],t.prototype,"offset",2),o([s(".popover")],t.prototype,"_popover",2),o([s(".arrow")],t.prototype,"arrow",2),o([l("bl-popover-show")],t.prototype,"onBlPopoverShow",2),o([l("bl-popover-hide")],t.prototype,"onBlPopoverHide",2),o([n()],t.prototype,"_target",2),o([a()],t.prototype,"target",1),o([n()],t.prototype,"_visible",2),t=o([u("bl-popover")],t);export{z as a,t as b};
|
|
5
|
+
//# sourceMappingURL=chunk-47S2NIWC.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/utilities/elements.ts", "../src/components/popover/bl-popover.css", "../src/components/popover/bl-popover.ts"],
|
|
4
|
+
"sourcesContent": ["export function getMiddleOfElement(element: Element) {\n const { x, y, width, height } = element.getBoundingClientRect();\n\n return {\n x: Math.floor(x + window.pageXOffset + width / 2),\n y: Math.floor(y + window.pageYOffset + height / 2),\n };\n}\n\nexport function getTarget(value: string | Element): Element | null {\n if (typeof value === \"string\") {\n return document.getElementById(value) as Element;\n } else if (value instanceof Element) {\n return value;\n }\n\n return null;\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:contents}.popover{--arrow-display:var(--bl-popover-arrow-display, none);--background-color:var(--bl-popover-background-color, var(--bl-color-neutral-full));--border-color:var(--bl-popover-border-color, var(--bl-color-primary-highlight));--border-size:var(--bl-popover-border-size, 1px);--padding:var(--bl-popover-padding, var(--bl-size-m));--border-radius:var(--bl-popover-border-radius, var(--bl-size-3xs));--position:var(--bl-popover-position, fixed);--max-width:var(--bl-popover-max-width, 100vw);--max-viewport:calc(100vw - var(--bl-size-s));position:var(--position);box-sizing:border-box;border:var(--border-size) solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:var(--bl-index-popover);max-width:min(var(--max-viewport), var(--max-width));width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--bl-font-title-3-regular);color:var(--bl-color-neutral-darker)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;--size:var(--bl-size-2xs);--arrow-position:calc((var(--size) / -2) - var(--border-size));box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--size);height:var(--size);transform:rotate(var(--arrow-rotation));border:var(--border-size) solid var(--border-color);border-bottom:none;border-inline-end:none}.popover[data-placement*=\"bottom\"] .arrow{top:var(--arrow-position)}.popover[data-placement*=\"top\"] .arrow{--arrow-rotation:225deg;bottom:var(--arrow-position)}.popover[data-placement*=\"left\"] .arrow{--arrow-rotation:135deg;right:var(--arrow-position)}.popover[data-placement*=\"right\"] .arrow{--arrow-rotation:315deg;left:var(--arrow-position)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n inline,\n Middleware,\n MiddlewareState,\n offset,\n shift,\n size,\n} from \"@floating-ui/dom\";\nimport { getTarget } from \"../../utilities/elements\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-popover.css\";\n\nexport type Placement =\n | \"top-start\"\n | \"top\"\n | \"top-end\"\n | \"bottom-start\"\n | \"bottom\"\n | \"bottom-end\"\n | \"left-start\"\n | \"left\"\n | \"left-end\"\n | \"right-start\"\n | \"right\"\n | \"right-end\";\n\n/**\n * @tag bl-popover\n * @summary Baklava Popover component\n *\n * @cssproperty [--bl-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.\n * @cssproperty [--bl-popover-background-color=--bl-color-neutral-full] - Sets the background color of popover.\n * @cssproperty [--bl-popover-border-color=--bl-color-primary-highlight] - Sets the border color of popover.\n * @cssproperty [--bl-popover-border-size=1px] - Sets the border size of popover. You can set it to `0px` to not have a border (if you use a custom background color). Always use with a length unit.\n * @cssproperty [--bl-popover-padding=--bl-size-m] - Sets the padding of popover.\n * @cssproperty [--bl-popbover-border-radius=--bl-size-3xs] - Sets the border radius of popover.\n * @cssproperty [--bl-popover-max-width=100vw] - Sets the maximum width of the popover (including border and padding).\n * @cssproperty [--bl-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.\n */\n@customElement(\"bl-popover\")\nexport default class BlPopover extends LitElement {\n /**\n * Sets placement of the popover\n */\n @property({ type: String })\n placement: Placement = \"bottom\";\n /**\n * Sets size of popover same as trigger element\n */\n @property({ type: Boolean, attribute: \"fit-size\" })\n fitSize = false;\n /**\n * Sets the distance between popover and target/trigger element\n */\n @property({ type: Number })\n offset = 8;\n @query(\".popover\") private _popover: HTMLElement;\n @query(\".arrow\") private arrow: HTMLElement;\n /**\n * Fires when the popover is shown\n */\n @event(\"bl-popover-show\") private onBlPopoverShow: EventDispatcher<string>;\n /**\n * Fires when popover becomes hidden\n */\n @event(\"bl-popover-hide\") private onBlPopoverHide: EventDispatcher<string>;\n private popoverAutoUpdateCleanup: () => void;\n\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Target elements state\n */\n @state() _target: string | Element;\n\n /**\n * Sets the target element of the popover to align and trigger.\n * It can be a string id of the target element or can be a direct Element reference of it.\n */\n @property()\n get target(): string | Element {\n return this._target;\n }\n\n set target(value: string | Element) {\n const target = getTarget(value);\n\n if (!target) {\n console.warn(\n \"BlPopover target only accepts an Element instance or a string id of a DOM element.\"\n );\n return;\n }\n\n this._target = target;\n }\n\n /**\n * Visibility state\n */\n @state() private _visible = false;\n\n /**\n * Gives the visibility status of the popover\n */\n get visible(): boolean {\n return this._visible;\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._handlePopoverShowEvent = this._handlePopoverShowEvent.bind(this);\n this._handleKeydownEvent = this._handleKeydownEvent.bind(this);\n this._handleClickOutside = this._handleClickOutside.bind(this);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n }\n\n /**\n * Shows popover\n */\n show() {\n this._visible = true;\n this.setPopover();\n this.onBlPopoverShow(\"\");\n document.addEventListener(\"click\", this._handleClickOutside);\n document.addEventListener(\"keydown\", this._handleKeydownEvent);\n document.addEventListener(\"bl-popover-show\", this._handlePopoverShowEvent);\n }\n\n /**\n * Hides popover\n */\n hide() {\n this._visible = false;\n document.removeEventListener(\"click\", this._handleClickOutside);\n document.removeEventListener(\"keydown\", this._handleKeydownEvent);\n document.removeEventListener(\"bl-popover-show\", this._handlePopoverShowEvent);\n this.onBlPopoverHide(\"\");\n }\n\n render(): TemplateResult {\n const classes = classMap({\n popover: true,\n visible: this._visible,\n });\n\n return html` <div class=${classes}>\n <slot id=\"popover\" aria-live=${this._visible ? \"polite\" : \"off\"}></slot>\n <div class=\"arrow\" aria-hidden=\"true\"></div>\n </div>`;\n }\n\n private getMiddleware(): Middleware[] {\n const middlewareParams: Middleware[] = [];\n\n middlewareParams.push(offset(this.offset), inline(), flip(), shift({ padding: 4 }));\n\n if (this.fitSize) {\n middlewareParams.push(\n size({\n apply(args: MiddlewareState) {\n if (args.elements.floating && args.elements.reference) {\n Object.assign(args.elements.floating.style, {\n \"min-width\": `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n }\n },\n })\n );\n }\n\n middlewareParams.push(arrow({ element: this.arrow, padding: 5 }));\n\n return middlewareParams;\n }\n\n private _handleClickOutside = (event: MouseEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath.includes(this._target as HTMLElement) && !eventPath.includes(this)) {\n this.hide();\n }\n };\n\n private setPopover() {\n if (this.target) {\n this.popoverAutoUpdateCleanup = autoUpdate(this.target as Element, this._popover, () => {\n computePosition(this.target as Element, this._popover, {\n placement: this.placement,\n strategy: \"fixed\",\n middleware: this.getMiddleware(),\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(this._popover.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n this._popover.dataset.placement = placement;\n\n if (middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n Object.assign(this.arrow.style, {\n left: arrowX != null ? `${arrowX}px` : \"\",\n top: arrowY != null ? `${arrowY}px` : \"\",\n });\n }\n });\n });\n }\n }\n\n private _handlePopoverShowEvent(event: Event) {\n if (event.target !== this) {\n const { parentElement } = event.target as HTMLElement;\n const isNestedPopover = this.contains(parentElement);\n\n if (!isNestedPopover && (event.target as HTMLElement).tagName === this.tagName) {\n this.hide();\n }\n }\n }\n\n private _handleKeydownEvent(event: KeyboardEvent) {\n if (event.key === \"Escape\" && this.visible) {\n event.preventDefault();\n this.hide();\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-popover\": BlPopover;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["getTarget", "value", "styles", "i", "bl_popover_default", "BlPopover", "s", "event", "eventPath", "bl_popover_default", "value", "target", "getTarget", "classes", "o", "x", "middlewareParams", "offset", "inline", "flip", "shift", "size", "args", "arrow", "autoUpdate", "computePosition", "y", "placement", "middlewareData", "arrowX", "arrowY", "parentElement", "__decorateClass", "e", "i", "t"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as p}from"./chunk-
|
|
1
|
+
import{a as p}from"./chunk-47S2NIWC.js";import{a as d}from"./chunk-DINNT5P2.js";import{a}from"./chunk-GRL4DWKG.js";import{a as v,b as s,e as n}from"./chunk-5MOOXA2X.js";import{a as l,b as i,f as h}from"./chunk-4OT5AMS5.js";import{d as o}from"./chunk-IZ2LK5GK.js";var m=l`:host{display:contents}.trigger{display:var(--bl-tooltip-trigger-display, inline-flex);cursor:pointer}bl-popover{--bl-popover-background-color:var(--bl-color-info);--bl-popover-arrow-display:block;--bl-popover-border-size:0px;--bl-popover-max-width:424px}.content{color:var(--bl-color-neutral-full)}`,c=m;var t=class extends h{constructor(){super(...arguments);this.placement="top"}static get styles(){return[c]}update(e){if(e.has("target")){let r=e.get("target");r&&this._removeEvents(r),this._addEvents()}super.update(e)}_addEvents(){let e=p(this.target);e&&(e.addEventListener("focus",this.show,{capture:!0}),e.addEventListener("mouseenter",this.show),e.addEventListener("blur",this.hide,{capture:!0}),e.addEventListener("mouseleave",this.hide))}_removeEvents(e){let r=p(e);r&&(r.removeEventListener("focus",this.show,{capture:!0}),r.removeEventListener("mouseenter",this.show),r.removeEventListener("blur",this.hide,{capture:!0}),r.removeEventListener("mouseleave",this.hide))}connectedCallback(){super.connectedCallback(),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this._addEvents()}disconnectedCallback(){super.disconnectedCallback(),this._removeEvents(this.target)}show(){var e;this._popover.target=(e=this.target)!=null?e:this.trigger,this._popover.show(),this.onShow("")}hide(){this._popover.hide(),this.onHide("")}get visible(){return this._popover.visible}triggerTemplate(){return i`<slot
|
|
2
2
|
class="trigger"
|
|
3
3
|
name="tooltip-trigger"
|
|
4
4
|
aria-describedby="tooltip"
|
|
@@ -17,4 +17,4 @@ import{a as p}from"./chunk-OPTFSJFM.js";import{a as d}from"./chunk-DINNT5P2.js";
|
|
|
17
17
|
<slot class="content" id="tooltip" role="tooltip"></slot>
|
|
18
18
|
</bl-popover>
|
|
19
19
|
`}};o([n(".trigger")],t.prototype,"trigger",2),o([n("bl-popover")],t.prototype,"_popover",2),o([s({type:String})],t.prototype,"placement",2),o([a("bl-tooltip-show")],t.prototype,"onShow",2),o([a("bl-tooltip-hide")],t.prototype,"onHide",2),o([s()],t.prototype,"target",2),t=o([v("bl-tooltip")],t);export{t as a};
|
|
20
|
-
//# sourceMappingURL=chunk-
|
|
20
|
+
//# sourceMappingURL=chunk-AW5LBSEM.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as m}from"./chunk-GRL4DWKG.js";import{a as u}from"./chunk-3USCFSFQ.js";import{b as g}from"./chunk-7GK5LKBV.js";import{a as d,b as f,c as v}from"./chunk-5MOOXA2X.js";import{a as c,b as h,f as p}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var
|
|
1
|
+
import{a as m}from"./chunk-GRL4DWKG.js";import{a as u}from"./chunk-3USCFSFQ.js";import{b as g}from"./chunk-7GK5LKBV.js";import{a as d,b as f,c as v}from"./chunk-5MOOXA2X.js";import{a as c,b as h,f as p}from"./chunk-4OT5AMS5.js";import{d as e}from"./chunk-IZ2LK5GK.js";var r=class extends u{};r.directiveName="unsafeSVG",r.resultType=2;var x=g(r);var y="https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons";function G(s){y=s}function E(){return y}var b=c`:host{display:inline-block}:host div{display:flex;align-items:stretch;width:1em;height:1em;min-width:1em;min-height:1em;overflow:hidden;transform:translateZ(0)}:host svg{width:1em;height:1em}`,S=b;var l=new Map,t=class extends p{static get styles(){return[S]}get name(){return this._iconName}set name(n){n!==this._iconName&&(this._iconName=n,this.load())}async load(){let o=`${E()}/${this.name}.svg`;l.has(o)||l.set(o,fetch(o));try{let i=await l.get(o),a=i==null?void 0:i.clone();a!=null&&a.ok?(this.svg=await a.text(),this.onLoad(`${this.name} icon loaded`),this.requestUpdate()):this.onError(`${this.name} icon failed to load`)}catch(i){this.onError(`${this.name} icon failed to load [${i}]`)}}render(){return h`<div aria-hidden="true">${x(this.svg)}</div>`}};e([f({type:String,reflect:!0})],t.prototype,"name",1),e([m("bl-load")],t.prototype,"onLoad",2),e([m("bl-error")],t.prototype,"onError",2),e([v()],t.prototype,"svg",2),t=e([d("bl-icon")],t);export{G as a,E as b,t as c};
|
|
2
2
|
/*! Bundled license information:
|
|
3
3
|
|
|
4
4
|
lit-html/directives/unsafe-svg.js:
|
|
@@ -8,4 +8,4 @@ lit-html/directives/unsafe-svg.js:
|
|
|
8
8
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9
9
|
*)
|
|
10
10
|
*/
|
|
11
|
-
//# sourceMappingURL=chunk-
|
|
11
|
+
//# sourceMappingURL=chunk-BH64QNLE.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../node_modules/lit-html/src/directives/unsafe-svg.ts", "../src/utilities/asset-paths.ts", "../src/components/icon/bl-icon.css", "../src/components/icon/bl-icon.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {directive} from '../directive.js';\nimport {UnsafeHTMLDirective} from './unsafe-html.js';\n\nconst SVG_RESULT = 2;\n\nclass UnsafeSVGDirective extends UnsafeHTMLDirective {\n static override directiveName = 'unsafeSVG';\n static override resultType = SVG_RESULT;\n}\n\n/**\n * Renders the result as SVG, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeSVG = directive(UnsafeSVGDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {UnsafeSVGDirective};\n", "let iconPath = \"https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons\";\n\nexport function setIconPath(path: string) {\n iconPath = path;\n}\n\nexport function getIconPath() {\n return iconPath;\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block}:host div{display:flex;align-items:stretch;width:1em;height:1em;min-width:1em;min-height:1em;overflow:hidden;transform:translateZ(0)}:host svg{width:1em;height:1em}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { getIconPath } from \"../../utilities/asset-paths\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-icon.css\";\nimport { BaklavaIcon } from \"./icon-list\";\n\nconst requestMap = new Map<string, Promise<Response>>();\n\n/**\n * @tag bl-icon\n * @summary Baklava Icon component\n *\n * @cssproperty [font-size] Setting size of icon. Default is current font size in DOM place\n * @cssproperty [color=currentColor] Setting color of icon\n */\n@customElement(\"bl-icon\")\nexport default class BlIcon extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private _iconName: BaklavaIcon;\n\n /**\n * Name of the icon to show\n */\n @property()\n get name(): BaklavaIcon {\n return this._iconName;\n }\n\n set name(value: BaklavaIcon) {\n if (value !== this._iconName) {\n this._iconName = value;\n this.load();\n }\n }\n\n /**\n * Fires when SVG icon loaded\n */\n @event(\"bl-load\") private onLoad: EventDispatcher<string>;\n\n /**\n * Fires when SVG icon failed to load\n */\n @event(\"bl-error\") private onError: EventDispatcher<string>;\n\n @state() private svg: string;\n\n async load() {\n const iconPath = getIconPath();\n const fileUrl = `${iconPath}/${this.name}.svg`;\n\n if (!requestMap.has(fileUrl)) {\n requestMap.set(fileUrl, fetch(fileUrl));\n }\n\n try {\n const iconRequest = await requestMap.get(fileUrl);\n const res = iconRequest?.clone();\n\n if (res?.ok) {\n this.svg = await res.text();\n this.onLoad(`${this.name} icon loaded`);\n this.requestUpdate();\n } else {\n this.onError(`${this.name} icon failed to load`);\n }\n } catch (error) {\n this.onError(`${this.name} icon failed to load [${error}]`);\n }\n }\n\n render(): TemplateResult {\n return html`<div aria-hidden=\"true\">${unsafeSVG(this.svg)}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-icon\": BlIcon;\n }\n}\n"],
|
|
5
|
-
"mappings": "4QAWA,IAAMA,EAAN,cAAiCC,CAAAA,CAAAA,EACfD,EAAaE,cAAG,YAChBF,EAAUG,WAJT,EAAA,IAiBNC,EAAYC,EAAUL,CAAAA,EC1BnC,IAAIM,EAAW,oEAER,SAASC,EAAYC,EAAc,CACxCF,EAAWE,CACb,CAEO,SAASC,GAAc,CAC5B,OAAOH,CACT,CCPO,IAAMI,EAASC,mMACfC,EAAQF,ECMf,IAAMG,EAAa,IAAI,
|
|
4
|
+
"sourcesContent": ["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {directive} from '../directive.js';\nimport {UnsafeHTMLDirective} from './unsafe-html.js';\n\nconst SVG_RESULT = 2;\n\nclass UnsafeSVGDirective extends UnsafeHTMLDirective {\n static override directiveName = 'unsafeSVG';\n static override resultType = SVG_RESULT;\n}\n\n/**\n * Renders the result as SVG, rather than text.\n *\n * The values `undefined`, `null`, and `nothing`, will all result in no content\n * (empty string) being rendered.\n *\n * Note, this is unsafe to use with any user-provided input that hasn't been\n * sanitized or escaped, as it may lead to cross-site-scripting\n * vulnerabilities.\n */\nexport const unsafeSVG = directive(UnsafeSVGDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {UnsafeSVGDirective};\n", "let iconPath = \"https://cdn.jsdelivr.net/npm/@trendyol/baklava-icons@latest/icons\";\n\nexport function setIconPath(path: string) {\n iconPath = path;\n}\n\nexport function getIconPath() {\n return iconPath;\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block}:host div{display:flex;align-items:stretch;width:1em;height:1em;min-width:1em;min-height:1em;overflow:hidden;transform:translateZ(0)}:host svg{width:1em;height:1em}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { getIconPath } from \"../../utilities/asset-paths\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-icon.css\";\nimport { BaklavaIcon } from \"./icon-list\";\n\nconst requestMap = new Map<string, Promise<Response>>();\n\n/**\n * @tag bl-icon\n * @summary Baklava Icon component\n *\n * @attr [name] Name of the icon to show\n * @cssproperty [font-size] Setting size of icon. Default is current font size in DOM place\n * @cssproperty [color=currentColor] Setting color of icon\n */\n@customElement(\"bl-icon\")\nexport default class BlIcon extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n private _iconName: BaklavaIcon;\n\n /**\n * Name of the icon to show\n */\n @property({ type: String, reflect: true })\n get name(): BaklavaIcon {\n return this._iconName;\n }\n\n set name(value: BaklavaIcon) {\n if (value !== this._iconName) {\n this._iconName = value;\n this.load();\n }\n }\n\n /**\n * Fires when SVG icon loaded\n */\n @event(\"bl-load\") private onLoad: EventDispatcher<string>;\n\n /**\n * Fires when SVG icon failed to load\n */\n @event(\"bl-error\") private onError: EventDispatcher<string>;\n\n @state() private svg: string;\n\n async load() {\n const iconPath = getIconPath();\n const fileUrl = `${iconPath}/${this.name}.svg`;\n\n if (!requestMap.has(fileUrl)) {\n requestMap.set(fileUrl, fetch(fileUrl));\n }\n\n try {\n const iconRequest = await requestMap.get(fileUrl);\n const res = iconRequest?.clone();\n\n if (res?.ok) {\n this.svg = await res.text();\n this.onLoad(`${this.name} icon loaded`);\n this.requestUpdate();\n } else {\n this.onError(`${this.name} icon failed to load`);\n }\n } catch (error) {\n this.onError(`${this.name} icon failed to load [${error}]`);\n }\n }\n\n render(): TemplateResult {\n return html`<div aria-hidden=\"true\">${unsafeSVG(this.svg)}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-icon\": BlIcon;\n }\n}\n"],
|
|
5
|
+
"mappings": "4QAWA,IAAMA,EAAN,cAAiCC,CAAAA,CAAAA,EACfD,EAAaE,cAAG,YAChBF,EAAUG,WAJT,EAAA,IAiBNC,EAAYC,EAAUL,CAAAA,EC1BnC,IAAIM,EAAW,oEAER,SAASC,EAAYC,EAAc,CACxCF,EAAWE,CACb,CAEO,SAASC,GAAc,CAC5B,OAAOH,CACT,CCPO,IAAMI,EAASC,mMACfC,EAAQF,ECMf,IAAMG,EAAa,IAAI,IAWFC,EAArB,cAAoCC,CAAW,CAC7C,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,IAAI,MAAoB,CACtB,OAAO,KAAK,SACd,CAEA,IAAI,KAAKC,EAAoB,CACvBA,IAAU,KAAK,YACjB,KAAK,UAAYA,EACjB,KAAK,KAAK,EAEd,CAcA,MAAM,MAAO,CAEX,IAAMC,EAAU,GADCC,EAAY,KACE,KAAK,WAE/BN,EAAW,IAAIK,CAAO,GACzBL,EAAW,IAAIK,EAAS,MAAMA,CAAO,CAAC,EAGxC,GAAI,CACF,IAAME,EAAc,MAAMP,EAAW,IAAIK,CAAO,EAC1CG,EAAMD,GAAA,YAAAA,EAAa,QAErBC,GAAA,MAAAA,EAAK,IACP,KAAK,IAAM,MAAMA,EAAI,KAAK,EAC1B,KAAK,OAAO,GAAG,KAAK,kBAAkB,EACtC,KAAK,cAAc,GAEnB,KAAK,QAAQ,GAAG,KAAK,0BAA0B,CAEnD,OAASC,EAAP,CACA,KAAK,QAAQ,GAAG,KAAK,6BAA6BA,IAAQ,CAC5D,CACF,CAEA,QAAyB,CACvB,OAAOC,4BAA+BC,EAAU,KAAK,GAAG,SAC1D,CACF,EAlDMC,EAAA,CADHC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAVtBZ,EAWf,oBAcsBW,EAAA,CAAzBE,EAAM,SAAS,GAzBGb,EAyBO,sBAKCW,EAAA,CAA1BE,EAAM,UAAU,GA9BEb,EA8BQ,uBAEVW,EAAA,CAAhBG,EAAM,GAhCYd,EAgCF,mBAhCEA,EAArBW,EAAA,CADCC,EAAc,SAAS,GACHZ",
|
|
6
6
|
"names": ["UnsafeSVGDirective", "UnsafeHTMLDirective", "directiveName", "resultType", "unsafeSVG", "directive", "iconPath", "setIconPath", "path", "getIconPath", "styles", "i", "bl_icon_default", "requestMap", "BlIcon", "s", "bl_icon_default", "value", "fileUrl", "getIconPath", "iconRequest", "res", "error", "x", "o", "__decorateClass", "e", "event", "t"]
|
|
7
7
|
}
|
|
@@ -15,6 +15,7 @@ import{a as o}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"
|
|
|
15
15
|
<bl-button
|
|
16
16
|
@click="${this.closeDrawer}"
|
|
17
17
|
icon="close"
|
|
18
|
+
label="close"
|
|
18
19
|
size="small"
|
|
19
20
|
variant="tertiary"
|
|
20
21
|
kind="neutral"
|
|
@@ -23,4 +24,4 @@ import{a as o}from"./chunk-GRL4DWKG.js";import{a as p,b as n,c as m,e as b}from"
|
|
|
23
24
|
</header>
|
|
24
25
|
${this.renderContent()}
|
|
25
26
|
</div>`}render(){return this.domExistence?r`<div class="drawer">${this.renderContainer()}</div>`:r``}};i([n({type:Boolean,reflect:!0})],t.prototype,"open",2),i([n({type:String})],t.prototype,"caption",2),i([n({type:String,attribute:"embed-url"})],t.prototype,"embedUrl",2),i([n({type:String,attribute:"external-link"})],t.prototype,"externalLink",2),i([n({type:String,attribute:"width"})],t.prototype,"width",2),i([o("bl-drawer-open")],t.prototype,"onOpen",2),i([o("bl-drawer-close")],t.prototype,"onClose",2),i([b("#drawer-iframe")],t.prototype,"_drawerIframe",2),i([m()],t.prototype,"domExistence",2),t=i([p("bl-drawer")],t);export{t as a};
|
|
26
|
-
//# sourceMappingURL=chunk-
|
|
27
|
+
//# sourceMappingURL=chunk-FCEMOH4J.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/utilities/style-to-px.converter.ts", "../src/components/drawer/bl-drawer.css", "../src/components/drawer/bl-drawer.ts"],
|
|
4
|
-
"sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n if (!match) return null;\n\n const value = parseFloat(match[1]);\n const unit = match[3];\n\n let styleInPixel: number | null;\n\n switch (unit) {\n case \"px\":\n styleInPixel = value;\n break;\n case \"vw\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n case \"%\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n default:\n styleInPixel = null;\n break;\n }\n return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;bottom:0;inset-inline-end:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-inline-end:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets drawer open-close status\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Sets the drawer title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Sets the drawer embed url for iframe\n */\n @property({ type: String, attribute: \"embed-url\" })\n embedUrl?: string;\n\n /**\n * Sets the drawer external link\n */\n @property({ type: String, attribute: \"external-link\" })\n externalLink?: string;\n\n /**\n * Sets the drawer width\n */\n @property({ type: String, attribute: \"width\" })\n width: string = \"424px\";\n\n /**\n * Fires when the drawer is opened\n */\n @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when the drawer is closed\n */\n @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n @query(\"#drawer-iframe\")\n _drawerIframe: HTMLIFrameElement;\n\n connectedCallback() {\n super.connectedCallback();\n window?.addEventListener(\"bl-drawer-open\", event => {\n if (event.target !== this) this.closeDrawer();\n });\n this.resizeDrawerWidth();\n\n window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"open\")) {\n this.toggleDialogHandler();\n }\n\n if (changedProperties.has(\"width\")) {\n this.resizeDrawerWidth();\n }\n }\n\n private domExistenceSchedule: number;\n\n private resizeDrawerWidth() {\n const drawerWidth = styleToPixelConverter(this.width);\n\n const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n if (drawerWidth) {\n if (window?.innerWidth < drawerWidth) {\n this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n } else {\n this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n }\n }\n }\n\n private toggleDialogHandler() {\n if (this.open) {\n if (this.domExistenceSchedule) {\n clearTimeout(this.domExistenceSchedule);\n }\n this.domExistence = true;\n window.setTimeout(() => {\n if (this.embedUrl && this._drawerIframe) {\n this._drawerIframe.src = this.embedUrl;\n }\n });\n // FIXME: Allow events without payload\n this.onOpen(\"\");\n } else {\n // Give some time for exit animation\n this.domExistenceSchedule = window.setTimeout(() => {\n this.domExistence = false;\n }, 1000);\n\n // FIXME: Allow events without payload\n this.onClose(\"\");\n }\n }\n\n @state() private domExistence = false;\n\n private closeDrawer() {\n this.open = false;\n }\n\n private renderContent() {\n const content = this.embedUrl\n ? html`<iframe id=\"drawer-iframe\" src=${this.embedUrl}></iframe>`\n : html`<slot></slot>`;\n\n return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n ${content}\n </section>`;\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n const external_button = this.externalLink\n ? html`<bl-button\n icon=\"external_link\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\n href=\"${this.externalLink}\"\n target=\"_blank\"\n ></bl-button>`\n : \"\";\n\n return html`<div class=\"container\">\n <header>\n ${title}\n <div class=\"header-buttons\">\n ${external_button}\n <bl-button\n @click=\"${this.closeDrawer}\"\n icon=\"close\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </div>\n </header>\n ${this.renderContent()}\n </div>`;\n }\n\n render(): TemplateResult {\n if (this.domExistence) {\n return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n } else {\n return html``;\n }\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-drawer\": BlDrawer;\n }\n}\n"],
|
|
5
|
-
"mappings": "mMAAO,IAAMA,EAAyBC,GAAsC,CAC1E,IAAMC,EAAQD,EAAW,MAAM,qBAAqB,EAEpD,GAAI,CAACC,EAAO,OAAO,KAEnB,IAAMC,EAAQ,WAAWD,EAAM,CAAC,CAAC,EAC3BE,EAAOF,EAAM,CAAC,EAEhBG,EAEJ,OAAQD,EAAM,CACZ,IAAK,KACHC,EAAeF,EACf,MACF,IAAK,KACHE,EAAgBF,EAAQ,OAAO,WAAc,IAC7C,MACF,IAAK,IACHE,EAAgBF,EAAQ,OAAO,WAAc,IAC7C,MACF,QACEE,EAAe,KACf,KACJ,CACA,OAAOA,CACT,ECxBO,IAAMC,EAASC,yiCACfC,EAAQF,ECaf,IAAqBG,EAArB,cAAsCC,CAAW,CAAjD,kCASE,UAAO,GAwBP,WAAgB,QAkFP,KAAQ,aAAe,GAlHhC,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CA6CA,mBAAoB,CAClB,MAAM,kBAAkB,EACxB,qBAAQ,iBAAiB,iBAAkBC,GAAS,CAC9CA,EAAM,SAAW,MAAM,KAAK,YAAY,CAC9C,GACA,KAAK,kBAAkB,EAEvB,qBAAQ,iBAAiB,SAAU,IAAM,KAAK,kBAAkB,GAChE,qBAAQ,iBAAiB,OAAQ,IAAM,KAAK,kBAAkB,EAChE,CAEA,sBAA6B,CAC3B,MAAM,qBAAqB,EAC3B,qBAAQ,oBAAoB,SAAU,IAAM,KAAK,kBAAkB,GACnE,qBAAQ,iBAAiB,OAAQ,IAAM,KAAK,kBAAkB,EAChE,CAEA,QAAQC,EAAyC,CAC3CA,EAAkB,IAAI,MAAM,GAC9B,KAAK,oBAAoB,EAGvBA,EAAkB,IAAI,OAAO,GAC/B,KAAK,kBAAkB,CAE3B,CAIQ,mBAAoB,CAC1B,IAAMC,EAAcC,EAAsB,KAAK,KAAK,EAE9CC,EAAW,CAACF,GAAeA,EAAc,IAAM,QAAU,KAAK,MAEhEA,KACE,2BAAQ,YAAaA,EACvB,KAAK,MAAM,YAAY,4BAA6B,oBAAoB,EAExE,KAAK,MAAM,YAAY,4BAA6BE,CAAQ,EAGlE,CAEQ,qBAAsB,CACxB,KAAK,MACH,KAAK,sBACP,aAAa,KAAK,oBAAoB,EAExC,KAAK,aAAe,GACpB,OAAO,WAAW,IAAM,CAClB,KAAK,UAAY,KAAK,gBACxB,KAAK,cAAc,IAAM,KAAK,SAElC,CAAC,EAED,KAAK,OAAO,EAAE,IAGd,KAAK,qBAAuB,OAAO,WAAW,IAAM,CAClD,KAAK,aAAe,EACtB,EAAG,GAAI,EAGP,KAAK,QAAQ,EAAE,EAEnB,CAIQ,aAAc,CACpB,KAAK,KAAO,EACd,CAEQ,eAAgB,CACtB,IAAMC,EAAU,KAAK,SACjBC,mCAAsC,KAAK,qBAC3CA,iBAEJ,OAAOA,mBAAsB,KAAK,SAAW,iBAAmB;AAAA,QAC5DD;AAAA,eAEN,CAEQ,iBAAkB,CACxB,IAAME,EAAQ,KAAK,QAAUD,4BAA+B,KAAK,eAAiB,GAC5EE,EAAkB,KAAK,aACzBF;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKU,KAAK;AAAA;AAAA,uBAGf,GAEJ,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA,YAEEC;AAAA;AAAA,sBAEU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["export const styleToPixelConverter = (styleValue: string): number | null => {\n const match = styleValue.match(/^(\\d+(\\.\\d+)?)(.*)$/);\n\n if (!match) return null;\n\n const value = parseFloat(match[1]);\n const unit = match[3];\n\n let styleInPixel: number | null;\n\n switch (unit) {\n case \"px\":\n styleInPixel = value;\n break;\n case \"vw\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n case \"%\":\n styleInPixel = (value * window.innerWidth) / 100;\n break;\n default:\n styleInPixel = null;\n break;\n }\n return styleInPixel;\n};\n", "import {css} from 'lit';\nexport const styles = css`.drawer{box-sizing:border-box;position:fixed;display:flex;top:0;bottom:0;inset-inline-end:0;width:var(--bl-drawer-current-width, 424px);padding:var(--bl-size-xl);padding-top:max(env(safe-area-inset-top), var(--bl-size-xl));padding-inline-end:max(env(safe-area-inset-right), var(--bl-size-xl));padding-bottom:max(env(safe-area-inset-bottom), var(--bl-size-xl));background:var(--bl-color-neutral-full);box-shadow:var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);transition:right var(--bl-drawer-animation-duration, 0.25s);z-index:var(--bl-index-sticky)}iframe{height:100%;width:100%;border:none}.container{display:flex;flex-direction:column;gap:var(--bl-size-xl);flex:1;width:100%}header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bl-size-2xs);background-color:white}header .header-buttons{display:flex;gap:var(--bl-size-xl);margin-inline-start:auto}header h2{font:var(--bl-font-title-1-medium);color:var(--bl-color-neutral-darker);overflow:hidden;margin:0;padding:0}.content{flex:1;overflow-y:scroll}.iframe-content{flex:1}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport { styleToPixelConverter } from \"../../utilities/style-to-px.converter\";\nimport \"../button/bl-button\";\nimport style from \"./bl-drawer.css\";\n\n/**\n * @tag bl-drawer\n * @summary Baklava Drawer component\n *\n * @cssproperty [--bl-drawer-animation-duration=250ms] Drawer slide in animation duration\n */\n\n@customElement(\"bl-drawer\")\nexport default class BlDrawer extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets drawer open-close status\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Sets the drawer title\n */\n @property({ type: String })\n caption?: string;\n\n /**\n * Sets the drawer embed url for iframe\n */\n @property({ type: String, attribute: \"embed-url\" })\n embedUrl?: string;\n\n /**\n * Sets the drawer external link\n */\n @property({ type: String, attribute: \"external-link\" })\n externalLink?: string;\n\n /**\n * Sets the drawer width\n */\n @property({ type: String, attribute: \"width\" })\n width: string = \"424px\";\n\n /**\n * Fires when the drawer is opened\n */\n @event(\"bl-drawer-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when the drawer is closed\n */\n @event(\"bl-drawer-close\") private onClose: EventDispatcher<string>;\n\n @query(\"#drawer-iframe\")\n _drawerIframe: HTMLIFrameElement;\n\n connectedCallback() {\n super.connectedCallback();\n window?.addEventListener(\"bl-drawer-open\", event => {\n if (event.target !== this) this.closeDrawer();\n });\n this.resizeDrawerWidth();\n\n window?.addEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n window?.removeEventListener(\"resize\", () => this.resizeDrawerWidth());\n window?.addEventListener(\"load\", () => this.resizeDrawerWidth());\n }\n\n updated(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"open\")) {\n this.toggleDialogHandler();\n }\n\n if (changedProperties.has(\"width\")) {\n this.resizeDrawerWidth();\n }\n }\n\n private domExistenceSchedule: number;\n\n private resizeDrawerWidth() {\n const drawerWidth = styleToPixelConverter(this.width);\n\n const newWidth = !drawerWidth || drawerWidth < 100 ? \"424px\" : this.width;\n\n if (drawerWidth) {\n if (window?.innerWidth < drawerWidth) {\n this.style.setProperty(\"--bl-drawer-current-width\", \"calc(100vw - 24px)\");\n } else {\n this.style.setProperty(\"--bl-drawer-current-width\", newWidth);\n }\n }\n }\n\n private toggleDialogHandler() {\n if (this.open) {\n if (this.domExistenceSchedule) {\n clearTimeout(this.domExistenceSchedule);\n }\n this.domExistence = true;\n window.setTimeout(() => {\n if (this.embedUrl && this._drawerIframe) {\n this._drawerIframe.src = this.embedUrl;\n }\n });\n // FIXME: Allow events without payload\n this.onOpen(\"\");\n } else {\n // Give some time for exit animation\n this.domExistenceSchedule = window.setTimeout(() => {\n this.domExistence = false;\n }, 1000);\n\n // FIXME: Allow events without payload\n this.onClose(\"\");\n }\n }\n\n @state() private domExistence = false;\n\n private closeDrawer() {\n this.open = false;\n }\n\n private renderContent() {\n const content = this.embedUrl\n ? html`<iframe id=\"drawer-iframe\" src=${this.embedUrl}></iframe>`\n : html`<slot></slot>`;\n\n return html`<section class=${this.embedUrl ? \"iframe-content\" : \"content\"}>\n ${content}\n </section>`;\n }\n\n private renderContainer() {\n const title = this.caption ? html`<h2 id=\"drawer-caption\">${this.caption}</h2>` : \"\";\n const external_button = this.externalLink\n ? html`<bl-button\n icon=\"external_link\"\n variant=\"tertiary\"\n kind=\"neutral\"\n size=\"small\"\n href=\"${this.externalLink}\"\n target=\"_blank\"\n ></bl-button>`\n : \"\";\n\n return html`<div class=\"container\">\n <header>\n ${title}\n <div class=\"header-buttons\">\n ${external_button}\n <bl-button\n @click=\"${this.closeDrawer}\"\n icon=\"close\"\n label=\"close\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n ></bl-button>\n </div>\n </header>\n ${this.renderContent()}\n </div>`;\n }\n\n render(): TemplateResult {\n if (this.domExistence) {\n return html`<div class=\"drawer\">${this.renderContainer()}</div>`;\n } else {\n return html``;\n }\n }\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-drawer\": BlDrawer;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styleToPixelConverter", "styleValue", "match", "value", "unit", "styleInPixel", "styles", "i", "bl_drawer_default", "BlDrawer", "s", "bl_drawer_default", "event", "changedProperties", "drawerWidth", "styleToPixelConverter", "newWidth", "content", "x", "title", "external_button", "__decorateClass", "e", "i", "t"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as g,c as w}from"./chunk-EG7U7PM3.js";import{a as f}from"./chunk-XDUIVR6I.js";import{a as b}from"./chunk-6LT7O7T2.js";import{a as E}from"./chunk-DINNT5P2.js";import{a as d}from"./chunk-GRL4DWKG.js";import{a as p,b as
|
|
1
|
+
import{a as g,c as w}from"./chunk-EG7U7PM3.js";import{a as f}from"./chunk-XDUIVR6I.js";import{a as b}from"./chunk-6LT7O7T2.js";import{a as E}from"./chunk-DINNT5P2.js";import{a as d}from"./chunk-GRL4DWKG.js";import{a as p,b as l,c as m,e as u}from"./chunk-5MOOXA2X.js";import{a as v,b as o,f as c}from"./chunk-4OT5AMS5.js";import{d as t}from"./chunk-IZ2LK5GK.js";var S=v`:host{display:flex;flex-direction:row}fieldset{border:none;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-checkbox-direction, column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}.dirty.invalid .options{margin-bottom:var(--bl-size-3xs)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}`,O=S;var k="bl-checkbox-group",x="bl-checkbox-group-change",r=class extends f(c){constructor(){super(...arguments);this.required=!1;this.dirty=!1;this.focusedOptionIndex=0}static get styles(){return[O]}get options(){return[...this.querySelectorAll(y)]}get checkedOptions(){return this.options.filter(e=>e.checked).map(e=>e.value)}get availableOptions(){return this.options.filter(e=>!e.disabled)}connectedCallback(){var e;super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown),(e=this.form)==null||e.addEventListener("submit",i=>this.handleSubmit(i))}disconnectedCallback(){var e;super.disconnectedCallback(),this.removeEventListener("focus",this.handleFocus),this.removeEventListener("keydown",this.handleKeyDown),(e=this.form)==null||e.removeEventListener("submit",i=>this.handleSubmit(i))}firstUpdated(){this.required&&!this.value&&(this.setValue(null),this.onInvalid(this.internals.validity))}async updated(e){e.has("value")&&(this.setFormValue(),this.checkOptionsValidity(),this.value!==null&&this.onChange(this.value),await this.validationComplete,this.checkValidity()||this.onInvalid(this.internals.validity),this.requestUpdate())}setFormValue(){var e,i;if(this.value!==null&&this.value.length>0){let s=new FormData;(e=this.value)==null||e.forEach(n=>s.append(this.name,`${n}`)),this.setValue(s)}else((i=this.value)==null?void 0:i.length)===0&&this.setValue(null)}handleOptionChecked(){this.dirty=!0,this.value=this.checkedOptions}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if(e.key==="Tab"){if(e.shiftKey?this.focusedOptionIndex--:this.focusedOptionIndex++,this.focusedOptionIndex===this.availableOptions.length){this.tabIndex=0,this.focusedOptionIndex=0;return}}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}handleSubmit(e){this.reportValidity()||(this.onInvalid(this.internals.validity),e.preventDefault()),this.checkOptionsValidity()}checkOptionsValidity(){var e,i;this.checkValidity()?(e=this.options)==null||e.forEach(s=>{var n,h;return(h=(n=s==null?void 0:s.shadowRoot)==null?void 0:n.querySelector("div"))==null?void 0:h.classList.remove("dirty","invalid")}):this.checkValidity()||(i=this.options)==null||i.forEach(s=>{var n,h;return(h=(n=s==null?void 0:s.shadowRoot)==null?void 0:n.querySelector("div"))==null?void 0:h.classList.add("dirty","invalid")})}validityCallback(){return this.customInvalidText?this.customInvalidText:this.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}render(){let e=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
|
|
2
2
|
${this.validationMessage}
|
|
3
3
|
</p>`,i={dirty:this.dirty,invalid:!this.validity.valid};return o`<div class=${b(i)}>
|
|
4
4
|
<fieldset
|
|
@@ -13,7 +13,7 @@ import{a as g,c as w}from"./chunk-EG7U7PM3.js";import{a as f}from"./chunk-XDUIVR
|
|
|
13
13
|
</div>
|
|
14
14
|
<div class="hint">${e}</div>
|
|
15
15
|
</fieldset>
|
|
16
|
-
</div>`}};
|
|
16
|
+
</div>`}};r.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},r.formControlValidators=[g],t([u("fieldset")],r.prototype,"validationTarget",2),t([l()],r.prototype,"name",2),t([l({type:String})],r.prototype,"label",2),t([l({type:Array,reflect:!0})],r.prototype,"value",2),t([l({type:Boolean,reflect:!0})],r.prototype,"required",2),t([l({type:String,attribute:"invalid-text",reflect:!0})],r.prototype,"customInvalidText",2),t([m()],r.prototype,"dirty",2),t([d("bl-checkbox-group-change")],r.prototype,"onChange",2),t([d("bl-checkbox-group-invalid")],r.prototype,"onInvalid",2),r=t([p(k)],r);var M=v`:host{display:inline-block;vertical-align:middle}:host *{outline:none}label{display:flex;gap:var(--bl-size-2xs);color:var(--bl-color-neutral-darker);font:var(--bl-font-title-3);cursor:pointer;user-select:none}.label{overflow-wrap:anywhere}.dirty.invalid label{margin-bottom:var(--bl-size-3xs)}.checkbox-container{position:relative}input[type="checkbox"]{appearance:none;outline:none;margin:0;box-sizing:border-box;border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m)}.check-mark{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);min-width:var(--bl-size-m);min-height:var(--bl-size-m);max-width:var(--bl-size-m);max-height:var(--bl-size-m);border:1px solid var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-neutral-full);font-size:var(--bl-font-size-2xs);background-color:var(--bl-color-neutral-full)}.required-suffix{color:var(--bl-color-danger);margin-inline-start:calc(var(--bl-size-2xs) * -1)}.dirty.invalid .check-mark{border-color:var(--bl-color-danger)}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.dirty.invalid .hint{display:block}.invalid-text{display:none;color:var(--bl-color-danger)}.dirty.invalid .invalid-text{display:block}:host([checked]) .label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .label,:host(:hover) .label{color:var(--bl-color-primary)}:host(:is([checked], [indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-neutral-light);border:1px solid var(--bl-color-neutral-lighter)}:host([disabled]) .check-mark{background-color:var(--bl-color-neutral-lightest)}:host(:not([disabled])) input:focus-visible + .check-mark{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,V=M;var y="bl-checkbox",a=class extends f(c){constructor(){super(...arguments);this.checked=!1;this.required=!1;this.disabled=!1;this.indeterminate=!1;this.dirty=!1;this.handleFieldValueChange=e=>{this.checked=e.detail.includes(this.value)}}static get styles(){return[V]}connectedCallback(){var e,i;super.connectedCallback(),this.field=this.closest(k),(e=this.field)==null||e.addEventListener(x,this.handleFieldValueChange),(i=this.form)==null||i.addEventListener("submit",s=>this.handleSubmit(s))}reportValidity(){return this.dirty=!0,this.checkValidity()}disconnectedCallback(){var e,i;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(x,this.handleFieldValueChange),(i=this.form)==null||i.removeEventListener("submit",s=>this.handleSubmit(s))}async updated(e){e.has("checked")&&this.required&&(this.checked?this.setValue("on"):this.checked||this.setValue(""),await this.validationComplete,this.checkValidity()||this.onInvalid(this.internals.validity),this.requestUpdate())}update(e){super.update(e),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}validityCallback(){var e;return this.customInvalidText||((e=this.validationTarget)==null?void 0:e.validationMessage)}focus(){this.checkboxElement.tabIndex=0,this.checkboxElement.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.field&&(this.checkboxElement.tabIndex=-1)}handleSubmit(e){this.reportValidity()||(this.onInvalid(this.internals.validity),e.preventDefault())}async handleChange(e){let i=e.target;this.dirty=!0,this.checked=i.checked,this.onChange(i.checked),this.indeterminate=!1}handleKeyDown(e){e.code==="Space"&&(this.checked=!this.checked,this.onChange(this.checked),e.preventDefault())}render(){let e="";this.checked&&(e="check"),this.indeterminate&&(e="minus");let i=this.checkValidity()?"":o`<p class="invalid-text">${this.validationMessage}</p>`,s=this.required?o`<span class="required-suffix">*</span>`:"",n={"checkbox-container":!0,dirty:this.dirty,invalid:!this.checkValidity()};return o`<div class=${b(n)}>
|
|
17
17
|
<label>
|
|
18
18
|
<input
|
|
19
19
|
type="checkbox"
|
|
@@ -23,12 +23,13 @@ import{a as g,c as w}from"./chunk-EG7U7PM3.js";import{a as f}from"./chunk-XDUIVR
|
|
|
23
23
|
aria-readonly=${this.disabled}
|
|
24
24
|
.indeterminate=${this.indeterminate}
|
|
25
25
|
@change=${this.handleChange}
|
|
26
|
+
@keydown=${this.handleKeyDown}
|
|
26
27
|
value=${E(this.value)}
|
|
27
28
|
@blur=${this.blur}
|
|
28
29
|
/>
|
|
29
30
|
<div class="check-mark">${e?o`<bl-icon name="${e}"></bl-icon>`:null}</div>
|
|
30
|
-
<slot class="label"></slot>${
|
|
31
|
+
<slot class="label"></slot>${s}
|
|
31
32
|
</label>
|
|
32
33
|
<div class="hint">${i}</div>
|
|
33
|
-
</div> `}};a.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!1},a.formControlValidators=[g],t([u("input")],a.prototype,"validationTarget",2),t([
|
|
34
|
-
//# sourceMappingURL=chunk-
|
|
34
|
+
</div> `}};a.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!1},a.formControlValidators=[g],t([u("input")],a.prototype,"validationTarget",2),t([l({type:Boolean,reflect:!0})],a.prototype,"checked",2),t([l()],a.prototype,"value",2),t([l({type:Boolean,reflect:!0})],a.prototype,"required",2),t([l({type:String,attribute:"invalid-text",reflect:!0})],a.prototype,"customInvalidText",2),t([l({type:Boolean,reflect:!0})],a.prototype,"disabled",2),t([l({type:Boolean,reflect:!0})],a.prototype,"indeterminate",2),t([d("bl-checkbox-change")],a.prototype,"onChange",2),t([d("bl-focus")],a.prototype,"onFocus",2),t([d("bl-blur")],a.prototype,"onBlur",2),t([d("bl-checkbox-invalid")],a.prototype,"onInvalid",2),t([u("[type=checkbox]")],a.prototype,"checkboxElement",2),t([m()],a.prototype,"dirty",2),a=t([p(y)],a);export{y as a,a as b,k as c,x as d,r as e};
|
|
35
|
+
//# sourceMappingURL=chunk-FTQX7CEW.js.map
|