@shoper/phoenix_design_system 1.17.8 → 1.17.10-0

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.
Files changed (38) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +27 -13
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +1 -3
  4. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/search/search.js +67 -45
  6. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/textarea/textarea_control.js +1 -1
  8. package/build/cjs/packages/phoenix/src/components/show-more/show_more.js +117 -0
  9. package/build/cjs/packages/phoenix/src/components/show-more/show_more.js.map +1 -0
  10. package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js +29 -0
  11. package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map +1 -0
  12. package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js +17 -0
  13. package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js.map +1 -0
  14. package/build/cjs/packages/phoenix/src/index.js +14 -0
  15. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +2 -1
  17. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +28 -14
  18. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts +0 -1
  20. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +2 -3
  21. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  22. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +2 -0
  23. package/build/esm/packages/phoenix/src/components/form/search/search.js +67 -45
  24. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  25. package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.js +1 -1
  26. package/build/esm/packages/phoenix/src/components/show-more/show_more.d.ts +21 -0
  27. package/build/esm/packages/phoenix/src/components/show-more/show_more.js +115 -0
  28. package/build/esm/packages/phoenix/src/components/show-more/show_more.js.map +1 -0
  29. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.d.ts +7 -0
  30. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js +27 -0
  31. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js.map +1 -0
  32. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.d.ts +8 -0
  33. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js +11 -0
  34. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js.map +1 -0
  35. package/build/esm/packages/phoenix/src/index.d.ts +2 -0
  36. package/build/esm/packages/phoenix/src/index.js +2 -0
  37. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  38. package/package.json +4 -4
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -12,11 +12,13 @@ var keystrokes_controller = require('../../controllers/keystrokes_controller/key
12
12
  require('lit-html');
13
13
  var color_swatches_constants = require('./color_swatches_constants.js');
14
14
  var color_item_constants = require('./color_item/color_item_constants.js');
15
+ var color_item = require('./color_item/color_item.js');
15
16
 
16
17
  exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.PhoenixLightLitElement {
17
18
  constructor() {
18
19
  super(...arguments);
19
20
  this.multiple = false;
21
+ this.devVisualSubcategories = false;
20
22
  this.selectedColors = [];
21
23
  this.showMoreBtnText = 'Pokaż wszystkie kolory';
22
24
  this._setupEvents = () => {
@@ -140,8 +142,10 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
140
142
  this._$colorSwatchesChildren = [...this.children];
141
143
  this._setupEvents();
142
144
  this._addCssClasses();
143
- this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
144
- this._showAllItemsEvent();
145
+ if (!this.devVisualSubcategories) {
146
+ this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
147
+ this._showAllItemsEvent();
148
+ }
145
149
  this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
146
150
  this._$colors = [...this.querySelectorAll('h-color-item')];
147
151
  }
@@ -154,7 +158,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
154
158
  return;
155
159
  this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
156
160
  if (index > numberOfVisibleColors - 1) {
157
- $colorSwatchesChild.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
161
+ $colorSwatchesChild.setAttribute('hidden', '');
158
162
  }
159
163
  });
160
164
  }
@@ -164,9 +168,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
164
168
  if (!this._$colorSwatchesChildren)
165
169
  return;
166
170
  this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
167
- $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
171
+ $colorSwatchesChild.removeAttribute('hidden');
168
172
  });
169
- (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
173
+ (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
170
174
  });
171
175
  }
172
176
  _handleChangeToNextColorItem({ target }) {
@@ -180,7 +184,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
180
184
  $nextColorItem = $nextFocusableElement;
181
185
  }
182
186
  $nextColorItem.focus();
183
- this._handleColorChange($nextColorItem);
187
+ if ($nextColorItem instanceof color_item.HColorItem) {
188
+ this._handleColorChange($nextColorItem);
189
+ }
184
190
  }
185
191
  _handleChangeToPreviousColorItem({ target }) {
186
192
  const $colorItem = target;
@@ -193,7 +199,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
193
199
  $previousColorItem = $previousFocusableElement;
194
200
  }
195
201
  $previousColorItem.focus();
196
- this._handleColorChange($previousColorItem);
202
+ if ($previousColorItem instanceof color_item.HColorItem) {
203
+ this._handleColorChange($previousColorItem);
204
+ }
197
205
  }
198
206
  _toggleColorItem($colorItem) {
199
207
  this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
@@ -231,18 +239,24 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
231
239
  document.body.removeEventListener('keydown', this._focusOnSelectedColor);
232
240
  }
233
241
  render() {
234
- return lit.html `
235
- ${this.getSlot('default')}
236
- ${this._$colors.length > this.numberOfVisibleColors
237
- ? lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
238
- : lit.nothing}
239
- `;
242
+ if (!this.devVisualSubcategories) {
243
+ return lit.html `
244
+ ${this.getSlot('default')}
245
+ ${this._$colors.length > this.numberOfVisibleColors
246
+ ? lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
247
+ : lit.nothing}
248
+ `;
249
+ }
240
250
  }
241
251
  };
242
252
  tslib_es6.__decorate([
243
253
  decorators.property({ type: Boolean }),
244
254
  tslib_es6.__metadata("design:type", Boolean)
245
255
  ], exports.HColorSwatches.prototype, "multiple", void 0);
