@shoper/phoenix_design_system 1.2.3-2 → 1.2.3-4

package/build/esm/packages/phoenix/src/components/form/file_picker/file/file.js

@@ -0,0 +1,67 @@
+import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
+import { ICON_CSS_CLASSES } from '../../../icon/icon_constants.js';
+import { FILE_ITEM_EVENT_NAMES, FILE_ITEM_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES } from '../file_picker_constants.js';
+
+let HFile = class HFile extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleClick = () => {
+            const removeItemEvent = new CustomEvent(FILE_ITEM_EVENT_NAMES.removed, {
+                bubbles: true,
+                detail: {
+                    fileId: this.id
+                }
+            });
+            this.dispatchEvent(removeItemEvent);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-label', this.name);
+        this.classList.add(FILE_ITEM_CSS_CLASSES.file);
+    }
+    render() {
+        return html `
+            <span class="${FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
+            <button
+                class="${FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
+                @click="${this._handleClick}"
+                aria-label="${this.removeButtonText} ${this.name}"
+            >
+                ${this.removeButtonIconName
+            ? html `<h-icon
+                          class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
+                          icon-name=${this.removeButtonIconName}
+                      />`
+            : nothing}
+                ${this.removeButtonText}
+            </button>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFile.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFile.prototype, "id", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-text' }),
+    __metadata("design:type", String)
+], HFile.prototype, "removeButtonText", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-icon-name' }),
+    __metadata("design:type", String)
+], HFile.prototype, "removeButtonIconName", void 0);
+HFile = __decorate([
+    phoenixCustomElement('h-file')
+], HFile);
+
+export { HFile };
+//# sourceMappingURL=file.js.map

package/build/esm/packages/phoenix/src/components/{toggle/toggle_button.js.map → form/file_picker/file/file.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/file_picker/file/file_model.d.ts

@@ -0,0 +1,7 @@
+import { TFileItemConstructorOptions } from '../file_picker_constants';
+export declare class FileItem {
+    name: string;
+    id: string;
+    private constructor();
+    static create(options: TFileItemConstructorOptions): FileItem;
+}

package/build/esm/packages/phoenix/src/components/form/file_picker/file/file_model.js

@@ -0,0 +1,12 @@
+class FileItem {
+    constructor({ name, id }) {
+        this.name = name;
+        this.id = id;
+    }
+    static create(options) {
+        return new FileItem(options);
+    }
+}
+
+export { FileItem };
+//# sourceMappingURL=file_model.js.map

package/build/esm/packages/phoenix/src/components/{toggle/toggle_constants.js.map → form/file_picker/file/file_model.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.d.ts

@@ -0,0 +1,27 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFilePicker extends PhoenixLightLitElement {
+    controlId: string;
+    controlName: string;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    labelText: string;
+    labelIconName: string;
+    removeButtonText: string;
+    removeButtonIconName: string;
+    accept: string;
+    private file;
+    private _$fileInputRef;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    get files(): FileList | null;
+    private _addEventListeners;
+    private _handleChangeEvent;
+    private _getFiles;
+    private _getFileName;
+    private _getInputRefValue;
+    private _removeFileItem;
+    private _triggerClickOnLabel;
+    private _dispatchChangeEvent;
+}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -0,0 +1,160 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../external/classnames/index.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
+import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants.js';
+import { FileItem } from './file/file_model.js';
+import { ifDefined } from 'lit/directives/if-defined';
+
+let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._$fileInputRef = createRef();
+        this._handleChangeEvent = (event) => {
+            const filesList = this._getFiles(event);
+            if (filesList && filesList.length > 0) {
+                this.file = FileItem.create({
+                    name: this._getFileName(filesList),
+                    id: `file-${v4()}`
+                });
+                this.classList.add(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+                this._dispatchChangeEvent();
+            }
+        };
+        this._getFiles = (event) => {
+            const targetElement = event.currentTarget;
+            return targetElement.files;
+        };
+        this._getFileName = (fileList) => {
+            return fileList[0].name;
+        };
+        this._getInputRefValue = () => {
+            return this._$fileInputRef.value;
+        };
+        this._removeFileItem = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput) {
+                $fileInput.value = '';
+                $fileInput.files = null;
+            }
+            this.file = null;
+            this.classList.remove(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+            this._dispatchChangeEvent();
+        };
+        this._triggerClickOnLabel = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput)
+                $fileInput.click();
+        };
+        this._dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('change'));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        const cssClasses = classnames({
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+    render() {
+        var _a, _b;
+        super.render();
+        return html `
+            <input
+                ${ref(this._$fileInputRef)}
+                type="file"
+                class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
+                id="${ifDefined(this.controlId)}"
+                name="${ifDefined(this.controlName)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined(this.accept)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!((_a = this.file) === null || _a === void 0 ? void 0 : _a.name)
+            ? html ` <h-file-picker-label
+                      control-id="${this.controlId}"
+                      label-text="${this.labelText}"
+                      label-icon-name="${ifDefined(this.labelIconName)}"
+                  />`
+            : nothing}
+            ${((_b = this.file) === null || _b === void 0 ? void 0 : _b.name)
+            ? html `<h-file
+                      name="${this.file.name}"
+                      id="${this.file.id}"
+                      remove-button-text="${this.removeButtonText}"
+                      remove-button-icon-name="${ifDefined(this.removeButtonIconName)}"
+                  />`
+            : nothing}
+        `;
+    }
+    get files() {
+        const $fileInput = this._getInputRefValue();
+        return $fileInput.files;
+    }
+    _addEventListeners() {
+        this.addEventListener(FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+        this.addEventListener(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, this._triggerClickOnLabel);
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id', reflect: true }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String, attribute: 'control-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-text' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "labelText", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-icon-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "labelIconName", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-text' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "removeButtonText", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-icon-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "removeButtonIconName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "accept", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HFilePicker.prototype, "file", void 0);
+HFilePicker = __decorate([
+    phoenixCustomElement('h-file-picker')
+], HFilePicker);
+
+export { HFilePicker };
+//# sourceMappingURL=file_picker.js.map

package/build/esm/packages/phoenix/src/components/form/{input_stepper/input_stepper.js.map → file_picker/file_picker.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.d.ts

@@ -0,0 +1,27 @@
+export declare const FILE_ITEM_CSS_CLASSES: {
+    readonly file: "file";
+    readonly fileName: "file__name";
+    readonly fileRemoveButton: "file__remove-button";
+};
+export declare const FILE_ITEM_EVENT_NAMES: {
+    readonly removed: "fileItemRemoved";
+};
+export declare type TFileItemConstructorOptions = {
+    name: string;
+    id: string;
+};
+export declare const FILE_PICKER_CONTROL_CSS_CLASSES: {
+    readonly filePicker: "file-picker";
+    readonly filePickerDisabled: "file-picker_disabled";
+    readonly filePickerRequired: "file-picker_required";
+    readonly filePickerError: "file-picker_error";
+    readonly filePickerHasValue: "file-picker_has-value";
+    readonly filePickerInput: "file-picker__input";
+    readonly filePickerLabel: "file-picker__label";
+};
+export declare const FILE_PICKER_LABEL_EVENT_NAMES: {
+    readonly filePickerLabelClickedByEnterKey: "filePickerLabelClickedByEnterKey";
+};
+export declare const FILE_PICKER_ICON_CSS_CLASSES: {
+    readonly filePickerIcon: "file-picker-icon";
+};

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js

@@ -0,0 +1,29 @@
+const baseFileItemClass = 'file';
+const FILE_ITEM_CSS_CLASSES = {
+    file: baseFileItemClass,
+    fileName: `${baseFileItemClass}__name`,
+    fileRemoveButton: `${baseFileItemClass}__remove-button`
+};
+const FILE_ITEM_EVENT_NAMES = {
+    removed: 'fileItemRemoved'
+};
+const baseFilePickerControlClass = 'file-picker';
+const FILE_PICKER_CONTROL_CSS_CLASSES = {
+    filePicker: baseFilePickerControlClass,
+    filePickerDisabled: `${baseFilePickerControlClass}_disabled`,
+    filePickerRequired: `${baseFilePickerControlClass}_required`,
+    filePickerError: `${baseFilePickerControlClass}_error`,
+    filePickerHasValue: `${baseFilePickerControlClass}_has-value`,
+    filePickerInput: `${baseFilePickerControlClass}__input`,
+    filePickerLabel: `${baseFilePickerControlClass}__label`
+};
+const FILE_PICKER_LABEL_EVENT_NAMES = {
+    filePickerLabelClickedByEnterKey: 'filePickerLabelClickedByEnterKey'
+};
+const baseFilePickerIconClass = 'file-picker-icon';
+const FILE_PICKER_ICON_CSS_CLASSES = {
+    filePickerIcon: baseFilePickerIconClass
+};
+
+export { FILE_ITEM_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES, FILE_PICKER_LABEL_EVENT_NAMES };
+//# sourceMappingURL=file_picker_constants.js.map

package/build/{cjs/packages/phoenix/src/components/form/input_stepper/input_stepper_constants.js.map → esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.d.ts

@@ -0,0 +1,11 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFilePickerLabel extends PhoenixLightLitElement {
+    controlId: string;
+    labelText: string;
+    labelIconName: string;
+    private _btnController;
+    constructor();
+    protected render(): TemplateResult;
+    private _dispatchClickEvent;
+}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js

@@ -0,0 +1,51 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
+import { ICON_CSS_CLASSES } from '../../icon/icon_constants.js';
+import { FILE_PICKER_LABEL_EVENT_NAMES, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES } from './file_picker_constants.js';
+
+let HFilePickerLabel = class HFilePickerLabel extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickEvent = () => {
+            this.dispatchEvent(new CustomEvent(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickEvent);
+    }
+    render() {
+        super.render();
+        return html `<label class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${this.controlId}">
+            ${this.labelIconName
+            ? html `<h-icon
+                      class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
+                      icon-name=${this.labelIconName}
+                  />`
+            : nothing}
+            ${this.labelText}
+        </label>`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id', reflect: true }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-text' }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "labelText", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-icon-name' }),
+    __metadata("design:type", String)
+], HFilePickerLabel.prototype, "labelIconName", void 0);
+HFilePickerLabel = __decorate([
+    phoenixCustomElement('h-file-picker-label'),
+    __metadata("design:paramtypes", [])
+], HFilePickerLabel);
+
+export { HFilePickerLabel };
+//# sourceMappingURL=file_picker_label.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.d.ts

@@ -0,0 +1,6 @@
+import { HFilePicker } from "./file_picker";
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-file-picker': HFilePicker;
+    }
+}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.js

@@ -0,0 +1,2 @@
+import '@phoenixRoot/components/form/file_picker/file_picker';
+//# sourceMappingURL=file_picker_types.js.map

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file_picker_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/file_picker/file_picker_types.ts"],"names":[],"mappings":"AAAA,OAA4B,sDAAsD,CAAC"}

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts

@@ -1,5 +1,4 @@
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { PropertyValues } from '@lit/reactive-element';
 export declare class HOption extends PhoenixLightLitElement {
     value: string;
     selected: boolean;
@@ -10,7 +9,7 @@ export declare class HOption extends PhoenixLightLitElement {
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
-    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _addSelectedIcon;
     private _removeSelectedIcon;
 }

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js

@@ -5,7 +5,6 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
 import { BtnController } from '../../../../../controllers/btn_controller/btn_controller.js';
 import { SELECT_OPTION_CSS_CLASSES } from './select_option_constants.js';
-import '@lit/reactive-element';
 
 let HOption = class HOption extends PhoenixLightLitElement {
     constructor() {
@@ -34,10 +33,12 @@ let HOption = class HOption extends PhoenixLightLitElement {
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('selected'))
-            this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        switch (name) {
+            case 'selected':
+                this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+        }
     }
     _addSelectedIcon() {
         this._$checkedIcon = document.createElement('h-icon');

package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js

@@ -51,7 +51,7 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
             ${observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
-                return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>Select</span>`}`;
+                return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
             return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                     ${this.isMultiselect
                 ? selectOptions.map((option) => html ` <li>

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts

