@redvars/peacock 3.2.7 → 3.2.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 (145) hide show
  1. package/dist/PeacockComponent-CxJc63xj.js +73 -0
  2. package/dist/PeacockComponent-CxJc63xj.js.map +1 -0
  3. package/dist/assets/styles.css +1 -1
  4. package/dist/assets/styles.css.map +1 -1
  5. package/dist/button-2MeDq0Yy.js +898 -0
  6. package/dist/button-2MeDq0Yy.js.map +1 -0
  7. package/dist/button-group.js +7 -5
  8. package/dist/button-group.js.map +1 -1
  9. package/dist/button.js +7 -0
  10. package/dist/button.js.map +1 -0
  11. package/dist/{class-map-BmCohX9p.js → class-map-BvQRv7eW.js} +2 -2
  12. package/dist/{class-map-BmCohX9p.js.map → class-map-BvQRv7eW.js.map} +1 -1
  13. package/dist/clock.js +26 -24
  14. package/dist/clock.js.map +1 -1
  15. package/dist/code-editor.js +43877 -0
  16. package/dist/code-editor.js.map +1 -0
  17. package/dist/code-highlighter.js +9 -7
  18. package/dist/code-highlighter.js.map +1 -1
  19. package/dist/custom-elements-jsdocs.json +561 -0
  20. package/dist/custom-elements.json +838 -227
  21. package/dist/{utils-DGMeCC48.js → dispatch-event-utils-vbdiOSeC.js} +19 -2
  22. package/dist/dispatch-event-utils-vbdiOSeC.js.map +1 -0
  23. package/dist/image-DK6VQW7N.js +7042 -0
  24. package/dist/image-DK6VQW7N.js.map +1 -0
  25. package/dist/index.js +10 -33
  26. package/dist/index.js.map +1 -1
  27. package/dist/number-counter.js +7 -5
  28. package/dist/number-counter.js.map +1 -1
  29. package/dist/observe-theme-change-NneLARW8.js +51 -0
  30. package/dist/observe-theme-change-NneLARW8.js.map +1 -0
  31. package/dist/peacock-loader.js +973 -37
  32. package/dist/peacock-loader.js.map +1 -1
  33. package/dist/src/PeacockComponent.d.ts +1 -0
  34. package/dist/src/code-editor/code-editor.d.ts +45 -0
  35. package/dist/src/code-editor/index.d.ts +2 -0
  36. package/dist/src/image/image.d.ts +45 -0
  37. package/dist/src/image/index.d.ts +1 -0
  38. package/dist/src/index.d.ts +2 -0
  39. package/dist/src/utils/dispatch-event-utils.d.ts +72 -0
  40. package/dist/src/utils/observe-theme-change.d.ts +3 -0
  41. package/dist/src/utils.d.ts +1 -72
  42. package/dist/{state-CV1fRmOT.js → state-B09bP3XH.js} +2 -2
  43. package/dist/{state-CV1fRmOT.js.map → state-B09bP3XH.js.map} +1 -1
  44. package/dist/{style-map-CdmclYgz.js → style-map-B8xgVEc9.js} +2 -2
  45. package/dist/{style-map-CdmclYgz.js.map → style-map-B8xgVEc9.js.map} +1 -1
  46. package/dist/tsconfig.tsbuildinfo +1 -1
  47. package/dist/{unsafe-html-BS8X6Gto.js → unsafe-html-B-dV3Jps.js} +2 -2
  48. package/dist/{unsafe-html-BS8X6Gto.js.map → unsafe-html-B-dV3Jps.js.map} +1 -1
  49. package/package.json +5 -3
  50. package/readme.md +2 -2
  51. package/scss/styles.scss +57 -1
  52. package/scss/tokens.css +1 -0
  53. package/src/PeacockComponent.ts +3 -0
  54. package/src/accordion/accordion-item/accordion-item.scss +1 -1
  55. package/src/button/BaseButton.ts +1 -1
  56. package/src/button/button/button.ts +3 -1
  57. package/src/button/button-group/button-group.ts +2 -0
  58. package/src/clock/clock.ts +4 -1
  59. package/src/code-editor/code-editor.scss +52 -0
  60. package/src/code-editor/code-editor.ts +215 -0
  61. package/src/code-editor/demo/index.html +37 -0
  62. package/src/code-editor/index.ts +3 -0
  63. package/src/code-highlighter/code-highlighter.ts +2 -0
  64. package/src/container/container.scss +1 -1
  65. package/src/date-picker/date-picker.ts +1 -1
  66. package/src/image/image.scss +49 -0
  67. package/src/image/image.ts +135 -0
  68. package/src/image/index.ts +1 -0
  69. package/src/index.ts +2 -0
  70. package/src/input/input.ts +1 -2
  71. package/src/menu/menu-item/menu-item.scss +5 -4
  72. package/src/menu/menu-list/menu-list.scss +1 -0
  73. package/src/number-counter/number-counter.ts +2 -0
  74. package/src/number-field/number-field.ts +1 -1
  75. package/src/peacock-loader.ts +7 -0
  76. package/src/textarea/textarea.ts +1 -1
  77. package/src/time-picker/time-picker.ts +1 -1
  78. package/src/utils/dispatch-event-utils.ts +131 -0
  79. package/src/utils/observe-theme-change.ts +30 -0
  80. package/src/utils.ts +5 -131
  81. package/dist/BaseButton.js +0 -209
  82. package/dist/BaseButton.js.map +0 -1
  83. package/dist/BaseInput.js +0 -27
  84. package/dist/BaseInput.js.map +0 -1
  85. package/dist/accordion-item.js +0 -191
  86. package/dist/accordion-item.js.map +0 -1
  87. package/dist/accordion.js +0 -142
  88. package/dist/accordion.js.map +0 -1
  89. package/dist/avatar.js +0 -106
  90. package/dist/avatar.js.map +0 -1
  91. package/dist/badge.js +0 -84
  92. package/dist/badge.js.map +0 -1
  93. package/dist/base-progress.js +0 -33
  94. package/dist/base-progress.js.map +0 -1
  95. package/dist/breadcrumb-item.js +0 -160
  96. package/dist/breadcrumb-item.js.map +0 -1
  97. package/dist/breadcrumb.js +0 -84
  98. package/dist/breadcrumb.js.map +0 -1
  99. package/dist/checkbox.js +0 -530
  100. package/dist/checkbox.js.map +0 -1
  101. package/dist/chip.js +0 -303
  102. package/dist/chip.js.map +0 -1
  103. package/dist/container.js +0 -135
  104. package/dist/container.js.map +0 -1
  105. package/dist/divider.js +0 -126
  106. package/dist/divider.js.map +0 -1
  107. package/dist/elevation.js +0 -79
  108. package/dist/elevation.js.map +0 -1
  109. package/dist/empty-state.js +0 -171
  110. package/dist/empty-state.js.map +0 -1
  111. package/dist/field.js +0 -416
  112. package/dist/field.js.map +0 -1
  113. package/dist/focus-ring.js +0 -107
  114. package/dist/focus-ring.js.map +0 -1
  115. package/dist/icon.js +0 -183
  116. package/dist/icon.js.map +0 -1
  117. package/dist/link.js +0 -91
  118. package/dist/link.js.map +0 -1
  119. package/dist/lit-element-CA46RFZ_.js +0 -28
  120. package/dist/lit-element-CA46RFZ_.js.map +0 -1
  121. package/dist/menu-item.js +0 -232
  122. package/dist/menu-item.js.map +0 -1
  123. package/dist/menu-list.js +0 -108
  124. package/dist/menu-list.js.map +0 -1
  125. package/dist/menu.js +0 -117
  126. package/dist/menu.js.map +0 -1
  127. package/dist/property-DNVWDdPC.js +0 -45
  128. package/dist/property-DNVWDdPC.js.map +0 -1
  129. package/dist/query-QBcUV-L_.js +0 -15
  130. package/dist/query-QBcUV-L_.js.map +0 -1
  131. package/dist/ripple.js +0 -128
  132. package/dist/ripple.js.map +0 -1
  133. package/dist/skeleton.js +0 -113
  134. package/dist/skeleton.js.map +0 -1
  135. package/dist/spinner.js +0 -93
  136. package/dist/spinner.js.map +0 -1
  137. package/dist/spread-axRTFMoH.js +0 -32
  138. package/dist/spread-axRTFMoH.js.map +0 -1
  139. package/dist/switch-DqxIiVsB.js +0 -2738
  140. package/dist/switch-DqxIiVsB.js.map +0 -1
  141. package/dist/tag.js +0 -323
  142. package/dist/tag.js.map +0 -1
  143. package/dist/tooltip.js +0 -1857
  144. package/dist/tooltip.js.map +0 -1
  145. package/dist/utils-DGMeCC48.js.map +0 -1
