@shoper/phoenix_design_system 1.17.5-0 → 1.17.6-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 (64) 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/messages/base_message.js +1 -54
  6. package/build/cjs/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js +1 -6
  8. package/build/cjs/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js +10 -0
  10. package/build/cjs/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
  12. package/build/cjs/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js +0 -2
  14. package/build/cjs/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  15. package/build/cjs/packages/phoenix/src/components/show-more/show_more.js +117 -0
  16. package/build/cjs/packages/phoenix/src/components/show-more/show_more.js.map +1 -0
  17. package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js +29 -0
  18. package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map +1 -0
  19. package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js +17 -0
  20. package/build/cjs/packages/phoenix/src/components/show-more/show_more_constants.js.map +1 -0
  21. package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js +8 -0
  22. package/build/cjs/packages/phoenix/src/components/tabs/tab_panel.js.map +1 -1
  23. package/build/cjs/packages/phoenix/src/components/tabs/tabs.js +5 -10
  24. package/build/cjs/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
  25. package/build/cjs/packages/phoenix/src/index.js +14 -0
  26. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  27. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +2 -1
  28. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +28 -14
  29. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  30. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts +0 -1
  31. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +2 -3
  32. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  33. package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts +0 -10
  34. package/build/esm/packages/phoenix/src/components/messages/base_message.js +3 -56
  35. package/build/esm/packages/phoenix/src/components/messages/base_message.js.map +1 -1
  36. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts +0 -2
  37. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js +2 -5
  38. package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js.map +1 -1
  39. package/build/esm/packages/phoenix/src/components/messages/hints/hint.d.ts +2 -0
  40. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js +10 -0
  41. package/build/esm/packages/phoenix/src/components/messages/hints/hint.js.map +1 -1
  42. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts +2 -0
  43. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js +10 -0
  44. package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map +1 -1
  45. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js +1 -2
  46. package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map +1 -1
  47. package/build/esm/packages/phoenix/src/components/show-more/show_more.d.ts +21 -0
  48. package/build/esm/packages/phoenix/src/components/show-more/show_more.js +115 -0
  49. package/build/esm/packages/phoenix/src/components/show-more/show_more.js.map +1 -0
  50. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.d.ts +7 -0
  51. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js +27 -0
  52. package/build/esm/packages/phoenix/src/components/show-more/show_more_button.js.map +1 -0
  53. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.d.ts +8 -0
  54. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js +11 -0
  55. package/build/esm/packages/phoenix/src/components/show-more/show_more_constants.js.map +1 -0
  56. package/build/esm/packages/phoenix/src/components/tabs/tab_panel.d.ts +1 -0
  57. package/build/esm/packages/phoenix/src/components/tabs/tab_panel.js +8 -0
  58. package/build/esm/packages/phoenix/src/components/tabs/tab_panel.js.map +1 -1
  59. package/build/esm/packages/phoenix/src/components/tabs/tabs.js +5 -10
  60. package/build/esm/packages/phoenix/src/components/tabs/tabs.js.map +1 -1
  61. package/build/esm/packages/phoenix/src/index.d.ts +2 -0
  62. package/build/esm/packages/phoenix/src/index.js +2 -0
  63. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  64. package/package.json +5 -5
@@ -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)
@@ -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;"}
@@ -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
@@ -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;"}
@@ -3,16 +3,13 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
- var lit = require('lit');
7
6
  var decorators = require('lit/decorators');
8
7
  var utilities = require('@dreamcommerce/utilities');
9
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
- var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
11
9
  var portal_constants = require('../portal/portal_constants.js');
12
10
  var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
13
11
  var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
14
12
  var base_message_constants = require('./base_message_constants.js');
15
- var ref = require('lit/directives/ref');
16
13
 
17
14
  class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
