@shoper/phoenix_design_system 1.2.3-1 → 1.2.3-3

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { state } from 'lit/decorators';
+import 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
@@ -27,7 +27,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.offset = 0;
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         this._backdropController = new BackdropController();
-        this._lastFocusableElement = undefined;
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -60,12 +59,10 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b;
+                        var _a;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
-                        if (!this._lastFocusableElement)
-                            this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
                         resolve();
                     }, transitionDuration);
                 });
@@ -151,14 +148,11 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                 this._handleFocusOnNextElement(ev);
         };
         this._handleFocusOnNextElement = async (ev) => {
+            var _a;
             ev.preventDefault();
             const $focusableElements = UiDomUtils.getFocusableElements(document.body);
             const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
-            const $nextElementToFocus = $focusableElements.find((currentElement, index) => {
-                if (index > indexOfDropdownToggler && !currentElement.closest(`${DROPDOWN_TOGGLER_NAME}[name="${this.name}"]`))
-                    return currentElement;
-                return null;
-            });
+            const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
             await this._hideDropdownsSequentially();
             await this.hide();
             this._focusOnNextElementAfterToggler($nextElementToFocus);
@@ -219,12 +213,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         });
     }
     async connectedCallback() {
-        var _a;
         super.connectedCallback();
         HDropdown_1._appendDropdownPortal();
-        if (!this._rootDropdown)
-            this._rootDropdown =
-                ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'h-dropdown-content' ? this._findRootDropdown(this.parentElement) : this;
         if (!this.$dropdownContent)
             this.$dropdownContent = this.querySelector(DROPDOWN_CONTENT_NAME);
         if (!this.$dropdownToggler)
@@ -370,10 +360,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "portalTarget", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "_lastFocusableElement", void 0);
 HDropdown = HDropdown_1 = __decorate([
     phoenixCustomElement('h-dropdown'),
     __metadata("design:paramtypes", [])

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.d.ts

@@ -2,6 +2,7 @@ import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HDropdownContent extends PhoenixLightLitElement {
     name: string;
+    constructor();
     connectedCallback(): void;
     protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js

@@ -7,14 +7,14 @@ import { DROPDOWN_CONTENT_CSS_CLASS } from './dropdown_constants.js';
 
 let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.name = '';
+        this.slot = this.hasAttribute('slot') ? this.slot : 'content';
     }
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(DROPDOWN_CONTENT_CSS_CLASS);
         this.setAttribute('role', 'menu');
-        this.slot = this.hasAttribute('slot') ? this.slot : 'content';
         Array.from(this.children).forEach((element) => {
             element.setAttribute('role', 'menuitem');
         });
@@ -29,7 +29,8 @@ __decorate([
     __metadata("design:type", Object)
 ], HDropdownContent.prototype, "name", void 0);
 HDropdownContent = __decorate([
-    phoenixCustomElement('h-dropdown-content')
+    phoenixCustomElement('h-dropdown-content'),
+    __metadata("design:paramtypes", [])
 ], HDropdownContent);
 
 export { HDropdownContent };

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
+{"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;"}

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

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { Ref } from 'lit/directives/ref.js';
+export declare class HDisplayInput extends PhoenixLightLitElement {
+    value: string;
+    inputRef: Ref<HTMLInputElement>;
+    private _setInputBehavior;
+    private _testDispatchValueChanged;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/form/input_stepper/display_input.js

@@ -0,0 +1,51 @@
+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 { createRef, ref } from 'lit-html/directives/ref.js';
+import { DISPLAY_INPUT_EVENT_NAMES } from './input_stepper_constants.js';
+
+let HDisplayInput = class HDisplayInput extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.inputRef = createRef();
+        this._testDispatchValueChanged = () => {
+            var _a;
+            const valueChangeEvent = new CustomEvent(DISPLAY_INPUT_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    value: (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.value
+                }
+            });
+            this.dispatchEvent(valueChangeEvent);
+            if (this.inputRef.value) {
+                this.inputRef.value.value = this.value;
+            }
+        };
+    }
+    _setInputBehavior(event) {
+        const input = event.target;
+        input.focus();
+        input.select();
+    }
+    render() {
+        return html `<input
+            type="text"
+            ${ref(this.inputRef)}
+            .value="${this.value}"
+            @input=${this._testDispatchValueChanged}
+            @click=${(event) => this._setInputBehavior(event)}
+        />`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'value', reflect: true }),
+    __metadata("design:type", String)
+], HDisplayInput.prototype, "value", void 0);
+HDisplayInput = __decorate([
+    phoenixCustomElement('h-display-input')
+], HDisplayInput);
+
+export { HDisplayInput };
+//# sourceMappingURL=display_input.js.map

