@shoper/phoenix_design_system 1.18.8-8 → 1.18.8-9

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 (29) hide show
  1. package/build/cjs/packages/phoenix/src/components/details/details.js +14 -50
  2. package/build/cjs/packages/phoenix/src/components/details/details.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/details/details_constants.js +2 -1
  4. package/build/cjs/packages/phoenix/src/components/details/details_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/details/details_group.js +125 -0
  6. package/build/cjs/packages/phoenix/src/components/details/details_group.js.map +1 -0
  7. package/build/cjs/packages/phoenix/src/components/details/details_toggler.js +0 -44
  8. package/build/cjs/packages/phoenix/src/components/details/details_toggler.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/index.js +13 -6
  10. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/components/details/details.d.ts +4 -8
  12. package/build/esm/packages/phoenix/src/components/details/details.js +16 -52
  13. package/build/esm/packages/phoenix/src/components/details/details.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/details/details_constants.d.ts +1 -0
  15. package/build/esm/packages/phoenix/src/components/details/details_constants.js +2 -1
  16. package/build/esm/packages/phoenix/src/components/details/details_constants.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/details/details_group.d.ts +18 -0
  18. package/build/esm/packages/phoenix/src/components/details/details_group.js +123 -0
  19. package/build/esm/packages/phoenix/src/components/details/details_group.js.map +1 -0
  20. package/build/esm/packages/phoenix/src/components/details/details_toggler.d.ts +0 -6
  21. package/build/esm/packages/phoenix/src/components/details/details_toggler.js +0 -44
  22. package/build/esm/packages/phoenix/src/components/details/details_toggler.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/details/details_types.d.ts +4 -2
  24. package/build/esm/packages/phoenix/src/components/details/details_types.js +1 -2
  25. package/build/esm/packages/phoenix/src/components/details/details_types.js.map +1 -1
  26. package/build/esm/packages/phoenix/src/index.d.ts +1 -0
  27. package/build/esm/packages/phoenix/src/index.js +3 -2
  28. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  29. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/details/details.js CHANGED
@@ -3,66 +3,30 @@
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');
6
+ var decorators = require('lit/decorators');
7
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
8
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
9
+ var accordion_constants = require('../accordion/accordion_constants.js');
9
10
  var details_constants = require('./details_constants.js');
10
11
 
11
12
  exports.HDetails = class HDetails extends phoenix_light_lit_element.PhoenixLightLitElement {
12
13
  constructor() {
13
14
  super(...arguments);
14
- this.$summary = null;
15
- this._summaryClickHandler = (ev) => {
16
- ev.preventDefault();
17
- const $summary = ev.currentTarget;
18
- const $details = $summary.parentNode;
19
- if ($details.hasAttribute('open')) {
20
- this._close($details);
21
- }
22
- else {
23
- this._open($details);
24
- }
25
- };
15
+ this.disabled = false;
16
+ this.mode = accordion_constants.ACCORDION_MODE.multi;
26
17
  }
27
- connectedCallback() {
28
- var _a;
29
- super.connectedCallback();
30
- this.$summary = this.querySelector('summary');
31
- (_a = this.$summary) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this._summaryClickHandler);
32
- }
33
- disconnectedCallback() {
34
- var _a;
35
- super.disconnectedCallback();
36
- (_a = this.$summary) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._summaryClickHandler);
37
- }
38
- _open(details) {
39
- details.setAttribute('open', '');
40
- requestAnimationFrame(() => {
41
- details.classList.add(details_constants.DETAILS_CSS_CLASSES.isOpen);
42
- });
43
- this._dispatchToggle(details, true);
44
- }
45
- _close(details) {
46
- details.classList.remove(details_constants.DETAILS_CSS_CLASSES.isOpen);
47
- setTimeout(() => {
48
- details.removeAttribute('open');
49
- }, details_constants.DETAILS_TRANSITION_DURATION);
50
- this._dispatchToggle(details, false);
51
- }
52
- _dispatchToggle(details, open) {
53
- this.emitCustomEvent(details_constants.DETAILS_EVENTS.toggle, {
54
- detail: { open, target: details }
55
- });
56
- }
57
- render() {
58
- return lit.html `
59
- <details class="smooth-details">
60
- ${this.getSlot('toggler')}
61
- ${this.getSlot('content')}
62
- </details>
63
- `;
18
+ updated() {
19
+ this.dispatchEvent(new Event(details_constants.DETAILS_EVENTS.update));
64
20
  }
65
21
  };