@@ -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]}
package/dist/avatar.js DELETED
@@ -1,106 +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 { e } from './class-map-BmCohX9p.js';
4
- import './directive-Cuw6h7YA.js';
5
-
6
- var css_248z = i`* {
7
- box-sizing: border-box;
8
- }
9
-
10
- .screen-reader-only {
11
- display: none !important;
12
- }
13
-
14
- :host {
15
- display: inline-block;
16
- pointer-events: none;
17
- --avatar-size: 2rem;
18
- --avatar-background-color: var(--color-primary);
19
- --avatar-text-color: var(--color-on-primary);
20
- --avatar-border-radius: var(--global-avatar-border-radius);
21
- }
22
-
23
- .avatar-container {
24
- display: flex;
25
- align-items: center;
26
- gap: var(--spacing-050);
27
- line-height: 0;
28
- }
29
-
30
- .avatar {
31
- border-radius: var(--avatar-border-radius);
32
- display: flex;
33
- justify-content: center;
34
- align-items: center;
35
- color: var(--avatar-text-color);
36
- width: var(--avatar-size);
37
- height: var(--avatar-size);
38
- font-family: var(--typography-body-large-emphasized-font-family) !important;
39
- font-size: var(--typography-body-large-emphasized-font-size) !important;
40
- font-weight: var(--typography-body-large-emphasized-font-weight) !important;
41
- line-height: var(--typography-body-large-emphasized-line-height) !important;
42
- letter-spacing: var(--typography-body-large-emphasized-letter-spacing) !important;
43
- background-color: var(--avatar-background-color);
44
- font-size: calc(var(--avatar-size) * 0.5) !important;
45
- }
46
- .avatar .image {
47
- width: 100%;
48
- height: 100%;
49
- overflow: hidden;
50
- border-radius: inherit;
51
- }`;
52
-
53
- /**
54
- * @label Avatar
55
- * @tag base-avatar
56
- * @rawTag avatar
57
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
58
- *
59
- * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
60
- * @cssprop --avatar-background-color - Controls the color of the avatar.
61
- * @cssprop --avatar-size - Controls the size of the avatar.
62
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
63
- *
64
- *
65
- * @example
66
- * ```html
67
- * <base-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></base-avatar>
68
- * ```
69
- *
70
- * @tags display
71
- */
72
- class Avatar extends i$1 {
73
- constructor() {
74
- super(...arguments);
75
- this.name = '';
76
- }
77
- render() {
78
- return b `<div class="avatar-container">
79
- <div
80
- class=${e({
81
- avatar: true,
82
- initials: !this.src,
83
- image: !!this.src,
84
- })}
85
- >
86
- ${this.src
87
- ? b `<img class="image" src=${this.src} alt=${this.name} />`
88
- : b `<div class="initials">${this.__getInitials()}</div>`}
89
- </div>
90
- </div>`;
91
- }
92
- __getInitials() {
93
- const [first = '', last = ''] = this.name.split(' ');
94
- return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
95
- }
96
- }
97
- Avatar.styles = [css_248z];
98
- __decorate([
99
- n({ type: String, reflect: true })
100
- ], Avatar.prototype, "name", void 0);
101
- __decorate([
102
- n({ type: String, reflect: true })
103
- ], Avatar.prototype, "src", void 0);
104
-
105
- export { Avatar };
106
- //# sourceMappingURL=avatar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\n\n/**\n * @label Avatar\n * @tag base-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <base-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.xs.webp\" style='--avatar-size: 4rem'></base-avatar>\n * ```\n *\n * @tags display\n */\nexport class Avatar extends LitElement {\n static styles = [styles];\n\n @property({ type: String, reflect: true }) name: string = '';\n\n @property({ type: String, reflect: true }) src?: string;\n\n render() {\n return html`<div class=\"avatar-container\">\n <div\n class=${classMap({\n avatar: true,\n initials: !this.src,\n image: !!this.src,\n })}\n >\n ${this.src\n ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n </div>\n </div>`;\n }\n\n private __getInitials() {\n const [first = '', last = ''] = this.name.split(' ');\n return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,MAAO,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QAG6C,IAAA,CAAA,IAAI,GAAW,EAAE;IAwB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AAzBO,MAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAEmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAElB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;;;;"}
package/dist/badge.js DELETED
@@ -1,84 +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 { e } from './class-map-BmCohX9p.js';
4
- import './directive-Cuw6h7YA.js';
5
-
6
- var css_248z = i`* {
7
- box-sizing: border-box;
8
- }
9
-
10
- .screen-reader-only {
11
- display: none !important;
12
- }
13
-
14
- :host {
15
- display: inline-block;
16
- --badge-color: var(--global-badge-color);
17
- z-index: var(--z-index-badge);
18
- }
19
-
20
- .badge {
21
- pointer-events: none;
22
- color: var(--color-white);
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- background-color: var(--badge-color);
27
- border-radius: var(--shape-corner-full);
28
- }
29
- .badge.has-value {
30
- height: 1rem;
31
- min-width: 1rem;
32
- padding-inline: var(--spacing-050);
33
- font-family: var(--typography-label-small-font-family) !important;
34
- font-size: var(--typography-label-small-font-size) !important;
35
- font-weight: var(--typography-label-small-font-weight) !important;
36
- line-height: var(--typography-label-small-line-height) !important;
37
- letter-spacing: var(--typography-label-small-letter-spacing) !important;
38
- color: var(--color-on-error);
39
- }
40
- .badge:not(.has-value) {
41
- height: 0.375rem;
42
- width: 0.375rem;
43
- }`;
44
-
45
- /**
46
- * @label Badge
47
- * @tag base-badge
48
- * @rawTag badge
49
- * @summary The badge component is used to display a small amount of information to the user.
50
- *
51
- * @cssprop --badge-color - Controls the color of the badge.
52
- *
53
- * @example
54
- * ```html
55
- * <base-badge value="1"></base-badge>
56
- * ```
57
- * @tags display
58
- */
59
- class Badge extends i$1 {
60
- constructor() {
61
- super(...arguments);
62
- /**
63
- * The value to display in the badge.
64
- */
65
- this.value = '';
66
- }
67
- render() {
68
- return b `<div
69
- class=${e({
70
- badge: true,
71
- 'has-value': !!this.value,
72
- })}
73
- >
74
- ${this.value}
75
- </div>`;
76
- }
77
- }
78
- Badge.styles = [css_248z];
79
- __decorate([
80
- n({ type: String })
81
- ], Badge.prototype, "value", void 0);
82
-
83
- export { Badge };
84
- //# sourceMappingURL=badge.js.map
package/dist/badge.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"badge.js","sources":["../../src/badge/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './badge.scss';\n\n/**\n * @label Badge\n * @tag base-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <base-badge value=\"1\"></base-badge>\n * ```\n * @tags display\n */\nexport class Badge extends LitElement {\n static styles = [styles];\n\n /**\n * The value to display in the badge.\n */\n @property({ type: String }) value: string = '';\n\n render() {\n return html`<div\n class=${classMap({\n badge: true,\n 'has-value': !!this.value,\n })}\n >\n ${this.value}\n </div>`;\n }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AACG,MAAO,KAAM,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;AAGE;;AAEG;QACyB,IAAA,CAAA,KAAK,GAAW,EAAE;IAYhD;IAVE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC1B,CAAC;;AAEA,MAAA,EAAA,IAAI,CAAC,KAAK;WACP;IACT;;AAhBO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;;;;"}
@@ -1,33 +0,0 @@
1
- import { _ as __decorate, n } from './property-DNVWDdPC.js';
2
- import { a as i } from './lit-element-CA46RFZ_.js';
3
-
4
- class BaseProgress extends i {
5
- constructor() {
6
- super(...arguments);
7
- this.indeterminate = false;
8
- this.inline = false;
9
- }
10
- __getPercentageValue() {
11
- if (!this.value)
12
- return 0;
13
- return this.value;
14
- }
15
- }
16
- __decorate([
17
- n({ type: Number })
18
- ], BaseProgress.prototype, "value", void 0);
19
- __decorate([
20
- n({ type: Boolean })
21
- ], BaseProgress.prototype, "indeterminate", void 0);
22
- __decorate([
23
- n({ type: String })
24
- ], BaseProgress.prototype, "label", void 0);
25
- __decorate([
26
- n({ type: String, attribute: 'helper-text' })
27
- ], BaseProgress.prototype, "helperText", void 0);
28
- __decorate([
29
- n({ type: Boolean })
30
- ], BaseProgress.prototype, "inline", void 0);
31
-
32
- export { BaseProgress };
33
- //# sourceMappingURL=base-progress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-progress.js","sources":["../../src/progress/base-progress.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class BaseProgress extends LitElement {\n /** The current value. */\n @property({ type: Number }) value?: number;\n\n @property({ type: Boolean }) indeterminate = false;\n\n /** A label describing the progress bar. */\n @property({ type: String }) label?: string;\n\n @property({ type: String, attribute: 'helper-text' }) helperText?: string;\n\n @property({ type: Boolean }) inline = false;\n\n __getPercentageValue(): number {\n if (!this.value) return 0;\n return this.value;\n }\n}\n"],"names":["LitElement","property"],"mappings":";;;AAGM,MAAO,YAAa,SAAQA,CAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;QAI+B,IAAA,CAAA,aAAa,GAAG,KAAK;QAOrB,IAAA,CAAA,MAAM,GAAG,KAAK;IAM7C;IAJE,oBAAoB,GAAA;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,CAAC;QACzB,OAAO,IAAI,CAAC,KAAK;IACnB;AACD;AAf6B,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEd,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAwB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAGvB,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAEW,UAAA,CAAA;IAArDA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAE7C,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAiB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;;;;"}