package/build/esm/packages/phoenix/src/components/form/{file_picker/file_picker_label.js.map → input_stepper/display_input.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;"}
+{"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;"}

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

@@ -0,0 +1,19 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
+export declare class HInputStepper extends PhoenixLightLitElement {
+    step: number;
+    min: number;
+    max: number;
+    private _value;
+    private _$inputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private _setupEvents;
+    private _handleInputChange;
+    private _handleDisplayChange;
+    private _handleUpdateValue;
+    private _increment;
+    private _decrement;
+    private _dispatchValueChanged;
+}

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

@@ -0,0 +1,94 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import '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 { INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_EVENT_NAMES, DISPLAY_INPUT_EVENT_NAMES } from './input_stepper_constants.js';
+
+let HInputStepper = class HInputStepper extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.step = 1;
+        this.min = -Infinity;
+        this.max = Infinity;
+        this._handleInputChange = (event) => {
+            var _a;
+            ((_a = event.target) === null || _a === void 0 ? void 0 : _a.action) === INPUT_STEPPER_ACTION_TYPES.increment ? this._increment() : this._decrement();
+        };
+        this._handleDisplayChange = (event) => {
+            if (event.detail.value > this.max)
+                return;
+            this._value = Number(event.detail.value);
+        };
+        this._handleUpdateValue = () => {
+            this._value = Number(this._$inputElement.value) || 0;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $element = this.querySelector('h-display-input');
+        if (!$element) {
+            throw new Error();
+        }
+        this._$inputElement = $element;
+        this._value = Number($element.value) || 0;
+        this._setupEvents();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._$inputElement.removeEventListener('input', this._handleUpdateValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('_value')) {
+            this._dispatchValueChanged();
+            this._$inputElement.value = String(this._value);
+        }
+    }
+    _setupEvents() {
+        this.addEventListener(INPUT_STEPPER_EVENT_NAMES.change, this._handleInputChange);
+        this.addEventListener(DISPLAY_INPUT_EVENT_NAMES.change, this._handleDisplayChange);
+        this._$inputElement.addEventListener('input', this._handleUpdateValue);
+    }
+    _increment() {
+        if (this._value >= this.max)
+            return;
+        this._value += this.step;
+    }
+    _decrement() {
+        if (this._value <= this.min)
+            return;
+        this._value -= this.step;
+    }
+    _dispatchValueChanged() {
+        const valueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.valueChanged, {
+            bubbles: true,
+            detail: {
+                value: this._value
+            }
+        });
+        this.dispatchEvent(valueChangeEvent);
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'step', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max', reflect: true }),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "max", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], HInputStepper.prototype, "_value", void 0);
+HInputStepper = __decorate([
+    phoenixCustomElement('h-input-stepper')
+], HInputStepper);
+
+export { HInputStepper };
+//# sourceMappingURL=input_stepper.js.map

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

@@ -1 +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;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/input_stepper/input_stepper_constants.d.ts

@@ -0,0 +1,11 @@
+export declare const INPUT_STEPPER_EVENT_NAMES: {
+    readonly change: "inputStepper.change";
+    readonly valueChanged: "inputStepper.valueChanged";
+};
+export declare const DISPLAY_INPUT_EVENT_NAMES: {
+    readonly change: "displayInput.change";
+};
+export declare const INPUT_STEPPER_ACTION_TYPES: {
+    readonly increment: "increment";
+    readonly decrement: "decrement";
+};

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_constants.js

@@ -0,0 +1,14 @@
+const INPUT_STEPPER_EVENT_NAMES = {
+    change: 'inputStepper.change',
+    valueChanged: 'inputStepper.valueChanged'
+};
+const DISPLAY_INPUT_EVENT_NAMES = {
+    change: 'displayInput.change'
+};
+const INPUT_STEPPER_ACTION_TYPES = {
+    increment: 'increment',
+    decrement: 'decrement'
+};
+
+export { DISPLAY_INPUT_EVENT_NAMES, INPUT_STEPPER_ACTION_TYPES, INPUT_STEPPER_EVENT_NAMES };
+//# sourceMappingURL=input_stepper_constants.js.map

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

@@ -0,0 +1,6 @@
+import { Any } from 'ts-toolbelt';
+import { INPUT_STEPPER_ACTION_TYPES } from './input_stepper_constants';
+export declare type TInputStepperAction = Any.Keys<typeof INPUT_STEPPER_ACTION_TYPES>;
+export declare type TDispatchStepperValue = {
+    value: number;
+};

package/build/esm/packages/phoenix/src/components/form/input_stepper/input_stepper_types.js

@@ -0,0 +1,3 @@
+import 'ts-toolbelt';
+import './input_stepper_constants';
+//# sourceMappingURL=input_stepper_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input_stepper_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/input_stepper/input_stepper_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAA2C,2BAA2B,CAAC"}

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

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TInputStepperAction } from './input_stepper_types';
+export declare class HStepperActionButton extends PhoenixLightLitElement {
+    action: TInputStepperAction;
+    constructor();
+    connectedCallback(): void;
+    private _dispatchChangeEvent;
+}