256
+ tslib_es6.__decorate([
257
+ decorators.property({ type: Boolean, attribute: 'dev-visual-subcategories' }),
258
+ tslib_es6.__metadata("design:type", Boolean)
259
+ ], exports.HColorSwatches.prototype, "devVisualSubcategories", void 0);
246
260
  tslib_es6.__decorate([
247
261
  decorators.property({ type: Number, attribute: 'number-of-visible-colors' }),
248
262
  tslib_es6.__metadata("design:type", Number)
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.js CHANGED
@@ -12,11 +12,9 @@ const COLOR_SWATCHES_EVENT_NAMES = {
12
12
  change: 'change',
13
13
  markDisabledItems: 'markDisabledItems',
14
14
  showMore: 'showMore'
15
- };
16
- const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
15
+ };
17
16
 
18
17
  exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
19
18
  exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
20
19
  exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
21
- exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
22
20
  //# sourceMappingURL=color_swatches_constants.js.map
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map CHANGED
@@ -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;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;"}
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -293,6 +293,52 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
293
293
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
294
294
  }
295
295
  };
296
+ this._renderSearch = () => {
297
+ return lit.html `
298
+ ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
299
+ <div
300
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
301
+ id="${this._searchContentContainerId}"
302
+ role="${this._containerRole}"
303
+ >
304
+ ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
305
+ ${ref_js.ref(this._searchMessageRef)}
306
+ .history="${this._historyLimitedContent}"
307
+ .results="${this._searchResults}"
308
+ .translations="${this._translations}"
309
+ search-phrase="${this._searchPhrase}"
310
+ module-instance-id="${this.moduleInstanceId}"
311
+ ></h-search-message>`)}
312
+ ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
313
+ ${ref_js.ref(this._searchHistoryRef)}
314
+ .history="${this._historyLimitedContent}"
315
+ .translations="${this._translations}"
316
+ active-item-id="${this._activeItemId}"
317
+ search-id="${this._id}"
318
+ module-instance-id="${this.moduleInstanceId}"
319
+ ></h-search-history>`)}
320
+ ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
321
+ ${ref_js.ref(this._searchResultsRef)}
322
+ .results="${this._searchResults}"
323
+ search-phrase="${this._searchPhrase}"
324
+ .settings="${this.settings}"
325
+ locale="${this.locale}"
326
+ view="${this.view}"
327
+ .translations="${this._translations}"
328
+ active-item-id="${this._activeItemId}"
329
+ search-id="${this._id}"
330
+ module-instance-id="${this.moduleInstanceId}"
331
+ ></h-search-results>`)}
332
+ </div>
333
+ `, () => lit.html `
334
+ <div
335
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
336
+ id="${this._searchContentContainerId}"
337
+ role="${this._containerRole}"
338
+ hidden
339
+ ></div>`)}
340
+ `;
341
+ };
296
342
  }
297
343
  async connectedCallback() {
298
344
  super.connectedCallback();
@@ -534,7 +580,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
534
580
  }