22
+ tslib_es6.__decorate([
23
+ decorators.property({ type: Boolean, reflect: true }),
24
+ tslib_es6.__metadata("design:type", Object)
25
+ ], exports.HDetails.prototype, "disabled", void 0);
26
+ tslib_es6.__decorate([
27
+ decorators.property({ type: String }),
28
+ tslib_es6.__metadata("design:type", String)
29
+ ], exports.HDetails.prototype, "mode", void 0);
66
30
  exports.HDetails = tslib_es6.__decorate([
67
31
  phoenix_custom_element.phoenixCustomElement('h-details')
68
32
  ], exports.HDetails);
package/build/cjs/packages/phoenix/src/components/details/details.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/details/details_constants.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const DETAILS_EVENTS = {
6
- toggle: 'toggle'
6
+ toggle: 'toggle',
7
+ update: 'update'
7
8
  };
8
9
  const DETAILS_CSS_CLASSES = {
9
10
  smoothDetails: 'smooth-details',
package/build/cjs/packages/phoenix/src/components/details/details_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;"}
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/details/details_group.js ADDED
@@ -0,0 +1,125 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
+ var lit = require('lit');
7
+ var decorators = require('lit/decorators');
8
+ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
+ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
+ var accordion_constants = require('../accordion/accordion_constants.js');
11
+ var details_constants = require('./details_constants.js');
12
+
13
+ exports.HDetailsGroup = class HDetailsGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
14
+ constructor() {
15
+ super(...arguments);
16
+ this._$detailsWrapper = null;
17
+ this._isDisabled = false;
18
+ this._mode = accordion_constants.ACCORDION_MODE.multi;
19
+ this._syncWithDetailsWrapper = () => {
20
+ if (!this._$detailsWrapper)
21
+ return;
22
+ this._mode = this._$detailsWrapper.mode;
23
+ this._isDisabled = this._$detailsWrapper.disabled;
24
+ if (this._isDisabled) {
25
+ this.disable();
26
+ }
27
+ else {
28
+ this.enable();
29
+ }
30
+ };
31
+ this._hideOtherDetailsGroups = () => {
32
+ var _a;
33
+ if (this._isDisabled)
34
+ return;
35
+ (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h-details-group').forEach(($detailsGroup) => {
36
+ if ($detailsGroup === this)
37
+ return;
38
+ $detailsGroup.hide();
39
+ });
40
+ };
41
+ this._summaryClickHandler = (ev) => {
42
+ ev.preventDefault();
43
+ if (this._isDisabled)
44
+ return;
45
+ const $summary = ev.currentTarget;
46
+ const $details = $summary.parentNode;
47
+ this.toggle($details);
48
+ };
49
+ }
50
+ connectedCallback() {
51
+ var _a;
52
+ super.connectedCallback();
53
+ this._$detailsWrapper = this.closest('h-details');
54
+ (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.addEventListener(details_constants.DETAILS_EVENTS.update, this._syncWithDetailsWrapper);
55
+ this._syncWithDetailsWrapper();
56
+ }
57
+ toggle(details) {
58
+ if (this._mode === accordion_constants.ACCORDION_MODE.single)
59
+ this._hideOtherDetailsGroups();
60
+ const $details = details || this.querySelector('details');
61
+ if (!$details)
62
+ return;
63
+ const isOpen = $details.hasAttribute('open');
64
+ isOpen ? this.hide($details) : this.show($details);
65
+ }
66
+ show(details) {
67
+ if (this._mode === accordion_constants.ACCORDION_MODE.single)
68
+ this._hideOtherDetailsGroups();
69
+ const $details = details || this.querySelector('details');
70
+ if (!$details)
71
+ return;
72
+ $details.setAttribute('open', '');
73
+ requestAnimationFrame(() => {
74
+ $details.classList.add(details_constants.DETAILS_CSS_CLASSES.isOpen);
75
+ });
76
+ this._dispatchToggleEvent($details, true);
77
+ }
78
+ hide(details) {
79
+ const $details = details || this.querySelector('details');
80
+ if (!$details)
81
+ return;
82
+ $details.classList.remove(details_constants.DETAILS_CSS_CLASSES.isOpen);
83
+ setTimeout(() => {
84
+ $details.removeAttribute('open');
85
+ }, details_constants.DETAILS_TRANSITION_DURATION);
86
+ this._dispatchToggleEvent($details, false);
87
+ }
88
+ _dispatchToggleEvent(details, open) {
89
+ this.emitCustomEvent(details_constants.DETAILS_EVENTS.toggle, {
90
+ detail: { open, target: details }
91
+ });
92
+ }
93
+ enable() {
94
+ if (this._isDisabled) {
95
+ this.hide();
96
+ this._isDisabled = false;
97
+ }
98
+ }
99
+ disable() {
100
+ if (!this._isDisabled) {
101
+ this.show();
102
+ this._isDisabled = true;
103
+ }
104
+ }
105
+ render() {
106
+ return lit.html `
107
+ <details class="smooth-details">
108
+ <summary @click=${this._summaryClickHandler}>${this.getSlot('toggler')}</summary>
109
+ ${this.getSlot('content')}
110
+ </details>
111
+ `;
112
+ }
113
+ };
114
+ tslib_es6.__decorate([
115
+ decorators.state(),
116
+ tslib_es6.__metadata("design:type", Object)
117
+ ], exports.HDetailsGroup.prototype, "_isDisabled", void 0);
118
+ tslib_es6.__decorate([
119
+ decorators.state(),
120
+ tslib_es6.__metadata("design:type", String)
121
+ ], exports.HDetailsGroup.prototype, "_mode", void 0);
122
+ exports.HDetailsGroup = tslib_es6.__decorate([
123
+ phoenix_custom_element.phoenixCustomElement('h-details-group')
124
+ ], exports.HDetailsGroup);
125
+ //# sourceMappingURL=details_group.js.map
package/build/cjs/packages/phoenix/src/components/details/details_group.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/details/details_toggler.js CHANGED
@@ -3,59 +3,15 @@
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
- var decorators = require('lit/decorators');
8
6
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
7
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
8
 
