npm - @koalarx/ui - Versions diffs - 20.4.3 → 20.4.4 - Mend

@koalarx/ui 20.4.3 → 20.4.4

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.

Files changed (4) hide show

package/fesm2022/koalarx-ui-shared-components-input-field-select.mjs +3 -3
package/fesm2022/koalarx-ui-shared-components-input-field-select.mjs.map +1 -1
package/package.json +41 -41
package/theme/form.css +31 -84

package/fesm2022/koalarx-ui-shared-components-input-field-select.mjs CHANGED Viewed

@@ -273,7 +273,7 @@ async function appendSelectedOptionContent(component, value) {
     }
     const selectedContent = component.selectElement.querySelector('.selectcontent');
     if (!Array.isArray(value)) {
-        value = [value];
+        value = isEmpty(value) ? [] : [value];
     }
     if (!component.multiple()) {
         selectedContent.innerHTML = '';
@@ -408,11 +408,11 @@ class Select extends InputFieldBase {
         inputValue.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: Select, isStandalone: true, selector: "kl-select", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, internalFilter: { classPropertyName: "internalFilter", publicName: "internalFilter", isSignal: true, isRequired: false, transformFunction: null }, withoutFilter: { classPropertyName: "withoutFilter", publicName: "withoutFilter", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <button class=\"kl-select-clear-button absolute right-9 top-2.5 z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n      <i class=\"fa-solid fa-xmark\"></i>\n    </button>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: Select, isStandalone: true, selector: "kl-select", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, internalFilter: { classPropertyName: "internalFilter", publicName: "internalFilter", isSignal: true, isRequired: false, transformFunction: null }, withoutFilter: { classPropertyName: "withoutFilter", publicName: "withoutFilter", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", selectedItem: "selectedItem" }, viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <button class=\"kl-select-clear-button absolute right-9 top-[0.7rem] z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n      <i class=\"fa-solid fa-xmark\"></i>\n    </button>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }, { kind: "component", type: Loader, selector: "kl-loader", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'kl-select', imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader], template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <button class=\"kl-select-clear-button absolute right-9 top-2.5 z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n      <i class=\"fa-solid fa-xmark\"></i>\n    </button>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
+            args: [{ selector: 'kl-select', imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader], template: "<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n  [class.has-value]=\"hasValue()\">\n\n  @if (label(); as label) {\n    <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n      [attr.for]=\"fieldId\">\n      @if (isDisabled()) {\n        <span class=\"text-neutral-200 dark:text-neutral-600\">\n          {{ label }} {{ isRequired() ? '*' : '' }}\n        </span>\n      } @else {\n        <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n      }\n    </label>\n  }\n\n  @if (!isDisabled() && hasValue()) {\n    <button class=\"kl-select-clear-button absolute right-9 top-[0.7rem] z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n      <i class=\"fa-solid fa-xmark\"></i>\n    </button>\n  }\n\n  <div class=\"kl-select-content\" #selectField>\n    <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n      [attr.popovertarget]=\"fieldId\"\n      popovertargetaction=\"toggle\">\n\n      <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\"></span>\n\n      <span class=\"picker\">\n        @if (isLoading()) {\n          <kl-loader size=\"small\" />\n        } @else {\n          <i class=\"fa-solid fa-caret-down\"></i>\n        }\n      </span>\n    </button>\n\n    <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n      @if (!withoutFilter()) {\n        <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n          <label class=\"flex items-center text-sm\">\n            <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n            <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n              #searchInput\n              type=\"search\"\n              [(ngModel)]=\"filter\"\n              [placeholder]=\"translations.selectTypeSearch\"\n            />\n          </label>\n        </div>\n      }\n\n      <div class=\"kl-select-options-content p-1 overflow-auto\">\n        @for (item of optionList(); track $index) {\n          @let optionLabelId = fieldId + '-' + item.value;\n\n          <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n            [attr.for]=\"optionLabelId\"\n            [attr.data-index]=\"$index\">\n            <span class=\"w-full\">\n              @let isChecked = multiple() ? (control().value || []).includes(item.value) : item.value === control().value;\n\n              <input\n                [type]=\"multiple() ? 'checkbox' : 'radio'\"\n                [id]=\"optionLabelId\"\n                [name]=\"fieldId\"\n                [attr.value]=\"item.value\"\n                [checked]=\"isChecked\"\n                (change)=\"setValue($event)\"\n              />\n              <span>{{ item.label }}</span>\n            </span>\n          </label>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (hint()) {\n  <span class=\"hint-content\">\n    <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n  </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n  <ng-container errors>\n    <ng-content select=\"[errors]\" />\n  </ng-container>\n</kl-field-errors>\n" }]
         }], ctorParameters: () => [] });
 class SelectBuilder {

package/fesm2022/koalarx-ui-shared-components-input-field-select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"koalarx-ui-shared-components-input-field-select.mjs","sources":["../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/change-selected-option.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/update-scroll-position.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/on-keydown.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/index.ts","../../projects/koala-ui/shared/components/input-field/select/utils/ajust-options-container-size.ts","../../projects/koala-ui/shared/components/input-field/select/utils/generate-options-resource.ts","../../projects/koala-ui/shared/components/input-field/select/utils/is-loading-feedback.ts","../../projects/koala-ui/shared/components/input-field/select/utils/on-server-filter.ts","../../projects/koala-ui/shared/components/input-field/select/utils/options-loader.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.html","../../projects/koala-ui/shared/components/input-field/select/utils/set-selected-option-content.ts","../../projects/koala-ui/shared/components/input-field/select/select.ts","../../projects/koala-ui/shared/components/input-field/select/select.html","../../projects/koala-ui/shared/components/input-field/select/services/select-builder.ts","../../projects/koala-ui/shared/components/input-field/select/koalarx-ui-shared-components-input-field-select.ts"],"sourcesContent":["import { Select } from '../../select';\nimport { ScrollDirection } from './update-scroll-position';\n\nexport function changeSelectedOption(\n component: Select,\n direction: ScrollDirection = 'down'\n) {\n if (!component.selectElement.classList.contains('opened')) {\n return;\n }\n\n const options: NodeListOf<HTMLOptionElement \| HTMLLabelElement> =\n component.selectElement.querySelectorAll(\n 'option, .kl-select-options-content .kl-select-option-content'\n );\n\n const selectedOption: HTMLOptionElement \| HTMLLabelElement =\n component.selectElement.querySelector('option:checked') ??\n component.selectElement.querySelector(\n 'label.kl-select-option-content:has(input:checked)'\n )!;\n\n let newIndex = 0;\n\n if (selectedOption) {\n const currentIndex = Array.from(options).indexOf(selectedOption);\n\n if (direction === 'down') {\n newIndex =\n currentIndex + 1 < options.length ? currentIndex + 1 : currentIndex;\n } else {\n newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : currentIndex;\n }\n }\n\n const option = options[newIndex];\n const event = new Event('change', { bubbles: true });\n\n if (option instanceof HTMLOptionElement) {\n option.selected = true;\n\n component.selectElement.dispatchEvent(event);\n } else {\n option.querySelector('input')!.checked = true;\n\n options.forEach((opt) => opt.classList.remove('active'));\n option.classList.toggle('active');\n\n option.querySelector('input')!.dispatchEvent(event);\n }\n}\n","import { Select } from '../../select';\n\nexport type ScrollDirection = 'down' \| 'up';\n\nexport function updateScrollPosition(\n component: Select,\n direction: ScrollDirection = 'down'\n) {\n if (!component.selectElement.classList.contains('opened')) {\n return;\n }\n\n setTimeout(() => {\n const optionsContainer = component.selectElement.querySelector(\n '.kl-select-options-content'\n ) as HTMLDivElement;\n const focusedOptionElement =\n optionsContainer.querySelector('option:checked') ??\n component.selectElement.querySelector(\n 'label.kl-select-option-content:has(input:checked)'\n )!;\n\n if (focusedOptionElement) {\n optionsContainer.scrollTo({\n top:\n direction === 'down'\n ? optionsContainer.scrollTop +\n focusedOptionElement.getBoundingClientRect().height\n : optionsContainer.scrollTop -\n focusedOptionElement.getBoundingClientRect().height,\n });\n }\n }, 50);\n}\n","import { Select } from '../select';\nimport { changeSelectedOption } from './utils/change-selected-option';\nimport { updateScrollPosition } from './utils/update-scroll-position';\n\nexport function initOnKeyDownListener(component: Select) {\n function onKeyDown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown': {\n event.stopPropagation();\n event.preventDefault();\n\n changeSelectedOption(component, 'down');\n updateScrollPosition(component, 'down');\n break;\n }\n case 'ArrowUp': {\n event.stopPropagation();\n event.preventDefault();\n\n changeSelectedOption(component, 'up');\n updateScrollPosition(component, 'up');\n break;\n }\n }\n }\n\n addEventListener('keydown', onKeyDown);\n\n component.destroyRef.onDestroy(() => {\n removeEventListener('keydown', onKeyDown);\n });\n}\n","import { Select } from '../select';\nimport { initOnKeyDownListener } from './on-keydown';\n\nexport function assessibility(component: Select) {\n initOnKeyDownListener(component);\n}\n","import { afterRenderEffect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function ajustOptionsContainerSize(component: Select) {\n afterRenderEffect(() => {\n const selectElement = component.selectElement;\n const optionsContainer = selectElement.parentElement?.querySelector(\n '.kl-select-options-container'\n ) as HTMLElement;\n\n function setMaxWidth() {\n const currentWidth = selectElement.offsetWidth;\n selectElement.style.setProperty('--select-width', `${currentWidth}px`);\n }\n\n function setMaxHeight() {\n const optionsRect = selectElement.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n const sizeDiscount = 16 + optionsRect.height;\n\n let availableHeight = viewportHeight - optionsRect.top - sizeDiscount;\n\n if (availableHeight < 150) {\n availableHeight =\n viewportHeight - (viewportHeight - optionsRect.bottom) - sizeDiscount;\n selectElement.style.setProperty('--select-position-area', 'top');\n } else {\n selectElement.style.setProperty('--select-position-area', 'bottom');\n }\n\n optionsContainer.style.maxHeight = `${availableHeight}px`;\n }\n\n function getFilterInput() {\n return optionsContainer.querySelector(\n '.kl-select-filter-container input'\n ) as HTMLInputElement \| null;\n }\n\n function disableFilter() {\n const filterInput = getFilterInput();\n\n if (filterInput) {\n filterInput.disabled = true;\n }\n }\n\n function enableAndFocusFilter() {\n const filterInput = getFilterInput();\n\n if (filterInput) {\n filterInput.disabled = false;\n filterInput.focus();\n }\n }\n\n function touchControl() {\n component.control().markAsTouched();\n }\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n component.selectElement.classList.add('opened');\n setMaxWidth();\n setMaxHeight();\n enableAndFocusFilter();\n touchControl();\n } else {\n component.selectElement.classList.remove('opened');\n disableFilter();\n }\n });\n });\n\n setMaxWidth();\n\n observer.observe(optionsContainer);\n component.destroyRef.onDestroy(() => observer.unobserve(optionsContainer));\n });\n}\n","import {\n isSignal,\n ResourceRef,\n runInInjectionContext,\n Signal,\n} from '@angular/core';\nimport { Select } from '../select';\nimport {\n OptionsResource,\n SelectDataOptionsFn,\n SelectList,\n} from '../select.type';\n\nexport function generateOptionsResource(component: Select) {\n const options = component.options();\n\n let optionsResource: OptionsResource;\n\n if (Object.hasOwn(options, 'value')) {\n optionsResource = { onServer: options as ResourceRef<SelectList> };\n } else if (isSignal(options)) {\n optionsResource = {\n inMemoryWithLoading: options as Signal<SelectList>,\n };\n } else if (typeof options === 'function') {\n const resourceFnOptions = options as SelectDataOptionsFn;\n\n optionsResource = {\n onDemand: runInInjectionContext(component.injector, () =>\n resourceFnOptions(component.requestOptionsParams)\n ),\n };\n } else {\n optionsResource = { inMemory: options as SelectList };\n }\n\n component.optionsResource.set(optionsResource);\n}\n","import { effect } from '@angular/core';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\n\nexport function isLoadingFeedback(component: Select) {\n effect(async () => {\n const isLoading = component.isLoading();\n\n if (!isLoading) {\n while (!component.selectField()) {\n await delay(50);\n }\n\n const selectedContent = component.selectElement.querySelector(\n '.selectcontent'\n ) as HTMLElement;\n\n selectedContent.style.opacity = '0';\n\n if (!component.disabled()) {\n component.isDisabled.set(false);\n }\n\n await delay(1);\n\n selectedContent.style.opacity = '1';\n } else {\n component.isDisabled.set(true);\n }\n });\n}\n","import { effect } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\n\nexport function onServerFilter(component: Select) {\n toObservable(component.filter, { injector: component.injector })\n .pipe(debounceTime(300), takeUntilDestroyed(component.destroyRef))\n .subscribe((value) => component.filteredValue.set(value ?? null));\n\n effect(\n () => {\n if (component.optionsResource()?.onDemand) {\n component.requestOptionsParams.set({\n filter: component.filteredValue(),\n internalFilter: component.internalFilter(),\n currentValue: component.control().value,\n });\n }\n },\n { injector: component.injector }\n );\n}\n","import { effect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function loadOptions(component: Select) {\n effect(() => {\n const options = component.optionsResource();\n\n if (!options) {\n return;\n }\n\n const { onDemand, onServer, inMemory, inMemoryWithLoading } = options;\n\n if (onDemand) {\n component.optionList.set(onDemand.value());\n component.isLoading.set(onDemand.isLoading());\n } else if (onServer) {\n component.optionList.set(component.applyFilter(onServer.value()));\n component.isLoading.set(onServer.isLoading());\n } else if (inMemory) {\n component.optionList.set(component.applyFilter(inMemory));\n component.isLoading.set(false);\n } else if (inMemoryWithLoading) {\n const optionsWithLoading = inMemoryWithLoading();\n component.optionList.set(component.applyFilter(optionsWithLoading ?? []));\n component.isLoading.set(!optionsWithLoading);\n }\n });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kl-select-option-badge',\n templateUrl: './select-option-badge.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectOptionBadge {\n removeCallback: (event: MouseEvent) => void = () => {\n throw new Error('Remove callback not set');\n };\n}\n","<span class=\"flex items-center badge badge-primary badge-sm rounded-sm\">\n <ng-content />\n <i class=\"fa-solid fa-xmark text-neutral-400 hover:cursor-pointer\"\n (click)=\"removeCallback($event)\">\n </i>\n</span>\n","import { createComponent } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isEmpty } from '@koalarx/ui/shared/utils';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\nimport { SelectOptionBadge } from '../select-option-badge';\n\nfunction hasValue(value: any) {\n return Array.isArray(value) ? value.length > 0 : !isEmpty(value);\n}\n\nfunction createBadgeElement(component: Select, content: Node, value: any) {\n const badgeComponent = createComponent(SelectOptionBadge, {\n environmentInjector: component.appRef.injector,\n projectableNodes: [[content]],\n });\n\n badgeComponent.instance.removeCallback = (event: MouseEvent) =>\n component.removeOption(event);\n\n const element: HTMLElement = badgeComponent.location.nativeElement;\n const spanElement = element.firstElementChild as HTMLSpanElement;\n\n spanElement.dataset['value'] = value;\n\n return element;\n}\n\nasync function appendSelectedOptionContent(component: Select, value: any) {\n while (component.isLoading()) {\n await delay(50);\n }\n\n const selectedContent = component.selectElement.querySelector(\n '.selectcontent'\n ) as HTMLElement;\n\n if (!Array.isArray(value)) {\n value = [value];\n }\n\n if (!component.multiple()) {\n selectedContent.innerHTML = '';\n }\n\n selectedContent\n .querySelectorAll<HTMLSpanElement>('span[data-value]')\n .forEach((node) => {\n if (!value.map(String).includes(node.dataset['value'])) {\n node.parentElement!.remove();\n }\n });\n\n for (const v of value) {\n const optionData = component\n .selectedOptions()\n .find((item) => String(item.value) === String(v));\n\n if (!optionData) {\n continue;\n }\n\n const optionContent = document.createElement('span');\n optionContent.dataset['value'] = String(v);\n optionContent.innerHTML = optionData?.label ?? v;\n\n if (selectedContent.querySelector(`[data-value=\"${v}\"]`)) {\n continue;\n }\n\n const optionBadge = component.multiple()\n ? createBadgeElement(component, optionContent, v)\n : optionContent;\n\n selectedContent.appendChild(optionBadge);\n }\n\n component.hasValue.set(hasValue(value));\n}\n\nexport async function setSelectedOptionContent(component: Select) {\n const value = component.control().value;\n\n component.hasValue.set(hasValue(value));\n\n while (component.isLoading()) {\n await delay(50);\n }\n\n component.selectedOptions.set(\n component\n .optionList()\n .filter((item) =>\n Array.isArray(value)\n ? value.map(String).includes(String(item.value))\n : String(item.value) === String(value)\n )\n );\n\n await appendSelectedOptionContent(component, value);\n\n component\n .control()\n .valueChanges.pipe(takeUntilDestroyed(component.destroyRef))\n .subscribe((value) => appendSelectedOptionContent(component, value));\n}\n","import {\n ApplicationRef,\n booleanAttribute,\n Component,\n DestroyRef,\n ElementRef,\n inject,\n Injector,\n input,\n model,\n OnInit,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { assessibility } from './accessibility';\nimport {\n OptionsResource,\n SelectDataOptions,\n SelectDataOptionsFnParams,\n SelectList,\n SelectValue,\n} from './select.type';\nimport { ajustOptionsContainerSize } from './utils/ajust-options-container-size';\nimport { generateOptionsResource } from './utils/generate-options-resource';\nimport { isLoadingFeedback } from './utils/is-loading-feedback';\nimport { onServerFilter } from './utils/on-server-filter';\nimport { loadOptions } from './utils/options-loader';\nimport { setSelectedOptionContent } from './utils/set-selected-option-content';\n\n@Component({\n selector: 'kl-select',\n templateUrl: './select.html',\n imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader],\n})\nexport class Select extends InputFieldBase implements OnInit {\n readonly appRef = inject(ApplicationRef);\n readonly destroyRef = inject(DestroyRef);\n readonly injector = inject(Injector);\n readonly selectField = viewChild<ElementRef<HTMLDivElement>>('selectField');\n\n readonly optionsResource = signal<OptionsResource \| null>(null);\n readonly optionList = signal<SelectList>([]);\n readonly selectedOptions = signal<SelectList>([]);\n readonly isLoading = signal<boolean>(true);\n readonly requestOptionsParams = signal<SelectDataOptionsFnParams>({\n filter: null,\n currentValue: null,\n internalFilter: null,\n });\n readonly translations = inject(AppConfig).translation.form;\n readonly supportsExperimentalSelect = !CSS.supports(\n 'appearance',\n 'base-select'\n );\n readonly hasValue = signal<boolean>(false);\n\n filter = model<string>();\n filteredValue = signal<string \| null>(null);\n\n options = input.required<SelectDataOptions>();\n internalFilter = input<string \| null>(null);\n withoutFilter = input(false, { transform: booleanAttribute });\n multiple = input(false, { transform: booleanAttribute });\n selectedItem = output<any \| null>();\n\n get selectElement() {\n const selectField = this.selectField();\n\n if (!selectField) {\n throw new Error('Select element not found');\n }\n\n return selectField.nativeElement;\n }\n\n constructor() {\n super();\n\n loadOptions(this);\n ajustOptionsContainerSize(this);\n isLoadingFeedback(this);\n assessibility(this);\n }\n\n ngOnInit() {\n onServerFilter(this);\n generateOptionsResource(this);\n setSelectedOptionContent(this);\n }\n\n applyFilter(options: SelectList) {\n const filter = this.filter() ?? '';\n\n return options.filter((option) =>\n option.label.toLowerCase().includes(filter.toLowerCase())\n );\n }\n\n setValue(event: Event) {\n const select = event.target as HTMLInputElement;\n const value: SelectValue = select.value;\n\n if (this.multiple()) {\n const selectedOptionsElements = this.selectElement.querySelectorAll(\n '.kl-select-options-content input[type=\"checkbox\"]:checked'\n ) as NodeListOf<HTMLInputElement>;\n\n const values: string[] = [];\n\n selectedOptionsElements.forEach((option) => values.push(option.value));\n\n if (select.checked) {\n this.selectedOptions.update((current) => [\n ...current,\n this.optionList().find((item) => String(item.value) === value)!,\n ]);\n } else {\n this.selectedOptions.update((current) =>\n current.filter((item) => String(item.value) !== value)\n );\n }\n\n const selectedValues = this.selectedOptions().map((item) => item.value);\n\n this.control().setValue(selectedValues, { emitEvent: true });\n\n return;\n }\n\n const selectedOption = this.optionList().find(\n (item) => String(item.value) === value\n );\n\n if (selectedOption) {\n this.control().setValue(selectedOption.value, { emitEvent: true });\n }\n\n this.selectedItem.emit(selectedOption?.data ?? null);\n }\n\n clear(event: MouseEvent) {\n event.preventDefault();\n this.control().setValue(null);\n }\n\n removeOption(event: MouseEvent) {\n event.preventDefault();\n\n const target = event.target as HTMLSpanElement;\n const value = target.parentElement?.dataset['value'];\n\n const inputValue = this.selectElement.querySelector(\n `.kl-select-options-content input[value=\"${value}\"]`\n ) as HTMLInputElement;\n\n inputValue.click();\n }\n}\n","<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n [class.has-value]=\"hasValue()\">\n\n @if (label(); as label) {\n <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n [attr.for]=\"fieldId\">\n @if (isDisabled()) {\n <span class=\"text-neutral-200 dark:text-neutral-600\">\n {{ label }} {{ isRequired() ? '' : '' }}\n </span>\n } @else {\n <span>{{ label }} {{ isRequired() ? '' : '' }}</span>\n }\n </label>\n }\n\n @if (!isDisabled() && hasValue()) {\n <button class=\"kl-select-clear-button absolute right-9 top-2.5 z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n\n <div class=\"kl-select-content\" #selectField>\n <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n [attr.popovertarget]=\"fieldId\"\n popovertargetaction=\"toggle\">\n\n <span class=\"selectcontent flex flex-wrap gap-1 pt-3 pb-2 items-center w-full h-full\"></span>\n\n <span class=\"picker\">\n @if (isLoading()) {\n <kl-loader size=\"small\" />\n } @else {\n <i class=\"fa-solid fa-caret-down\"></i>\n }\n </span>\n </button>\n\n <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n @if (!withoutFilter()) {\n <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n <label class=\"flex items-center text-sm\">\n <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n #searchInput\n type=\"search\"\n [(ngModel)]=\"filter\"\n [placeholder]=\"translations.selectTypeSearch\"\n />\n </label>\n </div>\n }\n\n <div class=\"kl-select-options-content p-1 overflow-auto\">\n @for (item of optionList(); track $index) {\n @let optionLabelId = fieldId + '-' + item.value;\n\n <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n [attr.for]=\"optionLabelId\"\n [attr.data-index]=\"$index\">\n <span class=\"w-full\">\n @let isChecked = multiple() ? (control().value \|\| []).includes(item.value) : item.value === control().value;\n\n <input\n [type]=\"multiple() ? 'checkbox' : 'radio'\"\n [id]=\"optionLabelId\"\n [name]=\"fieldId\"\n [attr.value]=\"item.value\"\n [checked]=\"isChecked\"\n (change)=\"setValue($event)\"\n />\n <span>{{ item.label }}</span>\n </span>\n </label>\n }\n </div>\n </div>\n </div>\n</div>\n\n@if (hint()) {\n <span class=\"hint-content\">\n <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n","import { Injectable, ResourceRef, Signal } from '@angular/core';\nimport { SelectDataOptionsFn, SelectList } from '../select.type';\n\n@Injectable({ providedIn: 'root' })\nexport class SelectBuilder {\n onDemand(config: SelectDataOptionsFn) {\n return config;\n }\n\n onServer(config: ResourceRef<SelectList>) {\n return config;\n }\n\n inMemory(config: SelectList) {\n return config;\n }\n\n inMemoryWithLoading(config: Signal<SelectList>) {\n return config;\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"koalarx-ui-shared-components-input-field-select.mjs","sources":["../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/change-selected-option.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/utils/update-scroll-position.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/on-keydown.ts","../../projects/koala-ui/shared/components/input-field/select/accessibility/index.ts","../../projects/koala-ui/shared/components/input-field/select/utils/ajust-options-container-size.ts","../../projects/koala-ui/shared/components/input-field/select/utils/generate-options-resource.ts","../../projects/koala-ui/shared/components/input-field/select/utils/is-loading-feedback.ts","../../projects/koala-ui/shared/components/input-field/select/utils/on-server-filter.ts","../../projects/koala-ui/shared/components/input-field/select/utils/options-loader.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.ts","../../projects/koala-ui/shared/components/input-field/select/select-option-badge.html","../../projects/koala-ui/shared/components/input-field/select/utils/set-selected-option-content.ts","../../projects/koala-ui/shared/components/input-field/select/select.ts","../../projects/koala-ui/shared/components/input-field/select/select.html","../../projects/koala-ui/shared/components/input-field/select/services/select-builder.ts","../../projects/koala-ui/shared/components/input-field/select/koalarx-ui-shared-components-input-field-select.ts"],"sourcesContent":["import { Select } from '../../select';\nimport { ScrollDirection } from './update-scroll-position';\n\nexport function changeSelectedOption(\n component: Select,\n direction: ScrollDirection = 'down'\n) {\n if (!component.selectElement.classList.contains('opened')) {\n return;\n }\n\n const options: NodeListOf<HTMLOptionElement \| HTMLLabelElement> =\n component.selectElement.querySelectorAll(\n 'option, .kl-select-options-content .kl-select-option-content'\n );\n\n const selectedOption: HTMLOptionElement \| HTMLLabelElement =\n component.selectElement.querySelector('option:checked') ??\n component.selectElement.querySelector(\n 'label.kl-select-option-content:has(input:checked)'\n )!;\n\n let newIndex = 0;\n\n if (selectedOption) {\n const currentIndex = Array.from(options).indexOf(selectedOption);\n\n if (direction === 'down') {\n newIndex =\n currentIndex + 1 < options.length ? currentIndex + 1 : currentIndex;\n } else {\n newIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : currentIndex;\n }\n }\n\n const option = options[newIndex];\n const event = new Event('change', { bubbles: true });\n\n if (option instanceof HTMLOptionElement) {\n option.selected = true;\n\n component.selectElement.dispatchEvent(event);\n } else {\n option.querySelector('input')!.checked = true;\n\n options.forEach((opt) => opt.classList.remove('active'));\n option.classList.toggle('active');\n\n option.querySelector('input')!.dispatchEvent(event);\n }\n}\n","import { Select } from '../../select';\n\nexport type ScrollDirection = 'down' \| 'up';\n\nexport function updateScrollPosition(\n component: Select,\n direction: ScrollDirection = 'down'\n) {\n if (!component.selectElement.classList.contains('opened')) {\n return;\n }\n\n setTimeout(() => {\n const optionsContainer = component.selectElement.querySelector(\n '.kl-select-options-content'\n ) as HTMLDivElement;\n const focusedOptionElement =\n optionsContainer.querySelector('option:checked') ??\n component.selectElement.querySelector(\n 'label.kl-select-option-content:has(input:checked)'\n )!;\n\n if (focusedOptionElement) {\n optionsContainer.scrollTo({\n top:\n direction === 'down'\n ? optionsContainer.scrollTop +\n focusedOptionElement.getBoundingClientRect().height\n : optionsContainer.scrollTop -\n focusedOptionElement.getBoundingClientRect().height,\n });\n }\n }, 50);\n}\n","import { Select } from '../select';\nimport { changeSelectedOption } from './utils/change-selected-option';\nimport { updateScrollPosition } from './utils/update-scroll-position';\n\nexport function initOnKeyDownListener(component: Select) {\n function onKeyDown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown': {\n event.stopPropagation();\n event.preventDefault();\n\n changeSelectedOption(component, 'down');\n updateScrollPosition(component, 'down');\n break;\n }\n case 'ArrowUp': {\n event.stopPropagation();\n event.preventDefault();\n\n changeSelectedOption(component, 'up');\n updateScrollPosition(component, 'up');\n break;\n }\n }\n }\n\n addEventListener('keydown', onKeyDown);\n\n component.destroyRef.onDestroy(() => {\n removeEventListener('keydown', onKeyDown);\n });\n}\n","import { Select } from '../select';\nimport { initOnKeyDownListener } from './on-keydown';\n\nexport function assessibility(component: Select) {\n initOnKeyDownListener(component);\n}\n","import { afterRenderEffect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function ajustOptionsContainerSize(component: Select) {\n afterRenderEffect(() => {\n const selectElement = component.selectElement;\n const optionsContainer = selectElement.parentElement?.querySelector(\n '.kl-select-options-container'\n ) as HTMLElement;\n\n function setMaxWidth() {\n const currentWidth = selectElement.offsetWidth;\n selectElement.style.setProperty('--select-width', `${currentWidth}px`);\n }\n\n function setMaxHeight() {\n const optionsRect = selectElement.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n const sizeDiscount = 16 + optionsRect.height;\n\n let availableHeight = viewportHeight - optionsRect.top - sizeDiscount;\n\n if (availableHeight < 150) {\n availableHeight =\n viewportHeight - (viewportHeight - optionsRect.bottom) - sizeDiscount;\n selectElement.style.setProperty('--select-position-area', 'top');\n } else {\n selectElement.style.setProperty('--select-position-area', 'bottom');\n }\n\n optionsContainer.style.maxHeight = `${availableHeight}px`;\n }\n\n function getFilterInput() {\n return optionsContainer.querySelector(\n '.kl-select-filter-container input'\n ) as HTMLInputElement \| null;\n }\n\n function disableFilter() {\n const filterInput = getFilterInput();\n\n if (filterInput) {\n filterInput.disabled = true;\n }\n }\n\n function enableAndFocusFilter() {\n const filterInput = getFilterInput();\n\n if (filterInput) {\n filterInput.disabled = false;\n filterInput.focus();\n }\n }\n\n function touchControl() {\n component.control().markAsTouched();\n }\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n component.selectElement.classList.add('opened');\n setMaxWidth();\n setMaxHeight();\n enableAndFocusFilter();\n touchControl();\n } else {\n component.selectElement.classList.remove('opened');\n disableFilter();\n }\n });\n });\n\n setMaxWidth();\n\n observer.observe(optionsContainer);\n component.destroyRef.onDestroy(() => observer.unobserve(optionsContainer));\n });\n}\n","import {\n isSignal,\n ResourceRef,\n runInInjectionContext,\n Signal,\n} from '@angular/core';\nimport { Select } from '../select';\nimport {\n OptionsResource,\n SelectDataOptionsFn,\n SelectList,\n} from '../select.type';\n\nexport function generateOptionsResource(component: Select) {\n const options = component.options();\n\n let optionsResource: OptionsResource;\n\n if (Object.hasOwn(options, 'value')) {\n optionsResource = { onServer: options as ResourceRef<SelectList> };\n } else if (isSignal(options)) {\n optionsResource = {\n inMemoryWithLoading: options as Signal<SelectList>,\n };\n } else if (typeof options === 'function') {\n const resourceFnOptions = options as SelectDataOptionsFn;\n\n optionsResource = {\n onDemand: runInInjectionContext(component.injector, () =>\n resourceFnOptions(component.requestOptionsParams)\n ),\n };\n } else {\n optionsResource = { inMemory: options as SelectList };\n }\n\n component.optionsResource.set(optionsResource);\n}\n","import { effect } from '@angular/core';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\n\nexport function isLoadingFeedback(component: Select) {\n effect(async () => {\n const isLoading = component.isLoading();\n\n if (!isLoading) {\n while (!component.selectField()) {\n await delay(50);\n }\n\n const selectedContent = component.selectElement.querySelector(\n '.selectcontent'\n ) as HTMLElement;\n\n selectedContent.style.opacity = '0';\n\n if (!component.disabled()) {\n component.isDisabled.set(false);\n }\n\n await delay(1);\n\n selectedContent.style.opacity = '1';\n } else {\n component.isDisabled.set(true);\n }\n });\n}\n","import { effect } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { debounceTime } from 'rxjs/internal/operators/debounceTime';\nimport { Select } from '../select';\n\nexport function onServerFilter(component: Select) {\n toObservable(component.filter, { injector: component.injector })\n .pipe(debounceTime(300), takeUntilDestroyed(component.destroyRef))\n .subscribe((value) => component.filteredValue.set(value ?? null));\n\n effect(\n () => {\n if (component.optionsResource()?.onDemand) {\n component.requestOptionsParams.set({\n filter: component.filteredValue(),\n internalFilter: component.internalFilter(),\n currentValue: component.control().value,\n });\n }\n },\n { injector: component.injector }\n );\n}\n","import { effect } from '@angular/core';\nimport { Select } from '../select';\n\nexport function loadOptions(component: Select) {\n effect(() => {\n const options = component.optionsResource();\n\n if (!options) {\n return;\n }\n\n const { onDemand, onServer, inMemory, inMemoryWithLoading } = options;\n\n if (onDemand) {\n component.optionList.set(onDemand.value());\n component.isLoading.set(onDemand.isLoading());\n } else if (onServer) {\n component.optionList.set(component.applyFilter(onServer.value()));\n component.isLoading.set(onServer.isLoading());\n } else if (inMemory) {\n component.optionList.set(component.applyFilter(inMemory));\n component.isLoading.set(false);\n } else if (inMemoryWithLoading) {\n const optionsWithLoading = inMemoryWithLoading();\n component.optionList.set(component.applyFilter(optionsWithLoading ?? []));\n component.isLoading.set(!optionsWithLoading);\n }\n });\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kl-select-option-badge',\n templateUrl: './select-option-badge.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SelectOptionBadge {\n removeCallback: (event: MouseEvent) => void = () => {\n throw new Error('Remove callback not set');\n };\n}\n","<span class=\"flex items-center badge badge-primary badge-sm rounded-sm\">\n <ng-content />\n <i class=\"fa-solid fa-xmark text-neutral-400 hover:cursor-pointer\"\n (click)=\"removeCallback($event)\">\n </i>\n</span>\n","import { createComponent } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isEmpty } from '@koalarx/ui/shared/utils';\nimport { delay } from '@koalarx/utils/KlDelay';\nimport { Select } from '../select';\nimport { SelectOptionBadge } from '../select-option-badge';\n\nfunction hasValue(value: any) {\n return Array.isArray(value) ? value.length > 0 : !isEmpty(value);\n}\n\nfunction createBadgeElement(component: Select, content: Node, value: any) {\n const badgeComponent = createComponent(SelectOptionBadge, {\n environmentInjector: component.appRef.injector,\n projectableNodes: [[content]],\n });\n\n badgeComponent.instance.removeCallback = (event: MouseEvent) =>\n component.removeOption(event);\n\n const element: HTMLElement = badgeComponent.location.nativeElement;\n const spanElement = element.firstElementChild as HTMLSpanElement;\n\n spanElement.dataset['value'] = value;\n\n return element;\n}\n\nasync function appendSelectedOptionContent(component: Select, value: any) {\n while (component.isLoading()) {\n await delay(50);\n }\n\n const selectedContent = component.selectElement.querySelector(\n '.selectcontent'\n ) as HTMLElement;\n\n if (!Array.isArray(value)) {\n value = isEmpty(value) ? [] : [value];\n }\n\n if (!component.multiple()) {\n selectedContent.innerHTML = '';\n }\n\n selectedContent\n .querySelectorAll<HTMLSpanElement>('span[data-value]')\n .forEach((node) => {\n if (!value.map(String).includes(node.dataset['value'])) {\n node.parentElement!.remove();\n }\n });\n\n for (const v of value) {\n const optionData = component\n .selectedOptions()\n .find((item) => String(item.value) === String(v));\n\n if (!optionData) {\n continue;\n }\n\n const optionContent = document.createElement('span');\n optionContent.dataset['value'] = String(v);\n optionContent.innerHTML = optionData?.label ?? v;\n\n if (selectedContent.querySelector(`[data-value=\"${v}\"]`)) {\n continue;\n }\n\n const optionBadge = component.multiple()\n ? createBadgeElement(component, optionContent, v)\n : optionContent;\n\n selectedContent.appendChild(optionBadge);\n }\n\n component.hasValue.set(hasValue(value));\n}\n\nexport async function setSelectedOptionContent(component: Select) {\n const value = component.control().value;\n\n component.hasValue.set(hasValue(value));\n\n while (component.isLoading()) {\n await delay(50);\n }\n\n component.selectedOptions.set(\n component\n .optionList()\n .filter((item) =>\n Array.isArray(value)\n ? value.map(String).includes(String(item.value))\n : String(item.value) === String(value)\n )\n );\n\n await appendSelectedOptionContent(component, value);\n\n component\n .control()\n .valueChanges.pipe(takeUntilDestroyed(component.destroyRef))\n .subscribe((value) => appendSelectedOptionContent(component, value));\n}\n","import {\n ApplicationRef,\n booleanAttribute,\n Component,\n DestroyRef,\n ElementRef,\n inject,\n Injector,\n input,\n model,\n OnInit,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Loader } from '@koalarx/ui/core/components/loader';\nimport { AppConfig } from '@koalarx/ui/core/config';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\nimport { assessibility } from './accessibility';\nimport {\n OptionsResource,\n SelectDataOptions,\n SelectDataOptionsFnParams,\n SelectList,\n SelectValue,\n} from './select.type';\nimport { ajustOptionsContainerSize } from './utils/ajust-options-container-size';\nimport { generateOptionsResource } from './utils/generate-options-resource';\nimport { isLoadingFeedback } from './utils/is-loading-feedback';\nimport { onServerFilter } from './utils/on-server-filter';\nimport { loadOptions } from './utils/options-loader';\nimport { setSelectedOptionContent } from './utils/set-selected-option-content';\n\n@Component({\n selector: 'kl-select',\n templateUrl: './select.html',\n imports: [FormsModule, ReactiveFormsModule, FieldErrors, Loader],\n})\nexport class Select extends InputFieldBase implements OnInit {\n readonly appRef = inject(ApplicationRef);\n readonly destroyRef = inject(DestroyRef);\n readonly injector = inject(Injector);\n readonly selectField = viewChild<ElementRef<HTMLDivElement>>('selectField');\n\n readonly optionsResource = signal<OptionsResource \| null>(null);\n readonly optionList = signal<SelectList>([]);\n readonly selectedOptions = signal<SelectList>([]);\n readonly isLoading = signal<boolean>(true);\n readonly requestOptionsParams = signal<SelectDataOptionsFnParams>({\n filter: null,\n currentValue: null,\n internalFilter: null,\n });\n readonly translations = inject(AppConfig).translation.form;\n readonly supportsExperimentalSelect = !CSS.supports(\n 'appearance',\n 'base-select'\n );\n readonly hasValue = signal<boolean>(false);\n\n filter = model<string>();\n filteredValue = signal<string \| null>(null);\n\n options = input.required<SelectDataOptions>();\n internalFilter = input<string \| null>(null);\n withoutFilter = input(false, { transform: booleanAttribute });\n multiple = input(false, { transform: booleanAttribute });\n selectedItem = output<any \| null>();\n\n get selectElement() {\n const selectField = this.selectField();\n\n if (!selectField) {\n throw new Error('Select element not found');\n }\n\n return selectField.nativeElement;\n }\n\n constructor() {\n super();\n\n loadOptions(this);\n ajustOptionsContainerSize(this);\n isLoadingFeedback(this);\n assessibility(this);\n }\n\n ngOnInit() {\n onServerFilter(this);\n generateOptionsResource(this);\n setSelectedOptionContent(this);\n }\n\n applyFilter(options: SelectList) {\n const filter = this.filter() ?? '';\n\n return options.filter((option) =>\n option.label.toLowerCase().includes(filter.toLowerCase())\n );\n }\n\n setValue(event: Event) {\n const select = event.target as HTMLInputElement;\n const value: SelectValue = select.value;\n\n if (this.multiple()) {\n const selectedOptionsElements = this.selectElement.querySelectorAll(\n '.kl-select-options-content input[type=\"checkbox\"]:checked'\n ) as NodeListOf<HTMLInputElement>;\n\n const values: string[] = [];\n\n selectedOptionsElements.forEach((option) => values.push(option.value));\n\n if (select.checked) {\n this.selectedOptions.update((current) => [\n ...current,\n this.optionList().find((item) => String(item.value) === value)!,\n ]);\n } else {\n this.selectedOptions.update((current) =>\n current.filter((item) => String(item.value) !== value)\n );\n }\n\n const selectedValues = this.selectedOptions().map((item) => item.value);\n\n this.control().setValue(selectedValues, { emitEvent: true });\n\n return;\n }\n\n const selectedOption = this.optionList().find(\n (item) => String(item.value) === value\n );\n\n if (selectedOption) {\n this.control().setValue(selectedOption.value, { emitEvent: true });\n }\n\n this.selectedItem.emit(selectedOption?.data ?? null);\n }\n\n clear(event: MouseEvent) {\n event.preventDefault();\n this.control().setValue(null);\n }\n\n removeOption(event: MouseEvent) {\n event.preventDefault();\n\n const target = event.target as HTMLSpanElement;\n const value = target.parentElement?.dataset['value'];\n\n const inputValue = this.selectElement.querySelector(\n `.kl-select-options-content input[value=\"${value}\"]`\n ) as HTMLInputElement;\n\n inputValue.click();\n }\n}\n","<div class=\"kl-select-container relative w-full has-[select:disabled]:cursor-not-allowed\"\n [class.has-value]=\"hasValue()\">\n\n @if (label(); as label) {\n <label class=\"kl-select-label flex items-center gap-2 whitespace-nowrap text-neutral-900 dark:text-neutral-300\"\n [attr.for]=\"fieldId\">\n @if (isDisabled()) {\n <span class=\"text-neutral-200 dark:text-neutral-600\">\n {{ label }} {{ isRequired() ? '' : '' }}\n </span>\n } @else {\n <span>{{ label }} {{ isRequired() ? '' : '' }}</span>\n }\n </label>\n }\n\n @if (!isDisabled() && hasValue()) {\n <button class=\"kl-select-clear-button absolute right-9 top-[0.7rem] z-10 text-neutral-400 hover:cursor-pointer text-sm focus:shadow-none!\" type=\"button\" (click)=\"clear($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n\n <div class=\"kl-select-content\" #selectField>\n <button type=\"button\" class=\"kl-select-button flex disabled:border-neutral-200! disabled:dark:border-neutral-800!\"\n [attr.popovertarget]=\"fieldId\"\n popovertargetaction=\"toggle\">\n\n <span class=\"selectcontent flex flex-wrap gap-1 items-center w-full h-full\"></span>\n\n <span class=\"picker\">\n @if (isLoading()) {\n <kl-loader size=\"small\" />\n } @else {\n <i class=\"fa-solid fa-caret-down\"></i>\n }\n </span>\n </button>\n\n <div [id]=\"fieldId\" popover class=\"kl-select-options-container with-popover relative flex flex-col overflow-hidden\">\n @if (!withoutFilter()) {\n <div class=\"kl-select-filter-container border-b border-neutral-200 dark:border-neutral-700\">\n <label class=\"flex items-center text-sm\">\n <i class=\"fa-solid fa-magnifying-glass opacity-60 absolute top-3 left-4\"></i>\n <input class=\"w-full p-2 pr-3 pl-10 outline-none placeholder:opacity-60\"\n #searchInput\n type=\"search\"\n [(ngModel)]=\"filter\"\n [placeholder]=\"translations.selectTypeSearch\"\n />\n </label>\n </div>\n }\n\n <div class=\"kl-select-options-content p-1 overflow-auto\">\n @for (item of optionList(); track $index) {\n @let optionLabelId = fieldId + '-' + item.value;\n\n <label class=\"kl-select-option-content relative py-1 px-2 pr-8 rounded-md\"\n [attr.for]=\"optionLabelId\"\n [attr.data-index]=\"$index\">\n <span class=\"w-full\">\n @let isChecked = multiple() ? (control().value \|\| []).includes(item.value) : item.value === control().value;\n\n <input\n [type]=\"multiple() ? 'checkbox' : 'radio'\"\n [id]=\"optionLabelId\"\n [name]=\"fieldId\"\n [attr.value]=\"item.value\"\n [checked]=\"isChecked\"\n (change)=\"setValue($event)\"\n />\n <span>{{ item.label }}</span>\n </span>\n </label>\n }\n </div>\n </div>\n </div>\n</div>\n\n@if (hint()) {\n <span class=\"hint-content\">\n <i class=\"fa-regular fa-circle-question\"></i> {{hint()}}\n </span>\n}\n\n<kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n</kl-field-errors>\n","import { Injectable, ResourceRef, Signal } from '@angular/core';\nimport { SelectDataOptionsFn, SelectList } from '../select.type';\n\n@Injectable({ providedIn: 'root' })\nexport class SelectBuilder {\n onDemand(config: SelectDataOptionsFn) {\n return config;\n }\n\n onServer(config: ResourceRef<SelectList>) {\n return config;\n }\n\n inMemory(config: SelectList) {\n return config;\n }\n\n inMemoryWithLoading(config: Signal<SelectList>) {\n return config;\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@koalarx/ui",
-  "version": "20.4.3",
+  "version": "20.4.4",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0"
@@ -62,22 +62,6 @@
       "types": "./theme/index.d.ts",
       "default": "./fesm2022/koalarx-ui-theme.mjs"
     },
-    "./shared/directives": {
-      "types": "./shared/directives/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-directives.mjs"
-    },
-    "./shared/services": {
-      "types": "./shared/services/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-services.mjs"
-    },
-    "./shared/utils": {
-      "types": "./shared/utils/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-utils.mjs"
-    },
-    "./shared/validators": {
-      "types": "./shared/validators/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-shared-validators.mjs"
-    },
     "./core/base": {
       "types": "./core/base/index.d.ts",
       "default": "./fesm2022/koalarx-ui-core-base.mjs"
@@ -102,6 +86,46 @@
       "types": "./core/translations/index.d.ts",
       "default": "./fesm2022/koalarx-ui-core-translations.mjs"
     },
+    "./shared/directives": {
+      "types": "./shared/directives/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-directives.mjs"
+    },
+    "./shared/services": {
+      "types": "./shared/services/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-services.mjs"
+    },
+    "./shared/utils": {
+      "types": "./shared/utils/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-utils.mjs"
+    },
+    "./shared/validators": {
+      "types": "./shared/validators/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-shared-validators.mjs"
+    },
+    "./core/components/dialog": {
+      "types": "./core/components/dialog/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-dialog.mjs"
+    },
+    "./core/components/kl-root": {
+      "types": "./core/components/kl-root/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-kl-root.mjs"
+    },
+    "./core/components/loader": {
+      "types": "./core/components/loader/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-loader.mjs"
+    },
+    "./core/components/loader-page": {
+      "types": "./core/components/loader-page/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-loader-page.mjs"
+    },
+    "./core/components/side-window": {
+      "types": "./core/components/side-window/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-side-window.mjs"
+    },
+    "./core/components/snackbar": {
+      "types": "./core/components/snackbar/index.d.ts",
+      "default": "./fesm2022/koalarx-ui-core-components-snackbar.mjs"
+    },
     "./shared/components/accordion": {
       "types": "./shared/components/accordion/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-accordion.mjs"
@@ -166,30 +190,6 @@
       "types": "./shared/components/vertical-menu/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-vertical-menu.mjs"
     },
-    "./core/components/dialog": {
-      "types": "./core/components/dialog/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-dialog.mjs"
-    },
-    "./core/components/kl-root": {
-      "types": "./core/components/kl-root/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-kl-root.mjs"
-    },
-    "./core/components/loader": {
-      "types": "./core/components/loader/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-loader.mjs"
-    },
-    "./core/components/loader-page": {
-      "types": "./core/components/loader-page/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-loader-page.mjs"
-    },
-    "./core/components/side-window": {
-      "types": "./core/components/side-window/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-side-window.mjs"
-    },
-    "./core/components/snackbar": {
-      "types": "./core/components/snackbar/index.d.ts",
-      "default": "./fesm2022/koalarx-ui-core-components-snackbar.mjs"
-    },
     "./shared/components/input-field/field-group": {
       "types": "./shared/components/input-field/field-group/index.d.ts",
       "default": "./fesm2022/koalarx-ui-shared-components-input-field-field-group.mjs"

package/theme/form.css CHANGED Viewed

@@ -4,65 +4,6 @@
   display: block;
 }
-kl-select-multiple .select-multiple-button {
-  overflow: unset;
-}
-kl-select-multiple .select-multiple-label {
-  top: 0;
-  left: 0.75rem;
-  transition: top 0.2s, font-size 0.2s;
-}
-kl-select-multiple .has-value .select-multiple-label {
-  position: absolute;
-  display: block;
-  font-size: 0.75rem;
-  top: -0.6rem;
-  left: 0.75rem;
-  padding: 0 0.3rem;
-}
-kl-select-multiple .has-value .select-multiple-label span {
-  position: relative;
-  z-index: 2;
-}
-kl-select-multiple .has-value .select-multiple-label:after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  background-color: var(--bg-input);
-  bottom: 0.5rem;
-  left: 0;
-}
-kl-select-multiple .has-value:focus .select-multiple-label:after {
-  height: 4px;
-}
-.kl-select-multiple-options-container input {
-  -webkit-appearance: none;
-  appearance: none;
-}
-.kl-select-multiple-options-container label.active {
-  background-color: rgba(63, 63, 63, 0.7);
-  transition: background-color 0.1s;
-}
-.kl-select-multiple-options-container label:has(input:checked):after {
-  content: "\f00c";
-  color: var(--color-neutral-500);
-  font-family: "Font Awesome 6 Free";
-  font-weight: 900;
-  position: absolute;
-  right: 0.5rem;
-  top: 0.25rem;
-  font-size: 1rem;
-}
 kl-datatable .input,
 kl-datatable .select,
 kl-datatable .textarea {
@@ -154,13 +95,13 @@ kl-select .has-value:focus .kl-select-label:after {
   height: 4px;
 }
-select,
-::picker(select) {
+kl-select select,
+kl-select ::picker(select) {
   appearance: base-select;
 }
-select,
-.kl-select-button {
+kl-select select,
+kl-select .kl-select-button {
   position: relative;
   justify-content: space-between;
   align-items: center;
@@ -174,7 +115,7 @@ select,
   transition: opacity 0.3s;
 }
-select::picker-icon {
+kl-select select::picker-icon {
   display: none;
 }
@@ -188,17 +129,17 @@ kl-select .picker {
   color: var(--color-neutral-400);
 }
-select:open .picker,
+kl-select select:open .picker,
 kl-select .kl-select-button:popover-open .picker {
   rotate: 180deg;
 }
-.kl-select-options-container[popover] {
+kl-select .kl-select-options-container[popover] {
   display: none;
 }
-::picker(select),
-.kl-select-options-container[popover] {
+kl-select ::picker(select),
+kl-select .kl-select-options-container[popover] {
   position: relative;
   width: var(--select-width);
   box-sizing: border-box;
@@ -217,32 +158,32 @@ kl-select .kl-select-button:popover-open .picker {
   position-area: var(--select-position-area, bottom);
 }
-::picker(select):popover-open,
-.kl-select-options-container.with-popover:popover-open {
+kl-select ::picker(select):popover-open,
+kl-select .kl-select-options-container.with-popover:popover-open {
   transform: translateY(0);
   opacity: 1;
   display: flex;
 }
-select {
+kl-select select {
   anchor-name: --select-content;
 }
-select selectedcontent span:not(.not-animate) {
+kl-select select selectedcontent span:not(.not-animate) {
   position: relative;
   animation: 0.5s ease bounce;
 }
 @starting-style {
-  ::picker(select):popover-open,
-  .kl-select-options-container.with-popover:popover-open {
+  kl-select ::picker(select):popover-open,
+  kl-select .kl-select-options-container.with-popover:popover-open {
     transform: translateY(-1rem);
     opacity: 0;
   }
 }
-select option,
-.kl-select-options-container.with-popover .kl-select-option-content {
+kl-select select option,
+kl-select .kl-select-options-container.with-popover .kl-select-option-content {
   display: flex;
   justify-content: space-between;
   padding: 0.25rem 0.5rem;
@@ -251,13 +192,17 @@ select option,
   white-space: break-spaces;
 }
-.kl-select-options-container.with-popover .kl-select-option-content input {
+kl-select
+  .kl-select-options-container.with-popover
+  .kl-select-option-content
+  input {
   -webkit-appearance: none;
   appearance: none;
 }
-select option:focus,
-.kl-select-options-container.with-popover
+kl-select select option:focus,
+kl-select
+  .kl-select-options-container.with-popover
   .kl-select-option-content
   input:focus {
   background-color: rgba(63, 63, 63, 0.7);
@@ -265,15 +210,17 @@ select option:focus,
   transition: background-color 0.1s;
 }
-select option:checked,
-.kl-select-options-container.with-popover
+kl-select select option:checked,
+kl-select
+  .kl-select-options-container.with-popover
   .kl-select-option-content:has(input:checked) {
   background-color: rgba(63, 63, 63, 0.7);
   transition: background-color 0.1s;
 }
-select option::checkmark,
-.kl-select-options-container.with-popover
+kl-select select option::checkmark,
+kl-select
+  .kl-select-options-container.with-popover
   .kl-select-option-content:has(input:checked):after {
   content: "\f00c";
   color: var(--color-neutral-500);
@@ -284,7 +231,7 @@ select option::checkmark,
   order: 1;
 }
-.kl-select-options-container.with-popover label.active {
+kl-select .kl-select-options-container.with-popover label.active {
   background-color: rgba(63, 63, 63, 0.7);
   transition: background-color 0.1s;
 }