535
581
  render() {
536
582
  return lit.html `
537
- <div
583
+ ${when.when(this.shouldRenderAsPopup, () => lit.html `<div`, () => lit.html `<h-sheet name="search-sheet"`)}
538
584
  class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon"
539
585
  tabindex="0"
540
586
  @click=${this._handleOpenSearch}
@@ -549,51 +595,23 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
549
595
  <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
550
596
  ${this._translations.search}
551
597
  </div>
552
- </div>
598
+ ${when.when(this.shouldRenderAsPopup, () => lit.html `</div>`, () => lit.html `</h-sheet>`)}
553
599
 
554
- ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
555
- <div
556
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
557
- id="${this._searchContentContainerId}"
558
- role="${this._containerRole}"
559
- >
560
- ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
561
- ${ref_js.ref(this._searchMessageRef)}
562
- .history="${this._historyLimitedContent}"
563
- .results="${this._searchResults}"
564
- .translations="${this._translations}"
565
- search-phrase="${this._searchPhrase}"
566
- module-instance-id="${this.moduleInstanceId}"
567
- ></h-search-message>`)}
568
- ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
569
- ${ref_js.ref(this._searchHistoryRef)}
570
- .history="${this._historyLimitedContent}"
571
- .translations="${this._translations}"
572
- active-item-id="${this._activeItemId}"
573
- search-id="${this._id}"
574
- module-instance-id="${this.moduleInstanceId}"
575
- ></h-search-history>`)}
576
- ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
577
- ${ref_js.ref(this._searchResultsRef)}
578
- .results="${this._searchResults}"
579
- search-phrase="${this._searchPhrase}"
580
- .settings="${this.settings}"
581
- locale="${this.locale}"
582
- view="${this.view}"
583
- .translations="${this._translations}"
584
- active-item-id="${this._activeItemId}"
585
- search-id="${this._id}"
586
- module-instance-id="${this.moduleInstanceId}"
587
- ></h-search-results>`)}
588
- </div>
589
- `, () => lit.html `
590
- <div
591
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
592
- id="${this._searchContentContainerId}"
593
- role="${this._containerRole}"
594
- hidden
595
- ></div>`)}
596
- `;
600
+ ${when.when(this.shouldRenderAsPopup, () => lit.html `<h-sheet id="search-sheet" hidden>
601
+ <h-sheet-header>
602
+ <h-sheet-close class="btn btn_icon">
603
+ <span class="sr-only">To translate - Close window</span>
604
+ <h-icon
605
+ icon-name="icon-x"
606
+ clickable=${true}
607
+ size=${icon_constants.ICONS_SIZES.l}
608
+ css-classes="${search_constants.SEARCH_CLASS_NAMES.historyRemoveIcon}"
609
+ aria-hidden="true"
610
+ ></h-icon>
611
+ </h-sheet-close>
612
+ </h-sheet-header>
613
+ <h-sheet-body>${this._renderSearch}</h-sheet-body>
614
+ </h-sheet>`, this._renderSearch)}`;
597
615
  }
598
616
  };
599
617
  tslib_es6.__decorate([
@@ -608,6 +626,10 @@ tslib_es6.__decorate([
608
626
  decorators.property({ type: String }),
609
627
  tslib_es6.__metadata("design:type", String)
610
628
  ], exports.HSearch.prototype, "locale", void 0);
629
+ tslib_es6.__decorate([
630
+ decorators.property({ type: Boolean, attribute: 'popup' }),
631
+ tslib_es6.__metadata("design:type", String)
632
+ ], exports.HSearch.prototype, "shouldRenderAsPopup", void 0);
611
633
  tslib_es6.__decorate([
612
634
  decorators.property({ type: String, attribute: 'module-instance-id' }),
613
635
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +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,iBAAiB,wDAA4D;AAC7E,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/textarea/textarea_control.js CHANGED
@@ -35,8 +35,8 @@ exports.HTextareaControl = class HTextareaControl extends phoenix_light_lit_elem
35
35
  id="${ifDefined_js.ifDefined(this.controlId)}"
36
36
  name="${ifDefined_js.ifDefined(this.controlName)}"
37
37
  placeholder="${ifDefined_js.ifDefined(this.placeholder)}"
38
+ aria-required="${this.required ? 'true' : 'false'}"
38
39
  ?disabled="${this.disabled}"
39
- ?required="${this.required}"
40
40
  ?readonly="${this.readonly}"
41
41
  ?hidden="${this.hidden}"
42
42
  @input="${this._handleInputEvent}"
package/build/cjs/packages/phoenix/src/components/show-more/show_more.js ADDED
@@ -0,0 +1,117 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ require('lit');
7
+ var decorators = require('lit/decorators');
8
+ var utilities = require('@dreamcommerce/utilities');
9
+ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
+ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
11
+ var global_constants = require('../../global_constants.js');
12
+ var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
13
+ var throttle = require('../../../../../external/lodash/throttle.js');
14
+ var show_more_constants = require('./show_more_constants.js');
15
+
16
+ exports.HShowMore = class HShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
17
+ constructor() {
18
+ super(...arguments);
19
+ this._$showMoreButton = null;
20
+ this._showMore = () => {
21
+ this._showAllItems();
22
+ this._hideButton();
23
+ this._focusNextItem();
24
+ };
25
+ this._onResize = throttle['default'](() => {
26
+ if (window.innerWidth > global_constants.BREAKPOINTS.xs) {
27
+ this._showAllItems();
28
+ this._hideButton();
29
+ window.removeEventListener('resize', this._onResize);
30
+ }
31
+ }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
32
+ }
33
+ connectedCallback() {
34
+ super.connectedCallback();
35
+ this._$showMoreButton = this.querySelector('h-show-more-button');
36
+ this._$items = [...this.querySelectorAll(`[${show_more_constants.SHOW_MORE_ITEM_ATTRIBUTE}]`)];
37
+ this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMore);
38
+ this._updateComponentVisibility();
39
+ this._setupListeners();
40
+ }
41
+ updated(_changedProperties) {
42
+ super.updated(_changedProperties);
43
+ if (_changedProperties.has('showAll')) {
44
+ this._showAllItems();
45
+ this._hideButton();
46
+ }
47
+ }
48
+ disconnectedCallback() {
49
+ super.disconnectedCallback();
50
+ window.removeEventListener('resize', this._onResize);
51
+ }
52
+ _updateComponentVisibility() {
53
+ const hasOverflowItems = this._$items.length > this.count;
54
+ const isMobileView = window.innerWidth <= global_constants.BREAKPOINTS.xs;
55
+ const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
56
+ if (shouldBeActive) {
57
+ this._hideExcessItems();
58
+ this._showButton();
59
+ }
60
+ else {
61
+ this._hideButton();
62
+ }
63
+ }
64
+ _hideExcessItems() {
65
+ this._$items.forEach(($item, index) => {
66
+ $item.removeAttribute('hidden');
67
+ if (index >= this.count)
68
+ $item.setAttribute('hidden', '');
69
+ });
70
+ }
71
+ _showAllItems() {
72
+ this._$items.forEach(($item) => $item.removeAttribute('hidden'));
73
+ }
74
+ _hideButton() {
75
+ var _a;
76
+ (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
77
+ }
78
+ _showButton() {
79
+ var _a;
80
+ (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
81
+ }
82
+ _setupListeners() {
83
+ this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
84
+ if (this.mobileOnly && window.innerWidth <= global_constants.BREAKPOINTS.xs) {
85
+ window.addEventListener('resize', this._onResize);
86
+ }
87
+ }
88
+ _focusNextItem() {
89
+ const $nextItem = this._$items[this.count];
90
+ if (!$nextItem)
91
+ return;
92
+ const $firstFocusableElement = utilities.UiDomUtils.getFocusableElement($nextItem);
93
+ if ($firstFocusableElement) {
94
+ $firstFocusableElement.focus();
95
+ return;
96
+ }
97
+ if (!$nextItem.getAttribute('tabindex'))
98
+ $nextItem.setAttribute('tabindex', '-1');
99
+ $nextItem.focus();
100
+ }
101
+ };
102
+ tslib_es6.__decorate([
103
+ decorators.property({ type: Number }),
104
+ tslib_es6.__metadata("design:type", Number)
105
+ ], exports.HShowMore.prototype, "count", void 0);
106
+ tslib_es6.__decorate([
107
+ decorators.property({ type: Boolean, attribute: 'mobile-only' }),
108
+ tslib_es6.__metadata("design:type", Boolean)
109
+ ], exports.HShowMore.prototype, "mobileOnly", void 0);
110
+ tslib_es6.__decorate([
111
+ decorators.property({ type: Boolean, attribute: 'show-all' }),
112
+ tslib_es6.__metadata("design:type", Boolean)
113
+ ], exports.HShowMore.prototype, "showAll", void 0);
114
+ exports.HShowMore = tslib_es6.__decorate([
115
+ phoenix_custom_element.phoenixCustomElement('h-show-more')
116
+ ], exports.HShowMore);
117
+ //# sourceMappingURL=show_more.js.map
package/build/cjs/packages/phoenix/src/components/show-more/show_more.js.map ADDED
@@ -0,0 +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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js ADDED
@@ -0,0 +1,29 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
+ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
+ var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
9
+ var show_more_constants = require('./show_more_constants.js');
10
+
11
+ exports.HShowMoreButton = class HShowMoreButton extends phoenix_light_lit_element.PhoenixLightLitElement {
12
+ constructor() {
13
+ super();
14
+ this._dispatchClickedEvent = () => {
15
+ this.emitCustomEvent(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore);
16
+ };
17
+ this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
18
+ }
19
+ connectedCallback() {
20
+ super.connectedCallback();
21
+ this.addEventListener('click', this._dispatchClickedEvent);
22
+ this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMoreButton);
23
+ }
24
+ };
25
+ exports.HShowMoreButton = tslib_es6.__decorate([
26
+ phoenix_custom_element.phoenixCustomElement('h-show-more-button'),
27
+ tslib_es6.__metadata("design:paramtypes", [])
28
+ ], exports.HShowMoreButton);
29
+ //# sourceMappingURL=show_more_button.js.map
package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map ADDED
@@ -0,0 +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;"}
package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js ADDED
@@ -0,0 +1,17 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const SHOW_MORE_CSS_CLASSES = {
6
+ showMore: 'show-more',
7
+ showMoreButton: 'show-more__button'
8
+ };
9
+ const SHOW_MORE_EVENT_NAMES = {
10
+ showMore: 'showMore'
11
+ };
12
+ const SHOW_MORE_ITEM_ATTRIBUTE = 'show-more-item';
13
+
14
+ exports.SHOW_MORE_CSS_CLASSES = SHOW_MORE_CSS_CLASSES;
15
+ exports.SHOW_MORE_EVENT_NAMES = SHOW_MORE_EVENT_NAMES;
16
+ exports.SHOW_MORE_ITEM_ATTRIBUTE = SHOW_MORE_ITEM_ATTRIBUTE;
17
+ //# sourceMappingURL=show_more_constants.js.map
package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js.map ADDED
@@ -0,0 +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;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -83,6 +83,7 @@ var toggle_button = require('./components/groups/toggle_button_group/toggle_butt
83
83
  var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
84
84
  var backdrop = require('./components/backdrop/backdrop.js');
85
85
  var color_swatches_control_constants = require('./components/form/color_swatches_control/color_swatches_control_constants.js');
86
+ var show_more_button = require('./components/show-more/show_more_button.js');
86
87
  var color_swatches = require('./components/color_swatches/color_swatches.js');
87
88
  var color_item = require('./components/color_swatches/color_item/color_item.js');
88
89
  var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
@@ -126,6 +127,7 @@ var toggle = require('./components/toggle/toggle.js');
126
127
  var toggle_button$1 = require('./components/toggle/toggle_button.js');
127
128
  var navigator_share = require('./components/navigator/navigator_share/navigator_share.js');
128
129
  var navigator_controller = require('./components/navigator/navigator_controller/navigator_controller.js');
130
+ var show_more$1 = require('./components/show-more/show_more.js');
129
131
 
130
132
 
131
133
 
@@ -510,6 +512,12 @@ Object.defineProperty(exports, 'HBackdrop', {
510
512
  }
511
513
  });
512
514
  exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES;
515
+ Object.defineProperty(exports, 'HShowMoreButton', {
516
+ enumerable: true,
517
+ get: function () {
518
+ return show_more_button.HShowMoreButton;
519
+ }
520
+ });
513
521
  Object.defineProperty(exports, 'HColorSwatches', {
514
522
  enumerable: true,
515
523
  get: function () {
@@ -755,4 +763,10 @@ Object.defineProperty(exports, 'NavigatorController', {
755
763
  return navigator_controller.NavigatorController;
756
764
  }
757
765
  });
766
+ Object.defineProperty(exports, 'HShowMore', {
767
+ enumerable: true,
768
+ get: function () {
769
+ return show_more$1.HShowMore;
770
+ }
771
+ });
758
772
  //# sourceMappingURL=index.js.map
package/build/cjs/packages/phoenix/src/index.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
3
3
  import { TemplateResult } from 'lit-html';
4
4
  export declare class HColorSwatches extends PhoenixLightLitElement {
5
5
  multiple: boolean;
6
+ devVisualSubcategories: boolean;
6
7
  numberOfVisibleColors: number;
7
8
  selectedColors: HColorItem[];
8
9
  showMoreBtnText: string;
@@ -33,5 +34,5 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
33
34
  private _removeExistingColorFromArray;
34
35
  private _dispatchColorChangeEvent;
35
36
  disconnectedCallback(): void;
36
- protected render(): TemplateResult;
37
+ protected render(): TemplateResult | void;
37
38
  }
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -6,13 +6,15 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
6
6
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
7
7
  import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
8
8
  import 'lit-html';
9
- import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
9
+ import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
10
10
  import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
11
+ import { HColorItem } from './color_item/color_item.js';
11
12
 
12
13
  let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
13
14
  constructor() {
14
15
  super(...arguments);
15
16
  this.multiple = false;
17
+ this.devVisualSubcategories = false;
16
18
  this.selectedColors = [];
17
19
  this.showMoreBtnText = 'Pokaż wszystkie kolory';
18
20
  this._setupEvents = () => {
@@ -136,8 +138,10 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
136
138
  this._$colorSwatchesChildren = [...this.children];
137
139
  this._setupEvents();
138
140
  this._addCssClasses();
139
- this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
140
- this._showAllItemsEvent();
141
+ if (!this.devVisualSubcategories) {
142
+ this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
143
+ this._showAllItemsEvent();
144
+ }
141
145
  this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
142
146
  this._$colors = [...this.querySelectorAll('h-color-item')];
143
147
  }
@@ -150,7 +154,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
150
154
  return;
151
155
  this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
152
156
  if (index > numberOfVisibleColors - 1) {
153
- $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
157
+ $colorSwatchesChild.setAttribute('hidden', '');
154
158
  }
155
159
  });
156
160
  }
@@ -160,9 +164,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
160
164
  if (!this._$colorSwatchesChildren)
161
165
  return;
162
166
  this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
163
- $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
167
+ $colorSwatchesChild.removeAttribute('hidden');
164
168
  });
165
- (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
169
+ (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
166
170
  });
167
171
  }
168
172
  _handleChangeToNextColorItem({ target }) {
@@ -176,7 +180,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
176
180
  $nextColorItem = $nextFocusableElement;
177
181
  }
178
182
  $nextColorItem.focus();
179
- this._handleColorChange($nextColorItem);
183
+ if ($nextColorItem instanceof HColorItem) {
184
+ this._handleColorChange($nextColorItem);
185
+ }
180
186
  }
181
187
  _handleChangeToPreviousColorItem({ target }) {
182
188
  const $colorItem = target;
@@ -189,7 +195,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
189
195
  $previousColorItem = $previousFocusableElement;
190
196
  }
191
197
  $previousColorItem.focus();
192
- this._handleColorChange($previousColorItem);
198
+ if ($previousColorItem instanceof HColorItem) {
199
+ this._handleColorChange($previousColorItem);
200
+ }
193
201
  }
194
202
  _toggleColorItem($colorItem) {
195
203
  this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
@@ -227,18 +235,24 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
227
235
  document.body.removeEventListener('keydown', this._focusOnSelectedColor);
228
236
  }
229
237
  render() {
230
- return html `
231
- ${this.getSlot('default')}
232
- ${this._$colors.length > this.numberOfVisibleColors
233
- ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
234
- : nothing}
235
- `;
238
+ if (!this.devVisualSubcategories) {
239
+ return html `
240
+ ${this.getSlot('default')}
241
+ ${this._$colors.length > this.numberOfVisibleColors
242
+ ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
243
+ : nothing}
244
+ `;
245
+ }
236
246
  }
237
247
  };
238
248
  __decorate([
239
249
  property({ type: Boolean }),
240
250
  __metadata("design:type", Boolean)
241
251
  ], HColorSwatches.prototype, "multiple", void 0);
252
+ __decorate([
253
+ property({ type: Boolean, attribute: 'dev-visual-subcategories' }),
254
+ __metadata("design:type", Boolean)
255
+ ], HColorSwatches.prototype, "devVisualSubcategories", void 0);
242
256
  __decorate([
243
257
  property({ type: Number, attribute: 'number-of-visible-colors' }),
244
258
  __metadata("design:type", Number)
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_constants.d.ts CHANGED
@@ -9,4 +9,3 @@ export declare const COLOR_SWATCHES_EVENT_NAMES: {
9
9
  readonly markDisabledItems: "markDisabledItems";
10
10
  readonly showMore: "showMore";
11
11
  };
12
- export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js CHANGED
@@ -8,8 +8,7 @@ const COLOR_SWATCHES_EVENT_NAMES = {
8
8
  change: 'change',
9
9
  markDisabledItems: 'markDisabledItems',
10
10
  showMore: 'showMore'
11
- };
12
- const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
11
+ };
13
12
 
14
- export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
13
+ export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES };
15
14
  //# sourceMappingURL=color_swatches_constants.js.map
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map CHANGED
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare class HSearch extends PhoenixLightLitElement {
5
5
  settings: TSearchSettings;
6
6
  view: string;
7
7
  locale: string;
8
+ shouldRenderAsPopup: string;
8
9
  moduleInstanceId: string;
9
10
  private _historyContextProvider;
10
11
  private _searchContextConsumer;
@@ -76,5 +77,6 @@ export declare class HSearch extends PhoenixLightLitElement {
76
77
  private _setupAriaAttributes;
77
78
  private _handleOpenSearch;
78
79
  private _handleOpenSearchWithKeyboard;
80
+ private _renderSearch;
79
81
  protected render(): TemplateResult;
80
82
  }
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -289,6 +289,52 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
289
289
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
290
290
  }
291
291
  };
292
+ this._renderSearch = () => {
293
+ return html `
294
+ ${n(this._isSuggesterLayerVisible(), () => html `
295
+ <div
296
+ class="${SEARCH_CLASS_NAMES.container}"
297
+ id="${this._searchContentContainerId}"
298
+ role="${this._containerRole}"
299
+ >
300
+ ${n(this._shouldShowMessage, () => html `<h-search-message
301
+ ${ref(this._searchMessageRef)}
302
+ .history="${this._historyLimitedContent}"
303
+ .results="${this._searchResults}"
304
+ .translations="${this._translations}"
305
+ search-phrase="${this._searchPhrase}"
306
+ module-instance-id="${this.moduleInstanceId}"
307
+ ></h-search-message>`)}
308
+ ${n(this._shouldShowHistory, () => html `<h-search-history
309
+ ${ref(this._searchHistoryRef)}
310
+ .history="${this._historyLimitedContent}"
311
+ .translations="${this._translations}"
312
+ active-item-id="${this._activeItemId}"
313
+ search-id="${this._id}"
314
+ module-instance-id="${this.moduleInstanceId}"
315
+ ></h-search-history>`)}
316
+ ${n(this._shouldShowResults, () => html `<h-search-results
317
+ ${ref(this._searchResultsRef)}
318
+ .results="${this._searchResults}"
319
+ search-phrase="${this._searchPhrase}"
320
+ .settings="${this.settings}"
321
+ locale="${this.locale}"
322
+ view="${this.view}"
323
+ .translations="${this._translations}"
324
+ active-item-id="${this._activeItemId}"
325
+ search-id="${this._id}"
326
+ module-instance-id="${this.moduleInstanceId}"
327
+ ></h-search-results>`)}
328
+ </div>
329
+ `, () => html `
330
+ <div
331
+ class="${SEARCH_CLASS_NAMES.container}"
332
+ id="${this._searchContentContainerId}"
333
+ role="${this._containerRole}"
334
+ hidden
335
+ ></div>`)}
336
+ `;
337
+ };
292
338
  }
293
339
  async connectedCallback() {
294
340
  super.connectedCallback();
@@ -530,7 +576,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
530
576
  }
531
577
  render() {
532
578
  return html `