11
9
  exports.HDetailsToggler = class HDetailsToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
12
10
  constructor() {
13
11
  super();
14
- this._dynamicNodes = [];
15
- this._nodeObserver = null;
16
12
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
17
13
  }
18
- connectedCallback() {
19
- super.connectedCallback();
20
- this.captureNewNodes();
21
- this._nodeObserver = new MutationObserver((mutations) => {
22
- let shouldUpdate = false;
23
- for (const mutation of mutations) {
24
- for (const node of mutation.addedNodes) {
25
- if (node.nodeName.toLowerCase() !== 'summary') {
26
- shouldUpdate = true;
27
- }
28
- }
29
- }
30
- if (shouldUpdate) {
31
- this.captureNewNodes();
32
- }
33
- });
34
- this._nodeObserver.observe(this, { childList: true });
35
- }
36
- disconnectedCallback() {
37
- var _a;
38
- super.disconnectedCallback();
39
- (_a = this._nodeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
40
- }
41
- captureNewNodes() {
42
- const incomingNodes = Array.from(this.childNodes).filter((node) => node.nodeName.toLowerCase() !== 'summary');
43
- if (incomingNodes.length > 0) {
44
- this._dynamicNodes = [...this._dynamicNodes, ...incomingNodes];
45
- }
46
- }
47
- render() {
48
- return lit.html `
49
- <summary>
50
- ${this._dynamicNodes}
51
- </summary>
52
- `;
53
- }
54
14
  };
