@redvars/peacock 3.2.7 → 3.2.8

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 (109) hide show
  1. package/dist/PeacockComponent-DMrFEGDh.js +80 -0
  2. package/dist/PeacockComponent-DMrFEGDh.js.map +1 -0
  3. package/dist/breadcrumb-item-DkhwoMAH.js +6879 -0
  4. package/dist/breadcrumb-item-DkhwoMAH.js.map +1 -0
  5. package/dist/button-BtpAXuLN.js +1180 -0
  6. package/dist/button-BtpAXuLN.js.map +1 -0
  7. package/dist/button-group.js +7 -6
  8. package/dist/button-group.js.map +1 -1
  9. package/dist/button.js +5 -0
  10. package/dist/button.js.map +1 -0
  11. package/dist/{class-map-BmCohX9p.js → class-map-CbncA34D.js} +2 -3
  12. package/dist/class-map-CbncA34D.js.map +1 -0
  13. package/dist/code-highlighter.js +9 -8
  14. package/dist/code-highlighter.js.map +1 -1
  15. package/dist/custom-elements.json +28 -0
  16. package/dist/index.js +87 -35
  17. package/dist/index.js.map +1 -1
  18. package/dist/number-counter.js +7 -6
  19. package/dist/number-counter.js.map +1 -1
  20. package/dist/peacock-loader.js +963 -38
  21. package/dist/peacock-loader.js.map +1 -1
  22. package/dist/src/PeacockComponent.d.ts +1 -0
  23. package/dist/{state-CV1fRmOT.js → state-CEVpI7Vv.js} +2 -2
  24. package/dist/{state-CV1fRmOT.js.map → state-CEVpI7Vv.js.map} +1 -1
  25. package/dist/{style-map-CdmclYgz.js → style-map-mOmZwsJT.js} +2 -3
  26. package/dist/style-map-mOmZwsJT.js.map +1 -0
  27. package/dist/tsconfig.tsbuildinfo +1 -1
  28. package/dist/{unsafe-html-BS8X6Gto.js → unsafe-html-Ca00SXpn.js} +2 -3
  29. package/dist/unsafe-html-Ca00SXpn.js.map +1 -0
  30. package/package.json +1 -1
  31. package/readme.md +2 -2
  32. package/src/PeacockComponent.ts +3 -0
  33. package/src/button/button/button.ts +3 -1
  34. package/src/button/button-group/button-group.ts +2 -0
  35. package/src/code-highlighter/code-highlighter.ts +2 -0
  36. package/src/number-counter/number-counter.ts +2 -0
  37. package/dist/BaseButton.js +0 -209
  38. package/dist/BaseButton.js.map +0 -1
  39. package/dist/BaseInput.js +0 -27
  40. package/dist/BaseInput.js.map +0 -1
  41. package/dist/accordion-item.js +0 -191
  42. package/dist/accordion-item.js.map +0 -1
  43. package/dist/accordion.js +0 -142
  44. package/dist/accordion.js.map +0 -1
  45. package/dist/avatar.js +0 -106
  46. package/dist/avatar.js.map +0 -1
  47. package/dist/badge.js +0 -84
  48. package/dist/badge.js.map +0 -1
  49. package/dist/base-progress.js +0 -33
  50. package/dist/base-progress.js.map +0 -1
  51. package/dist/breadcrumb-item.js +0 -160
  52. package/dist/breadcrumb-item.js.map +0 -1
  53. package/dist/breadcrumb.js +0 -84
  54. package/dist/breadcrumb.js.map +0 -1
  55. package/dist/checkbox.js +0 -530
  56. package/dist/checkbox.js.map +0 -1
  57. package/dist/chip.js +0 -303
  58. package/dist/chip.js.map +0 -1
  59. package/dist/class-map-BmCohX9p.js.map +0 -1
  60. package/dist/clock.js +0 -83
  61. package/dist/clock.js.map +0 -1
  62. package/dist/container.js +0 -135
  63. package/dist/container.js.map +0 -1
  64. package/dist/directive-Cuw6h7YA.js +0 -9
  65. package/dist/directive-Cuw6h7YA.js.map +0 -1
  66. package/dist/divider.js +0 -126
  67. package/dist/divider.js.map +0 -1
  68. package/dist/elevation.js +0 -79
  69. package/dist/elevation.js.map +0 -1
  70. package/dist/empty-state.js +0 -171
  71. package/dist/empty-state.js.map +0 -1
  72. package/dist/field.js +0 -416
  73. package/dist/field.js.map +0 -1
  74. package/dist/focus-ring.js +0 -107
  75. package/dist/focus-ring.js.map +0 -1
  76. package/dist/icon.js +0 -183
  77. package/dist/icon.js.map +0 -1
  78. package/dist/link.js +0 -91
  79. package/dist/link.js.map +0 -1
  80. package/dist/lit-element-CA46RFZ_.js +0 -28
  81. package/dist/lit-element-CA46RFZ_.js.map +0 -1
  82. package/dist/menu-item.js +0 -232
  83. package/dist/menu-item.js.map +0 -1
  84. package/dist/menu-list.js +0 -108
  85. package/dist/menu-list.js.map +0 -1
  86. package/dist/menu.js +0 -117
  87. package/dist/menu.js.map +0 -1
  88. package/dist/property-DNVWDdPC.js +0 -45
  89. package/dist/property-DNVWDdPC.js.map +0 -1
  90. package/dist/query-QBcUV-L_.js +0 -15
  91. package/dist/query-QBcUV-L_.js.map +0 -1
  92. package/dist/ripple.js +0 -128
  93. package/dist/ripple.js.map +0 -1
  94. package/dist/skeleton.js +0 -113
  95. package/dist/skeleton.js.map +0 -1
  96. package/dist/spinner.js +0 -93
  97. package/dist/spinner.js.map +0 -1
  98. package/dist/spread-axRTFMoH.js +0 -32
  99. package/dist/spread-axRTFMoH.js.map +0 -1
  100. package/dist/style-map-CdmclYgz.js.map +0 -1
  101. package/dist/switch-DqxIiVsB.js +0 -2738
  102. package/dist/switch-DqxIiVsB.js.map +0 -1
  103. package/dist/tag.js +0 -323
  104. package/dist/tag.js.map +0 -1
  105. package/dist/tooltip.js +0 -1857
  106. package/dist/tooltip.js.map +0 -1
  107. package/dist/unsafe-html-BS8X6Gto.js.map +0 -1
  108. package/dist/utils-DGMeCC48.js +0 -273
  109. package/dist/utils-DGMeCC48.js.map +0 -1