533
- <div
579
+ ${n(this.shouldRenderAsPopup, () => html `<div`, () => html `<h-sheet name="search-sheet"`)}
534
580
  class="${SEARCH_CLASS_NAMES.icon} labeled-icon"
535
581
  tabindex="0"
536
582
  @click=${this._handleOpenSearch}
@@ -545,51 +591,23 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
545
591
  <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
546
592
  ${this._translations.search}
547
593
  </div>
548
- </div>
594
+ ${n(this.shouldRenderAsPopup, () => html `</div>`, () => html `</h-sheet>`)}
549
595
 
550
- ${n(this._isSuggesterLayerVisible(), () => html `
551
- <div
552
- class="${SEARCH_CLASS_NAMES.container}"
553
- id="${this._searchContentContainerId}"
554
- role="${this._containerRole}"
555
- >
556
- ${n(this._shouldShowMessage, () => html `<h-search-message
557
- ${ref(this._searchMessageRef)}
558
- .history="${this._historyLimitedContent}"
559
- .results="${this._searchResults}"
560
- .translations="${this._translations}"
561
- search-phrase="${this._searchPhrase}"
562
- module-instance-id="${this.moduleInstanceId}"
563
- ></h-search-message>`)}
564
- ${n(this._shouldShowHistory, () => html `<h-search-history
565
- ${ref(this._searchHistoryRef)}
566
- .history="${this._historyLimitedContent}"
567
- .translations="${this._translations}"
568
- active-item-id="${this._activeItemId}"
569
- search-id="${this._id}"
570
- module-instance-id="${this.moduleInstanceId}"
571
- ></h-search-history>`)}
572
- ${n(this._shouldShowResults, () => html `<h-search-results
573
- ${ref(this._searchResultsRef)}
574
- .results="${this._searchResults}"
575
- search-phrase="${this._searchPhrase}"
576
- .settings="${this.settings}"
577
- locale="${this.locale}"
578
- view="${this.view}"
579
- .translations="${this._translations}"
580
- active-item-id="${this._activeItemId}"
581
- search-id="${this._id}"
582
- module-instance-id="${this.moduleInstanceId}"
583
- ></h-search-results>`)}
584
- </div>
585
- `, () => html `
586
- <div
587
- class="${SEARCH_CLASS_NAMES.container}"
588
- id="${this._searchContentContainerId}"
589
- role="${this._containerRole}"
590
- hidden
591
- ></div>`)}
592
- `;
596
+ ${n(this.shouldRenderAsPopup, () => html `<h-sheet id="search-sheet" hidden>
597
+ <h-sheet-header>
598
+ <h-sheet-close class="btn btn_icon">
599
+ <span class="sr-only">To translate - Close window</span>
600
+ <h-icon
601
+ icon-name="icon-x"
602
+ clickable=${true}
603
+ size=${ICONS_SIZES.l}
604
+ css-classes="${SEARCH_CLASS_NAMES.historyRemoveIcon}"
605
+ aria-hidden="true"
606
+ ></h-icon>
607
+ </h-sheet-close>
608
+ </h-sheet-header>
609
+ <h-sheet-body>${this._renderSearch}</h-sheet-body>
610
+ </h-sheet>`, this._renderSearch)}`;
593
611
  }
