@shoper/phoenix_design_system 1.0.0 → 1.0.2

package/build/cjs/packages/phoenix/src/components/tabs/tabs.js

@@ -15,6 +15,7 @@ var tabs_constants = require('./tabs_constants.js');
 exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
+        this.watchChildrenRendered = true;
         this._handleArrowNavigation = ({ key }) => {
             const currentTabIndex = this._getFocusedTabIndex();
             if (currentTabIndex === undefined)
@@ -43,7 +44,7 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
         this._$tabs = [...this.querySelectorAll('h-tab')];
         new keystrokes_controller.KeystrokesController({
             host: this,
-            keySequences: [['ArrowRight'], ['ArrowLeft']],
+            keys: ['ArrowRight', 'ArrowLeft'],
             callback: this._handleArrowNavigation,
             target: this
         });

package/build/cjs/packages/phoenix/src/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/tag/tag.js

@@ -0,0 +1,47 @@
+'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 decorators_js = require('@lit/reactive-element/decorators.js');
+var btn_controller = require('../../controllers/btn_controller.js');
+var tag_constants = require('./tag_constants.js');
+
+exports.HTag = class HTag extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.clickable = false;
+        this.removable = false;
+        this._handleClick = () => {
+            /**
+             * TODO do zrobienia in fiuczer, jak jest tag klikalny i mamy remove, to klik remove działa na button remove
+             * a nie na cały tag
+             */
+            const eventName = this.removable ? tag_constants.TAG_EVENT_NAMES.remove : tag_constants.TAG_EVENT_NAMES.click;
+            this.dispatchEvent(new CustomEvent(eventName));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tag);
+        this.removable = !!this.querySelector('h-tag-remove-button');
+        if (!this.removable && !this.clickable)
+            return;
+        this._setupEvents();
+        this._btnController = new btn_controller.BtnController(this, this._handleClick);
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tagInteractive);
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._handleClick);
+    }
+};
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HTag.prototype, "clickable", void 0);
+exports.HTag = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tag')
+], exports.HTag);
+//# sourceMappingURL=tag.js.map

package/build/cjs/packages/phoenix/src/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/tag/tag_constants.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tagBaseClass = 'tag';
+const TAG_CSS_CLASSES = {
+    tag: tagBaseClass,
+    tagRemoveButton: `${tagBaseClass}__remove-button`,
+    tagInteractive: `${tagBaseClass}_interactive`
+};
+const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
+const TAG_EVENT_NAMES = {
+    click: 'tag.click',
+    remove: 'tag.remove'
+};
+
+exports.TAG_CSS_CLASSES = TAG_CSS_CLASSES;
+exports.TAG_EVENT_NAMES = TAG_EVENT_NAMES;
+exports.TAG_REMOVE_ICON_SLOT_NAME = TAG_REMOVE_ICON_SLOT_NAME;
+//# sourceMappingURL=tag_constants.js.map

package/build/cjs/packages/phoenix/src/components/tag/tag_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;"}

package/build/cjs/packages/phoenix/src/components/tag/tag_remove_button.js

@@ -0,0 +1,29 @@
+'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 litHtml = require('lit-html');
+var tag_constants = require('./tag_constants.js');
+
+exports.HTagRemoveButton = class HTagRemoveButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tagRemoveButton);
+        this._setupAriaAttributes();
+    }
+    _setupAriaAttributes() {
+        this.setAttribute('aria-label', 'remove tag');
+    }
+    render() {
+        return litHtml.html `
+            ${this.hasSlot(tag_constants.TAG_REMOVE_ICON_SLOT_NAME) ? this.getSlot(tag_constants.TAG_REMOVE_ICON_SLOT_NAME) : litHtml.html `<h-icon icon-name="icon-x"></h-icon>`}
+        `;
+    }
+};
+exports.HTagRemoveButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tag-remove-button')
+], exports.HTagRemoveButton);
+//# sourceMappingURL=tag_remove_button.js.map

package/build/cjs/packages/phoenix/src/components/tag/tag_remove_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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/controllers/btn_controller.js

