@trendyol/baklava 2.4.0-beta.9 → 3.0.0-beta.1
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/assets/badge.svg +5 -0
- package/dist/assets/express.svg +3 -0
- package/dist/assets/express_delivery.svg +6 -0
- package/dist/assets/express_furniture.svg +6 -0
- package/dist/assets/medal.svg +2 -10
- package/dist/assets/translation.svg +3 -0
- package/dist/baklava.js +1 -1
- package/dist/chunk-7QGSFS64.js +16 -0
- package/dist/chunk-7QGSFS64.js.map +7 -0
- package/dist/chunk-BEGAFK2I.js +18 -0
- package/dist/chunk-BEGAFK2I.js.map +7 -0
- package/dist/{chunk-5EFPA3CA.js → chunk-ILQVF4MN.js} +5 -5
- package/dist/chunk-ILQVF4MN.js.map +7 -0
- package/dist/chunk-LDGSM7XL.js +106 -0
- package/dist/chunk-LDGSM7XL.js.map +7 -0
- package/dist/{chunk-FSFO7DCO.js → chunk-TOJWQXBJ.js} +2 -2
- package/dist/{chunk-FSFO7DCO.js.map → chunk-TOJWQXBJ.js.map} +2 -2
- package/dist/chunk-V5OMCBVZ.js +23 -0
- package/dist/chunk-V5OMCBVZ.js.map +7 -0
- package/dist/components/dropdown/bl-dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/bl-dropdown.js +1 -1
- package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
- package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
- package/dist/components/icon/icon-list.d.ts +1 -1
- package/dist/components/icon/icon-list.d.ts.map +1 -1
- package/dist/components/icon/icon-list.js +1 -1
- package/dist/components/icon/icon-list.js.map +2 -2
- package/dist/components/pagination/bl-pagination.js +1 -1
- package/dist/components/select/bl-select.d.ts.map +1 -1
- package/dist/components/select/bl-select.js +1 -1
- package/dist/components/select/option/bl-select-option.d.ts +4 -0
- package/dist/components/select/option/bl-select-option.d.ts.map +1 -1
- package/dist/components/select/option/bl-select-option.js +1 -1
- package/dist/components/switch/bl-switch.d.ts.map +1 -1
- package/dist/components/switch/bl-switch.js +1 -1
- package/dist/components/tab-group/bl-tab-group.js +1 -1
- package/dist/custom-elements.json +9 -1
- package/package.json +2 -2
- package/dist/chunk-5EFPA3CA.js.map +0 -7
- package/dist/chunk-AMAOGVPQ.js +0 -106
- package/dist/chunk-AMAOGVPQ.js.map +0 -7
- package/dist/chunk-BNACGMP2.js +0 -16
- package/dist/chunk-BNACGMP2.js.map +0 -7
- package/dist/chunk-HJWQ7Y3K.js +0 -5
- package/dist/chunk-HJWQ7Y3K.js.map +0 -7
- package/dist/chunk-JPRCBAHY.js +0 -23
- package/dist/chunk-JPRCBAHY.js.map +0 -7
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([multiple][view-select-all]) .select-wrapper{--menu-height:290px}:host([size=\"large\"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size=\"small\"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:\", \"}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-4xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.popover-no-result{display:flex;flex-direction:column;gap:var(--bl-size-2xs);align-items:center;justify-content:center;height:80px}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:host([placeholder]) :where(.select-open, .selected) .label,:host(:not([placeholder])) .selected .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.select-all{position:sticky;top:0;padding:var(--bl-size-xs) 0;background:var(--background-color);z-index:1;font:var(--bl-font-title-3-regular);/* Make sure option focus doesn't overflow */box-shadow:10px 0 0 var(--background-color),-10px 0 0 var(--background-color)}.select-all::after{position:absolute;content:\"\";width:100%;bottom:0;border-bottom:1px solid var(--bl-color-neutral-lighter)}.search-bar-input{font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--text-color);border:none;outline:none;background-color:transparent;width:100%;height:100%;padding:0;margin:0;box-sizing:border-box}.search-bar-input::placeholder{color:var(--placeholder-color)}.search-bar-input:focus-visible{outline:none}.search-loading-icon{animation:spin 1s linear infinite}.action-divider{display:none}.select-wrapper .action-divider{display:block;height:1rem;width:1px;background-color:var(--bl-color-neutral-lighter)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.actions bl-icon{padding:4px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\nimport { customElement, property, query, queryAll, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { autoUpdate, computePosition, flip, MiddlewareState, offset, size } from \"@floating-ui/dom\";\nimport { FormControlMixin, requiredValidator } from \"@open-wc/form-control\";\nimport { FormValue } from \"@open-wc/form-helpers\";\nimport \"element-internals-polyfill\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport BlCheckbox from \"../checkbox-group/checkbox/bl-checkbox\";\nimport \"../icon/bl-icon\";\nimport style from \"../select/bl-select.css\";\nimport \"../select/option/bl-select-option\";\nimport type BlSelectOption from \"./option/bl-select-option\";\n\nexport interface ISelectOption<T = string> {\n value: T;\n text: string;\n selected: boolean;\n}\n\nexport type SelectSize = \"medium\" | \"large\" | \"small\";\n\nexport type CleanUpFunction = () => void;\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.\n */\n@customElement(\"bl-select\")\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(\n LitElement\n) {\n static get styles(): CSSResultGroup {\n return [style];\n }\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static formControlValidators = [requiredValidator];\n\n /**\n * Sets name of the select field\n */\n @property()\n name: string;\n\n private _value: ValueType | ValueType[] | null;\n\n private _initialValue: ValueType | ValueType[] | null;\n\n /**\n * Sets the value of the select\n */\n @property()\n get value(): ValueType | ValueType[] | null {\n return this._value;\n }\n\n set value(val: ValueType | ValueType[] | null) {\n this._value = val;\n\n if (Array.isArray(val)) {\n const formData = new FormData();\n\n val.forEach(option => formData.append(this.name, `${option}`));\n this.setValue(formData);\n } else {\n this.setValue(val);\n }\n\n this.setOptionsSelected();\n }\n\n shouldFormValueUpdate(): boolean {\n return this.value !== null && this.value !== \"\";\n }\n\n /* Declare reactive properties */\n /**\n * Sets the label value\n */\n @property({ reflect: true })\n label?: string;\n\n /**\n * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n */\n @property({ reflect: true })\n placeholder?: string;\n\n /**\n * Sets the size value. Select component's height value will be changed accordingly\n */\n @property({ type: String, reflect: true })\n size: SelectSize = \"medium\";\n\n /**\n * When option is not selected, shows component in error state\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Shows the component in disabled state.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Sets whether the selected option is clearable\n */\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n /**\n * Allows multiple options to be selected\n */\n @property({ type: Boolean, reflect: true })\n multiple = false;\n\n /**\n * Sets input to get keyboard focus automatically\n */\n @property({ type: Boolean, reflect: true })\n autofocus = 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 * Adds help text\n */\n @property({ type: String, attribute: \"help-text\", reflect: true })\n helpText?: string;\n\n /**\n * Set custom error message\n */\n @property({ type: String, attribute: \"invalid-text\", reflect: true })\n customInvalidText?: string;\n\n /**\n * Views select all option in multiple select\n */\n @property({ type: Boolean, attribute: \"view-select-all\" })\n viewSelectAll = false;\n\n /**\n * Sets select all text in multiple select\n */\n @property({ type: String, attribute: \"select-all-text\" })\n selectAllText = \"Select All\";\n\n /**\n * Enable search functionality for the options within the list\n */\n @property({ type: Boolean, attribute: \"search-bar\", reflect: true })\n searchBar = false;\n\n /**\n * Search for text variations such as \"search,\" \"searching,\" \"search by country,\" and so on\n */\n @property({ type: String, attribute: \"search-bar-placeholder\", reflect: true })\n searchBarPlaceholder?: string;\n\n /**\n * Display a loading icon in place of the search icon.\n */\n @property({ type: Boolean, attribute: \"search-bar-loading-state\", reflect: true })\n searchBarLoadingState = false;\n\n /**\n * Text to display when no search results are found.\n */\n @property({ type: String, attribute: \"search-not-found-text\", reflect: true })\n searchNotFoundText = \"No Data Found\";\n\n /**\n * Text to display on the clear search button.\n */\n @property({ type: String, attribute: \"popover-clear-search-text\", reflect: true })\n popoverClearSearchText = \"Clear Search\";\n\n /* Declare internal reactive properties */\n @state()\n private _isPopoverOpen = false;\n\n @state()\n private _additionalSelectedOptionCount = 0;\n\n @state()\n private _searchText = \"\";\n\n @query(\".selected-options\")\n private selectedOptionsContainer!: HTMLElement;\n\n @queryAll(\".selected-options li\")\n private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n @query(\".popover\")\n private _popover: HTMLElement;\n\n @query(\".select-input\")\n private _selectInput: HTMLElement;\n\n /**\n * Fires when selection changes\n */\n @event(\"bl-select\") private _onBlSelect: EventDispatcher<\n ISelectOption<ValueType>[] | ISelectOption<ValueType>\n >;\n\n /**\n * Fires when search text changes\n */\n @event(\"bl-search\") private _onBlSearch: EventDispatcher<string>;\n\n private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n private _cleanUpPopover: CleanUpFunction | null = null;\n\n private setOptionsSelected() {\n this._connectedOptions.forEach(\n option =>\n (option.selected =\n this.value === option.value ||\n (Array.isArray(this.value) && this.value.includes(option.value)))\n );\n\n this._selectedOptions = [...this.options.filter(option => option.selected)];\n }\n\n get options() {\n return this._connectedOptions;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n get noResultFound() {\n return this._searchText !== \"\" && this._connectedOptions.every(option => option.hidden);\n }\n\n @state()\n private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n @state()\n private dirty = false;\n\n get selectedOptions(): BlSelectOption<ValueType>[] {\n return this._selectedOptions;\n }\n\n get additionalSelectedOptionCount() {\n return this._additionalSelectedOptionCount;\n }\n\n validityCallback(): string | void {\n if (this.customInvalidText) {\n return this.customInvalidText;\n }\n const select = document.createElement(\"select\");\n\n select.required = this.required;\n\n return select.validationMessage;\n }\n\n reportValidity() {\n this.dirty = true;\n return this.checkValidity();\n }\n\n resetFormControl(): void {\n this.value = this._initialValue;\n }\n\n @query(\".select-input\")\n validationTarget: HTMLElement;\n\n open() {\n if (this.searchBar) {\n setTimeout(() => {\n document.activeElement?.shadowRoot?.querySelector(\"input\")?.focus();\n }, 100);\n }\n\n this._isPopoverOpen = true;\n this._setupPopover();\n document.addEventListener(\"click\", this._interactOutsideHandler, true);\n document.addEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n close() {\n this._handleSearchOptions({ target: { value: \"\" } } as InputEvent & {\n target: HTMLInputElement;\n });\n\n this._isPopoverOpen = false;\n this.focusedOptionIndex = -1;\n this._cleanUpPopover && this._cleanUpPopover();\n document.removeEventListener(\"click\", this._interactOutsideHandler, true);\n document.removeEventListener(\"focus\", this._interactOutsideHandler, true);\n }\n\n private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n const eventPath = event.composedPath() as HTMLElement[];\n\n if (!eventPath?.find(el => el.tagName === \"BL-SELECT\")?.contains(this)) {\n this.close();\n }\n };\n\n private _setupPopover() {\n this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n computePosition(this._selectInput, this._popover, {\n placement: \"bottom\",\n strategy: \"fixed\",\n middleware: [\n flip(),\n offset(8),\n size({\n apply(args: MiddlewareState) {\n Object.assign(args.elements.floating.style, {\n width: `${args.elements.reference.getBoundingClientRect().width}px`,\n });\n },\n }),\n ],\n }).then(({ x, y }) => {\n this._popover.style.setProperty(\"--left\", `${x}px`);\n this._popover.style.setProperty(\"--top\", `${y}px`);\n });\n });\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.form?.addEventListener(\"submit\", (e: SubmitEvent) => {\n if (!this.reportValidity()) {\n e.preventDefault();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this._cleanUpPopover && this._cleanUpPopover();\n }\n\n private inputTemplate() {\n const inputSelectedOptions = html`<ul class=\"selected-options\">\n ${this._selectedOptions.map(item => html`<li>${item.textContent}</li>`)}\n </ul>`;\n\n const isAllSelectedDisabled =\n this._selectedOptions.length > 0 && this._selectedOptions.every(option => option.disabled);\n const isRemoveButtonShown = !isAllSelectedDisabled && (this.clearable || this.multiple);\n const removeButton = isRemoveButtonShown\n ? html`<bl-button\n class=\"remove-all\"\n size=\"small\"\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"close\"\n @click=${this._onClickRemove}\n ></bl-button>`\n : \"\";\n\n const isSearchBarVisible = this.searchBar && this.opened;\n const isMultipleWithSelection = this.multiple && this._selectedOptions.length > 0;\n\n const isDividerShown = isSearchBarVisible || isMultipleWithSelection;\n\n const searchMagIcon = html`<bl-icon\n class=\"search-mag-icon\"\n name=\"search\"\n style=\"color: var(--bl-color-primary);font-size: var(--bl-font-size-s)\"\n ></bl-icon>`;\n\n const searchLoadingIcon = html`<bl-icon\n class=\"search-loading-icon\"\n name=\"loading\"\n style=\"color: var(--bl-color-primary);font-size: var(--bl-font-size-s)\"\n ></bl-icon>`;\n\n const actionDivider = isDividerShown ? html`<div class=\"action-divider\"></div>` : \"\";\n\n const search = html`<fieldset\n class=${classMap({\n \"select-input\": true,\n \"has-overflowed-options\": this._additionalSelectedOptionCount > 0,\n })}\n tabindex=\"${this.disabled ? \"-1\" : 0}\"\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"${this.opened}\"\n aria-labelledby=\"label\"\n @click=${this.open}\n >\n <legend><span>${this.label}</span></legend>\n\n ${this._selectedOptions.length > 0 && !this.opened\n ? inputSelectedOptions\n : html`\n <input\n class=\"search-bar-input\"\n placeholder=\"${ifDefined(this.searchBarPlaceholder || this.label)}\"\n @input=${this._handleSearchOptions}\n .value=${this._searchText}\n />\n `}\n ${!this.opened\n ? html`<span class=\"additional-selection-count\"\n >+${this._additionalSelectedOptionCount}</span\n >`\n : \"\"}\n\n <div class=\"actions\" @click=${this.togglePopover}>\n ${this.opened ? (this.searchBarLoadingState ? searchLoadingIcon : searchMagIcon) : \"\"}\n ${!this.opened ? removeButton : \"\"} ${actionDivider}\n <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n </div>\n </fieldset>`;\n\n return this.searchBar\n ? search\n : html`<fieldset\n class=${classMap({\n \"select-input\": true,\n \"has-overflowed-options\": this._additionalSelectedOptionCount > 0,\n })}\n tabindex=\"${this.disabled ? \"-1\" : 0}\"\n ?autofocus=${this.autofocus}\n @click=${this.togglePopover}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded=\"${this.opened}\"\n aria-labelledby=\"label\"\n >\n <legend><span>${this.label}</span></legend>\n <span class=\"placeholder\">${this.placeholder}</span>\n <span class=\"label\">${this.label}</span>\n ${inputSelectedOptions}\n <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\n <div class=\"actions\">\n ${removeButton} ${actionDivider}\n <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n </div>\n </fieldset>`;\n }\n\n selectAllTemplate() {\n if (!this.multiple || !this.viewSelectAll || this.noResultFound) {\n return null;\n }\n\n const isAllRenderedOptionsSelected = this._connectedOptions\n .filter(option => !option.hidden)\n .every(option => option.selected);\n const isAnySelected = this._selectedOptions.filter(option => !option.hidden).length > 0;\n\n return html`<bl-checkbox\n class=\"select-all\"\n .checked=\"${isAllRenderedOptionsSelected}\"\n .indeterminate=\"${isAnySelected && !isAllRenderedOptionsSelected}\"\n role=\"option\"\n aria-selected=\"${isAllRenderedOptionsSelected}\"\n @bl-checkbox-change=\"${this._handleSelectAll}\"\n >\n ${this.selectAllText}\n </bl-checkbox>`;\n }\n\n render() {\n const invalidMessage = !this.checkValidity()\n ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n ${this.validationMessage}\n </p>`\n : \"\";\n\n const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : \"\";\n\n const label = this.label ? html`<label id=\"label\">${this.label}</label>` : \"\";\n\n return html`<div\n class=${classMap({\n \"select-wrapper\": true,\n \"select-open\": this.opened,\n \"selected\": this._selectedOptions.length > 0,\n \"invalid\": !this.validity.valid,\n \"dirty\": this.dirty,\n })}\n @keydown=${this.handleKeydown}\n >\n ${label} ${this.inputTemplate()}\n <div\n class=\"popover\"\n tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : \"-1\")}\"\n @bl-select-option=${this._handleSelectOptionEvent}\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n aria-labelledby=\"label\"\n >\n ${this.selectAllTemplate()}\n <slot></slot>\n ${this.searchBar && this.noResultFound\n ? html`<div name=\"popover-clear-search-text\" class=\"popover-no-result\">\n <span>${this.searchNotFoundText}</span>\n <bl-button\n variant=\"tertiary\"\n @click=${() => {\n this._handleSearchOptions({ target: { value: \"\" } } as InputEvent & {\n target: HTMLInputElement;\n });\n }}\n >${this.popoverClearSearchText}</bl-button\n >\n </div>`\n : \"\"}\n </div>\n <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n </div> `;\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.focusedOptionIndex === -1 && [\"Enter\", \"Space\"].includes(event.code)) {\n this.togglePopover();\n event.preventDefault();\n } else if (this._isPopoverOpen === false && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n this.open();\n event.preventDefault();\n } else if (event.code === \"Escape\") {\n this.close();\n event.preventDefault();\n } else if (this._isPopoverOpen && [\"ArrowDown\", \"ArrowUp\"].includes(event.code)) {\n event.code === \"ArrowDown\" && this.focusedOptionIndex++;\n event.code === \"ArrowUp\" && this.focusedOptionIndex--;\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\n private togglePopover() {\n this._isPopoverOpen ? this.close() : this.open();\n }\n\n private _handleSelectEvent() {\n const options = this._selectedOptions.map(\n option =>\n ({\n value: option.value,\n selected: option.selected,\n text: option.textContent,\n } as ISelectOption<ValueType>)\n );\n\n if (!this.multiple) this._onBlSelect(options[0]);\n else this._onBlSelect(options);\n }\n\n private _handleSearchEvent() {\n this._onBlSearch(this._searchText);\n }\n\n private _handleSearchOptions(e: InputEvent): void {\n if (!this.searchBar) return;\n\n this._searchText = (e.target as HTMLInputElement).value;\n\n this._handleSearchEvent();\n\n this._connectedOptions.forEach(option => {\n const isVisible = option.textContent?.toLowerCase().includes(this._searchText.toLowerCase());\n\n option.hidden = !isVisible;\n });\n\n this._selectedOptions = this.options.filter(option => option.selected);\n\n this._handleLastVisibleSearchedOption();\n\n this.requestUpdate();\n }\n\n private _handleLastVisibleSearchedOption() {\n const lastVisibleOption = [...this.options].reverse().find(option => !option.hidden);\n\n if (lastVisibleOption) {\n lastVisibleOption?.shadowRoot?.querySelector(\"div\")?.classList.add(\"no-border-bottom\");\n }\n\n this.options.map(option => {\n if (!option.hidden && option !== lastVisibleOption) {\n option.shadowRoot?.querySelector(\"div\")?.classList.remove(\"no-border-bottom\");\n }\n });\n }\n\n private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n this.value = optionItem.value;\n\n this._handleSelectEvent();\n this._isPopoverOpen = false;\n }\n\n private _handleMultipleSelect() {\n this.value = this._connectedOptions\n .filter(option => option.selected)\n .map(option => option.value);\n\n this._handleSelectEvent();\n }\n\n private _handleSelectOptionEvent(e: CustomEvent) {\n const optionItem = e.target as BlSelectOption<ValueType>;\n\n this.dirty = true;\n\n if (this.multiple) {\n this._handleMultipleSelect();\n } else {\n this._handleSingleSelect(optionItem);\n }\n }\n\n private _handleSelectAll(e: CustomEvent) {\n const selectAllEl = this.shadowRoot?.querySelector(\".select-all\") as BlCheckbox;\n\n const checked = e.detail;\n const unselectedOptions = this._connectedOptions.filter(\n option => !option.selected && !option.hidden\n );\n const isAllUnselectedDisabled = unselectedOptions.every(option => option.disabled);\n\n // If all available options are selected, instead of checking, uncheck all options\n if (checked && isAllUnselectedDisabled) {\n setTimeout(() => {\n const checkbox = selectAllEl?.shadowRoot?.querySelector(\"input\");\n\n checkbox?.click();\n }, 0);\n return;\n }\n\n this._connectedOptions.forEach(option => {\n if (option.disabled || option.hidden) {\n return;\n }\n\n option.selected = checked;\n });\n\n this._handleMultipleSelect();\n }\n\n private _onClickRemove(e: MouseEvent) {\n e.stopPropagation();\n\n const selectedDisabledOptions = this._selectedOptions.filter(option => option.disabled);\n\n this._connectedOptions\n .filter(option => !option.disabled && option.selected)\n .forEach(option => {\n option.selected = false;\n });\n\n this.value = selectedDisabledOptions.length\n ? selectedDisabledOptions.map(option => option.value)\n : null;\n this._handleSelectEvent();\n }\n\n private _checkAdditionalItemCount() {\n if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) {\n this._additionalSelectedOptionCount = 0;\n return;\n }\n\n const firstNonVisibleItemIndex = [...this.selectedOptionsItems].findIndex(\n item => item.offsetLeft > this.selectedOptionsContainer.offsetWidth\n );\n\n if (firstNonVisibleItemIndex > -1) {\n this._additionalSelectedOptionCount =\n this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n } else {\n this._additionalSelectedOptionCount = 0;\n }\n }\n\n protected firstUpdated(): void {\n if (this.value === undefined) {\n this.value = \"\" as ValueType;\n }\n\n this._initialValue = this._value;\n }\n\n protected updated(_changedProperties: PropertyValues) {\n if (\n _changedProperties.has(\"multiple\") &&\n typeof _changedProperties.get(\"multiple\") === \"boolean\"\n ) {\n this.value = null;\n }\n\n if (_changedProperties.has(\"_selectedOptions\")) {\n this._checkAdditionalItemCount();\n }\n }\n\n /**\n * This method is used by `bl-select-option` component to register itself to bl-select.\n * @param option BlSelectOption reference to be registered\n */\n registerOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.push(option);\n\n if (option.selected) {\n if (this.multiple) {\n if (!Array.isArray(this.value)) {\n this.value = [];\n }\n this.value = [...this.value, option.value];\n } else {\n this.value = option.value;\n }\n }\n\n this.setOptionsSelected();\n this.requestUpdate();\n }\n\n /**\n * This method is used by `bl-select-option` component to unregister itself from bl-select.\n * @param option BlSelectOption reference to be unregistered\n */\n unregisterOption(option: BlSelectOption<ValueType>) {\n this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bl-select\": BlSelect;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_select_default", "BlSelect", "FormControlMixin", "s", "event", "_a", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "_b", "_c", "autoUpdate", "computePosition", "flip", "offset", "size", "args", "x", "y", "e", "inputSelectedOptions", "item", "removeButton", "isSearchBarVisible", "isMultipleWithSelection", "isDividerShown", "searchMagIcon", "searchLoadingIcon", "actionDivider", "search", "o", "l", "isAllRenderedOptionsSelected", "isAnySelected", "invalidMessage", "helpMessage", "label", "options", "isVisible", "lastVisibleOption", "optionItem", "selectAllEl", "checked", "isAllUnselectedDisabled", "checkbox", "selectedDisabledOptions", "firstNonVisibleItemIndex", "_changedProperties", "requiredValidator", "__decorateClass", "t", "i"]
|
|
7
|
-
}
|
package/dist/chunk-BNACGMP2.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import{a as b}from"./chunk-GRL4DWKG.js";import{a as h,b as i}from"./chunk-X2KXJYXQ.js";import{a as d}from"./chunk-DINNT5P2.js";import{a as l,b as c,f as n}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-CYCIT2TG.js";var p=l`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:"";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(
|
|
2
|
-
calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))
|
|
3
|
-
)}:host([disabled]) .switch{opacity:0.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var a,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(a=this.attributes.getNamedItem("aria-label"))==null?void 0:a.value)!=null?s:void 0;return c`
|
|
4
|
-
<span
|
|
5
|
-
class="switch"
|
|
6
|
-
role="switch"
|
|
7
|
-
aria-checked=${this.checked}
|
|
8
|
-
aria-readonly=${!!this.disabled}
|
|
9
|
-
@click=${this.toggle}
|
|
10
|
-
@keydown=${this.handleKeyDown}
|
|
11
|
-
aria-label=${d(e)}
|
|
12
|
-
tabindex="0"
|
|
13
|
-
>
|
|
14
|
-
</span>
|
|
15
|
-
`}};r([i({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([b("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(m)],t);export{m as a,t as b};
|
|
16
|
-
//# sourceMappingURL=chunk-BNACGMP2.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:\"\";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(\n calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))\n )}:host([disabled]) .switch{opacity:0.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:\"\";position:absolute;inset:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport style from \"./bl-switch.css\";\n\nexport const blSwitchTag = \"bl-switch\";\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color-on=--bl-color-primary] Set the checked color\n * @cssproperty [--bl-switch-color-off=--bl-color-neutral-lighter] Set the unchecked color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the checked state for switch\n */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /**\n * Sets the disabled state for switch\n */\n @property({ type: Boolean, reflect: true })\n disabled? = false;\n\n /**\n * Fires whenever user toggles the switch\n */\n @event(\"bl-switch-toggle\") private onToggle: EventDispatcher<boolean>;\n\n toggle() {\n if (this.disabled) return;\n\n this.checked = !this.checked;\n this.onToggle(this.checked);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.code === \"Enter\" || event.code === \"Space\") {\n this.toggle();\n event.preventDefault();\n }\n }\n\n render(): TemplateResult {\n const ariaLabel =\n this.ariaLabel ?? this.attributes.getNamedItem(\"aria-label\")?.value ?? undefined;\n\n return html`\n <span\n class=\"switch\"\n role=\"switch\"\n aria-checked=${this.checked}\n aria-readonly=${!!this.disabled}\n @click=${this.toggle}\n @keydown=${this.handleKeyDown}\n aria-label=${ifDefined(ariaLabel)}\n tabindex=\"0\"\n >\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blSwitchTag]: BlSwitch;\n }\n}\n"],
|
|
5
|
-
"mappings": "6NACO,IAAMA,EAASC;AAAA;AAAA,2RAGfC,EAAQF,ECER,IAAMG,EAAc,YAWNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CArD3B,IAAAC,EAAAC,EAAAC,EAsDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
|
|
6
|
-
"names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "event", "_a", "_b", "_c", "ariaLabel", "x", "l", "__decorateClass", "e"]
|
|
7
|
-
}
|
package/dist/chunk-HJWQ7Y3K.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import{a as s,b as i}from"./chunk-X2KXJYXQ.js";import{a as e,b as l,f as r}from"./chunk-4OT5AMS5.js";import{c as o}from"./chunk-CYCIT2TG.js";var p=e`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`,a=p;var d="bl-dropdown-group",t=class extends r{static get styles(){return[a]}render(){let n=this.caption?l`<span id="label" class="caption">${this.caption}</span>`:"";return l`<div class="dropdown-group" role="group" aria-labelledby="label">
|
|
2
|
-
${n}
|
|
3
|
-
<slot></slot>
|
|
4
|
-
</div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(d)],t);export{d as a,t as b};
|
|
5
|
-
//# sourceMappingURL=chunk-HJWQ7Y3K.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./bl-dropdown-group.css\";\n\nexport const blDropdownGroupTag = \"bl-dropdown-group\";\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the caption.\n */\n @property({ type: String })\n caption?: string;\n\n render(): TemplateResult {\n const caption = this.caption\n ? html`<span id=\"label\" class=\"caption\">${this.caption}</span>`\n : \"\";\n\n return html`<div class=\"dropdown-group\" role=\"group\" aria-labelledby=\"label\">\n ${caption}\n <slot></slot>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownGroupTag]: BlDropdownGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "6IACO,IAAMA,EAASC,4qBACfC,EAAQF,ECER,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QACjBC,qCAAwC,KAAK,iBAC7C,GAEJ,OAAOA;AAAA,QACHD;AAAA;AAAA,WAGN,CACF,EAZEE,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPN,EASnB,uBATmBA,EAArBK,EAAA,CADCC,EAAcP,CAAkB,GACZC",
|
|
6
|
-
"names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "x", "__decorateClass", "e"]
|
|
7
|
-
}
|
package/dist/chunk-JPRCBAHY.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import{a as m}from"./chunk-HJWQ7Y3K.js";import{a as s}from"./chunk-GRL4DWKG.js";import{a as c,b as o,c as b,e as l}from"./chunk-X2KXJYXQ.js";import{a as n}from"./chunk-DINNT5P2.js";import{a as p,b as a,f as d}from"./chunk-4OT5AMS5.js";import{c as e}from"./chunk-CYCIT2TG.js";var g=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)}`,f=g;var u="bl-dropdown",t=class extends d{constructor(){super(...arguments);this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[f]}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(h)]}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 a`<bl-button
|
|
2
|
-
dropdown
|
|
3
|
-
.active=${this.opened}
|
|
4
|
-
?disabled=${n(this.disabled)}
|
|
5
|
-
variant="${this.variant}"
|
|
6
|
-
kind="${this.kind}"
|
|
7
|
-
size="${this.size}"
|
|
8
|
-
aria-label="${n(this.label)}"
|
|
9
|
-
@bl-click="${this._handleClick}"
|
|
10
|
-
>
|
|
11
|
-
${this.label}
|
|
12
|
-
</bl-button>
|
|
13
|
-
<bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}">
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</bl-popover> `}};e([l("bl-popover")],t.prototype,"_popover",2),e([l("bl-button")],t.prototype,"_button",2),e([b()],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:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-dropdown-open")],t.prototype,"onOpen",2),e([s("bl-dropdown-close")],t.prototype,"onClose",2),t=e([c(u)],t);var w=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,v=w;var h="bl-dropdown-item",r=class extends d{static get styles(){return[v]}_handleClick(){var i;(i=this.BlDropdownField)==null||i.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(m),this.BlDropdownField=this.closest(u),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${m} or ${u}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return a`<bl-button
|
|
16
|
-
variant="tertiary"
|
|
17
|
-
kind="neutral"
|
|
18
|
-
icon="${n(this.icon)}"
|
|
19
|
-
role="menuitem"
|
|
20
|
-
@click="${this._handleClick}"
|
|
21
|
-
><slot></slot>
|
|
22
|
-
</bl-button>`}};e([o({type:String})],r.prototype,"icon",2),e([s("bl-dropdown-item-click")],r.prototype,"onClick",2),e([l("[role=menuitem]")],r.prototype,"menuElement",2),r=e([c(h)],r);export{h as a,r as b,u as c,t as d};
|
|
23
|
-
//# sourceMappingURL=chunk-JPRCBAHY.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
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"],
|
|
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)}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, state, 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, { ButtonSize, ButtonVariant, ButtonKind } 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 = \"Dropdown Button\";\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 * 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=${ifDefined(this.disabled)}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n aria-label=\"${ifDefined(this.label)}\"\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 <slot></slot>\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 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.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\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`,\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"],
|
|
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", "blDropdownGroupTag", "blDropdownTag", "x", "l", "__decorateClass", "e", "event", "i"]
|
|
7
|
-
}
|