@shoper/phoenix_design_system 1.1.4 → 1.1.5-1

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

@@ -0,0 +1,144 @@
+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 { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_PROPS_TO_SYNC, FILE_ITEM_EVENT_NAMES } from './file_picker_constants.js';
+import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import { ifDefined } from 'lit/directives/if-defined';
+
+let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._$fileInputRef = createRef();
+        this._handleChangeEvent = (event) => {
+            this.fileName = this._getFileName(event);
+            this.classList.add(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        this._getFileName = (event) => {
+            const targetElement = event.currentTarget;
+            const fileList = targetElement.files;
+            return fileList[0].name;
+        };
+        this._removeFileItem = (event) => {
+            const { containerId } = event.detail;
+            const $fileInput = this._$fileInputRef.value;
+            if (this.controlId === containerId) {
+                this.fileName = '';
+                if ($fileInput)
+                    $fileInput.value = '';
+            }
+            this.classList.remove(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        new ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.values(FILE_ITEM_PROPS_TO_SYNC)]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        this.classList.add(FILE_PICKER_CONTROL_CSS_CLASSES.filePicker);
+        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);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeEventListeners();
+    }
+    render() {
+        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)}"
+                value="${ifDefined(this.value)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined(this.formats)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!this.fileName
+            ? html `<label class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${ifDefined(this.controlId)}">
+                      ${this.labelIconName ? html ` <h-file-picker-icon name="${this.labelIconName}" />` : nothing}
+                      ${this.labelText}
+                  </label>`
+            : nothing}
+
+            ${this.fileName ? html `<h-file name="${this.fileName}" container-id="${this.controlId}" />` : nothing}
+        `;
+    }
+    _addEventListeners() {
+        document.addEventListener(FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+    }
+    _removeEventListeners() {
+        document.removeEventListener(FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+    }
+};
+__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 }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "value", 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, "formats", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "fileName", void 0);
+HFilePicker = __decorate([
+    phoenixCustomElement('h-file-picker'),
+    __metadata("design:paramtypes", [])
+], HFilePicker);
+
+export { HFilePicker };
+//# sourceMappingURL=file_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,24 @@
+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 const FILE_ITEM_PROPS_TO_SYNC: {
+    readonly removeButtonText: "removeButtonText";
+    readonly removeButtonIconName: "removeButtonIconName";
+};
+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_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,30 @@
+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 FILE_ITEM_PROPS_TO_SYNC = {
+    removeButtonText: 'removeButtonText',
+    removeButtonIconName: 'removeButtonIconName'
+};
+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 baseFilePickerIconClass = 'file-picker-icon';
+const FILE_PICKER_ICON_CSS_CLASSES = {
+    filePickerIcon: baseFilePickerIconClass
+};
+
+export { FILE_ITEM_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_ITEM_PROPS_TO_SYNC, FILE_PICKER_CONTROL_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES };
+//# sourceMappingURL=file_picker_constants.js.map

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

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,7 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFilePickerIcon extends PhoenixLightLitElement {
+    iconName: string;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,28 @@
+import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
+import { html } 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_PICKER_ICON_CSS_CLASSES } from '../file_picker_constants.js';
+
+let HFilePickerIcon = class HFilePickerIcon extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon, ICON_CSS_CLASSES.icon);
+    }
+    render() {
+        super.render();
+        return html ` <h-icon icon-name=${this.iconName}></h-icon> `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFilePickerIcon.prototype, "iconName", void 0);
+HFilePickerIcon = __decorate([
+    phoenixCustomElement('h-file-picker-icon')
+], HFilePickerIcon);
+
+export { HFilePickerIcon };
+//# sourceMappingURL=file_picker_icon.js.map

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

@@ -0,0 +1 @@
+{"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;"}

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

@@ -0,0 +1,3 @@
+export declare type TRemoveFileItem = {
+    containerId: string;
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# 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":""}

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

@@ -3,9 +3,9 @@ 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 classnames from '../../../../external/classnames/index.js';
-import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 
 let HInput = class HInput extends PhoenixLightLitElement {
     constructor() {

package/build/esm/packages/phoenix/src/components/form/input/input_control.js

@@ -3,8 +3,8 @@ import { html } 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 { INPUT_CONTROL_TYPES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
+import { INPUT_CONTROL_TYPES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 let HInputControl = class HInputControl extends PhoenixLightLitElement {

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

@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_eleme
 import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
 import { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
 import { BtnController } from '../../../../controllers/btn_controller/btn_controller.js';
+import { ICONS_SIZES } from '../../../icon/icon_constants.js';
 import { html } from 'lit-html';
 
 let HSelectCloseBtn = class HSelectCloseBtn extends PhoenixLightLitElement {
@@ -24,7 +25,7 @@ let HSelectCloseBtn = class HSelectCloseBtn extends PhoenixLightLitElement {
     render() {
         return html `${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
             ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
-            : html `<icon iconName="icon-x"></icon>`} `;
+            : html ` <h-icon size=${ICONS_SIZES.l} icon-name="icon-x"></h-icon>`} `;
     }
 };
 HSelectCloseBtn = __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,kDAAsD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,kDAAsD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select_components_constatns.d.ts