package/build/esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.js

@@ -0,0 +1,37 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+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 { INPUT_STEPPER_EVENT_NAMES } from './input_stepper_constants.js';
+
+let HStepperActionButton = class HStepperActionButton extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchChangeEvent = () => {
+            const unitaryValueChangeEvent = new CustomEvent(INPUT_STEPPER_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    action: this.action
+                }
+            });
+            this.dispatchEvent(unitaryValueChangeEvent);
+        };
+        new BtnController(this, this._dispatchChangeEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchChangeEvent);
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'action', reflect: true }),
+    __metadata("design:type", String)
+], HStepperActionButton.prototype, "action", void 0);
+HStepperActionButton = __decorate([
+    phoenixCustomElement('h-stepper-action-button'),
+    __metadata("design:paramtypes", [])
+], HStepperActionButton);
+
+export { HStepperActionButton };
+//# sourceMappingURL=stepper_action_button.js.map

package/build/{cjs/packages/phoenix/src/components/form/file_picker/file_picker_constants.js.map → esm/packages/phoenix/src/components/form/input_stepper/stepper_action_button.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;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;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/option/select_option.d.ts

@@ -1,4 +1,5 @@
 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;
@@ -9,7 +10,7 @@ export declare class HOption extends PhoenixLightLitElement {
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    updated(changedProperties: PropertyValues): void;
     private _addSelectedIcon;
     private _removeSelectedIcon;
 }

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

@@ -5,6 +5,7 @@ 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() {
@@ -33,12 +34,10 @@ let HOption = class HOption extends PhoenixLightLitElement {
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        switch (name) {
-            case 'selected':
-                this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
-        }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('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;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;"}

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 : 'Select'}`;
+                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 ` <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;
-    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;
+    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;
     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);
     }
-    toggleOption(option) {
-        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
     }
-    removeOption(optionValue) {
+    remove(optionValue) {
         const options = this.options$.getValue();
         if (!options)
             return;
         this.options$.notify(options.filter((option) => option.value !== optionValue));
     }
-    addOption(option, position) {
+    add(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)]);
     }
-    replaceOptions(options) {
+    replace(options) {
         this.options$.notify(options);
     }
-    deselectOptions() {
+    deselectAll() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    deselectOption(option) {
+    deselect(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    filterOptions(value) {
+    filter(value) {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
@@ -68,16 +68,16 @@ class BaseSelectController {
         filtered.forEach((option) => {
             option.hidden = false;
         });
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    requestOptionsUpdate() {
+    requestUpdate() {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
         this.options$.notify([...selectOptions]);
         this.host.requestUpdate();
     }
-    getSelectOption(selectValue) {
+    getOption(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 {
-    toggleOption(option: SelectOption): void;
-    selectOption(option: SelectOption): void;
-    deselectOption(option: SelectOption): void;
+    toggle(option: SelectOption): void;
+    select(option: SelectOption): void;
+    deselect(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 {
-    toggleOption(option) {
-        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    toggle(option) {
+        option.selected ? this.deselect(option) : this.select(option);
     }
-    selectOption(option) {
+    select(option) {
         option.selected = true;
         this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
-    deselectOption(option) {
+    deselect(option) {
         option.selected = false;
         this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
 }
 

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 {
-    selectOption(option: SelectOption): void;
+    select(option: SelectOption): void;
 }

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

@@ -1,13 +1,13 @@
 import { BaseSelectController } from './base_select_controller.js';
 
 class SelectController extends BaseSelectController {
-    selectOption(option) {
+    select(option) {
         var _a;
         const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         selectedOptions.forEach((option) => (option.selected = false));
         option.selected = true;
         this.selectedOptions$.notify([option]);
-        this.requestOptionsUpdate();
+        this.requestUpdate();
     }
 }