18
15
  constructor() {
@@ -23,24 +20,9 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
23
20
  this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
24
21
  this.mouseonly = false;
25
22
  this.tabindex = '-1';
26
- this.useAsLabel = false;
27
- this._messageId = v4['default']();
28
- this._tooltipRef = ref.createRef();
29
- this._handleChildrenAriaAttributes = () => {
30
- [...this.children].forEach((child) => {
31
- if (base_message_constants.LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
32
- return;
33
- const attributeName = this.useAsLabel ? 'aria-labelledby' : 'aria-describedby';
34
- child.setAttribute(attributeName, `${child.getAttribute(attributeName) || ''} ${this._messageId}`);
35
- });
36
- };
37
23
  this._setupEventListeners = () => {
38
- var _a, _b;
39
24
  this.addEventListener('mouseenter', this.open);
40
25
  this.addEventListener('mouseleave', this.close);
41
- this.addEventListener('keydown', this._closeFromKeyboard);
42
- (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
43
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
44
26
  if (!this.mouseonly) {
45
27
  this.addEventListener('focusin', this.open);
46
28
  this.addEventListener('focusout', this.close);
@@ -61,13 +43,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
61
43
  this.opened = true;
62
44
  }, base_message_constants.MESSAGE_SHOW_DELAY_IN_MS);
63
45
  };
64
- this._closeFromKeyboard = (ev) => {
65
- if (ev.key !== 'Escape' || !this.opened)
66
- return;
67
- ev.preventDefault();
68
- ev.stopPropagation();
69
- this.close();
70
- };
71
46
  this.close = () => {
72
47
  this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > base_message_constants.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
73
48
  clearTimeout(this._openTimeout);
@@ -108,14 +83,8 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
108
83
  offset: this.offset
109
84
  });
110
85
  this.setAttribute('tabindex', this.tabindex);
111
- if (!this._$baseMessageContent)
112
- this._$baseMessageContent = [...this.children].find((child) => base_message_constants.MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
113
86
  this._setupEventListeners();
114
87
  }
115
- firstUpdated(props) {
116
- super.firstUpdated(props);
117
- this._handleChildrenAriaAttributes();
118
- }
119
88
  static _appendMessagePortal() {
120
89
  const $messagePortalTarget = document.querySelector(`[name="${base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME}"]`);
121
90
  if ($messagePortalTarget)
@@ -124,24 +93,6 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
124
93
  $portalTarget.setAttribute(portal_constants.PORTAL_TARGET_NAME_PROP, base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME);
125
94
  document.body.appendChild($portalTarget);
126
95
  }
127
- disconnectedCallback() {
128
- var _a, _b;
129
- super.disconnectedCallback();
130
- (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
131
- (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
132
- }
133
- render() {
134
- var _a;
135
- super.render();
136
- return lit.html `
137
- <span ${ref.ref(this._tooltipRef)} id="${this._messageId}" class="${base_message_constants.SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
138
- ${utilities.DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
139
- </span>
140
- <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
141
- ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
142
- </h-portal>
143
- `;
144
- }
145
96
  }
146
97
  tslib_es6.__decorate([
147
98
  decorators.property({ type: Boolean, reflect: true }),
@@ -166,11 +117,7 @@ tslib_es6.__decorate([
166
117
  tslib_es6.__decorate([
167
118
  decorators.property({ type: String }),
168
119
  tslib_es6.__metadata("design:type", String)
169
- ], BaseMessage.prototype, "tabindex", void 0);
170
- tslib_es6.__decorate([
171
- decorators.property({ type: Boolean, attribute: 'use-as-label' }),
172
- tslib_es6.__metadata("design:type", Boolean)
173
- ], BaseMessage.prototype, "useAsLabel", void 0);
120
+ ], BaseMessage.prototype, "tabindex", void 0);
174
121
 
175
122
  exports.BaseMessage = BaseMessage;
176
123
  //# sourceMappingURL=base_message.js.map
@@ -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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var portal_constants = require('../portal/portal_constants.js');
6
5
  var hint_constants = require('./hints/hint_constants.js');
7
6
  var tooltip_constants = require('./tooltips/tooltip_constants.js');
8
7
 
@@ -11,20 +10,16 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
11
10
  const MESSAGE_REMOVED_CLASS_NAME = `removed`;
12
11
  const DEFAULT_MESSAGE_OFFSET = 10;
13
12
  const MESSAGE_CONTENT_ELEMENTS = [tooltip_constants.TOOLTIP_CONTENT_ELEMENT_NAME, hint_constants.HINT_CONTENT_ELEMENT_NAME];
14
- const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, portal_constants.PORTAL_COMPONENT_NAME];
15
13
  const MESSAGE_SHOW_DELAY_IN_MS = 100;
16
14
  const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
17
- const MESSAGE_CLOSE_DELAY_IN_MS = 500;
18
- const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
15
+ const MESSAGE_CLOSE_DELAY_IN_MS = 500;
19
16
 
20
17
  exports.DEFAULT_MESSAGE_OFFSET = DEFAULT_MESSAGE_OFFSET;
21
18
  exports.DEFAULT_MESSAGE_PORTAL_NAME = DEFAULT_MESSAGE_PORTAL_NAME;
22
- exports.LIST_OF_MESSAGE_CHILDREN = LIST_OF_MESSAGE_CHILDREN;
23
19
  exports.MESSAGE_CLOSE_DELAY_IN_MS = MESSAGE_CLOSE_DELAY_IN_MS;
24
20
  exports.MESSAGE_CONTENT_ELEMENTS = MESSAGE_CONTENT_ELEMENTS;
25
21
  exports.MESSAGE_CONTENT_SLOT_NAME = MESSAGE_CONTENT_SLOT_NAME;
26
22
  exports.MESSAGE_REMOVED_CLASS_NAME = MESSAGE_REMOVED_CLASS_NAME;
27
23
  exports.MESSAGE_SHOW_DELAY_IN_MS = MESSAGE_SHOW_DELAY_IN_MS;
28
24
  exports.MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
29
- exports.SCREEN_READER_ONLY_CLASS_NAME = SCREEN_READER_ONLY_CLASS_NAME;
30
25
  //# sourceMappingURL=base_message_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;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;"}
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
7
+ var litHtml = require('lit-html');
7
8
  var hint_constants = require('./hint_constants.js');
9
+ var base_message_constants = require('../base_message_constants.js');
8
10
  var base_message = require('../base_message.js');
9
11
 
10
12
  exports.HHint = class HHint extends base_message.BaseMessage {
@@ -16,6 +18,14 @@ exports.HHint = class HHint extends base_message.BaseMessage {
16
18
  super.connectedCallback(hint_constants.HINT_CLASS_NAME);
17
19
  this.classList.add(hint_constants.HINT_CLASS_NAME);
18
20
  }
21
+ render() {
22
+ super.render();
23
+ return litHtml.html `
24
+ <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
25
+ ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
26
+ </h-portal>
27
+ `;
28
+ }
19
29
  };
20
30
  exports.HHint = tslib_es6.__decorate([
21
31
  phoenix_custom_element.phoenixCustomElement(hint_constants.HINT_ELEMENT_NAME),
@@ -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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
7
+ var litHtml = require('lit-html');
7
8
  var tooltip_constants = require('./tooltip_constants.js');
9
+ var base_message_constants = require('../base_message_constants.js');
8
10
  var base_message = require('../base_message.js');
9
11
 
10
12
  exports.HTooltip = class HTooltip extends base_message.BaseMessage {
@@ -12,6 +14,14 @@ exports.HTooltip = class HTooltip extends base_message.BaseMessage {
12
14
  super.connectedCallback(tooltip_constants.TOOLTIP_CLASS_NAME);
13
15
  this.classList.add(tooltip_constants.TOOLTIP_CLASS_NAME);
14
16
  }
17
+ render() {
18
+ super.render();
19
+ return litHtml.html `
20
+ <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
21
+ ${this.getSlot(base_message_constants.MESSAGE_CONTENT_SLOT_NAME)}
22
+ </h-portal>
23
+ `;
24
+ }
15
25
  };
16
26
  exports.HTooltip = tslib_es6.__decorate([
17
27
  phoenix_custom_element.phoenixCustomElement(tooltip_constants.TOOLTIP_ELEMENT_NAME)
@@ -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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -7,11 +7,9 @@ const PORTAL_EVENTS = {
7
7
  close: 'close'
8
8
  };
9
9
  const PORTAL_TARGET_NAME_PROP = 'name';
10
- const PORTAL_COMPONENT_NAME = 'h-portal';
11
10
  const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
12
11
  const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
13
12
 
14
- exports.PORTAL_COMPONENT_NAME = PORTAL_COMPONENT_NAME;
15
13
  exports.PORTAL_EVENTS = PORTAL_EVENTS;
16
14
  exports.PORTAL_TARGET_ATTRIBUTE_NAME = PORTAL_TARGET_ATTRIBUTE_NAME;
17
15
  exports.PORTAL_TARGET_COMPONENT_NAME = PORTAL_TARGET_COMPONENT_NAME;
@@ -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;"}
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;"}
@@ -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
@@ -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;"}
@@ -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
@@ -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;"}
@@ -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
@@ -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;"}
@@ -12,6 +12,14 @@ exports.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLig
12
12
  constructor() {
13
13
  super();
14
14
  this._visibilityController = new visibility_controller.VisibilityController(this);
15
+ this.setAttribute('role', 'tabpanel');
16
+ }
17
+ connectedCallback() {
18
+ super.connectedCallback();
19
+ const $tab = document.querySelector(`[panel-name="${this.name}"]`);
20
+ if ($tab && $tab.id) {
21
+ this.setAttribute('aria-labelledby', $tab.id);
22
+ }
15
23
  }
16
24
  show() {
17
25
  this._visibilityController.show();
@@ -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;"}
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;"}
@@ -16,13 +16,12 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  this.watchChildrenRendered = true;
19
- this._handleArrowNavigation = ({ key }) => {
19
+ this._handleArrowNavigation = (ev) => {
20
+ ev.preventDefault();
20
21
  const currentTabIndex = this._getFocusedTabIndex();
21
22
  if (currentTabIndex === undefined)
22
23
  return;
23
- const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
24
- if (newTabIndex === undefined)
25
- return;
24
+ const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
26
25
  utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
27
26
  utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
28
27
  this._$tabs[newTabIndex].focus();
@@ -59,14 +58,10 @@ exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitEle
59
58
  return this._$tabs.findIndex(($tab) => $tab === focusedElement);
60
59
  }
61
60
  _getNextTabIndex(currentTabIndex) {
62
- if (currentTabIndex >= this._$tabs.length - 1)
63
- return;
64
- return currentTabIndex + 1;
61
+ return (currentTabIndex + 1) % this._$tabs.length;
65
62
  }
66
63
  _getPrevTabIndex(currentTabIndex) {
67
- if (currentTabIndex <= 0)
68
- return;
69
- return currentTabIndex - 1;
64
+ return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
70
65
  }
71
66
  _setupEvents() {
72
67
  document.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
@@ -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;"}
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;"}
@@ -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