@shoper/phoenix_design_system 1.2.14 → 1.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -70,17 +70,23 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
70
70
  this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
71
71
  }
72
72
  _hideItems(numberOfVisibleColors) {
73
- this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem, index) => {
73
+ var _a;
74
+ this._$colorSwatchesChildren = (_a = document.querySelector(color_swatches_constants.COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
75
+ if (!this._$colorSwatchesChildren)
76
+ return;
77
+ Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
74
78
  if (index > numberOfVisibleColors - 1) {
75
- $colorItem.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
79
+ $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
76
80
  }
77
81
  });
78
82
  }
79
83
  _showAllItemsEvent() {
80
84
  this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, () => {
81
85
  var _a;
82
- this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => {
83
- $colorItem.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
86
+ if (!this._$colorSwatchesChildren)
87
+ return;
88
+ Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
89
+ $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
84
90
  });
85
91
  (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
86
92
  });
@@ -119,8 +125,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
119
125
  render() {
120
126
  return lit.html `
121
127
  ${this.getSlot('default')}
122
- ${this._$colors.length > this.numberOfVisibleColors &&
123
- lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`}
128
+ ${this._$colors.length > this.numberOfVisibleColors
129
+ ? lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
130
+ : lit.nothing}
124
131
  `;
125
132
  }
126
133
  };
@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const colorSwatchesBaseCssClass = 'color-swatches';
6
+ const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
6
7
  const COLOR_ITEM_TAG_NAME = 'h-color-item';
7
8
  const COLOR_SWATCHES_CSS_CLASSES = {
8
9
  colorSwatches: colorSwatchesBaseCssClass,
@@ -18,4 +19,5 @@ exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
18
19
  exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
19
20
  exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
20
21
  exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
22
+ exports.COLOR_SWATCHES_TAG_NAME = COLOR_SWATCHES_TAG_NAME;
21
23
  //# sourceMappingURL=color_swatches_constants.js.map
@@ -1 +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;"}
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;"}
@@ -7,6 +7,7 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
7
7
  selectedColors: HColorItem[];
8
8
  showMoreBtnText: string;
9
9
  private _$colors;
10
+ private _$colorSwatchesChildren;
10
11
  selectColors($colors: HColorItem[] | HColorItem): void;
11
12
  clearAllColors(): void;
12
13
  connectedCallback(): void;
@@ -1,11 +1,11 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { html } from 'lit';
2
+ import { html, nothing } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
4
  import { ArrayUtils } from '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
6
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
7
7
  import 'lit-html';
8
- import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
8
+ import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_TAG_NAME, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
9
9
  import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
10
10
  import { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants.js';
11
11
 
@@ -66,17 +66,23 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
66
66
  this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
67
67
  }
68
68
  _hideItems(numberOfVisibleColors) {
69
- this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem, index) => {
69
+ var _a;
70
+ this._$colorSwatchesChildren = (_a = document.querySelector(COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
71
+ if (!this._$colorSwatchesChildren)
72
+ return;
73
+ Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
70
74
  if (index > numberOfVisibleColors - 1) {
71
- $colorItem.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
75
+ $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
72
76
  }
73
77
  });
74
78
  }
75
79
  _showAllItemsEvent() {
76
80
  this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
77
81
  var _a;
78
- this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => {
79
- $colorItem.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
82
+ if (!this._$colorSwatchesChildren)
83
+ return;
84
+ Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
85
+ $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
80
86
  });
81
87
  (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
82
88
  });
@@ -115,8 +121,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
115
121
  render() {
116
122
  return html `
117
123
  ${this.getSlot('default')}
118
- ${this._$colors.length > this.numberOfVisibleColors &&
119
- html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`}
124
+ ${this._$colors.length > this.numberOfVisibleColors
125
+ ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
126
+ : nothing}
120
127
  `;
121
128
  }
122
129
  };
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,3 +1,4 @@
1
+ export declare const COLOR_SWATCHES_TAG_NAME = "h-color-swatches";
1
2
  export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
2
3
  export declare const COLOR_SWATCHES_CSS_CLASSES: {
3
4
  readonly colorSwatches: "color-swatches";
@@ -1,4 +1,5 @@
1
1
  const colorSwatchesBaseCssClass = 'color-swatches';
2
+ const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
2
3
  const COLOR_ITEM_TAG_NAME = 'h-color-item';
3
4
  const COLOR_SWATCHES_CSS_CLASSES = {
4
5
  colorSwatches: colorSwatchesBaseCssClass,
@@ -10,5 +11,5 @@ const COLOR_SWATCHES_EVENT_NAMES = {
10
11
  };
11
12
  const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
12
13
 
13
- export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
14
+ export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE, COLOR_SWATCHES_TAG_NAME };
14
15
  //# sourceMappingURL=color_swatches_constants.js.map
@@ -1 +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;"}
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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.2.14",
5
+ "version": "1.2.16",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",