@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.
- package/dist/PeacockComponent-CxJc63xj.js +73 -0
- package/dist/PeacockComponent-CxJc63xj.js.map +1 -0
- package/dist/assets/styles.css +1 -1
- package/dist/assets/styles.css.map +1 -1
- package/dist/button-2MeDq0Yy.js +898 -0
- package/dist/button-2MeDq0Yy.js.map +1 -0
- package/dist/button-group.js +7 -5
- package/dist/button-group.js.map +1 -1
- package/dist/button.js +7 -0
- package/dist/button.js.map +1 -0
- package/dist/{class-map-BmCohX9p.js → class-map-BvQRv7eW.js} +2 -2
- package/dist/{class-map-BmCohX9p.js.map → class-map-BvQRv7eW.js.map} +1 -1
- package/dist/clock.js +26 -24
- package/dist/clock.js.map +1 -1
- package/dist/code-editor.js +43877 -0
- package/dist/code-editor.js.map +1 -0
- package/dist/code-highlighter.js +9 -7
- package/dist/code-highlighter.js.map +1 -1
- package/dist/custom-elements-jsdocs.json +561 -0
- package/dist/custom-elements.json +838 -227
- package/dist/{utils-DGMeCC48.js → dispatch-event-utils-vbdiOSeC.js} +19 -2
- package/dist/dispatch-event-utils-vbdiOSeC.js.map +1 -0
- package/dist/image-DK6VQW7N.js +7042 -0
- package/dist/image-DK6VQW7N.js.map +1 -0
- package/dist/index.js +10 -33
- package/dist/index.js.map +1 -1
- package/dist/number-counter.js +7 -5
- package/dist/number-counter.js.map +1 -1
- package/dist/observe-theme-change-NneLARW8.js +51 -0
- package/dist/observe-theme-change-NneLARW8.js.map +1 -0
- package/dist/peacock-loader.js +973 -37
- package/dist/peacock-loader.js.map +1 -1
- package/dist/src/PeacockComponent.d.ts +1 -0
- package/dist/src/code-editor/code-editor.d.ts +45 -0
- package/dist/src/code-editor/index.d.ts +2 -0
- package/dist/src/image/image.d.ts +45 -0
- package/dist/src/image/index.d.ts +1 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/utils/dispatch-event-utils.d.ts +72 -0
- package/dist/src/utils/observe-theme-change.d.ts +3 -0
- package/dist/src/utils.d.ts +1 -72
- package/dist/{state-CV1fRmOT.js → state-B09bP3XH.js} +2 -2
- package/dist/{state-CV1fRmOT.js.map → state-B09bP3XH.js.map} +1 -1
- package/dist/{style-map-CdmclYgz.js → style-map-B8xgVEc9.js} +2 -2
- package/dist/{style-map-CdmclYgz.js.map → style-map-B8xgVEc9.js.map} +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/{unsafe-html-BS8X6Gto.js → unsafe-html-B-dV3Jps.js} +2 -2
- package/dist/{unsafe-html-BS8X6Gto.js.map → unsafe-html-B-dV3Jps.js.map} +1 -1
- package/package.json +5 -3
- package/readme.md +2 -2
- package/scss/styles.scss +57 -1
- package/scss/tokens.css +1 -0
- package/src/PeacockComponent.ts +3 -0
- package/src/accordion/accordion-item/accordion-item.scss +1 -1
- package/src/button/BaseButton.ts +1 -1
- package/src/button/button/button.ts +3 -1
- package/src/button/button-group/button-group.ts +2 -0
- package/src/clock/clock.ts +4 -1
- package/src/code-editor/code-editor.scss +52 -0
- package/src/code-editor/code-editor.ts +215 -0
- package/src/code-editor/demo/index.html +37 -0
- package/src/code-editor/index.ts +3 -0
- package/src/code-highlighter/code-highlighter.ts +2 -0
- package/src/container/container.scss +1 -1
- package/src/date-picker/date-picker.ts +1 -1
- package/src/image/image.scss +49 -0
- package/src/image/image.ts +135 -0
- package/src/image/index.ts +1 -0
- package/src/index.ts +2 -0
- package/src/input/input.ts +1 -2
- package/src/menu/menu-item/menu-item.scss +5 -4
- package/src/menu/menu-list/menu-list.scss +1 -0
- package/src/number-counter/number-counter.ts +2 -0
- package/src/number-field/number-field.ts +1 -1
- package/src/peacock-loader.ts +7 -0
- package/src/textarea/textarea.ts +1 -1
- package/src/time-picker/time-picker.ts +1 -1
- package/src/utils/dispatch-event-utils.ts +131 -0
- package/src/utils/observe-theme-change.ts +30 -0
- package/src/utils.ts +5 -131
- package/dist/BaseButton.js +0 -209
- package/dist/BaseButton.js.map +0 -1
- package/dist/BaseInput.js +0 -27
- package/dist/BaseInput.js.map +0 -1
- package/dist/accordion-item.js +0 -191
- package/dist/accordion-item.js.map +0 -1
- package/dist/accordion.js +0 -142
- package/dist/accordion.js.map +0 -1
- package/dist/avatar.js +0 -106
- package/dist/avatar.js.map +0 -1
- package/dist/badge.js +0 -84
- package/dist/badge.js.map +0 -1
- package/dist/base-progress.js +0 -33
- package/dist/base-progress.js.map +0 -1
- package/dist/breadcrumb-item.js +0 -160
- package/dist/breadcrumb-item.js.map +0 -1
- package/dist/breadcrumb.js +0 -84
- package/dist/breadcrumb.js.map +0 -1
- package/dist/checkbox.js +0 -530
- package/dist/checkbox.js.map +0 -1
- package/dist/chip.js +0 -303
- package/dist/chip.js.map +0 -1
- package/dist/container.js +0 -135
- package/dist/container.js.map +0 -1
- package/dist/divider.js +0 -126
- package/dist/divider.js.map +0 -1
- package/dist/elevation.js +0 -79
- package/dist/elevation.js.map +0 -1
- package/dist/empty-state.js +0 -171
- package/dist/empty-state.js.map +0 -1
- package/dist/field.js +0 -416
- package/dist/field.js.map +0 -1
- package/dist/focus-ring.js +0 -107
- package/dist/focus-ring.js.map +0 -1
- package/dist/icon.js +0 -183
- package/dist/icon.js.map +0 -1
- package/dist/link.js +0 -91
- package/dist/link.js.map +0 -1
- package/dist/lit-element-CA46RFZ_.js +0 -28
- package/dist/lit-element-CA46RFZ_.js.map +0 -1
- package/dist/menu-item.js +0 -232
- package/dist/menu-item.js.map +0 -1
- package/dist/menu-list.js +0 -108
- package/dist/menu-list.js.map +0 -1
- package/dist/menu.js +0 -117
- package/dist/menu.js.map +0 -1
- package/dist/property-DNVWDdPC.js +0 -45
- package/dist/property-DNVWDdPC.js.map +0 -1
- package/dist/query-QBcUV-L_.js +0 -15
- package/dist/query-QBcUV-L_.js.map +0 -1
- package/dist/ripple.js +0 -128
- package/dist/ripple.js.map +0 -1
- package/dist/skeleton.js +0 -113
- package/dist/skeleton.js.map +0 -1
- package/dist/spinner.js +0 -93
- package/dist/spinner.js.map +0 -1
- package/dist/spread-axRTFMoH.js +0 -32
- package/dist/spread-axRTFMoH.js.map +0 -1
- package/dist/switch-DqxIiVsB.js +0 -2738
- package/dist/switch-DqxIiVsB.js.map +0 -1
- package/dist/tag.js +0 -323
- package/dist/tag.js.map +0 -1
- package/dist/tooltip.js +0 -1857
- package/dist/tooltip.js.map +0 -1
- package/dist/utils-DGMeCC48.js.map +0 -1
package/dist/accordion-item.js
DELETED
|
@@ -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
|
package/dist/accordion.js.map
DELETED
|
@@ -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
|
package/dist/avatar.js.map
DELETED
|
@@ -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;;;;"}
|
package/dist/base-progress.js
DELETED
|
@@ -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;;;;"}
|