594
612
  };
595
613
  __decorate([
@@ -604,6 +622,10 @@ __decorate([
604
622
  property({ type: String }),
605
623
  __metadata("design:type", String)
606
624
  ], HSearch.prototype, "locale", void 0);
625
+ __decorate([
626
+ property({ type: Boolean, attribute: 'popup' }),
627
+ __metadata("design:type", String)
628
+ ], HSearch.prototype, "shouldRenderAsPopup", void 0);
607
629
  __decorate([
608
630
  property({ type: String, attribute: 'module-instance-id' }),
609
631
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +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,eAAe,wDAA4D;AAC3E,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.js CHANGED
@@ -31,8 +31,8 @@ let HTextareaControl = class HTextareaControl extends PhoenixLightLitElement {
31
31
  id="${ifDefined(this.controlId)}"
32
32
  name="${ifDefined(this.controlName)}"
33
33
  placeholder="${ifDefined(this.placeholder)}"
34
+ aria-required="${this.required ? 'true' : 'false'}"
34
35
  ?disabled="${this.disabled}"
35
- ?required="${this.required}"
36
36
  ?readonly="${this.readonly}"
37
37
  ?hidden="${this.hidden}"
38
38
  @input="${this._handleInputEvent}"
package/build/esm/packages/phoenix/src/components/show-more/show_more.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import { PropertyValues } from 'lit';
3
+ export declare class HShowMore extends PhoenixLightLitElement {
4
+ count: number;
5
+ mobileOnly: boolean;
6
+ showAll: boolean;
7
+ private _$showMoreButton;
8
+ private _$items;
9
+ connectedCallback(): void;
10
+ protected updated(_changedProperties: PropertyValues): void;
11
+ disconnectedCallback(): void;
12
+ private _updateComponentVisibility;
13
+ private _hideExcessItems;
14
+ private _showAllItems;
15
+ private _hideButton;
16
+ private _showButton;
17
+ private _setupListeners;
18
+ private _showMore;
19
+ private _focusNextItem;
20
+ private _onResize;
21
+ }
package/build/esm/packages/phoenix/src/components/show-more/show_more.js ADDED
@@ -0,0 +1,115 @@
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import 'lit';
3
+ import { property } from 'lit/decorators';
4
+ import { UiDomUtils } from '@dreamcommerce/utilities';
5
+ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
+ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
7
+ import { BREAKPOINTS } from '../../global_constants.js';
8
+ import { DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
9
+ import throttle_1 from '../../../../../external/lodash/throttle.js';
10
+ import { SHOW_MORE_ITEM_ATTRIBUTE, SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES } from './show_more_constants.js';
11
+
12
+ let HShowMore = class HShowMore extends PhoenixLightLitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this._$showMoreButton = null;
16
+ this._showMore = () => {
17
+ this._showAllItems();
18
+ this._hideButton();
19
+ this._focusNextItem();
20
+ };
21
+ this._onResize = throttle_1(() => {
22
+ if (window.innerWidth > BREAKPOINTS.xs) {
23
+ this._showAllItems();
24
+ this._hideButton();
25
+ window.removeEventListener('resize', this._onResize);
26
+ }
27
+ }, DEFAULT_THROTTLE_WAIT_TIME);
28
+ }
29
+ connectedCallback() {
30
+ super.connectedCallback();
31
+ this._$showMoreButton = this.querySelector('h-show-more-button');
32
+ this._$items = [...this.querySelectorAll(`[${SHOW_MORE_ITEM_ATTRIBUTE}]`)];
33
+ this.classList.add(SHOW_MORE_CSS_CLASSES.showMore);
34
+ this._updateComponentVisibility();
35
+ this._setupListeners();
36
+ }
37
+ updated(_changedProperties) {
38
+ super.updated(_changedProperties);
39
+ if (_changedProperties.has('showAll')) {
40
+ this._showAllItems();
41
+ this._hideButton();
42
+ }
43
+ }
44
+ disconnectedCallback() {
45
+ super.disconnectedCallback();
46
+ window.removeEventListener('resize', this._onResize);
47
+ }
48
+ _updateComponentVisibility() {
49
+ const hasOverflowItems = this._$items.length > this.count;
50
+ const isMobileView = window.innerWidth <= BREAKPOINTS.xs;
51
+ const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
52
+ if (shouldBeActive) {
53
+ this._hideExcessItems();
54
+ this._showButton();
55
+ }
56
+ else {
57
+ this._hideButton();
58
+ }
59
+ }
60
+ _hideExcessItems() {
61
+ this._$items.forEach(($item, index) => {
62
+ $item.removeAttribute('hidden');
63
+ if (index >= this.count)
64
+ $item.setAttribute('hidden', '');
65
+ });
66
+ }
67
+ _showAllItems() {
68
+ this._$items.forEach(($item) => $item.removeAttribute('hidden'));
69
+ }
70
+ _hideButton() {
71
+ var _a;
72
+ (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
73
+ }
74
+ _showButton() {
75
+ var _a;
76
+ (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
77
+ }
78
+ _setupListeners() {
79
+ this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
80
+ if (this.mobileOnly && window.innerWidth <= BREAKPOINTS.xs) {
81
+ window.addEventListener('resize', this._onResize);
82
+ }
83
+ }
84
+ _focusNextItem() {
85
+ const $nextItem = this._$items[this.count];
86
+ if (!$nextItem)
87
+ return;
88
+ const $firstFocusableElement = UiDomUtils.getFocusableElement($nextItem);
89
+ if ($firstFocusableElement) {
90
+ $firstFocusableElement.focus();
91
+ return;
92
+ }
93
+ if (!$nextItem.getAttribute('tabindex'))
94
+ $nextItem.setAttribute('tabindex', '-1');
95
+ $nextItem.focus();
96
+ }
97
+ };
98
+ __decorate([
99
+ property({ type: Number }),
100
+ __metadata("design:type", Number)
101
+ ], HShowMore.prototype, "count", void 0);
102
+ __decorate([
103
+ property({ type: Boolean, attribute: 'mobile-only' }),
104
+ __metadata("design:type", Boolean)
105
+ ], HShowMore.prototype, "mobileOnly", void 0);
106
+ __decorate([
107
+ property({ type: Boolean, attribute: 'show-all' }),
108
+ __metadata("design:type", Boolean)
109
+ ], HShowMore.prototype, "showAll", void 0);
110
+ HShowMore = __decorate([
111
+ phoenixCustomElement('h-show-more')
112
+ ], HShowMore);
113
+
114
+ export { HShowMore };
115
+ //# sourceMappingURL=show_more.js.map
package/build/esm/packages/phoenix/src/components/show-more/show_more.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/show-more/show_more_button.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ export declare class HShowMoreButton extends PhoenixLightLitElement {
3
+ private _btnController;
4
+ constructor();
5
+ connectedCallback(): void;
6
+ private _dispatchClickedEvent;
7
+ }
package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js ADDED
@@ -0,0 +1,27 @@
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
+ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
4
+ import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
5
+ import { SHOW_MORE_EVENT_NAMES, SHOW_MORE_CSS_CLASSES } from './show_more_constants.js';
6
+
7
+ let HShowMoreButton = class HShowMoreButton extends PhoenixLightLitElement {
8
+ constructor() {
9
+ super();
10
+ this._dispatchClickedEvent = () => {
11
+ this.emitCustomEvent(SHOW_MORE_EVENT_NAMES.showMore);
12
+ };
13
+ this._btnController = new BtnController(this, this._dispatchClickedEvent);
14
+ }
15
+ connectedCallback() {
16
+ super.connectedCallback();
17
+ this.addEventListener('click', this._dispatchClickedEvent);
18
+ this.classList.add(SHOW_MORE_CSS_CLASSES.showMoreButton);
19
+ }
20
+ };
21
+ HShowMoreButton = __decorate([
22
+ phoenixCustomElement('h-show-more-button'),
23
+ __metadata("design:paramtypes", [])
24
+ ], HShowMoreButton);
25
+
26
+ export { HShowMoreButton };
27
+ //# sourceMappingURL=show_more_button.js.map
package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js.map ADDED
@@ -0,0 +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;"}
package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare const SHOW_MORE_CSS_CLASSES: {
2
+ readonly showMore: "show-more";
3
+ readonly showMoreButton: "show-more__button";
4
+ };
5
+ export declare const SHOW_MORE_EVENT_NAMES: {
6
+ readonly showMore: "showMore";
7
+ };
8
+ export declare const SHOW_MORE_ITEM_ATTRIBUTE = "show-more-item";
package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js ADDED
@@ -0,0 +1,11 @@
1
+ const SHOW_MORE_CSS_CLASSES = {
2
+ showMore: 'show-more',
3
+ showMoreButton: 'show-more__button'
4
+ };
5
+ const SHOW_MORE_EVENT_NAMES = {
6
+ showMore: 'showMore'
7
+ };
8
+ const SHOW_MORE_ITEM_ATTRIBUTE = 'show-more-item';
9
+
10
+ export { SHOW_MORE_CSS_CLASSES, SHOW_MORE_EVENT_NAMES, SHOW_MORE_ITEM_ATTRIBUTE };
11
+ //# sourceMappingURL=show_more_constants.js.map
package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -140,4 +140,6 @@ export * from './components/toggle/toggle_types';
140
140
  export * from './components/toggle/toggle_constants';
141
141
  export { NavigatorShare } from './components/navigator/navigator_share/navigator_share';
142
142
  export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller';
143
+ export { HShowMore } from './components/show-more/show_more';
144
+ export { HShowMoreButton } from './components/show-more/show_more_button';
143
145
  export { phoenixCustomElement } from './core/decorators/phoenix_custom_element';
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -79,6 +79,7 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
79
79
  export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
80
80
  export { HBackdrop } from './components/backdrop/backdrop.js';
81
81
  export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
82
+ export { HShowMoreButton } from './components/show-more/show_more_button.js';
82
83
  export { HColorSwatches } from './components/color_swatches/color_swatches.js';
83
84
  export { HColorItem } from './components/color_swatches/color_item/color_item.js';
84
85
  export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
@@ -122,4 +123,5 @@ export { HToggle } from './components/toggle/toggle.js';
122
123
  export { HToggleBtn } from './components/toggle/toggle_button.js';
123
124
  export { NavigatorShare } from './components/navigator/navigator_share/navigator_share.js';
124
125
  export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller.js';
126
+ export { HShowMore } from './components/show-more/show_more.js';
125
127
  //# sourceMappingURL=index.js.map
package/build/esm/packages/phoenix/src/index.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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.17.8",
5
+ "version": "1.17.10-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -27,15 +27,15 @@
27
27
  },
28
28
  "peerDependencies": {
29
29
  "@dreamcommerce/utilities": "^1.0.0",
30
- "@splidejs/splide": "^4.0.7",
31
- "@splidejs/splide-extension-auto-scroll": "^0.5.3"
30
+ "@splidejs/splide": "4.0.7",
31
+ "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@dreamcommerce/utilities": "^1.20.1-6",
35
35
  "@shoper/jest_config": "^0.0.0",
36
36
  "@shoper/tsconfig": "^0.0.0",
37
37
  "@splidejs/splide": "4.0.7",
38
- "@splidejs/splide-extension-auto-scroll": "^0.5.3",
38
+ "@splidejs/splide-extension-auto-scroll": "0.5.3",
39
39
  "@storybook/web-components": "6.5.7",
40
40
  "lit": "2.4.0"
41
41
  },