@@ -17,6 +17,7 @@ export declare const SELECT_RELATED_COMPONENTS_NAMES: {
     readonly toggler: "h-select-toggler";
     readonly closeBtn: "h-select-close-btn";
     readonly search: "h-select-search";
+    readonly placeholder: "h-placeholder";
 };
 export declare const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = "content";
 export declare const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = "placeholder";

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

@@ -16,7 +16,8 @@ const SELECT_RELATED_COMPONENTS_NAMES = {
     optionContent: 'h-option-content',
     toggler: 'h-select-toggler',
     closeBtn: 'h-select-close-btn',
-    search: 'h-select-search'
+    search: 'h-select-search',
+    placeholder: 'h-placeholder'
 };
 const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = 'content';
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';

package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.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;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;"}

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

@@ -3,10 +3,10 @@ import { 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 { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { Observer } from '../../../../../core/classes/observer/observer.js';
 import { html } from 'lit-html';
 import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
 import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
-import { Observer } from '../../../../../core/classes/observer/observer.js';
 import { observe } from '../../../../../directives/observable_directive.js';
 import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
 
@@ -28,7 +28,7 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('slot', SELECT_SLOT_NAMES.input);
+        this.setAttribute('slot', SELECT_SLOT_NAMES.toggler);
         this.setAttribute('role', 'textbox');
         this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
         this._subscribeObserver();
@@ -51,19 +51,17 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
             ${observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
-                return html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}
-                        >${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}</span
-                    >`;
-            return html `<ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                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>
+                ? selectOptions.map((option) => html ` <li>
                                   <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
                                       ${option.content}
 
                                       <h-tag-remove-button></h-tag-remove-button>
                                   </h-tag>
                               </li>`)
-                : html `<li>${selectOptions[0].content}</li>`}
+                : html ` <li>${selectOptions[0].content}</li>`}
                 </ul>`;
         })}
 

package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -19,6 +19,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectContext;
     private _listBoxController;
     private _optionsObserver;
+    private $placeholder;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
@@ -33,6 +34,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _removeHTMLOptions;
     private _handleOptionClicked;
     private _handleSearch;
+    private _handleDropdownHidden;
     private _closeSelect;
     private _clearOptions;
     protected update(changedProperties: PropertyValues): void;
@@ -41,5 +43,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     replaceOptions(options: SelectOption[]): void;
     disconnectedCallback(): void;
     private _handleResize;
+    private _getDropdownContentWidth;
+    private _getClonedPlaceholderElement;
+    private _searchNoResult;
     protected render(): TemplateResult;
 }

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

@@ -4,13 +4,15 @@ import { 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 { property } from '@lit/reactive-element/decorators.js';
-import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
+import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME } from './components/select_components_constatns.js';
+import { Observer } from '../../../core/classes/observer/observer.js';
 import { HIcon } from '../../icon/icon.js';
 import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
-import { Observer } from '../../../core/classes/observer/observer.js';
 import { observe } from '../../../directives/observable_directive.js';
+import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
+import { BREAKPOINTS } from '../../../global_constants.js';
 import debounce_1 from '../../../../../../external/lodash/debounce.js';
 import { MultiSelectController } from './controllers/multi_select_controller.js';
 import { SelectController } from './controllers/select_controller.js';
@@ -22,6 +24,7 @@ import { HSelectCloseBtn } from './components/select_close_btn.js';
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
+        var _a;
         super();
         this.multiselect = false;
         this.opened = false;
@@ -33,9 +36,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
-        this._setDropdownContentWidth = () => {
+        this._setDropdownContentWidth = (width) => {
             if (this._$dropdownContent.value)
-                this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+                this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
         };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getSelectOption(event.detail);
@@ -67,23 +70,26 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             if (!this.multiselect)
                 this._closeSelect();
         };
+        this._handleDropdownHidden = () => {
+            this._searchValue = '';
+            this.opened = false;
+        };
         this._closeSelect = () => {
             var _a;
             if (!this.opened)
                 return;
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
-            this._searchValue = '';
-            this.opened = false;
         };
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
-            this._setDropdownContentWidth();
+            this._setDropdownContentWidth(this._getDropdownContentWidth());
         }, SELECT_RESIZE_DEBOUNCE_TIME);
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+        this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -142,7 +148,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._setDropdownContentWidth();
+        this._setDropdownContentWidth(this._getDropdownContentWidth());
     }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
@@ -185,6 +191,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController.options$.unsubscribe(this._optionsObserver);
         window.removeEventListener('resize', this._handleResize);
     }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
+    _getClonedPlaceholderElement() {
+        return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
+    }
+    _searchNoResult() {
+        return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
+    }
     render() {
         var _a;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -192,17 +207,26 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             <h-dropdown
                 ${ref(this._$dropdown)}
                 @dropdown.showed=${() => (this.opened = true)}
-                @dropdown.hidden=${this._closeSelect}
+                @dropdown.hidden=${this._handleDropdownHidden}
                 name=${this.controlName}
                 offset=${this.offset}
             >
-                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
+                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
+
+                <h-dropdown-content
+                    class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
+                    ${ref(this._$dropdownContent)}
+                    name=${this.controlName}
+                >
+                    <h-select-close-btn
+                        class="${SELECT_CSS_CLASSES.selectCloseMobileButton}"
+                        @selectCloseBtn.close=${this._closeSelect}
+                    ></h-select-close-btn>
 
-                <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
-                    <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
+                    <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
 
                     ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
-            ? html `<h-select-search
+            ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
                               ${ref(this._$search)}
                               .value=${this._searchValue}
