@shoper/phoenix_design_system 1.1.1 → 1.1.2

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
 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');
@@ -15,6 +16,8 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         super();
         this.disabled = false;
         this.selected = false;
+        this.small = false;
+        this.unclickable = false;
         this._dispatchClickedEvent = () => {
             this.dispatchEvent(new Event(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, {
                 bubbles: true
@@ -25,11 +28,12 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
     connectedCallback() {
         super.connectedCallback();
         this.setupEvents();
-        this.style.backgroundColor = this.color;
+        this.style.backgroundColor = this.setBgColor(this.disabled);
         this._syncAriaPressed();
         this.setAttribute('aria-label', this.label ? this.label : this.color);
-        this.disabled && this.removeAttribute('tabindex');
+        this.unclickable && this.removeAttribute('tabindex');
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
+        this.small && this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
     }
     attributeChangedCallback(name, value, newValue) {
         super.attributeChangedCallback(name, value, newValue);
@@ -44,7 +48,10 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
     }
     setupEvents() {
-        !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
+        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
+    }
+    setBgColor(itemIsDisabled) {
+        return itemIsDisabled ? utilities.ColorUtils.hexToRgba(this.color, 0.5) : this.color;
     }
 };
 tslib_es6.__decorate([
@@ -56,13 +63,21 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorItem.prototype, "label", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: true }),
+    decorators.property({ type: Boolean, reflect: true }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorItem.prototype, "disabled", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: true }),
+    decorators.property({ type: Boolean, reflect: true }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorItem.prototype, "selected", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "small", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "unclickable", void 0);
 exports.HColorItem = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-color-item'),
     tslib_es6.__metadata("design:paramtypes", [])

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

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

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

@@ -99,7 +99,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
 };
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Object)
+    tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorSwatches.prototype, "multiple", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Number, attribute: 'number-of-visible-colors' }),

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -2,16 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const baseCssClass = 'color-swatches';
+const colorSwatchesBaseCssClass = 'color-swatches';
+const colorItemBaseCssClass = 'color-item';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
-    colorItem: 'color-item',
-    colorSwatches: baseCssClass,
-    colorSwatchesItem: `${baseCssClass}__color-item`,
-    colorSwatchesItems: `${baseCssClass}__color-items`
+    colorItem: colorItemBaseCssClass,
+    colorItemSmall: `${colorItemBaseCssClass}_small`,
+    colorSwatches: colorSwatchesBaseCssClass,
+    colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    selected: 'colorSwatchesSelected'
+    selected: 'colorSwatchesSelected',
+    markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_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;"}
+{"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;"}

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