@@ -13,15 +13,15 @@ export declare abstract class BaseSelectController implements ISelectController,
     constructor({ host }: SelectControllerConstructorOptions);
     private _setupComputedStateObserver;
     private _calculateValuesRelatedToOptions;
-    toggle(option: SelectOption): void;
-    abstract select(option: SelectOption): void;
-    remove(optionValue: string): void;
-    add(option: SelectOption, position?: number): void;
-    replace(options: SelectOption[]): void;
-    deselectAll(): void;
-    deselect(option: SelectOption): void;
-    filter(value: string): void;
-    protected requestUpdate(): void;
-    getOption(selectValue: string): SelectOption | undefined;
+    toggleOption(option: SelectOption): void;
+    abstract selectOption(option: SelectOption): void;
+    removeOption(optionValue: string): void;
+    addOption(option: SelectOption, position?: number): void;
+    replaceOptions(options: SelectOption[]): void;
+    deselectOptions(): void;
+    deselectOption(option: SelectOption): void;
+    filterOptions(value: string): void;
+    protected requestOptionsUpdate(): void;
+    getSelectOption(selectValue: string): SelectOption | undefined;
     hostConnected(): void;
 }

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js

@@ -25,16 +25,16 @@ class BaseSelectController {
         this._optionsObserver = new Observer(this._calculateValuesRelatedToOptions);
         this.options$.subscribe(this._optionsObserver);
     }
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    remove(optionValue) {
+    removeOption(optionValue) {
         const options = this.options$.getValue();
         if (!options)
             return;
         this.options$.notify(options.filter((option) => option.value !== optionValue));
     }
-    add(option, position) {
+    addOption(option, position) {
         var _a;
         const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         if (position === undefined) {
@@ -44,22 +44,22 @@ class BaseSelectController {
         }
         this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
     }
-    replace(options) {
+    replaceOptions(options) {
         this.options$.notify(options);
     }
-    deselectAll() {
+    deselectOptions() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    filter(value) {
+    filterOptions(value) {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
@@ -68,16 +68,16 @@ class BaseSelectController {
         filtered.forEach((option) => {
             option.hidden = false;
         });
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    requestUpdate() {
+    requestOptionsUpdate() {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
         this.options$.notify([...selectOptions]);
         this.host.requestUpdate();
     }
-    getOption(selectValue) {
+    getSelectOption(selectValue) {
         var _a;
         return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
     }

package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.d.ts

@@ -1,7 +1,7 @@
 import { SelectOption } from "../model/select_option";
 import { BaseSelectController } from "./base_select_controller";
 export declare class MultiSelectController extends BaseSelectController {
-    toggle(option: SelectOption): void;
-    select(option: SelectOption): void;
-    deselect(option: SelectOption): void;
+    toggleOption(option: SelectOption): void;
+    selectOption(option: SelectOption): void;
+    deselectOption(option: SelectOption): void;
 }

package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js

@@ -1,18 +1,18 @@
 import { BaseSelectController } from './base_select_controller.js';
 
 class MultiSelectController extends BaseSelectController {
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    select(option) {
+    selectOption(option) {
         option.selected = true;
         this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         option.selected = false;
         this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
 }
 

package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.d.ts

@@ -1,5 +1,5 @@
 import { SelectOption } from "../model/select_option";
 import { BaseSelectController } from "./base_select_controller";
 export declare class SelectController extends BaseSelectController {
-    select(option: SelectOption): void;
+    selectOption(option: SelectOption): void;
 }