@shoper/phoenix_design_system 1.3.0 → 1.3.2

package/build/cjs/packages/phoenix/src/components/form/input/input_constants.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseInputControlClass = 'input';
+const INPUT_CONTROL_SIZES = {
+    large: 'large',
+    small: 'small'
+};
+const INPUT_CONTROL_TYPES = {
+    text: 'text',
+    radio: 'radio',
+    checkbox: 'checkbox',
+    number: 'number',
+    range: 'range',
+    select: 'select',
+    multiSelect: 'multiSelect',
+    hidden: 'hidden',
+    email: 'email',
+    tel: 'tel',
+    password: 'password',
+    file: 'file'
+};
+const INPUT_CONTROL_CSS_CLASSES = {
+    input: baseInputControlClass,
+    inputIcon: `${baseInputControlClass}__icon`,
+    inputUnit: `${baseInputControlClass}__unit`,
+    inputControl: `${baseInputControlClass}__control`,
+    inputDisabled: `${baseInputControlClass}_disabled`,
+    inputError: `${baseInputControlClass}_error`,
+    [INPUT_CONTROL_SIZES.small]: `${baseInputControlClass}_s`,
+    [INPUT_CONTROL_SIZES.large]: `${baseInputControlClass}_l`
+};
+const INPUT_CONTROL_EVENTS = {
+    change: 'change',
+    input: 'input'
+};
+const INPUT_PROPS_TO_SYNC = {
+    placeholder: 'placeholder'
+};
+
+exports.INPUT_CONTROL_CSS_CLASSES = INPUT_CONTROL_CSS_CLASSES;
+exports.INPUT_CONTROL_EVENTS = INPUT_CONTROL_EVENTS;
+exports.INPUT_CONTROL_SIZES = INPUT_CONTROL_SIZES;
+exports.INPUT_CONTROL_TYPES = INPUT_CONTROL_TYPES;
+exports.INPUT_PROPS_TO_SYNC = INPUT_PROPS_TO_SYNC;
+//# sourceMappingURL=input_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/input/input_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var input_constants = require('./input_constants.js');
+var ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+
+exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.type = input_constants.INPUT_CONTROL_TYPES.text;
+        this._handleChangeEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(input_constants.INPUT_CONTROL_EVENTS.change, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        this._handleInputEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(input_constants.INPUT_CONTROL_EVENTS.input, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.inputControl);
+    }
+    render() {
+        super.render();
+        return lit.html `
+            <input
+                id="${ifDefined_js.ifDefined(this.controlId)}"
+                name="${ifDefined_js.ifDefined(this.controlName)}"
+                type="${ifDefined_js.ifDefined(this.type)}"
+                value="${ifDefined_js.ifDefined(this.value)}"
+                placeholder="${ifDefined_js.ifDefined(this.placeholder)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                ?readonly="${this.readonly}"
+                ?hidden="${this.hidden}"
+                @change="${this._handleChangeEvent}"
+                @input="${this._handleInputEvent}"
+            />
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputControl.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputControl.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputControl.prototype, "type", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HInputControl.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HInputControl.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HInputControl.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HInputControl.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputControl.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputControl.prototype, "placeholder", void 0);
+exports.HInputControl = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-input-control'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HInputControl);
+//# sourceMappingURL=input_control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}

package/build/cjs/packages/phoenix/src/components/form/input/input_icon.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var icon_constants = require('../../icon/icon_constants.js');
+var input_constants = require('./input_constants.js');
+
+exports.HInputIcon = class HInputIcon extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.inputIcon, icon_constants.ICON_CSS_CLASSES.icon);
+    }
+    render() {
+        super.render();
+        return lit.html ` <h-icon icon-name=${this.iconName}></h-icon> `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputIcon.prototype, "iconName", void 0);
+exports.HInputIcon = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-input-icon')
+], exports.HInputIcon);
+//# sourceMappingURL=input_icon.js.map

package/build/cjs/packages/phoenix/src/components/form/input/input_icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;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/cjs/packages/phoenix/src/components/form/input/input_unit.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var input_constants = require('./input_constants.js');
+
+exports.HInputUnit = class HInputUnit extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.inputUnit);
+    }
+};
+exports.HInputUnit = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-input-unit')
+], exports.HInputUnit);
+//# sourceMappingURL=input_unit.js.map

package/build/cjs/packages/phoenix/src/components/form/input/input_unit.js.map

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

package/build/cjs/packages/phoenix/src/components/form/input_stepper/button_stepper.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HButtonStepper = class HButtonStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._allowedEvents = {
+            increment: input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment,
+            decrement: input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement
+        };
+        this.type = '';
+        this._dispatchStepperEvent = (ev) => {
+            ev.stopImmediatePropagation();
+            if (!this.type)
+                throw new Error(`The type ${this.type} cannot be empty. Allowed values: 'increment', 'decrement'`);
+            if (!this._allowedEvents[this.type])
+                throw new Error(`The type ${this.type} is not allowed. Allowed values: 'increment', 'decrement'`);
+            this.dispatchEvent(new CustomEvent(this._allowedEvents[this.type], {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchStepperEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.click, this._dispatchStepperEvent);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HButtonStepper.prototype, "type", void 0);
+exports.HButtonStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.button),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HButtonStepper);
+//# sourceMappingURL=button_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/button_stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}

package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_stepper.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var observer = require('../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
+var ref_js = require('lit-html/directives/ref.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HDisplayStepper = class HDisplayStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._controlId = '';
+        this._inputRef = ref_js.createRef();
+        this._dispatchToggleEvent = (ev) => {
+            const $input = ev.target;
+            const digitalNumberRegExp = /^-?[\d]*\.?[\d]*$/;
+            const value = digitalNumberRegExp.test($input.value) ? $input.value : '0';
+            this.dispatchEvent(new CustomEvent(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, {
+                bubbles: true,
+                detail: {
+                    value: Number(value)
+                }
+            }));
+        };
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._setupProperties();
+        this._stepperContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._value$ = await this._stepperContextConsumer.consumeAsync(input_stepper_constants.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES.stepperContext);
+        this._valueObserver = new observer.Observer((value) => {
+            if (this._inputRef.value)
+                this._inputRef.value.value = String(value);
+        });
+        this._value$.subscribe(this._valueObserver);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+        this._controlId && this._inputRef.value.setAttribute('id', this._controlId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._value$.unsubscribe(this._valueObserver);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_EVENT_NAMES.change, this._dispatchToggleEvent);
+    }
+    _setupProperties() {
+        const $closestInputStepper = this.closest(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.control);
+        if (!$closestInputStepper)
+            return;
+        this._controlId = $closestInputStepper.controlId;
+    }
+    _wholeTextSelection(ev) {
+        const $input = ev.target;
+        $input.select();
+    }
+    _preventLettersAndCommaSeparatorToBeAdded(ev) {
+        const digitsDotAndBackspaceAllowedRegExp = /^[\d\b.-]$/i;
+        const isAllowed = digitsDotAndBackspaceAllowedRegExp.test(ev.key);
+        if (!isAllowed && !['Enter', 'Backspace', 'ArrowRight', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+        }
+    }
+    render() {
+        return lit.html `<input
+            ${ref_js.ref(this._inputRef)}
+            class="${input_stepper_constants.INPUT_STEPPER_CLASS_NAMES.displayInput}"
+            type="text"
+            @keydown=${this._preventLettersAndCommaSeparatorToBeAdded}
+            @focus="${this._wholeTextSelection}"
+            @change="${this._dispatchToggleEvent}"
+            inputmode="numeric"
+        />`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDisplayStepper.prototype, "_controlId", void 0);
+exports.HDisplayStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.input)
+], exports.HDisplayStepper);
+//# sourceMappingURL=display_stepper.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/display_stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}

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

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../../core/context/context_provider_controller.js');
+var input_stepper_constants = require('./input_stepper_constants.js');
+
+exports.HInputStepper = class HInputStepper extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.controlId = '';
+        this.allowedFractionDigits = null;
+        this.value = 0;
+        this.min = -Infinity;
+        this.max = Infinity;
+        this.step = 1;
+        this.increment = () => {
+            if (this.value === this.max) {
+                this.value = this.max;
+                return;
+            }
+            this.value += this.step;
+            this._dispatchChangedValue(this.value);
+        };
+        this.decrement = () => {
+            if (this.value === this.min) {
+                this.value = this.min;
+                return;
+            }
+            this.value -= this.step;
+            this._dispatchChangedValue(this.value);
+        };
+        this.changeValue = (ev) => {
+            const value = ev.detail.value;
+            if (value >= this.max) {
+                this.value = this.max;
+            }
+            else if (value <= this.min) {
+                this.value = this.min;
+            }
+            else {
+                this.value = value;
+            }
+            this._stepperState.notify(this.value);
+            this._dispatchChangedValue(this.value);
+        };
+        this._dispatchChangedValue = (value) => {
+            this.dispatchEvent(new CustomEvent(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.valueChanged, {
+                bubbles: true,
+                detail: {
+                    value
+                }
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.addEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, this.changeValue);
+        this._stepperState = new behavior_subject.BehaviorSubject(this.value);
+        this._stepperContext = new context_provider_controller.ContextProviderController(this);
+        this._stepperContext.provide(input_stepper_constants.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES.stepperContext, this._stepperState);
+        this._checkSetupAndSetEdges();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.increment, this.increment);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.decrement, this.decrement);
+        this.removeEventListener(input_stepper_constants.INPUT_STEPPER_CUSTOM_EVENT_NAMES.changeValue, this.changeValue);
+    }
+    _checkSetupAndSetEdges() {
+        if (this.value < this.min)
+            this.value = this.min;
+        if (this.value > this.max)
+            this.value = this.max;
+        this._stepperState.notify(this.value);
+    }
+    _calculateFractionDigitsByStepSize(step) {
+        let zerosCount = 0;
+        const stepString = String(step);
+        if (stepString.includes('.'))
+            zerosCount = stepString.split('.')[1].length;
+        return zerosCount;
+    }
+    _roundToFractionDigits(fractionsDigits, number) {
+        const multiplier = Math.pow(10, fractionsDigits);
+        return Math.round(Number(number) * multiplier) / multiplier;
+    }
+    _outsideRangeEdges(number) {
+        return number > this.max || number < this.min;
+    }
+    updated() {
+        var _a;
+        if (this._outsideRangeEdges(this.value))
+            return;
+        const digits = (_a = this.allowedFractionDigits) !== null && _a !== void 0 ? _a : this._calculateFractionDigitsByStepSize(this.step);
+        this.value = this._roundToFractionDigits(digits, this.value);
+        this._stepperState.notify(this.value);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HInputStepper.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'allowed-number-of-fraction-digits' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HInputStepper.prototype, "allowedFractionDigits", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "min", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "max", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, reflect: true }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HInputStepper.prototype, "step", void 0);
+exports.HInputStepper = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(input_stepper_constants.INPUT_STEPPER_COMPONENT_NAMES.control)
+], exports.HInputStepper);
+//# sourceMappingURL=input_stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;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;"}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const INPUT_STEPPER_EVENT_NAMES = {
+    click: 'click',
+    change: 'change'
+};
+const INPUT_STEPPER_CUSTOM_EVENT_NAMES = {
+    valueChanged: 'inputStepper.valueChanged',
+    changeValue: 'inputStepper.changeValue',
+    increment: 'inputStepper.increment',
+    decrement: 'inputStepper.decrement'
+};
+const INPUT_STEPPER_CLASS_NAMES = {
+    displayInput: 'input-stepper__value_input'
+};
+const INPUT_STEPPER_COMPONENT_NAMES = {
+    control: 'h-input-stepper',
+    input: 'h-display-stepper',
+    button: 'h-button-stepper'
+};
+const INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES = {
+    stepperContext: 'stepperContext'
+};
+
+exports.INPUT_STEPPER_CLASS_NAMES = INPUT_STEPPER_CLASS_NAMES;
+exports.INPUT_STEPPER_COMPONENT_NAMES = INPUT_STEPPER_COMPONENT_NAMES;
+exports.INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES = INPUT_STEPPER_CONTEXTS_VARIABLE_NAMES;
+exports.INPUT_STEPPER_CUSTOM_EVENT_NAMES = INPUT_STEPPER_CUSTOM_EVENT_NAMES;
+exports.INPUT_STEPPER_EVENT_NAMES = INPUT_STEPPER_EVENT_NAMES;
+//# sourceMappingURL=input_stepper_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/input_stepper/input_stepper_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;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/label/label_constants.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const LABEL_CSS_CLASSES = {
+    label: 'label'
+};
+
+exports.LABEL_CSS_CLASSES = LABEL_CSS_CLASSES;
+//# sourceMappingURL=label_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/label/label_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;"}

package/build/cjs/packages/phoenix/src/components/form/radio/radio.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var index = require('../../../../external/classnames/index.js');
+var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
+var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var checkbox_constants = require('../checkbox/checkbox_constants.js');
+var radio_constants = require('./radio_constants.js');
+
+exports.HRadio = class HRadio extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        new control_props_sync_provider_controller.ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(control_props_sync_controller_constants.BASE_FORM_CONTROL_PROPS), checkbox_constants.CHECKBOX_PROPS_TO_SYNC.checked]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(radio_constants.RADIO_CONTROL_CSS_CLASSES.radio);
+        const cssClasses = index['default']({
+            [radio_constants.RADIO_CONTROL_CSS_CLASSES.radioDisabled]: this.disabled,
+            [radio_constants.RADIO_CONTROL_CSS_CLASSES.radioReadonly]: this.readonly,
+            [radio_constants.RADIO_CONTROL_CSS_CLASSES.radioError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadio.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadio.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "checked", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadio.prototype, "error", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadio.prototype, "value", void 0);
+exports.HRadio = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-radio'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HRadio);
+//# sourceMappingURL=radio.js.map

package/build/cjs/packages/phoenix/src/components/form/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/radio/radio_constants.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseRadioControlClass = 'radio';
+const baseRadioBoxControlClass = 'radio-box';
+const RADIO_CONTROL_CSS_CLASSES = {
+    radio: baseRadioControlClass,
+    radioError: `${baseRadioControlClass}_error`,
+    radioDisabled: `${baseRadioControlClass}_disabled`,
+    radioReadonly: `${baseRadioControlClass}_readonly`,
+    radioContent: `${baseRadioControlClass}__content`,
+    radioDescription: `${baseRadioControlClass}__description`,
+    radioControl: `${baseRadioControlClass}__control`,
+    radioInput: `${baseRadioControlClass}__input`,
+    radioLabel: `${baseRadioControlClass}__label`,
+    radioBox: baseRadioBoxControlClass,
+    radioBoxDisabled: `${baseRadioBoxControlClass}_disabled`
+};
+const RADIO_CONTROL_VARIANTS = {
+    classic: 'classic',
+    box: 'box'
+};
+const RADIO_SLOTS = {
+    label: 'label',
+    description: 'description'
+};
+const RADIO_CONTROL_EVENTS = {
+    change: 'change'
+};
+
+exports.RADIO_CONTROL_CSS_CLASSES = RADIO_CONTROL_CSS_CLASSES;
+exports.RADIO_CONTROL_EVENTS = RADIO_CONTROL_EVENTS;
+exports.RADIO_CONTROL_VARIANTS = RADIO_CONTROL_VARIANTS;
+exports.RADIO_SLOTS = RADIO_SLOTS;
+//# sourceMappingURL=radio_constants.js.map