@@ -43,7 +43,7 @@ const CALCULATOR_DIRECTIONS = {
 const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
 const OVERFLOW_SCROLL = 'scroll';
 const OVERFLOW_AUTO = 'auto';
-const DEFAULT_THROTTLE_WAIT_TIME = 150;
+const DEFAULT_THROTTLE_WAIT_TIME = 300;
 const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
 const SHRINK_MODE_BOTTOM_MARGIN = 20;
 const SHRINK_MODE_MIN_HEIGHT = 80;

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

@@ -4,11 +4,14 @@ export declare class HColorItem extends PhoenixLightLitElement {
     label?: string;
     disabled: boolean;
     selected: boolean;
+    small: boolean;
+    unclickable: boolean;
     private _btnController;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
     private _syncAriaPressed;
     private setupEvents;
+    private setBgColor;
     private _dispatchClickedEvent;
 }

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

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
+import { ColorUtils } 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';
 import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
@@ -11,6 +12,8 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
         super();
         this.disabled = false;
         this.selected = false;
+        this.small = false;
+        this.unclickable = false;
         this._dispatchClickedEvent = () => {
             this.dispatchEvent(new Event(COLOR_ITEM_EVENT_NAMES.selected, {
                 bubbles: true
@@ -21,11 +24,12 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.setupEvents();
-        this.style.backgroundColor = this.color;
+        this.style.backgroundColor = this.setBgColor(this.disabled);
         this._syncAriaPressed();
         this.setAttribute('aria-label', this.label ? this.label : this.color);
-        this.disabled && this.removeAttribute('tabindex');
+        this.unclickable && this.removeAttribute('tabindex');
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
+        this.small && this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
     }
     attributeChangedCallback(name, value, newValue) {
         super.attributeChangedCallback(name, value, newValue);
@@ -40,7 +44,10 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
         this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
     }
     setupEvents() {
-        !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
+        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
+    }
+    setBgColor(itemIsDisabled) {
+        return itemIsDisabled ? ColorUtils.hexToRgba(this.color, 0.5) : this.color;
     }
 };
 __decorate([
@@ -52,13 +59,21 @@ __decorate([
     __metadata("design:type", String)
 ], HColorItem.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean, attribute: true }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], HColorItem.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean, attribute: true }),
+    property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], HColorItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "small", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "unclickable", void 0);
 HColorItem = __decorate([
     phoenixCustomElement('h-color-item'),
     __metadata("design:paramtypes", [])

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

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

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

@@ -95,7 +95,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
 };
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HColorSwatches.prototype, "multiple", void 0);
 __decorate([
     property({ type: Number, attribute: 'number-of-visible-colors' }),

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

@@ -1,11 +1,12 @@
 export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
 export declare const COLOR_SWATCHES_CSS_CLASSES: {
     readonly colorItem: "color-item";
+    readonly colorItemSmall: "color-item_small";
     readonly colorSwatches: "color-swatches";
     readonly colorSwatchesItem: "color-swatches__color-item";
-    readonly colorSwatchesItems: "color-swatches__color-items";
 };
 export declare const COLOR_SWATCHES_EVENT_NAMES: {
     readonly selected: "colorSwatchesSelected";
+    readonly markDisabledItems: "markDisabledItems";
 };
 export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -1,13 +1,15 @@
-const baseCssClass = 'color-swatches';
+const colorSwatchesBaseCssClass = 'color-swatches';
+const colorItemBaseCssClass = 'color-item';
 const COLOR_ITEM_TAG_NAME = 'h-color-item';
 const COLOR_SWATCHES_CSS_CLASSES = {
-    colorItem: 'color-item',
-    colorSwatches: baseCssClass,
-    colorSwatchesItem: `${baseCssClass}__color-item`,
-    colorSwatchesItems: `${baseCssClass}__color-items`
+    colorItem: colorItemBaseCssClass,
+    colorItemSmall: `${colorItemBaseCssClass}_small`,
+    colorSwatches: colorSwatchesBaseCssClass,
+    colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    selected: 'colorSwatchesSelected'
+    selected: 'colorSwatchesSelected',
+    markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 

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

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts

@@ -56,7 +56,7 @@ export declare const CALCULATOR_DIRECTIONS: {
 export declare const NON_STATIC_POSITIONS: string[];
 export declare const OVERFLOW_SCROLL = "scroll";
 export declare const OVERFLOW_AUTO = "auto";
-export declare const DEFAULT_THROTTLE_WAIT_TIME = 150;
+export declare const DEFAULT_THROTTLE_WAIT_TIME = 300;
 export declare const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
 export declare const SHRINK_MODE_BOTTOM_MARGIN = 20;
 export declare const SHRINK_MODE_MIN_HEIGHT = 80;

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

@@ -39,7 +39,7 @@ const CALCULATOR_DIRECTIONS = {
 const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
 const OVERFLOW_SCROLL = 'scroll';
 const OVERFLOW_AUTO = 'auto';
-const DEFAULT_THROTTLE_WAIT_TIME = 150;
+const DEFAULT_THROTTLE_WAIT_TIME = 300;
 const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
 const SHRINK_MODE_BOTTOM_MARGIN = 20;
 const SHRINK_MODE_MIN_HEIGHT = 80;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.1.0",
+    "@dreamcommerce/utilities": "^1.2.0",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",