55
- tslib_es6.__decorate([
56
- decorators.state(),
57
- tslib_es6.__metadata("design:type", Array)
58
- ], exports.HDetailsToggler.prototype, "_dynamicNodes", void 0);
59
15
  exports.HDetailsToggler = tslib_es6.__decorate([
60
16
  phoenix_custom_element.phoenixCustomElement('h-details-toggler'),
61
17
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/details/details_toggler.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;"}
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;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -80,9 +80,10 @@ var accordion_group = require('./components/accordion/accordion_group.js');
80
80
  var accordion_content = require('./components/accordion/accordion_content.js');
81
81
  var accordion_toggler = require('./components/accordion/accordion_toggler.js');
82
82
  var details_constants = require('./components/details/details_constants.js');
83
- var details_content = require('./components/details/details_content.js');
84
- var details_toggler = require('./components/details/details_toggler.js');
85
83
  var details = require('./components/details/details.js');
84
+ var details_group = require('./components/details/details_group.js');
85
+ var details_toggler = require('./components/details/details_toggler.js');
86
+ var details_content = require('./components/details/details_content.js');
86
87
  var dropdown_close = require('./components/dropdown/dropdown_close.js');
87
88
  var toggle_button_group = require('./components/groups/toggle_button_group/toggle_button_group.js');
88
89
  var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
@@ -499,10 +500,16 @@ Object.defineProperty(exports, 'HAccordionToggler', {
499
500
  exports.DETAILS_CSS_CLASSES = details_constants.DETAILS_CSS_CLASSES;
500
501
  exports.DETAILS_EVENTS = details_constants.DETAILS_EVENTS;
501
502
  exports.DETAILS_TRANSITION_DURATION = details_constants.DETAILS_TRANSITION_DURATION;
502
- Object.defineProperty(exports, 'HDetailsContent', {
503
+ Object.defineProperty(exports, 'HDetails', {
503
504
  enumerable: true,
504
505
  get: function () {
505
- return details_content.HDetailsContent;
506
+ return details.HDetails;
507
+ }
508
+ });
509
+ Object.defineProperty(exports, 'HDetailsGroup', {
510
+ enumerable: true,
511
+ get: function () {
512
+ return details_group.HDetailsGroup;
506
513
  }
507
514
  });
508
515
  Object.defineProperty(exports, 'HDetailsToggler', {
@@ -511,10 +518,10 @@ Object.defineProperty(exports, 'HDetailsToggler', {
511
518
  return details_toggler.HDetailsToggler;
512
519
  }
513
520
  });
514
- Object.defineProperty(exports, 'HDetails', {
521
+ Object.defineProperty(exports, 'HDetailsContent', {
515
522
  enumerable: true,
516
523
  get: function () {
517
- return details.HDetails;
524
+ return details_content.HDetailsContent;
518
525
  }
519
526
  });
520
527
  Object.defineProperty(exports, 'HDropdownClose', {
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/details/details.d.ts CHANGED
@@ -1,12 +1,8 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  import './details_types';
3
+ import type { TAccordionMode } from "../accordion/accordion_types";
3
4
  export declare class HDetails extends PhoenixLightLitElement {
4
- private $summary;
5
- private _summaryClickHandler;
6
- connectedCallback(): void;
7
- disconnectedCallback(): void;
8
- private _open;
9
- private _close;
10
- private _dispatchToggle;
11
- protected render(): unknown;
5
+ disabled: boolean;
6
+ mode: TAccordionMode;
7
+ updated(): void;
12
8
  }
package/build/esm/packages/phoenix/src/components/details/details.js CHANGED
@@ -1,64 +1,28 @@
1
- import { __decorate } from '../../../../../external/tslib/tslib.es6.js';
2
- import { html } from 'lit';
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import { property } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
5
- import { DETAILS_CSS_CLASSES, DETAILS_TRANSITION_DURATION, DETAILS_EVENTS } from './details_constants.js';
5
+ import { ACCORDION_MODE } from '../accordion/accordion_constants.js';
6
+ import { DETAILS_EVENTS } from './details_constants.js';
6
7
 
7
8
  let HDetails = class HDetails extends PhoenixLightLitElement {
8
9
  constructor() {
9
10
  super(...arguments);
10
- this.$summary = null;
11
- this._summaryClickHandler = (ev) => {
12
- ev.preventDefault();
13
- const $summary = ev.currentTarget;
14
- const $details = $summary.parentNode;
15
- if ($details.hasAttribute('open')) {
16
- this._close($details);
17
- }
18
- else {
19
- this._open($details);
20
- }
21
- };
11
+ this.disabled = false;
12
+ this.mode = ACCORDION_MODE.multi;
22
13
  }
23
- connectedCallback() {
24
- var _a;
25
- super.connectedCallback();
26
- this.$summary = this.querySelector('summary');
27
- (_a = this.$summary) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this._summaryClickHandler);
28
- }
29
- disconnectedCallback() {
30
- var _a;
31
- super.disconnectedCallback();
32
- (_a = this.$summary) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this._summaryClickHandler);
33
- }
34
- _open(details) {
35
- details.setAttribute('open', '');
36
- requestAnimationFrame(() => {
37
- details.classList.add(DETAILS_CSS_CLASSES.isOpen);
38
- });
39
- this._dispatchToggle(details, true);
40
- }
41
- _close(details) {
42
- details.classList.remove(DETAILS_CSS_CLASSES.isOpen);
43
- setTimeout(() => {
44
- details.removeAttribute('open');
45
- }, DETAILS_TRANSITION_DURATION);
46
- this._dispatchToggle(details, false);
47
- }
48
- _dispatchToggle(details, open) {
49
- this.emitCustomEvent(DETAILS_EVENTS.toggle, {
50
- detail: { open, target: details }
51
- });
52
- }
53
- render() {
54
- return html `
55
- <details class="smooth-details">
56
- ${this.getSlot('toggler')}
57
- ${this.getSlot('content')}
58
- </details>
59
- `;
14
+ updated() {
15
+ this.dispatchEvent(new Event(DETAILS_EVENTS.update));
60
16
  }
61
17
  };
18
+ __decorate([
19
+ property({ type: Boolean, reflect: true }),
20
+ __metadata("design:type", Object)
21
+ ], HDetails.prototype, "disabled", void 0);
22
+ __decorate([
23
+ property({ type: String }),
24
+ __metadata("design:type", String)
25
+ ], HDetails.prototype, "mode", void 0);
62
26
  HDetails = __decorate([
63
27
  phoenixCustomElement('h-details')
64
28
  ], HDetails);
package/build/esm/packages/phoenix/src/components/details/details.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,4CAAgD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/esm/packages/phoenix/src/components/details/details_constants.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare const DETAILS_EVENTS: {
2
2
  readonly toggle: "toggle";
3
+ readonly update: "update";
3
4
  };
4
5
  export declare const DETAILS_CSS_CLASSES: {
5
6
  readonly smoothDetails: "smooth-details";
package/build/esm/packages/phoenix/src/components/details/details_constants.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const DETAILS_EVENTS = {
2
- toggle: 'toggle'
2
+ toggle: 'toggle',
3
+ update: 'update'
3
4
  };
4
5
  const DETAILS_CSS_CLASSES = {
5
6
  smoothDetails: 'smooth-details',
package/build/esm/packages/phoenix/src/components/details/details_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;"}
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/details/details_group.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import './details_types';
3
+ export declare class HDetailsGroup extends PhoenixLightLitElement {
4
+ private _$detailsWrapper;
5
+ private _isDisabled;
6
+ private _mode;
7
+ connectedCallback(): void;
8
+ private _syncWithDetailsWrapper;
9
+ toggle(details?: HTMLElement): void;
10
+ show(details?: HTMLElement): void;
11
+ hide(details?: HTMLElement): void;
12
+ private _hideOtherDetailsGroups;
13
+ private _dispatchToggleEvent;
14
+ enable(): void;
15
+ disable(): void;
16
+ private _summaryClickHandler;
17
+ protected render(): unknown;
18
+ }
package/build/esm/packages/phoenix/src/components/details/details_group.js ADDED
@@ -0,0 +1,123 @@
1
+ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
+ import { html } from 'lit';
3
+ import { state } from 'lit/decorators';
4
+ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
+ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
+ import { ACCORDION_MODE } from '../accordion/accordion_constants.js';
7
+ import { DETAILS_EVENTS, DETAILS_CSS_CLASSES, DETAILS_TRANSITION_DURATION } from './details_constants.js';
8
+
9
+ let HDetailsGroup = class HDetailsGroup extends PhoenixLightLitElement {
10
+ constructor() {
11
+ super(...arguments);
12
+ this._$detailsWrapper = null;
13
+ this._isDisabled = false;
14
+ this._mode = ACCORDION_MODE.multi;
15
+ this._syncWithDetailsWrapper = () => {
16
+ if (!this._$detailsWrapper)
17
+ return;
18
+ this._mode = this._$detailsWrapper.mode;
19
+ this._isDisabled = this._$detailsWrapper.disabled;
20
+ if (this._isDisabled) {
21
+ this.disable();
22
+ }
23
+ else {
24
+ this.enable();
25
+ }
26
+ };
27
+ this._hideOtherDetailsGroups = () => {
28
+ var _a;
29
+ if (this._isDisabled)
30
+ return;
31
+ (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h-details-group').forEach(($detailsGroup) => {
32
+ if ($detailsGroup === this)
33
+ return;
34
+ $detailsGroup.hide();
35
+ });
36
+ };
37
+ this._summaryClickHandler = (ev) => {
38
+ ev.preventDefault();
39
+ if (this._isDisabled)
40
+ return;
41
+ const $summary = ev.currentTarget;
42
+ const $details = $summary.parentNode;
43
+ this.toggle($details);
44
+ };
45
+ }
46
+ connectedCallback() {
47
+ var _a;
48
+ super.connectedCallback();
49
+ this._$detailsWrapper = this.closest('h-details');
50
+ (_a = this._$detailsWrapper) === null || _a === void 0 ? void 0 : _a.addEventListener(DETAILS_EVENTS.update, this._syncWithDetailsWrapper);
51
+ this._syncWithDetailsWrapper();
52
+ }
53
+ toggle(details) {
54
+ if (this._mode === ACCORDION_MODE.single)
55
+ this._hideOtherDetailsGroups();
56
+ const $details = details || this.querySelector('details');
57
+ if (!$details)
58
+ return;
59
+ const isOpen = $details.hasAttribute('open');
60
+ isOpen ? this.hide($details) : this.show($details);
61
+ }
62
+ show(details) {
63
+ if (this._mode === ACCORDION_MODE.single)
64
+ this._hideOtherDetailsGroups();
65
+ const $details = details || this.querySelector('details');
66
+ if (!$details)
67
+ return;
68
+ $details.setAttribute('open', '');
69
+ requestAnimationFrame(() => {
70
+ $details.classList.add(DETAILS_CSS_CLASSES.isOpen);
71
+ });
72
+ this._dispatchToggleEvent($details, true);
73
+ }
74
+ hide(details) {
75
+ const $details = details || this.querySelector('details');
76
+ if (!$details)
77
+ return;
78
+ $details.classList.remove(DETAILS_CSS_CLASSES.isOpen);
79
+ setTimeout(() => {
80
+ $details.removeAttribute('open');
81
+ }, DETAILS_TRANSITION_DURATION);
82
+ this._dispatchToggleEvent($details, false);
83
+ }
84
+ _dispatchToggleEvent(details, open) {
85
+ this.emitCustomEvent(DETAILS_EVENTS.toggle, {
86
+ detail: { open, target: details }
87
+ });
88
+ }
89
+ enable() {
90
+ if (this._isDisabled) {
91
+ this.hide();
92
+ this._isDisabled = false;
93
+ }
94
+ }
95
+ disable() {
96
+ if (!this._isDisabled) {
97
+ this.show();
98
+ this._isDisabled = true;
99
+ }
100
+ }
101
+ render() {
102
+ return html `
103
+ <details class="smooth-details">
104
+ <summary @click=${this._summaryClickHandler}>${this.getSlot('toggler')}</summary>
105
+ ${this.getSlot('content')}
106
+ </details>
107
+ `;
108
+ }
109
+ };
110
+ __decorate([
111
+ state(),
112
+ __metadata("design:type", Object)
113
+ ], HDetailsGroup.prototype, "_isDisabled", void 0);
114
+ __decorate([
115
+ state(),
116
+ __metadata("design:type", String)
117
+ ], HDetailsGroup.prototype, "_mode", void 0);
118
+ HDetailsGroup = __decorate([
119
+ phoenixCustomElement('h-details-group')
120
+ ], HDetailsGroup);
121
+
122
+ export { HDetailsGroup };
123
+ //# sourceMappingURL=details_group.js.map
package/build/esm/packages/phoenix/src/components/details/details_group.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/details/details_toggler.d.ts CHANGED
@@ -1,11 +1,5 @@
1
1
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
2
  import './details_types';
3
3
  export declare class HDetailsToggler extends PhoenixLightLitElement {
4
- private _dynamicNodes;
5
- private _nodeObserver;
6
4
  constructor();
7
- connectedCallback(): void;
8
- disconnectedCallback(): void;
9
- private captureNewNodes;
10
- protected render(): import("lit-html").TemplateResult<1>;
11
5
  }
package/build/esm/packages/phoenix/src/components/details/details_toggler.js CHANGED
@@ -1,57 +1,13 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { html } from 'lit';
3
- import { state } from 'lit/decorators';
4
2
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
3
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
4
 
7
5
  let HDetailsToggler = class HDetailsToggler extends PhoenixLightLitElement {
8
6
  constructor() {
9
7
  super();
10
- this._dynamicNodes = [];
11
- this._nodeObserver = null;
12
8
  this.slot = this.hasAttribute('slot') ? this.slot : 'toggler';
13
9
  }
14
- connectedCallback() {
15
- super.connectedCallback();
16
- this.captureNewNodes();
17
- this._nodeObserver = new MutationObserver((mutations) => {
18
- let shouldUpdate = false;
19
- for (const mutation of mutations) {
20
- for (const node of mutation.addedNodes) {
21
- if (node.nodeName.toLowerCase() !== 'summary') {
22
- shouldUpdate = true;
23
- }
24
- }
25
- }
26
- if (shouldUpdate) {
27
- this.captureNewNodes();
28
- }
29
- });
30
- this._nodeObserver.observe(this, { childList: true });
31
- }
32
- disconnectedCallback() {
33
- var _a;
34
- super.disconnectedCallback();
35
- (_a = this._nodeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
36
- }
37
- captureNewNodes() {
38
- const incomingNodes = Array.from(this.childNodes).filter((node) => node.nodeName.toLowerCase() !== 'summary');
39
- if (incomingNodes.length > 0) {
40
- this._dynamicNodes = [...this._dynamicNodes, ...incomingNodes];
41
- }
42
- }
43
- render() {
44
- return html `
45
- <summary>
46
- ${this._dynamicNodes}
47
- </summary>
48
- `;
49
- }
50
10
  };
51
- __decorate([
52
- state(),
53
- __metadata("design:type", Array)
54
- ], HDetailsToggler.prototype, "_dynamicNodes", void 0);
55
11
  HDetailsToggler = __decorate([
56
12
  phoenixCustomElement('h-details-toggler'),
57
13
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/details/details_toggler.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/details/details_types.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import type { HDetailsGroup } from './details_group';
2
+ import type { HDetailsContent } from './details_content';
3
+ import type { HDetailsToggler } from './details_toggler';
1
4
  import type { HDetails } from './details';
2
- import { HDetailsContent } from './details_content';
3
- import { HDetailsToggler } from './details_toggler';
4
5
  declare global {
5
6
  interface HTMLElementTagNameMap {
6
7
  'h-details': HDetails;
8
+ 'h-details-group': HDetailsGroup;
7
9
  'h-details-toggler': HDetailsToggler;
8
10
  'h-details-content': HDetailsContent;
9
11
  }
package/build/esm/packages/phoenix/src/components/details/details_types.js CHANGED
@@ -1,3 +1,2 @@
1
- import './details_content';
2
- import './details_toggler';
1
+ export {};
3
2
  //# sourceMappingURL=details_types.js.map
package/build/esm/packages/phoenix/src/components/details/details_types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"details_types.js","sourceRoot":"","sources":["../../../../../../../src/components/details/details_types.ts"],"names":[],"mappings":"AACA,OAAgC,mBAAmB,CAAC;AACpD,OAAgC,mBAAmB,CAAC"}
1
+ {"version":3,"file":"details_types.js","sourceRoot":"","sources":["../../../../../../../src/components/details/details_types.ts"],"names":[],"mappings":""}
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -72,6 +72,7 @@ export { HAccordionToggler } from './components/accordion/accordion_toggler';
72
72
  export { HAccordionContent } from './components/accordion/accordion_content';
73
73
  export * from './components/accordion/accordion_constants';
74
74
  export { HDetails } from './components/details/details';
75
+ export { HDetailsGroup } from './components/details/details_group';
75
76
  export { HDetailsToggler } from './components/details/details_toggler';
76
77
  export { HDetailsContent } from './components/details/details_content';
77
78
  export * from './components/details/details_constants';
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -76,9 +76,10 @@ export { HAccordionGroup } from './components/accordion/accordion_group.js';
76
76
  export { HAccordionContent } from './components/accordion/accordion_content.js';
77
77
  export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
78
78
  export { DETAILS_CSS_CLASSES, DETAILS_EVENTS, DETAILS_TRANSITION_DURATION } from './components/details/details_constants.js';
79
- export { HDetailsContent } from './components/details/details_content.js';
80
- export { HDetailsToggler } from './components/details/details_toggler.js';
81
79
  export { HDetails } from './components/details/details.js';
80
+ export { HDetailsGroup } from './components/details/details_group.js';
81
+ export { HDetailsToggler } from './components/details/details_toggler.js';
82
+ export { HDetailsContent } from './components/details/details_content.js';
82
83
  export { HDropdownClose } from './components/dropdown/dropdown_close.js';
83
84
  export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group.js';
84
85
  export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
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;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;"}
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.18.8-8",
5
+ "version": "1.18.8-9",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",