@@ -1,209 +0,0 @@
1
- import { _ as __decorate, n, a as __classPrivateFieldGet } from './property-DNVWDdPC.js';
2
- import { a as i, A, b } from './lit-element-CA46RFZ_.js';
3
- import { r } from './state-CV1fRmOT.js';
4
- import { e } from './query-QBcUV-L_.js';
5
- import { i as isActivationClick, d as dispatchActivationClick } from './utils-DGMeCC48.js';
6
-
7
- var _BaseButton_id;
8
- class BaseButton extends i {
9
- constructor() {
10
- super(...arguments);
11
- _BaseButton_id.set(this, crypto.randomUUID());
12
- this.htmlType = 'button';
13
- /**
14
- * The visual style of the button.
15
- *
16
- * Possible variant values:
17
- * `"filled"` is a filled button.
18
- * `"outlined"` is an outlined button.
19
- * `"text"` is a transparent button.
20
- * `"tonal"` is a light color button.
21
- * `"elevated"` is elevated button
22
- */
23
- this.variant = 'filled';
24
- /**
25
- * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
26
- */
27
- this.color = 'primary';
28
- /**
29
- * Button size.
30
- * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
31
- */
32
- this.size = 'sm';
33
- /**
34
- * If true, the user cannot interact with the button. Defaults to `false`.
35
- */
36
- this.disabled = false;
37
- this.skeleton = false;
38
- /**
39
- * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
40
- */
41
- this.softDisabled = false;
42
- /**
43
- * If button is disabled, the reason why it is disabled.
44
- */
45
- this.disabledReason = '';
46
- /**
47
- * Sets or retrieves the window or frame at which to target content.
48
- */
49
- this.target = '_self';
50
- this.selected = false;
51
- /**
52
- * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
53
- */
54
- this.throttleDelay = 200;
55
- /**
56
- * States
57
- */
58
- this.isPressed = false;
59
- this.__handlePress = (event) => {
60
- if (this.disabled || this.skeleton || this.softDisabled)
61
- return;
62
- if (event instanceof KeyboardEvent &&
63
- event.type === 'keydown' &&
64
- (event.key === 'Enter' || event.key === ' ')) {
65
- this.isPressed = true;
66
- }
67
- else if (event.type === 'mousedown') {
68
- this.isPressed = true;
69
- }
70
- else {
71
- this.isPressed = false;
72
- }
73
- };
74
- this.__dispatchClickWithThrottle = event => {
75
- this.__dispatchClick(event);
76
- };
77
- this.__dispatchClick = (event) => {
78
- // If the button is soft-disabled or a disabled link, we need to explicitly
79
- // prevent the click from propagating to other event listeners as well as
80
- // prevent the default action.
81
- if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
82
- event.stopImmediatePropagation();
83
- event.preventDefault();
84
- return;
85
- }
86
- if (!isActivationClick(event) || !this.buttonElement) {
87
- return;
88
- }
89
- this.focus();
90
- dispatchActivationClick(this.buttonElement);
91
- };
92
- }
93
- focus() {
94
- this.buttonElement?.focus();
95
- }
96
- blur() {
97
- this.buttonElement?.blur();
98
- }
99
- connectedCallback() {
100
- super.connectedCallback();
101
- this.addEventListener('click', this.__dispatchClickWithThrottle);
102
- window.addEventListener('mouseup', this.__handlePress);
103
- }
104
- disconnectedCallback() {
105
- window.removeEventListener('mouseup', this.__handlePress);
106
- this.removeEventListener('click', this.__dispatchClickWithThrottle);
107
- super.disconnectedCallback();
108
- }
109
- __isLink() {
110
- return !!this.href;
111
- }
112
- __convertTypeToVariantAndColor() {
113
- if (this.type === 'primary') {
114
- this.color = 'primary';
115
- this.variant = 'filled';
116
- }
117
- else if (this.type === 'secondary') {
118
- this.color = 'dark';
119
- this.variant = 'outlined';
120
- }
121
- else if (this.type === 'tertiary') {
122
- this.color = 'primary';
123
- this.variant = 'text';
124
- }
125
- else if (this.type === 'danger') {
126
- this.color = 'danger';
127
- this.variant = 'filled';
128
- }
129
- }
130
- __getDisabledReasonID() {
131
- return this.disabled && this.disabledReason
132
- ? `disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}`
133
- : A;
134
- }
135
- __renderDisabledReason() {
136
- const disabledReasonID = this.__getDisabledReasonID();
137
- if (disabledReasonID)
138
- return b `<div
139
- id="disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}"
140
- role="tooltip"
141
- aria-label=${this.disabledReason}
142
- class="screen-reader-only"
143
- >
144
- {this.disabledReason}
145
- </div>`;
146
- return A;
147
- }
148
- __renderTooltip() {
149
- if (this.tooltip) {
150
- return b `<base-tooltip for="button">${this.tooltip}</base-tooltip>`;
151
- }
152
- return A;
153
- }
154
- }
155
- _BaseButton_id = new WeakMap();
156
- __decorate([
157
- n({ type: String })
158
- ], BaseButton.prototype, "htmlType", void 0);
159
- __decorate([
160
- n({ type: String })
161
- ], BaseButton.prototype, "type", void 0);
162
- __decorate([
163
- n()
164
- ], BaseButton.prototype, "variant", void 0);
165
- __decorate([
166
- n({ reflect: true })
167
- ], BaseButton.prototype, "color", void 0);
168
- __decorate([
169
- n()
170
- ], BaseButton.prototype, "size", void 0);
171
- __decorate([
172
- n({ type: Boolean, reflect: true })
173
- ], BaseButton.prototype, "disabled", void 0);
174
- __decorate([
175
- n()
176
- ], BaseButton.prototype, "skeleton", void 0);
177
- __decorate([
178
- n({ reflect: true, attribute: 'soft-disabled' })
179
- ], BaseButton.prototype, "softDisabled", void 0);
180
- __decorate([
181
- n({ attribute: 'disabled-reason' })
182
- ], BaseButton.prototype, "disabledReason", void 0);
183
- __decorate([
184
- n({ reflect: true })
185
- ], BaseButton.prototype, "href", void 0);
186
- __decorate([
187
- n({ reflect: true })
188
- ], BaseButton.prototype, "configAria", void 0);
189
- __decorate([
190
- n()
191
- ], BaseButton.prototype, "target", void 0);
192
- __decorate([
193
- n()
194
- ], BaseButton.prototype, "selected", void 0);
195
- __decorate([
196
- n()
197
- ], BaseButton.prototype, "throttleDelay", void 0);
198
- __decorate([
199
- n()
200
- ], BaseButton.prototype, "tooltip", void 0);
201
- __decorate([
202
- r()
203
- ], BaseButton.prototype, "isPressed", void 0);
204
- __decorate([
205
- e('.button')
206
- ], BaseButton.prototype, "buttonElement", void 0);
207
-
208
- export { BaseButton };
209
- //# sourceMappingURL=BaseButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BaseButton.js","sources":["../../src/button/BaseButton.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { dispatchActivationClick, isActivationClick } from '../utils.js';\n\nexport class BaseButton extends LitElement {\n #id = crypto.randomUUID();\n\n @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n 'button';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property() variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'light'\n | 'dark' = 'primary';\n\n /**\n * Button size.\n * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n */\n @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * If true, the user cannot interact with the button. Defaults to `false`.\n */\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property() skeleton: boolean = false;\n\n /**\n * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.\n */\n @property({ reflect: true, attribute: 'soft-disabled' })\n softDisabled: boolean = false;\n\n /**\n * If button is disabled, the reason why it is disabled.\n */\n @property({ attribute: 'disabled-reason' })\n disabledReason: string = '';\n\n /**\n * Hyperlink to navigate to on click.\n */\n @property({ reflect: true }) href?: string;\n\n @property({ reflect: true })\n configAria?: { [key: string]: any };\n\n /**\n * Sets or retrieves the window or frame at which to target content.\n */\n @property() target: string = '_self';\n\n @property() selected: boolean = false;\n\n /**\n * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n */\n @property() throttleDelay = 200;\n\n @property() tooltip?: string;\n\n /**\n * States\n */\n @state()\n isPressed = false;\n\n @query('.button') readonly buttonElement!: HTMLElement | null;\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.__dispatchClickWithThrottle);\n window.addEventListener('mouseup', this.__handlePress);\n }\n\n override disconnectedCallback() {\n window.removeEventListener('mouseup', this.__handlePress);\n this.removeEventListener('click', this.__dispatchClickWithThrottle);\n super.disconnectedCallback();\n }\n\n __handlePress = (event: KeyboardEvent | MouseEvent) => {\n if (this.disabled || this.skeleton || this.softDisabled) return;\n if (\n event instanceof KeyboardEvent &&\n event.type === 'keydown' &&\n (event.key === 'Enter' || event.key === ' ')\n ) {\n this.isPressed = true;\n } else if (event.type === 'mousedown') {\n this.isPressed = true;\n } else {\n this.isPressed = false;\n }\n };\n\n __isLink() {\n return !!this.href;\n }\n\n __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n event => {\n this.__dispatchClick(event);\n };\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'dark';\n this.variant = 'outlined';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n __getDisabledReasonID() {\n return this.disabled && this.disabledReason\n ? `disabled-reason-${this.#id}`\n : nothing;\n }\n\n __renderDisabledReason() {\n const disabledReasonID = this.__getDisabledReasonID();\n if (disabledReasonID)\n return html`<div\n id=\"disabled-reason-${this.#id}\"\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"screen-reader-only\"\n >\n {this.disabledReason}\n </div>`;\n return nothing;\n }\n\n __renderTooltip() {\n if (this.tooltip) {\n return html`<base-tooltip for=\"button\">${this.tooltip}</base-tooltip>`;\n }\n return nothing;\n }\n}\n"],"names":["LitElement","nothing","html","property","state","query"],"mappings":"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"}
package/dist/BaseInput.js DELETED
@@ -1,27 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { a as i } from './lit-element-CA46RFZ_.js';
3
-
4
- class BaseInput extends i {
5
- constructor() {
6
- super(...arguments);
7
- this.disabled = false;
8
- this.readonly = false;
9
- this.required = false;
10
- this.skeleton = false;
11
- }
12
- }
13
- __decorate([
14
- n({ type: Boolean, reflect: true })
15
- ], BaseInput.prototype, "disabled", void 0);
16
- __decorate([
17
- n({ type: Boolean, reflect: true })
18
- ], BaseInput.prototype, "readonly", void 0);
19
- __decorate([
20
- n({ type: Boolean, reflect: true })
21
- ], BaseInput.prototype, "required", void 0);
22
- __decorate([
23
- n({ type: Boolean, reflect: true })
24
- ], BaseInput.prototype, "skeleton", void 0);
25
-
26
- export { BaseInput as default };
27
- //# sourceMappingURL=BaseInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BaseInput.js","sources":["../../src/input/BaseInput.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport default abstract class BaseInput extends LitElement {\n value?: any;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n readonly: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n required: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n skeleton = false;\n}\n"],"names":["LitElement","property"],"mappings":";;;AAGc,MAAgB,SAAU,SAAQA,CAAU,CAAA;AAA1D,IAAA,WAAA,GAAA;;QAIE,IAAA,CAAA,QAAQ,GAAY,KAAK;QAGzB,IAAA,CAAA,QAAQ,GAAY,KAAK;QAGzB,IAAA,CAAA,QAAQ,GAAY,KAAK;QAGzB,IAAA,CAAA,QAAQ,GAAG,KAAK;IAClB;AAAC;AAVC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;;;;"}
@@ -1,191 +0,0 @@
1
- import { _ as __decorate, n, a as __classPrivateFieldGet } from './property-DNVWDdPC.js';
2
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
3
- import { e } from './query-QBcUV-L_.js';
4
- import { e as e$1 } from './class-map-BmCohX9p.js';
5
- import './directive-Cuw6h7YA.js';
6
-
7
- var css_248z = i`* {
8
- box-sizing: border-box;
9
- }
10
-
11
- .screen-reader-only {
12
- display: none !important;
13
- }
14
-
15
- :host {
16
- display: block;
17
- --accordion-item-title-align: start;
18
- }
19
-
20
- .accordion-item .accordion-heading {
21
- cursor: pointer;
22
- width: 100%;
23
- border-radius: 0;
24
- border: 0;
25
- padding: 0 var(--spacing-200);
26
- background: var(--accordion-item-heading-background, transparent);
27
- display: flex;
28
- flex-direction: row-reverse;
29
- align-items: center;
30
- justify-content: flex-start;
31
- gap: 0.5rem;
32
- font-family: var(--typography-title-medium-font-family) !important;
33
- font-size: var(--typography-title-medium-font-size) !important;
34
- font-weight: var(--typography-title-medium-font-weight) !important;
35
- line-height: var(--typography-title-medium-line-height) !important;
36
- letter-spacing: var(--typography-title-medium-letter-spacing) !important;
37
- }
38
- .accordion-item .accordion-heading .accordion-title {
39
- width: 100%;
40
- text-align: var(--accordion-item-title-align);
41
- }
42
- .accordion-item .accordion-heading:focus-visible {
43
- outline: 2px solid var(--color-black);
44
- }
45
- .accordion-item .accordion-heading .accordion-icon {
46
- --icon-size: 1.5rem;
47
- --icon-color: currentColor;
48
- transition: transform var(--duration-short2) var(--easing-standard);
49
- }
50
- .accordion-item .item-section {
51
- height: 0;
52
- opacity: 0;
53
- pointer-events: none;
54
- text-align: start;
55
- transition: all var(--duration-short2) var(--easing-standard);
56
- }
57
- .accordion-item:not(.disabled) .accordion-heading:hover {
58
- --accordion-item-heading-background: var(--color-inverse-primary);
59
- }
60
- .accordion-item.disabled .accordion-heading {
61
- cursor: not-allowed;
62
- color: var(--color-on-surface);
63
- opacity: 0.38;
64
- }
65
- .accordion-item.open .item-section {
66
- height: 100%;
67
- pointer-events: auto;
68
- opacity: 1;
69
- padding: var(--spacing-100) var(--spacing-800) var(--spacing-300) var(--spacing-200);
70
- }
71
- .accordion-item.open .accordion-icon {
72
- transform: rotate(180deg);
73
- }
74
-
75
- /*
76
- * Sizes
77
- */
78
- .accordion-item .accordion-heading {
79
- height: 2.5rem;
80
- }
81
-
82
- :host-context([size=sm]) .accordion-item .accordion-heading {
83
- height: 2rem;
84
- }
85
-
86
- :host-context([size=lg]) .accordion-item .accordion-heading {
87
- height: 3rem;
88
- }
89
-
90
- :host-context(p-accordion[align=start]) .accordion-item .accordion-heading {
91
- flex-direction: row;
92
- }`;
93
-
94
- var _AccordionItem_id;
95
- /**
96
- * @label Accordion Item
97
- * @tag accordion-item
98
- * @rawTag accordion
99
- * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
100
- *
101
- * @example
102
- * ```html
103
- * <base-accordion-item>
104
- * Testing
105
- * </accordion-item>
106
- * ```
107
- * @tags display
108
- */
109
- class AccordionItem extends i$1 {
110
- constructor() {
111
- super(...arguments);
112
- _AccordionItem_id.set(this, crypto.randomUUID());
113
- /**
114
- * The menu item value.
115
- */
116
- this.heading = '';
117
- /**
118
- * If true, the user cannot interact with the button. Defaults to `false`.
119
- */
120
- this.disabled = false;
121
- /**
122
- * Menu item selection state.
123
- */
124
- this.open = false;
125
- }
126
- focus() {
127
- this.buttonElement?.focus();
128
- }
129
- blur() {
130
- this.buttonElement?.blur();
131
- }
132
- __handleToggle() {
133
- if (this.disabled)
134
- return;
135
- this.open = !this.open;
136
- this.dispatchEvent(new CustomEvent('accordion-item--toggle', {
137
- bubbles: true,
138
- composed: true,
139
- detail: { open: this.open, id: __classPrivateFieldGet(this, _AccordionItem_id, "f") },
140
- }));
141
- }
142
- render() {
143
- return b `<div
144
- class=${e$1({
145
- 'accordion-item': true,
146
- open: this.open,
147
- disabled: this.disabled,
148
- })}
149
- >
150
- <button
151
- id=${`accordion-heading-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
152
- tabindex="0"
153
- aria-controls=${`accordion-control-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
154
- class="accordion-heading"
155
- aria-disabled=${this.disabled}
156
- @click=${this.__handleToggle}
157
- aria-expanded=${this.open}
158
- >
159
- <base-icon class="accordion-icon" name="keyboard_arrow_down"></base-icon>
160
- <div part="title" class="accordion-title">
161
- <slot name="heading">${this.heading}</slot>
162
- </div>
163
- </button>
164
- <div
165
- class="item-section slot-main"
166
- id=${`accordion-control-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
167
- aria-labelledby=${`accordion-heading-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
168
- role="region"
169
- >
170
- <slot></slot>
171
- </div>
172
- </div>`;
173
- }
174
- }
175
- _AccordionItem_id = new WeakMap();
176
- AccordionItem.styles = [css_248z];
177
- __decorate([
178
- n({ type: String, reflect: true })
179
- ], AccordionItem.prototype, "heading", void 0);
180
- __decorate([
181
- n({ type: Boolean, reflect: true })
182
- ], AccordionItem.prototype, "disabled", void 0);
183
- __decorate([
184
- n({ type: Boolean, reflect: true })
185
- ], AccordionItem.prototype, "open", void 0);
186
- __decorate([
187
- e('.accordion-heading')
188
- ], AccordionItem.prototype, "buttonElement", void 0);
189
-
190
- export { AccordionItem };
191
- //# sourceMappingURL=accordion-item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item/accordion-item.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './accordion-item.scss';\n\n/**\n * @label Accordion Item\n * @tag accordion-item\n * @rawTag accordion\n * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.\n *\n * @example\n * ```html\n * <base-accordion-item>\n * Testing\n * </accordion-item>\n * ```\n * @tags display\n */\nexport class AccordionItem extends LitElement {\n static styles = [styles];\n\n #id = crypto.randomUUID();\n\n /**\n * The menu item value.\n */\n @property({ type: String, reflect: true })\n heading: string = '';\n\n /**\n * If true, the user cannot interact with the button. Defaults to `false`.\n */\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n /**\n * Menu item selection state.\n */\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n @query('.accordion-heading')\n private readonly buttonElement!: HTMLElement | null;\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n private __handleToggle() {\n if (this.disabled) return;\n this.open = !this.open;\n this.dispatchEvent(\n new CustomEvent('accordion-item--toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this.open, id: this.#id },\n }),\n );\n }\n\n render() {\n return html`<div\n class=${classMap({\n 'accordion-item': true,\n open: this.open,\n disabled: this.disabled,\n })}\n >\n <button\n id=${`accordion-heading-${this.#id}`}\n tabindex=\"0\"\n aria-controls=${`accordion-control-${this.#id}`}\n class=\"accordion-heading\"\n aria-disabled=${this.disabled}\n @click=${this.__handleToggle}\n aria-expanded=${this.open}\n >\n <base-icon class=\"accordion-icon\" name=\"keyboard_arrow_down\"></base-icon>\n <div part=\"title\" class=\"accordion-title\">\n <slot name=\"heading\">${this.heading}</slot>\n </div>\n </button>\n <div\n class=\"item-section slot-main\"\n id=${`accordion-control-${this.#id}`}\n aria-labelledby=${`accordion-heading-${this.#id}`}\n role=\"region\"\n >\n <slot></slot>\n </div>\n </div>`;\n }\n}\n"],"names":["LitElement","html","classMap","styles","property","query"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AACG,MAAO,aAAc,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAGE,QAAA,iBAAA,CAAA,GAAA,CAAA,IAAA,EAAM,MAAM,CAAC,UAAU,EAAE,CAAA;AAEzB;;AAEG;QAEH,IAAA,CAAA,OAAO,GAAW,EAAE;AAEpB;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;AAEG;QAEH,IAAA,CAAA,IAAI,GAAY,KAAK;IAyDvB;IApDW,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;IAC7B;IAES,IAAI,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE;IAC5B;IAEQ,cAAc,GAAA;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;AACxC,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,sBAAA,CAAA,IAAI,yBAAI,EAAE;AAC1C,SAAA,CAAC,CACH;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,GAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;YACtB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;;aAGK,CAAA,kBAAA,EAAqB,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAI,CAAA,CAAE;;wBAEpB,CAAA,kBAAA,EAAqB,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAI,CAAA,CAAE;;AAE/B,sBAAA,EAAA,IAAI,CAAC,QAAQ;AACpB,eAAA,EAAA,IAAI,CAAC,cAAc;AACZ,sBAAA,EAAA,IAAI,CAAC,IAAI;;;;AAIA,+BAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;;;;aAKhC,CAAA,kBAAA,EAAqB,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAI,CAAA,CAAE;0BAClB,CAAA,kBAAA,EAAqB,sBAAA,CAAA,IAAI,EAAA,iBAAA,EAAA,GAAA,CAAI,CAAA,CAAE;;;;;WAK9C;IACT;;;AA5EO,aAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAQxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACpB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMrB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAM1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACpB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGL,UAAA,CAAA;IADhBC,CAAK,CAAC,oBAAoB;AACyB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;;;;"}
package/dist/accordion.js DELETED
@@ -1,142 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
3
- import { a as e } from './query-QBcUV-L_.js';
4
- import { AccordionItem } from './accordion-item.js';
5
- import './class-map-BmCohX9p.js';
6
- import './directive-Cuw6h7YA.js';
7
-
8
- /**
9
- * @license
10
- * Copyright 2021 Google LLC
11
- * SPDX-License-Identifier: BSD-3-Clause
12
- */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}
13
-
14
- var css_248z = i`* {
15
- box-sizing: border-box;
16
- }
17
-
18
- .screen-reader-only {
19
- display: none !important;
20
- }
21
-
22
- :host {
23
- display: block;
24
- }
25
-
26
- slot::slotted(:not(:last-child)) {
27
- border-block-start: 1px solid var(--color-outline);
28
- }
29
-
30
- slot::slotted(:last-child) {
31
- border-block-end: 1px solid var(--color-outline);
32
- }`;
33
-
34
- /**
35
- * @label Accordion
36
- * @tag base-accordion
37
- * @rawTag accordion
38
- * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
39
- *
40
- * @example
41
- * ```html
42
- * <base-accordion>
43
- * <accordion-item heading="Accordion">
44
- * Content
45
- * </accordion-item>
46
- * </base-accordion>
47
- * ```
48
- * @tags display
49
- */
50
- class Accordion extends i$1 {
51
- constructor() {
52
- super(...arguments);
53
- this.allowMultiple = false;
54
- }
55
- connectedCallback() {
56
- super.connectedCallback();
57
- // @ts-ignore
58
- // eslint-disable-next-line wc/require-listener-teardown
59
- this.addEventListener('accordion-item:toggle', this._onItemToggle);
60
- this.addEventListener('keydown', this._onKeyDown);
61
- }
62
- disconnectedCallback() {
63
- super.disconnectedCallback();
64
- // @ts-ignore
65
- // eslint-disable-next-line no-undef
66
- this.removeEventListener('accordion-item:toggle', this._onItemToggle);
67
- this.removeEventListener('keydown', this._onKeyDown);
68
- }
69
- _onItemToggle(e) {
70
- const targetItem = e.target;
71
- // Stop event bubbling if it came from a nested accordion
72
- // We check if the target item is a direct child of *this* accordion
73
- if (targetItem.parentElement !== this)
74
- return;
75
- if (!this.allowMultiple && targetItem.open) {
76
- this.items.forEach(item => {
77
- if (item !== targetItem && item.open) {
78
- // eslint-disable-next-line no-param-reassign
79
- item.open = false;
80
- }
81
- });
82
- }
83
- }
84
- _onKeyDown(e) {
85
- // 1. Find which item currently has its HEADER focused.
86
- // We check the shadowRoot of each item to see if the internal <button> is the active element.
87
- const focusedItemIndex = this.items.findIndex(item => {
88
- // Access the Shadow DOM of the item
89
- const root = item.shadowRoot;
90
- // Check if the focused element inside that shadow DOM is the toggle button
91
- return root?.activeElement?.classList.contains('accordion-heading');
92
- });
93
- // 2. If no header is focused (e.g., focus is on body content or outside), do nothing.
94
- // This prevents stealing focus when the user is typing in a form inside the accordion.
95
- if (focusedItemIndex === -1)
96
- return;
97
- let nextIndex = -1;
98
- // eslint-disable-next-line default-case
99
- switch (e.key) {
100
- case 'ArrowDown':
101
- e.preventDefault();
102
- // Cycle next
103
- nextIndex = (focusedItemIndex + 1) % this.items.length;
104
- break;
105
- case 'ArrowUp':
106
- e.preventDefault();
107
- // Cycle previous
108
- nextIndex =
109
- (focusedItemIndex - 1 + this.items.length) % this.items.length;
110
- break;
111
- case 'Home':
112
- e.preventDefault();
113
- nextIndex = 0;
114
- break;
115
- case 'End':
116
- e.preventDefault();
117
- nextIndex = this.items.length - 1;
118
- break;
119
- }
120
- // 3. Apply Focus
121
- if (nextIndex !== -1) {
122
- const itemToFocus = this.items[nextIndex];
123
- // Select the button inside the Shadow DOM of the target item
124
- const button = itemToFocus.shadowRoot?.querySelector('.accordion-heading');
125
- button?.focus();
126
- }
127
- }
128
- render() {
129
- return b `<div class="accordion"><slot></slot></div>`;
130
- }
131
- }
132
- Accordion.styles = [css_248z];
133
- Accordion.Item = AccordionItem;
134
- __decorate([
135
- n({ type: Boolean, attribute: 'allow-multiple' })
136
- ], Accordion.prototype, "allowMultiple", void 0);
137
- __decorate([
138
- o({ selector: 'p-accordion-item' })
139
- ], Accordion.prototype, "items", void 0);
140
-
141
- export { Accordion };
142
- //# sourceMappingURL=accordion.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"accordion.js","sources":["../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../../src/accordion/accordion/accordion.ts"],"sourcesContent":["import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c=\"slot\"+(r?`[name=${r}]`:\":not([name])\");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}export{o as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './accordion.scss';\nimport { AccordionItem } from '../accordion-item/accordion-item.js';\n\n/**\n * @label Accordion\n * @tag base-accordion\n * @rawTag accordion\n * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n *\n * @example\n * ```html\n * <base-accordion>\n * <accordion-item heading=\"Accordion\">\n * Content\n * </accordion-item>\n * </base-accordion>\n * ```\n * @tags display\n */\nexport class Accordion extends LitElement {\n static styles = [styles];\n\n @property({ type: Boolean, attribute: 'allow-multiple' })\n allowMultiple = false;\n\n @queryAssignedElements({ selector: 'p-accordion-item' })\n items!: Array<AccordionItem>;\n\n connectedCallback() {\n super.connectedCallback();\n // @ts-ignore\n // eslint-disable-next-line wc/require-listener-teardown\n this.addEventListener('accordion-item:toggle', this._onItemToggle);\n this.addEventListener('keydown', this._onKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n // @ts-ignore\n // eslint-disable-next-line no-undef\n this.removeEventListener('accordion-item:toggle', this._onItemToggle);\n this.removeEventListener('keydown', this._onKeyDown);\n }\n\n private _onItemToggle(e: CustomEvent) {\n const targetItem = e.target as AccordionItem;\n\n // Stop event bubbling if it came from a nested accordion\n // We check if the target item is a direct child of *this* accordion\n if (targetItem.parentElement !== this) return;\n\n if (!this.allowMultiple && targetItem.open) {\n this.items.forEach(item => {\n if (item !== targetItem && item.open) {\n // eslint-disable-next-line no-param-reassign\n item.open = false;\n }\n });\n }\n }\n\n private _onKeyDown(e: KeyboardEvent) {\n // 1. Find which item currently has its HEADER focused.\n // We check the shadowRoot of each item to see if the internal <button> is the active element.\n const focusedItemIndex = this.items.findIndex(item => {\n // Access the Shadow DOM of the item\n const root = item.shadowRoot;\n // Check if the focused element inside that shadow DOM is the toggle button\n return root?.activeElement?.classList.contains('accordion-heading');\n });\n\n // 2. If no header is focused (e.g., focus is on body content or outside), do nothing.\n // This prevents stealing focus when the user is typing in a form inside the accordion.\n if (focusedItemIndex === -1) return;\n\n let nextIndex = -1;\n\n // eslint-disable-next-line default-case\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n // Cycle next\n nextIndex = (focusedItemIndex + 1) % this.items.length;\n break;\n case 'ArrowUp':\n e.preventDefault();\n // Cycle previous\n nextIndex =\n (focusedItemIndex - 1 + this.items.length) % this.items.length;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = this.items.length - 1;\n break;\n }\n\n // 3. Apply Focus\n if (nextIndex !== -1) {\n const itemToFocus = this.items[nextIndex];\n // Select the button inside the Shadow DOM of the target item\n const button = itemToFocus.shadowRoot?.querySelector(\n '.accordion-heading',\n ) as HTMLElement;\n button?.focus();\n }\n }\n\n render() {\n return html`<div class=\"accordion\"><slot></slot></div>`;\n }\n\n static Item = AccordionItem;\n}\n"],"names":["e","t","LitElement","html","styles","property","queryAssignedElements"],"mappings":"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","x_google_ignoreList":[0]}