@@ -212,7 +236,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this.hasSlot(SELECT_SLOT_NAMES.content)
             ? html `
                               <h-options
-                                  class=${SELECT_CSS_CLASSES.selectOptions}
+                                  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+                ? SELECT_CSS_CLASSES.selectOptionsEmpty
+                : ''}"
                                   ${ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
                               >
@@ -220,8 +246,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               </h-options>
                           `
             : nothing}
-                    ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
-            ? html `<div>
+                    ${this._searchNoResult()
+            ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
                                   Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
@@ -230,10 +256,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
-                                  <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
-                                  <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
-                                      >ok</h-select-close-btn
-                                  >
+                                  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
+                                  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
+                                      ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}>ok</span>
+                                  </h-select-close-btn>
                               </section>
                           `
             : nothing}
@@ -247,7 +273,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
 HSelect._components = {
     search: HSelectSearch,
     icon: HIcon,
-    closeBtn: HSelectCloseBtn
+    closeBtn: HSelectCloseBtn,
+    toggler: HSelectToggler
 };
 __decorate([
     property({ type: String }),

package/build/esm/packages/phoenix/src/components/form/select/select.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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select_constants.d.ts

@@ -4,7 +4,7 @@ export declare const SELECT_CONTEXTS: {
 };
 export declare const SELECT_SLOT_NAMES: {
     readonly content: "content";
-    readonly input: "input";
+    readonly toggler: "toggler";
 };
 export declare const SELECT_EVENT_NAMES: {
     readonly selectOption: "selectOption.select";
@@ -19,8 +19,14 @@ export declare const SELECT_CSS_CLASSES: {
     readonly selectDisabled: "select_disabled";
     readonly selectSearch: "select__search";
     readonly selectOptions: "select__options";
+    readonly selectOptionsEmpty: "select__options_empty";
     readonly selectContent: "select__content";
+    readonly selectContentError: "select__content_error";
     readonly selectFooter: "select__footer";
     readonly selectNoResult: "select__no-result";
     readonly selectSearchedPhrase: "select__searched-phrase";
+    readonly selectCloseMobileButton: "select__close-mobile-btn";
+    readonly selectClearButton: "select__clear-btn";
+    readonly selectCloseButton: "select__close-btn";
+    readonly selectLabel: "select__label";
 };