@@ -12,7 +12,7 @@ class BtnController {
         this.host.setAttribute('role', 'button');
         this._keystrokesController = new keystrokes_controller.KeystrokesController({
             host,
-            keySequences: [['enter'], [' ']],
+            keys: ['enter', ' '],
             callback,
             target: host
         });

package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js

@@ -7,7 +7,7 @@ require('lit');
 
 var _KeystrokesController_host, _KeystrokesController_target;
 class KeystrokesController {
-    constructor({ host, keySequences, callback, target }) {
+    constructor({ host, keys, callback, target }) {
         _KeystrokesController_host.set(this, void 0);
         _KeystrokesController_target.set(this, void 0);
         this._buffer = [];
@@ -21,15 +21,51 @@ class KeystrokesController {
             this._bindSavedKeysWithCallback(ev, this._buffer);
         };
         this._bindSavedKeysWithCallback = (ev, savedKeys) => {
-            const areAllKeysPressed = !!this._keySequences.find((keySequence) => {
-                const keysPressedStatuses = keySequence.reduce((keysPressStatuses, keyInSequence) => {
-                    return [...keysPressStatuses, savedKeys.includes(keyInSequence.toLowerCase())];
-                }, []);
-                return keysPressedStatuses.find((keyPressedStatus) => keyPressedStatus === false) === undefined;
-            });
+            if (typeof this._keys === 'string') {
+                this._bindWithOneKey(ev, savedKeys);
+                return;
+            }
+            const areAllKeysPressed = this._isKeySequenceMultiple(this._keys)
+                ? this._areAllKeysPressedInMultipleSequences(this._keys, savedKeys)
+                : this._isOneOfTheKeysPressed(this._keys, savedKeys);
             if (areAllKeysPressed)
                 this._callback(ev);
         };
+        this._bindWithOneKey = (ev, savedKeys) => {
+            if (!savedKeys.includes(this._keys))
+                return;
+            this._callback(ev);
+        };
+        this._isKeySequenceMultiple = (keySequence) => {
+            const firstSequence = keySequence[0];
+            if (typeof firstSequence === 'object')
+                return true;
+            return false;
+        };
+        this._areAllKeysPressedInMultipleSequences = (keySequences, savedKeys) => {
+            return !!keySequences.find((keySequence) => {
+                return this._areAllKeysPressedInSingleSequence(keySequence, savedKeys);
+            });
+        };
+        this._areAllKeysPressedInSingleSequence = (keySequence, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keySequence, savedKeys);
+            if (indexesInSavedKeys.includes(-1))
+                return false;
+            const firstPressedKeyIndex = indexesInSavedKeys[0];
+            const lastPressedKeyIndex = indexesInSavedKeys[indexesInSavedKeys.length - 1];
+            const areKeysPressedSequentially = lastPressedKeyIndex - firstPressedKeyIndex === indexesInSavedKeys.length - 1;
+            return areKeysPressedSequentially;
+        };
+        this._isOneOfTheKeysPressed = (keys, savedKeys) => {
+            const indexesInSavedKeys = this._calculateIndexesInSavedKeys(keys, savedKeys);
+            return typeof indexesInSavedKeys.find((index) => index > -1) === 'number';
+        };
+        this._calculateIndexesInSavedKeys = (keySequence, savedKeys) => {
+            return keySequence.reduce((allIndexes, currentKeyInSequence) => {
+                return [...allIndexes, savedKeys.indexOf(currentKeyInSequence.toLowerCase())];
+            }, []);
+        };
+        // do ogrania jeszcze string czyli zapięcie się na jeden guzik
         this._removeKey = (ev) => {
             const key = ev.key.toLowerCase();
             if (this._buffer.includes(key))
@@ -37,7 +73,7 @@ class KeystrokesController {
         };
         tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
         tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_target, target, "f");
-        this._keySequences = keySequences;
+        this._keys = keys;
         this._callback = callback;
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_host, "f").addController(this);
         tslib_es6.__classPrivateFieldGet(this, _KeystrokesController_target, "f").addEventListener('keydown', this._saveKey);

package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/relative_position_controller/relative_position_controller.js

@@ -11,7 +11,7 @@ var throttle = require('../../../../../external/lodash/throttle.js');
 
 var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [], offset = 0 }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => false, portalElementsNames = [], offset = 0 }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const DIRECTIONS = {
+const VERTICAL_DIRECTIONS = {
     bottomLeft: 'bottom-left',
     bottomRight: 'bottom-right',
     bottomCenter: 'bottom-center',
     topLeft: 'top-left',
     topRight: 'top-right',
-    topCenter: 'top-center',
+    topCenter: 'top-center'
+};
+const HORIZONTAL_DIRECTIONS = {
     rightTop: 'right-top',
     rightCenter: 'right-center',
     rightBottom: 'right-bottom',
@@ -16,6 +18,21 @@ const DIRECTIONS = {
     leftCenter: 'left-center',
     leftBottom: 'left-bottom'
 };
+const CENTER_DIRECTIONS = {
+    centerTop: 'center-top',
+    centerRight: 'center-right',
+    centerBottom: 'center-bottom',
+    centerLeft: 'center-left',
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left'
+};
+const DIRECTIONS = {
+    ...HORIZONTAL_DIRECTIONS,
+    ...VERTICAL_DIRECTIONS,
+    ...CENTER_DIRECTIONS
+};
 const CALCULATOR_DIRECTIONS = {
     bottom: 'bottom',
     top: 'top',
@@ -37,13 +54,16 @@ const RELATIVE_POSITION_CONTROLLER_EVENTS = {
 };
 
 exports.CALCULATOR_DIRECTIONS = CALCULATOR_DIRECTIONS;
+exports.CENTER_DIRECTIONS = CENTER_DIRECTIONS;
 exports.DEFAULT_SCROLL_THROTTLE_WAIT_TIME = DEFAULT_SCROLL_THROTTLE_WAIT_TIME;
 exports.DEFAULT_THROTTLE_WAIT_TIME = DEFAULT_THROTTLE_WAIT_TIME;
 exports.DIRECTIONS = DIRECTIONS;
+exports.HORIZONTAL_DIRECTIONS = HORIZONTAL_DIRECTIONS;
 exports.NON_STATIC_POSITIONS = NON_STATIC_POSITIONS;
 exports.OVERFLOW_AUTO = OVERFLOW_AUTO;
 exports.OVERFLOW_SCROLL = OVERFLOW_SCROLL;
 exports.RELATIVE_POSITION_CONTROLLER_EVENTS = RELATIVE_POSITION_CONTROLLER_EVENTS;
 exports.SHRINK_MODE_BOTTOM_MARGIN = SHRINK_MODE_BOTTOM_MARGIN;
 exports.SHRINK_MODE_MIN_HEIGHT = SHRINK_MODE_MIN_HEIGHT;
+exports.VERTICAL_DIRECTIONS = VERTICAL_DIRECTIONS;
 //# sourceMappingURL=relative_position_controller_constants.js.map

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -12,6 +12,8 @@ class PhoenixLightLitElement extends lit.LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.watchChildrenRendered = false;
+        this.watchChildrenConnected = false;
         this.isWebComponentConnected = false;
         this.isWebComponentRendered = false;
         this._childrenForConnectionToWatch = [];
@@ -54,14 +56,16 @@ class PhoenixLightLitElement extends lit.LitElement {
         this._dispatchLifecycleEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered);
         this.isWebComponentRendered = true;
     }
-    _setupChildrenWatch() {
+    _setupChildrenConnectedWatch() {
         this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
-        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForConnectionToWatch.length)
             this.allChildrenConnected();
+        this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
+    }
+    _setupChildrenRenderWatch() {
+        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForRenderToWatch.length)
             this.allChildrenRendered();
-        this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
         this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
     _getComponentsNamesForConnectionToWatch() {
@@ -74,7 +78,10 @@ class PhoenixLightLitElement extends lit.LitElement {
         super.connectedCallback();
         this._dispatchLifecycleEvent(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         this.isWebComponentConnected = true;
-        this._setupChildrenWatch();
+        if (this.watchChildrenConnected)
+            this._setupChildrenConnectedWatch();
+        if (this.watchChildrenRendered)
+            this._setupChildrenRenderWatch();
     }
     allChildrenConnected() { }
     allChildrenRendered() { }

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/directives/namespaced_attribure_directive.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+require('../../../../external/lit/external/lit-html/lit-html.js');
+var directive = require('../../../../external/lit/external/lit-html/directive.js');
+
+class NamespaceAttributeDirective extends directive.Directive {
+    update(part, [namespace, value]) {
+        const attributePart = part;
+        attributePart.element.setAttributeNS(namespace, attributePart.name, value);
+        return this.render(namespace, value);
+    }
+    render(namespace, value) {
+        return lit.noChange;
+    }
+}
+const namespacedAttribute = directive.directive(NamespaceAttributeDirective);
+
+exports.namespacedAttribute = namespacedAttribute;
+//# sourceMappingURL=namespaced_attribure_directive.js.map

package/build/cjs/packages/phoenix/src/directives/namespaced_attribure_directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,QAAQ,wDAAgE;AACxE,wBAAwB,yDAAiE;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/index.js

@@ -60,6 +60,10 @@ var toggle_button_group = require('./components/groups/toggle_button_group/toggl
 var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
+var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
+var color_item = require('./components/color_swatches/color_item/color_item.js');
+var color_swatches = require('./components/color_swatches/color_swatches.js');
+var show_more = require('./components/color_swatches/show-more/show_more.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
 var tab = require('./components/tabs/tab/tab.js');
@@ -67,6 +71,13 @@ var tab_panel = require('./components/tabs/tab_panel.js');
 var tabs_constants = require('./components/tabs/tabs_constants.js');
 var tabs = require('./components/tabs/tabs.js');
 var scroll_to = require('./components/scroll_to/scroll_to.js');
+var hint = require('./components/messages/hints/hint.js');
+var hint_content = require('./components/messages/hints/hint_content.js');
+var tooltip = require('./components/messages/tooltips/tooltip.js');
+var tooltip_content = require('./components/messages/tooltips/tooltip_content.js');
+var icon = require('./components/icon/icon.js');
+var tag = require('./components/tag/tag.js');
+var tag_remove_button = require('./components/tag/tag_remove_button.js');
 
 
 
@@ -342,6 +353,30 @@ Object.defineProperty(exports, 'HBackdrop', {
 		return backdrop.HBackdrop;
 	}
 });
+Object.defineProperty(exports, 'HColorSwatchesControl', {
+	enumerable: true,
+	get: function () {
+		return color_swatches_control.HColorSwatchesControl;
+	}
+});
+Object.defineProperty(exports, 'HColorItem', {
+	enumerable: true,
+	get: function () {
+		return color_item.HColorItem;
+	}
+});
+Object.defineProperty(exports, 'HColorSwatches', {
+	enumerable: true,
+	get: function () {
+		return color_swatches.HColorSwatches;
+	}
+});
+Object.defineProperty(exports, 'HColorSwatchesShowMore', {
+	enumerable: true,
+	get: function () {
+		return show_more.HColorSwatchesShowMore;
+	}
+});
 exports.VisibilityController = visibility_controller.VisibilityController;
 Object.defineProperty(exports, 'HSlider', {
 	enumerable: true,
@@ -374,4 +409,46 @@ Object.defineProperty(exports, 'HScrollTo', {
 		return scroll_to.HScrollTo;
 	}
 });
+Object.defineProperty(exports, 'HHint', {
+	enumerable: true,
+	get: function () {
+		return hint.HHint;
+	}
+});
+Object.defineProperty(exports, 'HHintContent', {
+	enumerable: true,
+	get: function () {
+		return hint_content.HHintContent;
+	}
+});
+Object.defineProperty(exports, 'HTooltip', {
+	enumerable: true,
+	get: function () {
+		return tooltip.HTooltip;
+	}
+});
+Object.defineProperty(exports, 'HTooltipContent', {
+	enumerable: true,
+	get: function () {
+		return tooltip_content.HTooltipContent;
+	}
+});
+Object.defineProperty(exports, 'HIcon', {
+	enumerable: true,
+	get: function () {
+		return icon.HIcon;
+	}
+});
+Object.defineProperty(exports, 'HTag', {
+	enumerable: true,
+	get: function () {
+		return tag.HTag;
+	}
+});
+Object.defineProperty(exports, 'HTagRemoveButton', {
+	enumerable: true,
+	get: function () {
+		return tag_remove_button.HTagRemoveButton;
+	}
+});
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/external/lit/external/lit-html/directive.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+export { i as Directive, e as directive };
+//# sourceMappingURL=directive.js.map

package/build/esm/external/lit/external/lit-html/directive.js.map

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

package/build/esm/external/lit/external/lit-html/lit-html.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t;const i=window,s=i.trustedTypes,e=s?s.createPolicy("lit-html",{createHTML:t=>t}):void 0,o=`lit$${(Math.random()+"").slice(9)}$`,n="?"+o,l=`<${n}>`,h=document,r=(t="")=>h.createComment(t),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,c=t=>u(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,a=/-->/g,f=/>/g,_=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),m=/'/g,p=/"/g,$=/^(?:script|style|textarea|title)$/i,x=Symbol.for("lit-noChange"),b=Symbol.for("lit-nothing"),T=new WeakMap,A=h.createTreeWalker(h,129,null,!1),E=(t,i)=>{const s=t.length-1,n=[];let h,r=2===i?"<svg>":"",d=v;for(let i=0;i<s;i++){const s=t[i];let e,u,c=-1,g=0;for(;g<s.length&&(d.lastIndex=g,u=d.exec(s),null!==u);)g=d.lastIndex,d===v?"!--"===u[1]?d=a:void 0!==u[1]?d=f:void 0!==u[2]?($.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=_):void 0!==u[3]&&(d=_):d===_?">"===u[0]?(d=null!=h?h:v,c=-1):void 0===u[1]?c=-2:(c=d.lastIndex-u[2].length,e=u[1],d=void 0===u[3]?_:'"'===u[3]?p:m):d===p||d===m?d=_:d===a||d===f?d=v:(d=_,h=void 0);const y=d===_&&t[i+1].startsWith("/>")?" ":"";r+=d===v?s+l:c>=0?(n.push(e),s.slice(0,c)+"$lit$"+s.slice(c)+o+y):s+o+(-2===c?(n.push(void 0),i):y);}const u=r+(t[s]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==e?e.createHTML(u):u,n]};class C{constructor({strings:t,_$litType$:i},e){let l;this.parts=[];let h=0,d=0;const u=t.length-1,c=this.parts,[v,a]=E(t,i);if(this.el=C.createElement(v,e),A.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(o)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(o),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:h,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?k:"@"===i[1]?H:S});}else c.push({type:6,index:h});}for(const i of t)l.removeAttribute(i);}if($.test(l.tagName)){const t=l.textContent.split(o),i=t.length-1;if(i>0){l.textContent=s?s.emptyScript:"";for(let s=0;s<i;s++)l.append(t[s],r()),A.nextNode(),c.push({type:2,index:++h});l.append(t[i],r());}}}else if(8===l.nodeType)if(l.data===n)c.push({type:2,index:h});else {let t=-1;for(;-1!==(t=l.data.indexOf(o,t+1));)c.push({type:7,index:h}),t+=o.length-1;}h++;}}static createElement(t,i){const s=h.createElement("template");return s.innerHTML=t,s}}function P(t,i,s=t,e){var o,n,l,h;if(i===x)return i;let r=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const u=d(i)?void 0:i._$litDirective$;return (null==r?void 0:r.constructor)!==u&&(null===(n=null==r?void 0:r._$AO)||void 0===n||n.call(r,!1),void 0===u?r=void 0:(r=new u(t),r._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Co)&&void 0!==l?l:h._$Co=[])[e]=r:s._$Cl=r),void 0!==r&&(i=P(t,r._$AS(t,i.values),r,e)),i}class V{constructor(t,i){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:h).importNode(s,!0);A.currentNode=o;let n=A.nextNode(),l=0,r=0,d=e[0];for(;void 0!==d;){if(l===d.index){let i;2===d.type?i=new N(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new I(n,this,t)),this.u.push(i),d=e[++r];}l!==(null==d?void 0:d.index)&&(n=A.nextNode(),l++);}return o}p(t){let i=0;for(const s of this.u)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class N{constructor(t,i,s,e){var o;this.type=2,this._$AH=b,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cm=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=P(this,t,i),d(t)?t===b||null==t||""===t?(this._$AH!==b&&this._$AR(),this._$AH=b):t!==this._$AH&&t!==x&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):c(t)?this.k(t):this.g(t);}O(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}g(t){this._$AH!==b&&d(this._$AH)?this._$AA.nextSibling.data=t:this.T(h.createTextNode(t)),this._$AH=t;}$(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=C.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.p(s);else {const t=new V(o,this),i=t.v(this.options);t.p(s),this.T(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new C(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new N(this.O(r()),this.O(r()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cm=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class S{constructor(t,i,s,e,o){this.type=1,this._$AH=b,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=b;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==x,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=P(this,e[s+l],i,l),h===x&&(h=this._$AH[l]),n||(n=!d(h)||h!==this._$AH[l]),h===b?t=b:t!==b&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.j(t);}j(t){t===b?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class M extends S{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===b?void 0:t;}}const R=s?s.emptyScript:"";class k extends S{constructor(){super(...arguments),this.type=4;}j(t){t&&t!==b?this.element.setAttribute(this.name,R):this.element.removeAttribute(this.name);}}class H extends S{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=P(this,t,i,0))&&void 0!==s?s:b)===x)return;const e=this._$AH,o=t===b&&e!==b||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==b&&(e===b||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class I{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t);}}const z=i.litHtmlPolyfillSupport;null==z||z(C,N),(null!==(t=i.litHtmlVersions)&&void 0!==t?t:i.litHtmlVersions=[]).push("2.4.0");
+
+export { x as noChange, b as nothing };
+//# sourceMappingURL=lit-html.js.map

package/build/esm/external/lit/external/lit-html/lit-html.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorItem extends PhoenixLightLitElement {
+    color: string;
+    label?: string;
+    disabled: boolean;
+    selected: boolean;
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    private _syncAriaPressed;
+    private setupEvents;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js

@@ -0,0 +1,68 @@
+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.js';
+import { COLOR_SWATCHES_CSS_CLASSES } from '../color_swatches_constants.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
+
+let HColorItem = class HColorItem extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new Event(COLOR_ITEM_EVENT_NAMES.selected, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this.style.backgroundColor = this.color;
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.disabled && this.removeAttribute('tabindex');
+        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case COLOR_ITEM_SELECTED_ATTRIBUTE: {
+                this._syncAriaPressed();
+                break;
+            }
+        }
+    }
+    _syncAriaPressed() {
+        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
+    }
+    setupEvents() {
+        !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "selected", void 0);
+HColorItem = __decorate([
+    phoenixCustomElement('h-color-item'),
+    __metadata("design:paramtypes", [])
+], HColorItem);
+
+export { HColorItem };
+//# sourceMappingURL=color_item.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const COLOR_ITEM_EVENT_NAMES: {
+    readonly selected: "colorItemSelected";
+};
+export declare const COLOR_ITEM_SELECTED_ATTRIBUTE = "selected";

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js

@@ -0,0 +1,7 @@
+const COLOR_ITEM_EVENT_NAMES = {
+    selected: 'colorItemSelected'
+};
+const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
+
+export { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE };
+//# sourceMappingURL=color_item_constants.js.map