@universal-material/web 3.0.60 → 3.0.61
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/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +10 -3
- package/button/button-base.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +0 -2
- package/button/button.styles.js.map +1 -1
- package/button/fab.styles.d.ts.map +1 -1
- package/button/fab.styles.js +0 -2
- package/button/fab.styles.js.map +1 -1
- package/button/icon-button.styles.d.ts.map +1 -1
- package/button/icon-button.styles.js +0 -2
- package/button/icon-button.styles.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +0 -2
- package/chip/chip.styles.js.map +1 -1
- package/chip-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +12 -10
- package/chip-field/chip-field.js.map +1 -1
- package/config.d.ts +9 -2
- package/config.d.ts.map +1 -1
- package/config.js +17 -2
- package/config.js.map +1 -1
- package/custom-elements.json +5261 -4088
- package/dialog/confirm-dialog-builder.d.ts +12 -0
- package/dialog/confirm-dialog-builder.d.ts.map +1 -0
- package/dialog/confirm-dialog-builder.js +42 -0
- package/dialog/confirm-dialog-builder.js.map +1 -0
- package/dialog/dialog-builder.d.ts +15 -0
- package/dialog/dialog-builder.d.ts.map +1 -0
- package/dialog/dialog-builder.js +55 -0
- package/dialog/dialog-builder.js.map +1 -0
- package/dialog/dialog-button-def.d.ts +6 -0
- package/dialog/dialog-button-def.d.ts.map +1 -0
- package/dialog/dialog-button-def.js +2 -0
- package/dialog/dialog-button-def.js.map +1 -0
- package/dialog/dialog.d.ts +44 -0
- package/dialog/dialog.d.ts.map +1 -0
- package/dialog/dialog.js +235 -0
- package/dialog/dialog.js.map +1 -0
- package/dialog/dialog.styles.d.ts +2 -0
- package/dialog/dialog.styles.d.ts.map +1 -0
- package/dialog/dialog.styles.js +165 -0
- package/dialog/dialog.styles.js.map +1 -0
- package/dialog/message-dialog-builder.d.ts +10 -0
- package/dialog/message-dialog-builder.d.ts.map +1 -0
- package/dialog/message-dialog-builder.js +32 -0
- package/dialog/message-dialog-builder.js.map +1 -0
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +5 -3
- package/field/field-base.js.map +1 -1
- package/index.d.ts +8 -2
- package/index.d.ts.map +1 -1
- package/index.js +8 -2
- package/index.js.map +1 -1
- package/menu/menu-item.d.ts +1 -1
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +1 -5
- package/menu/menu-item.js.map +1 -1
- package/menu/menu-item.styles.d.ts.map +1 -1
- package/menu/menu-item.styles.js +5 -3
- package/menu/menu-item.styles.js.map +1 -1
- package/navigation/drawer-item.styles.d.ts.map +1 -1
- package/navigation/drawer-item.styles.js +0 -2
- package/navigation/drawer-item.styles.js.map +1 -1
- package/package.json +1 -1
- package/progress/circular-progress.d.ts +15 -0
- package/progress/circular-progress.d.ts.map +1 -0
- package/progress/circular-progress.js +96 -0
- package/progress/circular-progress.js.map +1 -0
- package/progress/circular-progress.styles.d.ts +2 -0
- package/progress/circular-progress.styles.d.ts.map +1 -0
- package/progress/circular-progress.styles.js +75 -0
- package/progress/circular-progress.styles.js.map +1 -0
- package/progress/progress-bar.d.ts +15 -0
- package/progress/progress-bar.d.ts.map +1 -0
- package/progress/progress-bar.js +62 -0
- package/progress/progress-bar.js.map +1 -0
- package/progress/progress-bar.styles.d.ts +2 -0
- package/progress/progress-bar.styles.d.ts.map +1 -0
- package/progress/progress-bar.styles.js +152 -0
- package/progress/progress-bar.styles.js.map +1 -0
- package/shared/base.styles.d.ts.map +1 -1
- package/shared/base.styles.js +0 -2
- package/shared/base.styles.js.map +1 -1
- package/shared/events/dispatch-event.d.ts +1 -0
- package/shared/events/dispatch-event.d.ts.map +1 -0
- package/shared/events/dispatch-event.js +2 -0
- package/shared/events/dispatch-event.js.map +1 -0
- package/shared/events/redispatch-event.d.ts +2 -0
- package/shared/events/redispatch-event.d.ts.map +1 -0
- package/shared/events/redispatch-event.js +14 -0
- package/shared/events/redispatch-event.js.map +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-elevation-level: var(--u-dialog-elevation, 3);\n --_icon-size: var(--u-dialog-icon-size, 24px);\n --_divider-color: var(--u-dialog-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n --_scrim-opacity: var(--u-dialog-scrim-opacity, .32);\n --_padding: var(--u-dialog-padding, 24px);\n }\n\n :host(:not([has-headline])) .headline {\n display: none;\n }\n\n :host([has-icon]) .icon {\n display: flex;\n }\n :host([has-icon]) .headline {\n padding-top: 0;\n }\n :host([has-icon]) .headline,\n :host([has-icon]) .container {\n text-align: center;\n }\n\n :host([has-headline]) .content.top-divider,\n :host([has-icon]) .content.top-divider {\n border-top: 1px solid var(--_divider-color);\n margin-top: -1px;\n }\n\n .scrim {\n position: fixed;\n inset: 0;\n background-color: var(--u-dialog-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n animation: scrim-show-animation 300ms;\n animation-fill-mode: forwards;\n z-index: -1;\n }\n\n dialog {\n align-items: center;\n background: none;\n border: none;\n overflow: visible;\n padding: var(--_padding);\n max-width: none;\n max-height: none;\n width: 100%;\n height: 100%;\n }\n dialog[open] {\n display: flex;\n }\n dialog::backdrop {\n background: none;\n }\n\n .container {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-inline: auto;\n background-color: var(--u-dialog-container-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n border-radius: var(--u-dialog-border-radius, var(--u-shape-corner-extra-large, 28px));\n min-width: min(var(--u-dialog-min-width, 280px), 100%);\n max-width: var(--u-dialog-max-width, 560px);\n max-height: min(var(--u-dialog-max-height, 560px), 100%);\n animation: show 250ms cubic-bezier(0.19, 1, 0.22, 1);\n z-index: 1;\n }\n\n .headline,\n .icon,\n .content,\n .actions {\n padding: var(--_padding);\n }\n\n .headline {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-dialog-headline-line-height, var(--u-headline-s-line-height, 2rem));\n font-size: var(--u-dialog-headline-font-size, var(--u-headline-s-font-size, 1.5rem));\n letter-spacing: var(--u-dialog-headline-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n font-weight: var(--u-dialog-headline-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n padding-bottom: var(--u-headline-padding, 16px);\n }\n\n .icon {\n display: none;\n justify-content: center;\n align-items: center;\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n color: var(--u-dialog-icon-color, var(--u-color-secondary, rgb(98, 91, 113)));\n padding-bottom: var(--u-icon-padding, 16px);\n }\n\n .content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-dialog-content-line-height, var(--u-body-m-line-height, 1.25rem));\n font-size: var(--u-dialog-content-font-size, var(--u-body-m-font-size, 0.875rem));\n letter-spacing: var(--u-dialog-content-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));\n font-weight: var(--u-dialog-content-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));\n color: var(--u-dialog-content-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-block: 0;\n overflow: auto;\n }\n .content.bottom-divider {\n border-bottom: 1px solid var(--_divider-color);\n margin-bottom: -1px;\n }\n\n :host(:not([has-headline]):not([has-icon])) .content {\n padding-top: var(--_padding);\n }\n\n .actions {\n display: flex;\n flex-direction: row-reverse;\n flex-wrap: wrap-reverse;\n gap: var(--u-dialog-actions-gap, 8px);\n }\n\n :host(.closing) .container {\n animation-name: close;\n }\n :host(.closing) .scrim {\n animation-name: scrim-close-animation;\n }\n\n @keyframes scrim-show-animation {\n from {\n opacity: 0;\n }\n to {\n opacity: var(--_scrim-opacity);\n }\n }\n @keyframes scrim-close-animation {\n from {\n opacity: var(--_scrim-opacity);\n }\n to {\n opacity: 0;\n }\n }\n @keyframes show {\n from {\n transform: scale3d(0, 0, 1);\n }\n to {\n transform: scale3d(1, 1, 1);\n }\n }\n @keyframes close {\n from {\n transform: scale3d(1, 1, 1);\n }\n to {\n transform: scale3d(0, 0, 1);\n }\n }\n`;\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DialogBuilder } from './dialog-builder.js';
|
|
2
|
+
import { DialogButtonDef } from './dialog-button-def.js';
|
|
3
|
+
import { UmDialog } from './dialog.js';
|
|
4
|
+
export declare class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {
|
|
5
|
+
#private;
|
|
6
|
+
static create(message: string): MessageDialogBuilder;
|
|
7
|
+
acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder;
|
|
8
|
+
addButtons(dialog: UmDialog): void;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=message-dialog-builder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,IAAI,CAAC;;IACjF,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAMpD,iBAAiB,CAAC,oBAAoB,EAAE,eAAe,GAAG,oBAAoB;IAKrE,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;CAO5C"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var _MessageDialogBuilder_acknowledgeButtonDef;
|
|
13
|
+
import { config } from '../config.js';
|
|
14
|
+
import { DialogBuilder } from './dialog-builder.js';
|
|
15
|
+
export class MessageDialogBuilder extends DialogBuilder {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
_MessageDialogBuilder_acknowledgeButtonDef.set(this, void 0);
|
|
19
|
+
}
|
|
20
|
+
static create(message) {
|
|
21
|
+
return new MessageDialogBuilder(message);
|
|
22
|
+
}
|
|
23
|
+
acknowledgeButton(acknowledgeButtonDef) {
|
|
24
|
+
__classPrivateFieldSet(this, _MessageDialogBuilder_acknowledgeButtonDef, acknowledgeButtonDef, "f");
|
|
25
|
+
return this;
|
|
26
|
+
}
|
|
27
|
+
addButtons(dialog) {
|
|
28
|
+
this.addButton(dialog, { ...config.dialog.alertDefaults.acknowledgeButton, ...__classPrivateFieldGet(this, _MessageDialogBuilder_acknowledgeButtonDef, "f") }, () => dialog.close());
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
_MessageDialogBuilder_acknowledgeButtonDef = new WeakMap();
|
|
32
|
+
//# sourceMappingURL=message-dialog-builder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAyC;IAAnF;;QAKE,6DAAwC;IAc1C,CAAC;IAlBC,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAID,iBAAiB,CAAC,oBAAqC;QACrD,uBAAA,IAAI,8CAAyB,oBAAoB,MAAA,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,UAAU,CAAC,MAAgB;QAElC,IAAI,CAAC,SAAS,CACZ,MAAM,EACN,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,EAAE,GAAG,uBAAA,IAAI,kDAAsB,EAAC,EACjF,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {\n static create(message: string): MessageDialogBuilder {\n return new MessageDialogBuilder(message);\n }\n\n #acknowledgeButtonDef?: DialogButtonDef;\n\n acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {\n this.#acknowledgeButtonDef = acknowledgeButtonDef;\n return this;\n }\n\n override addButtons(dialog: UmDialog): void {\n\n this.addButton(\n dialog,\n {...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef},\n () => dialog.close());\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,kBAAkB;IAqC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;
|
|
1
|
+
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,kBAAkB;IAqC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAWjB,oBAAoB;IAO7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;CAWhC"}
|
package/field/field-base.js
CHANGED
|
@@ -83,9 +83,11 @@ export class UmFieldBase extends LitElement {
|
|
|
83
83
|
connectedCallback() {
|
|
84
84
|
super.connectedCallback();
|
|
85
85
|
this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
setTimeout(() => {
|
|
87
|
+
this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties());
|
|
88
|
+
this.labelSizeObserver.observe(this.labelElement);
|
|
89
|
+
this.setLabelWidthProperties();
|
|
90
|
+
});
|
|
89
91
|
}
|
|
90
92
|
disconnectedCallback() {
|
|
91
93
|
super.disconnectedCallback();
|
package/field/field-base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAkBlD,MAAM,CAAC,WAAW,CAAC,WAAwB,EAAE,MAAuB;QAClE,OAAO,IAAI,eAAe,CAAC,WAAW,EAAE;YACtC,OAAO,EAAE,oBAAoB;YAC7B,YAAY,EAAE,MAAM;SACrB,CAAC,CAAC;IACL,CAAC;IAqCD;QACE,KAAK,EAAE,CAAC;QAtDE,YAAO,GAAsC,QAAQ,CAAC;QAOxB,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAS1D;;;;WAIG;QACsE,mBAAc,GAAG,KAAK,CAAC;QAEhG;;;;WAIG;QACuE,oBAAe,GAAG,KAAK,CAAC;QAElG;;;;WAIG;QACoE,iBAAY,GAAG,KAAK,CAAC;QAcpF,sBAAiB,GAA0B,IAAI,CAAC;QAItD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,QAAQ;;;;yBAIrD,IAAI,CAAC,2BAA2B;;;+BAG1B,IAAI,CAAC,KAAK;;;YAG7B,IAAI,CAAC,aAAa,EAAE;;;;;yBAKP,IAAI,CAAC,4BAA4B;;;;;;;yBAOjC,IAAI,CAAC,yBAAyB;iBACtC,IAAI,CAAC,SAAS;;;iBAGd,IAAI,CAAC,cAAc;;;iBAGnB,IAAI,CAAC,OAAO;;;KAGxB,CAAC;IACJ,CAAC;IAIQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n @consume({context: fieldDefaultsContext, subscribe: true})\n @state()\n private config: UmFieldDefaults | undefined;\n\n @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n @property({attribute: 'error-text'}) errorText: string | undefined;\n\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n return new ContextProvider(contextRoot, {\n context: fieldDefaultsContext,\n initialValue: config\n });\n }\n\n /**\n * Whether the field has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n /**\n * Whether the field has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n /**\n * Whether the field has an error text or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n @queryAssignedElements({slot: 'leading-icon', flatten: true})\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'error-text', flatten: true})\n private readonly assignedErrorTexts!: HTMLElement[];\n\n @query('.label') labelElement!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n private labelSizeObserver: ResizeObserver | null = null;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <label class=\"label\" slot=\"label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n <div class=\"input-wrapper\" part=\"wrapper\">\n ${this.renderControl()}\n </div>\n <slot\n class=\"icon trailing-icon\"\n name=\"trailing-icon\"\n @slotchange=\"${this.handleTrailingIconSlotChange}\">\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @slotchange=\"${this.handleErrorTextSlotChange}\">\n <div>${this.errorText}</div>\n </slot>\n <slot name=\"supporting-text\" id=\"supporting-text\">\n <div>${this.supportingText}</div>\n </slot>\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter}</div>\n </slot>\n </div>\n `;\n }\n\n protected abstract renderControl(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n setTimeout(() => {\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.labelElement);\n this.setLabelWidthProperties();\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n private handleLeadingIconSlotChange() {\n this.labelElement.style.transition = 'none';\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n setTimeout(() => {\n this.labelElement.style.transition = '';\n });\n }\n\n private handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n private handleErrorTextSlotChange() {\n this.hasErrorText = this.assignedErrorTexts.length > 0;\n }\n\n private setLabelWidthProperties() {\n\n const width = this.labelElement.offsetWidth;\n\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n if (!width) {\n this.container.classList.add('no-label');\n }\n }\n}\n"]}
|
package/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import './card/card.js';
|
|
|
7
7
|
import './chip/chip.js';
|
|
8
8
|
import './chip/chip-set.js';
|
|
9
9
|
import './chip-field/chip-field.js';
|
|
10
|
+
import './dialog/dialog.js';
|
|
10
11
|
import './checkbox/checkbox.js';
|
|
11
12
|
import './checkbox/checkbox-list-item.js';
|
|
12
13
|
import './radio/radio.js';
|
|
@@ -23,6 +24,8 @@ import './menu/menu-item.js';
|
|
|
23
24
|
import './navigation/drawer.js';
|
|
24
25
|
import './navigation/drawer-item.js';
|
|
25
26
|
import './navigation/side-navigation.js';
|
|
27
|
+
import './progress/circular-progress.js';
|
|
28
|
+
import './progress/progress-bar.js';
|
|
26
29
|
import './ripple/ripple.js';
|
|
27
30
|
import './snackbar/snackbar.js';
|
|
28
31
|
import './typeahead/highlight.js';
|
|
@@ -34,11 +37,12 @@ export * from './button/button-set.js';
|
|
|
34
37
|
export * from './button/fab.js';
|
|
35
38
|
export * from './button/icon-button.js';
|
|
36
39
|
export * from './card/card.js';
|
|
40
|
+
export * from './card/card-content.js';
|
|
41
|
+
export * from './card/card-media.js';
|
|
37
42
|
export * from './chip/chip.js';
|
|
38
43
|
export * from './chip-field/chip-field.js';
|
|
39
44
|
export * from './chip/chip-set.js';
|
|
40
|
-
export * from './
|
|
41
|
-
export * from './card/card-media.js';
|
|
45
|
+
export * from './dialog/dialog.js';
|
|
42
46
|
export * from './checkbox/checkbox.js';
|
|
43
47
|
export * from './radio/radio.js';
|
|
44
48
|
export * from './switch/switch.js';
|
|
@@ -53,6 +57,8 @@ export * from './menu/menu-item.js';
|
|
|
53
57
|
export * from './navigation/drawer.js';
|
|
54
58
|
export * from './navigation/drawer-item.js';
|
|
55
59
|
export * from './navigation/side-navigation.js';
|
|
60
|
+
export * from './progress/circular-progress.js';
|
|
61
|
+
export * from './progress/progress-bar.js';
|
|
56
62
|
export * from './ripple/ripple.js';
|
|
57
63
|
export * from './snackbar/snackbar.js';
|
|
58
64
|
export * from './theme/theme-builder.js';
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
|
package/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import './card/card.js';
|
|
|
7
7
|
import './chip/chip.js';
|
|
8
8
|
import './chip/chip-set.js';
|
|
9
9
|
import './chip-field/chip-field.js';
|
|
10
|
+
import './dialog/dialog.js';
|
|
10
11
|
import './checkbox/checkbox.js';
|
|
11
12
|
import './checkbox/checkbox-list-item.js';
|
|
12
13
|
import './radio/radio.js';
|
|
@@ -23,6 +24,8 @@ import './menu/menu-item.js';
|
|
|
23
24
|
import './navigation/drawer.js';
|
|
24
25
|
import './navigation/drawer-item.js';
|
|
25
26
|
import './navigation/side-navigation.js';
|
|
27
|
+
import './progress/circular-progress.js';
|
|
28
|
+
import './progress/progress-bar.js';
|
|
26
29
|
import './ripple/ripple.js';
|
|
27
30
|
import './snackbar/snackbar.js';
|
|
28
31
|
import './typeahead/highlight.js';
|
|
@@ -34,11 +37,12 @@ export * from './button/button-set.js';
|
|
|
34
37
|
export * from './button/fab.js';
|
|
35
38
|
export * from './button/icon-button.js';
|
|
36
39
|
export * from './card/card.js';
|
|
40
|
+
export * from './card/card-content.js';
|
|
41
|
+
export * from './card/card-media.js';
|
|
37
42
|
export * from './chip/chip.js';
|
|
38
43
|
export * from './chip-field/chip-field.js';
|
|
39
44
|
export * from './chip/chip-set.js';
|
|
40
|
-
export * from './
|
|
41
|
-
export * from './card/card-media.js';
|
|
45
|
+
export * from './dialog/dialog.js';
|
|
42
46
|
export * from './checkbox/checkbox.js';
|
|
43
47
|
export * from './radio/radio.js';
|
|
44
48
|
export * from './switch/switch.js';
|
|
@@ -53,6 +57,8 @@ export * from './menu/menu-item.js';
|
|
|
53
57
|
export * from './navigation/drawer.js';
|
|
54
58
|
export * from './navigation/drawer-item.js';
|
|
55
59
|
export * from './navigation/side-navigation.js';
|
|
60
|
+
export * from './progress/circular-progress.js';
|
|
61
|
+
export * from './progress/progress-bar.js';
|
|
56
62
|
export * from './ripple/ripple.js';
|
|
57
63
|
export * from './snackbar/snackbar.js';
|
|
58
64
|
export * from './theme/theme-builder.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["import './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './dialog/dialog.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './progress/circular-progress.js';\nimport './progress/progress-bar.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './dialog/dialog.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/side-navigation.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/progress-bar.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}
|
package/menu/menu-item.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { HTMLTemplateResult } from 'lit';
|
|
|
2
2
|
import { UmButtonWrapper } from '../shared/button-wrapper.js';
|
|
3
3
|
export declare class UmMenuItem extends UmButtonWrapper {
|
|
4
4
|
#private;
|
|
5
|
-
static styles: import("lit").CSSResult
|
|
5
|
+
static styles: import("lit").CSSResult;
|
|
6
6
|
/**
|
|
7
7
|
* Force show focus ring
|
|
8
8
|
*/
|
package/menu/menu-item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,qBACa,UAAW,SAAQ,eAAe;;IAE7C,OAAgB,MAAM,0BAAU;IAIhC;;OAEG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EASzB;IAED;;;;OAIG;IAC8D,OAAO,UAAS;IAEjF;;;;OAIG;IAC+D,QAAQ,UAAS;IAGnF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAEtC,SAAS,SAAc;IAEvB,iBAAiB;cAKP,aAAa,IAAI,kBAAkB;IAYtD,OAAO,CAAC,oBAAoB;CAG7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/menu/menu-item.js
CHANGED
|
@@ -18,7 +18,6 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
18
18
|
var _UmMenuItem_active;
|
|
19
19
|
import { html } from 'lit';
|
|
20
20
|
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
|
|
21
|
-
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
22
21
|
import { styles } from './menu-item.styles.js';
|
|
23
22
|
import { UmButtonWrapper } from '../shared/button-wrapper.js';
|
|
24
23
|
let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
|
|
@@ -73,10 +72,7 @@ let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
|
|
|
73
72
|
}
|
|
74
73
|
};
|
|
75
74
|
_UmMenuItem_active = new WeakMap();
|
|
76
|
-
UmMenuItem.styles =
|
|
77
|
-
baseStyles,
|
|
78
|
-
styles
|
|
79
|
-
];
|
|
75
|
+
UmMenuItem.styles = styles;
|
|
80
76
|
__decorate([
|
|
81
77
|
property({ type: Boolean, reflect: true })
|
|
82
78
|
], UmMenuItem.prototype, "active", null);
|
package/menu/menu-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGvD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,eAAe;IAAxC;;QAIL,6BAAU,KAAK,EAAC;QAoBhB;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QAC+D,aAAQ,GAAG,KAAK,CAAC;QAK1E,cAAS,GAAG,UAAU,CAAC;IAsBlC,CAAC;IAzDC;;OAEG;IAEH,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,0BAAQ,CAAC;IACtB,CAAC;IACD,IAAI,MAAM,CAAC,MAAe;QACxB,uBAAA,IAAI,sBAAW,MAAM,MAAA,CAAC;QAEtB,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YACvC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC5C,CAAC;IAqBQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC;IAC7B,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;KAG7C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;;AA5De,iBAAM,GAAG,MAAM,AAAT,CAAU;AAQhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAGxC;AAiBgE;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAiB;AAOf;IAAjE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAGlE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACN;AAvCpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA+DtB","sourcesContent":["\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './menu-item.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\n\n@customElement('u-menu-item')\nexport class UmMenuItem extends UmButtonWrapper {\n\n static override styles = styles;\n\n #active = false;\n\n /**\n * Force show focus ring\n */\n @property({type: Boolean, reflect: true})\n get active(): boolean {\n return this.#active;\n }\n set active(active: boolean) {\n this.#active = active;\n\n if (active) {\n this.classList.add('force-focus-ring');\n return;\n }\n\n this.classList.remove('force-focus-ring');\n }\n\n /**\n * Whether the drawer item has icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n /**\n * Whether the drawer item has badge or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-badge', reflect: true}) hasBadge = false;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n override innerRole = 'menuitem';\n\n override connectedCallback() {\n super.connectedCallback();\n this.role = 'presentation';\n }\n\n protected override renderContent(): HTMLTemplateResult {\n return html`\n <div class=\"icon\">\n <slot\n name=\"icon\"\n aria-hidden=\"true\"\n @slotchange=\"${this.handleIconSlotChange}\"></slot>\n </div>\n <span class=\"label\" id=\"text\"><slot></slot></span>\n `;\n }\n\n private handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu-item': UmMenuItem;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0HlB,CAAC"}
|
package/menu/menu-item.styles.js
CHANGED
|
@@ -3,7 +3,6 @@ export const styles = css `
|
|
|
3
3
|
:host,
|
|
4
4
|
* {
|
|
5
5
|
--_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
|
|
6
|
-
--_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
|
|
7
6
|
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
8
7
|
box-sizing: border-box;
|
|
9
8
|
outline: 0;
|
|
@@ -14,7 +13,6 @@ export const styles = css `
|
|
|
14
13
|
--_color-primary: var(--u-color-primary, rgb(103, 80, 164));
|
|
15
14
|
animation: u-focus-pulse 500ms ease;
|
|
16
15
|
animation-fill-mode: forwards;
|
|
17
|
-
border-radius: var(--_focus-ring-border-radius);
|
|
18
16
|
outline-offset: var(--_focus-ring-outline-offset);
|
|
19
17
|
}
|
|
20
18
|
|
|
@@ -94,7 +92,6 @@ export const styles = css `
|
|
|
94
92
|
--_menu-item-icon-size: var(--u-menu-item-icon-size, 1.125rem);
|
|
95
93
|
--_menu-item-padding: var(--u-menu-item-padding, 12px);
|
|
96
94
|
--u-focus-ring-outline-offset: -4px;
|
|
97
|
-
--u-focus-ring-border-radius: var(--u-spacing-extra-small, 4px);
|
|
98
95
|
height: var(--u-menu-item-height, 56px);
|
|
99
96
|
padding-inline: var(--_menu-item-padding);
|
|
100
97
|
color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
@@ -119,5 +116,10 @@ export const styles = css `
|
|
|
119
116
|
.content {
|
|
120
117
|
justify-content: flex-start;
|
|
121
118
|
}
|
|
119
|
+
|
|
120
|
+
:host(.force-focus-ring) .button,
|
|
121
|
+
.button:focus-visible {
|
|
122
|
+
border-radius: var(--u-spacing-small, 8px);
|
|
123
|
+
}
|
|
122
124
|
`;
|
|
123
125
|
//# sourceMappingURL=menu-item.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host,\n * {\n --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n box-sizing: border-box;\n outline: 0;\n }\n\n :host(.force-focus-ring) .focus-ring,\n .focus-ring:focus-visible {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n animation: u-focus-pulse 500ms ease;\n animation-fill-mode: forwards;\n outline-offset: var(--_focus-ring-outline-offset);\n }\n\n @keyframes u-focus-pulse {\n 0% {\n outline: 0 solid var(--_color-primary);\n }\n 50% {\n outline: 6px solid var(--_color-primary);\n }\n 100% {\n outline: 4px solid var(--_color-primary);\n }\n }\n :host {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n -webkit-tap-highlight-color: transparent;\n --u-elevation-level: 0;\n position: relative;\n display: inline-block;\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n appearance: none !important;\n }\n\n :host([disabled]) {\n --u-elevation-level: 0 !important;\n background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n }\n\n :host([disabled]) .button {\n cursor: default;\n }\n\n * {\n color: inherit;\n }\n\n u-elevation {\n z-index: -1;\n }\n\n .button {\n cursor: pointer;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n width: 100%;\n height: 100%;\n font-family: inherit;\n border-radius: inherit;\n color: inherit;\n border: none;\n margin: 0;\n padding: 0;\n text-align: center;\n white-space: nowrap;\n background: transparent;\n user-select: none;\n text-decoration: none;\n outline: 0;\n z-index: 0;\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n :host {\n display: block;\n --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.125rem);\n --_menu-item-padding: var(--u-menu-item-padding, 12px);\n --u-focus-ring-outline-offset: -4px;\n height: var(--u-menu-item-height, 56px);\n padding-inline: var(--_menu-item-padding);\n color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .icon {\n font-size: var(--_menu-item-icon-size);\n line-height: var(--_menu-item-icon-size);\n margin-inline-end: var(--u-menu-item-icon-margin, 12px);\n color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .content {\n justify-content: flex-start;\n }\n\n :host(.force-focus-ring) .button,\n .button:focus-visible {\n border-radius: var(--u-spacing-small, 8px);\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"drawer-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkIlB,CAAC"}
|
|
@@ -3,7 +3,6 @@ export const styles = css `
|
|
|
3
3
|
:host,
|
|
4
4
|
* {
|
|
5
5
|
--_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
|
|
6
|
-
--_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
|
|
7
6
|
font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
8
7
|
box-sizing: border-box;
|
|
9
8
|
outline: 0;
|
|
@@ -14,7 +13,6 @@ export const styles = css `
|
|
|
14
13
|
--_color-primary: var(--u-color-primary, rgb(103, 80, 164));
|
|
15
14
|
animation: u-focus-pulse 500ms ease;
|
|
16
15
|
animation-fill-mode: forwards;
|
|
17
|
-
border-radius: var(--_focus-ring-border-radius);
|
|
18
16
|
outline-offset: var(--_focus-ring-outline-offset);
|
|
19
17
|
}
|
|
20
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer-item.styles.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"drawer-item.styles.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host,\n * {\n --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n box-sizing: border-box;\n outline: 0;\n }\n\n :host(.force-focus-ring) .focus-ring,\n .focus-ring:focus-visible {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n animation: u-focus-pulse 500ms ease;\n animation-fill-mode: forwards;\n outline-offset: var(--_focus-ring-outline-offset);\n }\n\n @keyframes u-focus-pulse {\n 0% {\n outline: 0 solid var(--_color-primary);\n }\n 50% {\n outline: 6px solid var(--_color-primary);\n }\n 100% {\n outline: 4px solid var(--_color-primary);\n }\n }\n :host {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n -webkit-tap-highlight-color: transparent;\n --u-elevation-level: 0;\n position: relative;\n display: inline-block;\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n appearance: none !important;\n }\n\n :host([disabled]) {\n --u-elevation-level: 0 !important;\n background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n }\n\n :host([disabled]) .button {\n cursor: default;\n }\n\n * {\n color: inherit;\n }\n\n u-elevation {\n z-index: -1;\n }\n\n .button {\n cursor: pointer;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n width: 100%;\n height: 100%;\n font-family: inherit;\n border-radius: inherit;\n color: inherit;\n border: none;\n margin: 0;\n padding: 0;\n text-align: center;\n white-space: nowrap;\n background: transparent;\n user-select: none;\n text-decoration: none;\n outline: 0;\n z-index: 0;\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n :host {\n display: block;\n --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n height: var(--u-drawer-item-height, 56px);\n padding-inline: var(--_drawer-item-padding);\n margin-inline: calc(var(--_drawer-item-padding) * -1);\n border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([active]) {\n color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n }\n\n :host(:not([has-icon])) .icon,\n :host(:not([has-badge])) .badge {\n display: none;\n }\n\n .icon {\n font-size: var(--_drawer-item-icon-size);\n line-height: var(--_drawer-item-icon-size);\n margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n }\n\n .badge {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-inline-start: auto;\n padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n }\n\n .content {\n justify-content: flex-start;\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { TemplateResult } from 'lit-html';
|
|
3
|
+
export declare class UmCircularProgress extends LitElement {
|
|
4
|
+
#private;
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
|
+
value: number | undefined;
|
|
7
|
+
max: number;
|
|
8
|
+
protected render(): TemplateResult;
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface HTMLElementTagNameMap {
|
|
12
|
+
'u-circular-progress': UmCircularProgress;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=circular-progress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circular-progress.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ1C,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CAiE5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var _UmCircularProgress_instances, _UmCircularProgress_renderCircle, _UmCircularProgress_renderIndeterminate, _UmCircularProgress_renderDeterminate;
|
|
13
|
+
import { LitElement, svg } from 'lit';
|
|
14
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
15
|
+
import { styles } from './circular-progress.styles.js';
|
|
16
|
+
const basePercentage = 255;
|
|
17
|
+
// https://codepen.io/ConAntonakos/pen/ryMaOX
|
|
18
|
+
let UmCircularProgress = class UmCircularProgress extends LitElement {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
_UmCircularProgress_instances.add(this);
|
|
22
|
+
this.max = 1;
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
return this.value === undefined
|
|
26
|
+
? __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderIndeterminate).call(this)
|
|
27
|
+
: __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderDeterminate).call(this);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
_UmCircularProgress_instances = new WeakSet();
|
|
31
|
+
_UmCircularProgress_renderCircle = function _UmCircularProgress_renderCircle(className) {
|
|
32
|
+
return svg `
|
|
33
|
+
<svg class="circular ${className}" viewBox="0 0 50 50">
|
|
34
|
+
<circle
|
|
35
|
+
class="path"
|
|
36
|
+
cx="50%"
|
|
37
|
+
cy="50%"
|
|
38
|
+
r="20"
|
|
39
|
+
fill="none"
|
|
40
|
+
stroke-width="4"
|
|
41
|
+
stroke-miterlimit="10" />
|
|
42
|
+
</svg>`;
|
|
43
|
+
};
|
|
44
|
+
_UmCircularProgress_renderIndeterminate = function _UmCircularProgress_renderIndeterminate() {
|
|
45
|
+
return __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderCircle).call(this, 'indeterminate');
|
|
46
|
+
};
|
|
47
|
+
_UmCircularProgress_renderDeterminate = function _UmCircularProgress_renderDeterminate() {
|
|
48
|
+
let proportion = this.value / this.max;
|
|
49
|
+
const offset = proportion === 0 || proportion === 1
|
|
50
|
+
? 0
|
|
51
|
+
: 0.10625;
|
|
52
|
+
proportion = Math.floor(proportion * 100) / 100;
|
|
53
|
+
const percentage = basePercentage - basePercentage * proportion;
|
|
54
|
+
const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
|
|
55
|
+
console.log(this.value);
|
|
56
|
+
console.log(basePercentage);
|
|
57
|
+
console.log(percentage);
|
|
58
|
+
return svg `
|
|
59
|
+
<svg class="circular on-going" viewBox="0 0 50 50">
|
|
60
|
+
<circle
|
|
61
|
+
class="path"
|
|
62
|
+
cx="50%"
|
|
63
|
+
cy="50%"
|
|
64
|
+
r="20"
|
|
65
|
+
fill="none"
|
|
66
|
+
stroke-width="4"
|
|
67
|
+
stroke-miterlimit="10"
|
|
68
|
+
stroke-dasharray=${`${basePercentage}%`}
|
|
69
|
+
stroke-dashoffset=${`${percentage}%`} />
|
|
70
|
+
</svg>
|
|
71
|
+
<svg class="circular track on-going" viewBox="0 0 50 50">
|
|
72
|
+
<circle
|
|
73
|
+
class="path"
|
|
74
|
+
cx="50%"
|
|
75
|
+
cy="50%"
|
|
76
|
+
r="20"
|
|
77
|
+
fill="none"
|
|
78
|
+
stroke-width="4"
|
|
79
|
+
stroke-miterlimit="10"
|
|
80
|
+
stroke-dasharray=${`${basePercentage}%`}
|
|
81
|
+
stroke-dashoffset=${`${trackPercentage}%`}/>
|
|
82
|
+
</svg>
|
|
83
|
+
`;
|
|
84
|
+
};
|
|
85
|
+
UmCircularProgress.styles = [styles];
|
|
86
|
+
__decorate([
|
|
87
|
+
property({ type: Number })
|
|
88
|
+
], UmCircularProgress.prototype, "value", void 0);
|
|
89
|
+
__decorate([
|
|
90
|
+
property({ type: Number })
|
|
91
|
+
], UmCircularProgress.prototype, "max", void 0);
|
|
92
|
+
UmCircularProgress = __decorate([
|
|
93
|
+
customElement('u-circular-progress')
|
|
94
|
+
], UmCircularProgress);
|
|
95
|
+
export { UmCircularProgress };
|
|
96
|
+
//# sourceMappingURL=circular-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;;QAIqB,QAAG,GAAW,CAAC,CAAC;IAmE5C,CAAC;IAjEoB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,uBAAA,IAAI,8EAAqB,MAAzB,IAAI,CAAuB;YAC7B,CAAC,CAAC,uBAAA,IAAI,4EAAmB,MAAvB,IAAI,CAAqB,CAAC;IAChC,CAAC;;;6EAEa,SAAiB;IAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;AACZ,CAAC;;IAGC,OAAO,uBAAA,IAAI,uEAAc,MAAlB,IAAI,EAAe,eAAe,CAAC,CAAC;AAC7C,CAAC;;IAIC,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;QACjD,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,OAAO,CAAC;IACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACjD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;IAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAExB,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;AACJ,CAAC;AArEe,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAER;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAiB;AAJ/B,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAuE9B","sourcesContent":["import { LitElement, svg } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class UmCircularProgress extends LitElement {\n static override styles = [styles];\n\n @property({type: Number}) value: number | undefined;\n @property({type: Number}) max: number = 1;\n\n protected override render(): TemplateResult {\n return this.value === undefined\n ? this.#renderIndeterminate()\n : this.#renderDeterminate();\n }\n\n #renderCircle(className: string): TemplateResult {\n return svg`\n <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n <circle\n class=\"path\"\n cx=\"50%\"\n cy=\"50%\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n stroke-miterlimit=\"10\" />\n </svg>`;\n }\n\n #renderIndeterminate(): TemplateResult {\n return this.#renderCircle('indeterminate');\n }\n\n #renderDeterminate(): TemplateResult {\n\n let proportion = this.value! / this.max;\n const offset = proportion === 0 || proportion === 1\n ? 0\n : 0.10625;\n proportion = Math.floor(proportion! * 100) / 100;\n const percentage = basePercentage - basePercentage * proportion;\n const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n console.log(this.value);\n console.log(basePercentage);\n console.log(percentage);\n\n return svg`\n <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n <circle\n class=\"path\"\n cx=\"50%\"\n cy=\"50%\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n stroke-miterlimit=\"10\"\n stroke-dasharray=${`${basePercentage}%`} \n stroke-dashoffset=${`${percentage}%`} />\n </svg>\n <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n <circle\n class=\"path\"\n cx=\"50%\"\n cy=\"50%\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n stroke-miterlimit=\"10\"\n stroke-dasharray=${`${basePercentage}%`}\n stroke-dashoffset=${`${trackPercentage}%`}/>\n </svg>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-circular-progress': UmCircularProgress;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circular-progress.styles.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwElB,CAAC"}
|