@api-client/ui 0.3.3 → 0.3.5
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/build/src/md/button/internals/base.d.ts.map +1 -1
- package/build/src/md/button/internals/base.js +2 -6
- package/build/src/md/button/internals/base.js.map +1 -1
- package/build/src/md/button/internals/button.styles.js +1 -1
- package/build/src/md/button/internals/button.styles.js.map +1 -1
- package/build/src/md/chip/internals/Chip.d.ts +11 -15
- package/build/src/md/chip/internals/Chip.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.js +66 -104
- package/build/src/md/chip/internals/Chip.js.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.js +114 -101
- package/build/src/md/chip/internals/Chip.styles.js.map +1 -1
- package/build/src/md/chip/internals/ChipSet.d.ts +16 -0
- package/build/src/md/chip/internals/ChipSet.d.ts.map +1 -0
- package/build/src/md/chip/internals/ChipSet.js +138 -0
- package/build/src/md/chip/internals/ChipSet.js.map +1 -0
- package/build/src/md/chip/internals/ChipSet.styles.d.ts +3 -0
- package/build/src/md/chip/internals/ChipSet.styles.d.ts.map +1 -0
- package/build/src/md/chip/internals/ChipSet.styles.js +9 -0
- package/build/src/md/chip/internals/ChipSet.styles.js.map +1 -0
- package/build/src/md/chip/ui-chip-set.d.ts +11 -0
- package/build/src/md/chip/ui-chip-set.d.ts.map +1 -0
- package/build/src/md/chip/ui-chip-set.js +27 -0
- package/build/src/md/chip/ui-chip-set.js.map +1 -0
- package/build/src/md/dialog/internals/Dialog.styles.d.ts.map +1 -1
- package/build/src/md/dialog/internals/Dialog.styles.js +5 -11
- package/build/src/md/dialog/internals/Dialog.styles.js.map +1 -1
- package/build/src/md/switch/internals/Switch.styles.js +1 -1
- package/build/src/md/switch/internals/Switch.styles.js.map +1 -1
- package/build/src/md/text-field/internals/outlined.styles.js +2 -2
- package/build/src/md/text-field/internals/outlined.styles.js.map +1 -1
- package/demo/md/chip/chip.html +33 -6
- package/demo/md/chip/chip.ts +111 -56
- package/package.json +2 -2
- package/src/md/button/internals/base.ts +2 -6
- package/src/md/button/internals/button.styles.ts +1 -1
- package/src/md/chip/internals/Chip.styles.ts +114 -101
- package/src/md/chip/internals/Chip.ts +58 -88
- package/src/md/chip/internals/ChipSet.styles.ts +9 -0
- package/src/md/chip/internals/ChipSet.ts +142 -0
- package/src/md/chip/ui-chip-set.ts +15 -0
- package/src/md/dialog/internals/Dialog.styles.ts +5 -11
- package/src/md/switch/internals/Switch.styles.ts +1 -1
- package/src/md/text-field/internals/outlined.styles.ts +2 -2
- package/test/ui/chip/UiChip.test.ts +18 -67
- package/build/src/events/BroadcastUiEvents.d.ts +0 -18
- package/build/src/events/BroadcastUiEvents.d.ts.map +0 -1
- package/build/src/events/BroadcastUiEvents.js +0 -2
- package/build/src/events/BroadcastUiEvents.js.map +0 -1
- package/src/events/BroadcastUiEvents.ts +0 -19
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import Element from './internals/ChipSet.js';
|
|
4
|
+
import styles from './internals/ChipSet.styles.js';
|
|
5
|
+
let UiChipSetElement = (() => {
|
|
6
|
+
let _classDecorators = [customElement('ui-chip-set')];
|
|
7
|
+
let _classDescriptor;
|
|
8
|
+
let _classExtraInitializers = [];
|
|
9
|
+
let _classThis;
|
|
10
|
+
let _classSuper = Element;
|
|
11
|
+
var UiChipSetElement = class extends _classSuper {
|
|
12
|
+
static { _classThis = this; }
|
|
13
|
+
static {
|
|
14
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
15
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
16
|
+
UiChipSetElement = _classThis = _classDescriptor.value;
|
|
17
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
18
|
+
}
|
|
19
|
+
static styles = [styles];
|
|
20
|
+
static {
|
|
21
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return UiChipSetElement = _classThis;
|
|
25
|
+
})();
|
|
26
|
+
export { UiChipSetElement };
|
|
27
|
+
//# sourceMappingURL=ui-chip-set.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ui-chip-set.js","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip-set.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;IAGrC,gBAAgB;4BAD5B,aAAa,CAAC,aAAa,CAAC;;;;sBACS,OAAO;gCAAf,SAAQ,WAAO;;;;YAA7C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAgB;;;;;SAAhB,gBAAgB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/ChipSet.js'\nimport styles from './internals/ChipSet.styles.js'\n\n@customElement('ui-chip-set')\nexport class UiChipSetElement extends Element {\n static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ui-chip-set': UiChipSetElement\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAsHC"}
|
|
@@ -10,7 +10,7 @@ export default css `
|
|
|
10
10
|
|
|
11
11
|
border: none;
|
|
12
12
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
13
|
-
background-color: var(--md-sys-color-surface);
|
|
13
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
14
14
|
box-shadow: var(--md-sys-elevation-3);
|
|
15
15
|
color: var(--md-sys-color-on-surface-variant);
|
|
16
16
|
padding: 24px;
|
|
@@ -21,16 +21,6 @@ export default css `
|
|
|
21
21
|
height: var(--ui-dialog-height, revert);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
dialog::after {
|
|
25
|
-
content: '';
|
|
26
|
-
position: absolute;
|
|
27
|
-
inset: 0;
|
|
28
|
-
border-radius: inherit;
|
|
29
|
-
background-color: var(--md-sys-color-surface-tint);
|
|
30
|
-
opacity: 0.11;
|
|
31
|
-
pointer-events: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
24
|
dialog:open {
|
|
35
25
|
animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
|
|
36
26
|
}
|
|
@@ -106,6 +96,10 @@ export default css `
|
|
|
106
96
|
margin-right: 12px;
|
|
107
97
|
}
|
|
108
98
|
|
|
99
|
+
.content ::slotted(*) {
|
|
100
|
+
background-color: var(--md-sys-color-surface-container-high);
|
|
101
|
+
}
|
|
102
|
+
|
|
109
103
|
@keyframes show-dialog {
|
|
110
104
|
from {
|
|
111
105
|
transform: translateY(-110%) scaleY(0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-high);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n .content ::slotted(*) {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
|
|
@@ -34,7 +34,7 @@ export default css `
|
|
|
34
34
|
|
|
35
35
|
border: 2px var(--md-sys-color-outline) solid;
|
|
36
36
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
37
|
-
background-color: var(--md-sys-color-surface-
|
|
37
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
38
38
|
|
|
39
39
|
transition:
|
|
40
40
|
opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n width: 52px;\n height: 40px;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .surface {\n position: relative;\n width: inherit;\n height: inherit;\n\n display: flex;\n align-items: center;\n }\n\n /* Track */\n .track {\n position: absolute;\n inset: 4px 0 0;\n z-index: 1;\n\n width: inherit;\n height: 32px;\n box-sizing: border-box;\n\n border: 2px var(--md-sys-color-outline) solid;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-
|
|
1
|
+
{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n width: 52px;\n height: 40px;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n .surface {\n position: relative;\n width: inherit;\n height: inherit;\n\n display: flex;\n align-items: center;\n }\n\n /* Track */\n .track {\n position: absolute;\n inset: 4px 0 0;\n z-index: 1;\n\n width: inherit;\n height: 32px;\n box-sizing: border-box;\n\n border: 2px var(--md-sys-color-outline) solid;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-highest);\n\n transition:\n opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),\n background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),\n border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .track.tracking,\n .thumb.tracking {\n transition: none;\n }\n\n .thumb {\n height: 20px;\n width: 20px;\n border-radius: var(--md-sys-shape-corner-full);\n background-color: var(--md-sys-color-outline);\n transform: translateX(6px) scale(0.8);\n transform-origin: center center;\n transition: transform 75ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n cursor: pointer;\n }\n\n :host([checked]) .thumb {\n background-color: var(--md-sys-color-on-primary);\n }\n\n .withIcon .thumb {\n transform: translateX(6px) scale(1.2);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host(:active) .thumb,\n .pressed .thumb {\n transform: translateX(6px) scale(1.4);\n }\n\n :host([checked]) .thumb,\n :host([checked]) .withIcon .thumb {\n transform: translateX(26px) scale(1.2);\n }\n\n :host([checked]:active) .thumb,\n :host([checked]) .pressed .thumb {\n transform: translateX(26px) scale(1.4);\n }\n\n .state {\n position: absolute;\n inset: 0;\n z-index: 2;\n width: 40px;\n height: 40px;\n border-radius: var(--md-sys-shape-corner-full);\n transform: translateX(-5px);\n transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host([checked]) .state {\n transform: translateX(18px);\n cursor: pointer;\n }\n\n .content {\n z-index: 3;\n position: relative;\n }\n\n .icon {\n fill: var(--md-sys-color-surface-variant);\n width: 16px;\n height: 16px;\n }\n\n :host([checked]) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n :host([checked]) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n /* Hover state */\n\n :host(:hover) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host(:hover) .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host([checked]:hover) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host([checked]:hover) .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host(:hover) .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:hover) .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:hover) .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:hover) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Focus state */\n\n :host(:focus) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host([checked]:focus) .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host(:focus) .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-focus-state-layer-opacity);\n }\n\n :host([checked]:focus) .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-focus-state-layer-opacity);\n }\n\n :host(:focus) .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:focus) .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:focus) .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:focus) .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Pressed state */\n\n :host(:active) .track,\n .pressed .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-outline);\n }\n\n :host([checked]:active) .track,\n :host([checked]) .pressed .track {\n background-color: var(--md-sys-color-primary);\n border-width: 0;\n }\n\n :host(:active) .state,\n .pressed .state {\n background-color: var(--md-sys-color-on-surface);\n opacity: var(--md-sys-state-pressed-state-layer-opacity);\n }\n\n :host([checked]:active) .state,\n :host([checked]) .pressed .state {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-pressed-state-layer-opacity);\n }\n\n :host(:active) .thumb,\n .pressed .thumb {\n background-color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([checked]:active) .thumb,\n :host([checked]) .pressed .thumb {\n background-color: var(--md-sys-color-primary-container);\n }\n\n :host(:active) .icon,\n .pressed .icon {\n fill: var(--md-sys-color-surface-variant);\n }\n\n :host([checked]:active) .icon,\n :host([checked]) .pressed .icon {\n fill: var(--md-sys-color-on-primary-container);\n }\n\n /* Disabled state */\n\n :host([disabled]) .track {\n background-color: var(--md-sys-color-surface-variant);\n border-color: var(--md-sys-color-on-surface);\n opacity: 0.12;\n }\n\n :host([disabled][checked]) .track {\n background-color: var(--md-sys-color-on-surface);\n border-width: 0;\n }\n\n :host([disabled]) .thumb {\n background-color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n\n :host([disabled][checked]) .thumb {\n background-color: var(--md-sys-color-surface);\n opacity: 1;\n }\n\n :host([disabled]) .icon {\n fill: var(--md-sys-color-surface-variant);\n opacity: 0.38;\n }\n\n :host([disabled][checked]) .icon {\n fill: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n`\n"]}
|
|
@@ -53,11 +53,11 @@ export default css `
|
|
|
53
53
|
.labelActive .label {
|
|
54
54
|
transform: translateY(calc(-100% - 2px)) scale(0.75);
|
|
55
55
|
position: absolute;
|
|
56
|
-
background-color: var(--md-sys-color-surface);
|
|
56
|
+
background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host(:focus-within) .label {
|
|
60
|
-
color: var(--md-sys-color-primary);
|
|
60
|
+
color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));
|
|
61
61
|
}
|
|
62
62
|
`;
|
|
63
63
|
//# sourceMappingURL=outlined.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-sys-color-surface);\n }\n\n :host(:focus-within) .label {\n color: var(--md-sys-color-primary);\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"outlined.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/outlined.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n --_border-color: var(--md-sys-color-outline);\n --_outline-color: var(--md-sys-color-primary);\n --_outline-width: 0px;\n }\n\n .highlight {\n display: none;\n }\n\n .surface {\n border-radius: var(--md-sys-shape-corner-extra-small);\n }\n\n .container {\n border: 1px var(--_border-color) solid;\n outline: var(--_outline-width) solid var(--_outline-color);\n outline-offset: calc(-1 * var(--_outline-width));\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover:not(:focus-within):not([invalid])) {\n --_border-color: var(--md-sys-color-on-surface);\n }\n\n :host(:focus-within:not([invalid])) {\n --_border-color: var(--md-sys-color-primary);\n }\n\n :host(:focus-within) {\n --_outline-width: 3px;\n }\n\n :host([invalid]) {\n --_border-color: var(--md-sys-color-error);\n --_outline-color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) {\n --_outline-color: var(--md-sys-color-on-error-container);\n --_border-color: var(--md-sys-color-on-error-container);\n }\n\n .label {\n padding: 0 4px;\n }\n\n .labelActive .label {\n transform: translateY(calc(-100% - 2px)) scale(0.75);\n position: absolute;\n background-color: var(--md-outlined-text-field-label-active-background-color, var(--md-sys-color-surface));\n }\n\n :host(:focus-within) .label {\n color: var(--md-outlined-text-field-label-active-color, var(--md-sys-color-primary));\n }\n`\n"]}
|
package/demo/md/chip/chip.html
CHANGED
|
@@ -12,20 +12,47 @@
|
|
|
12
12
|
margin: 20px 0;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
.demo .demo-section {
|
|
16
|
+
max-width: 858px;
|
|
17
|
+
margin: 0 auto 80px auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.demo h2, .demo h3 {
|
|
21
|
+
margin-bottom: 36px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.frame {
|
|
25
|
+
padding: 40px;
|
|
26
|
+
border-radius: 20px;
|
|
27
|
+
border: 1px var(--md-sys-color-outline) solid;
|
|
17
28
|
}
|
|
18
29
|
|
|
19
30
|
.grid-5 {
|
|
20
31
|
display: grid;
|
|
21
|
-
grid-template-columns:
|
|
22
|
-
|
|
32
|
+
grid-template-columns: 160px 1fr 1fr 1fr 1fr;
|
|
33
|
+
gap: 0 0;
|
|
34
|
+
justify-items: center;
|
|
35
|
+
align-items: center;
|
|
36
|
+
grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
|
|
37
|
+
grid-auto-rows: 80px;
|
|
38
|
+
|
|
39
|
+
padding: 40px;
|
|
40
|
+
border-radius: 20px;
|
|
41
|
+
border: 1px var(--md-sys-color-outline) solid;
|
|
23
42
|
}
|
|
24
43
|
|
|
25
44
|
.grid-4 {
|
|
26
45
|
display: grid;
|
|
27
|
-
grid-template-columns:
|
|
28
|
-
|
|
46
|
+
grid-template-columns: 160px 1fr 1fr 1fr;
|
|
47
|
+
gap: 0 0;
|
|
48
|
+
justify-items: center;
|
|
49
|
+
align-items: center;
|
|
50
|
+
grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
|
|
51
|
+
grid-auto-rows: 60px;
|
|
52
|
+
|
|
53
|
+
padding: 40px;
|
|
54
|
+
border-radius: 20px;
|
|
55
|
+
border: 1px var(--md-sys-color-outline) solid;
|
|
29
56
|
}
|
|
30
57
|
|
|
31
58
|
.grid-3 {
|
package/demo/md/chip/chip.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
|
|
|
3
3
|
import type UiChip from '../../../src/md/chip/internals/Chip.js'
|
|
4
4
|
import { DemoPage } from '../../../src/demo/DemoPage.js'
|
|
5
5
|
import '../../../src/md/chip/ui-chip.js'
|
|
6
|
+
import '../../../src/md/chip/ui-chip-set.js'
|
|
6
7
|
import '../../../src/md/icons/ui-icon.js'
|
|
7
8
|
|
|
8
9
|
const calendarIcon = iconWrapper(
|
|
@@ -36,72 +37,100 @@ class ComponentDemoPage extends DemoPage {
|
|
|
36
37
|
return html`
|
|
37
38
|
<a href="../">Back</a>
|
|
38
39
|
<section class="demo-section">
|
|
39
|
-
<h2 class="
|
|
40
|
-
<div class="demo-row grid-4">
|
|
41
|
-
<ui-chip type="assist" @click="${this.handleClickHandler}">Enabled</ui-chip>
|
|
42
|
-
<ui-chip type="assist" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
|
|
40
|
+
<h2 class="display-large">Assist chip</h2>
|
|
43
41
|
|
|
42
|
+
<div class="grid-5">
|
|
43
|
+
<span> </span>
|
|
44
|
+
<span class="column-title title-medium">Regular</span>
|
|
45
|
+
<span class="column-title title-medium">Icon</span>
|
|
46
|
+
<span class="column-title title-medium">Avatar</span>
|
|
47
|
+
<span class="column-title title-medium">Elevated</span>
|
|
48
|
+
|
|
49
|
+
<span class="row-name title-small">Enabled</span>
|
|
50
|
+
<ui-chip type="assist" @click="${this.handleClickHandler}">Assist</ui-chip>
|
|
44
51
|
<ui-chip type="assist" @click="${this.handleClickHandler}">
|
|
45
52
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
46
|
-
|
|
53
|
+
Assist
|
|
54
|
+
</ui-chip>
|
|
55
|
+
<ui-chip type="assist" @click="${this.handleClickHandler}">
|
|
56
|
+
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
57
|
+
Assist
|
|
58
|
+
</ui-chip>
|
|
59
|
+
<ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
|
|
60
|
+
<ui-icon slot="icon">${calendarIcon}</ui-icon>Assist
|
|
47
61
|
</ui-chip>
|
|
48
62
|
|
|
63
|
+
<span class="row-name title-small">Disabled</span>
|
|
64
|
+
<ui-chip type="assist" disabled @click="${this.handleClickHandler}">Assist</ui-chip>
|
|
49
65
|
<ui-chip type="assist" @click="${this.handleClickHandler}" disabled>
|
|
50
66
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
51
|
-
|
|
67
|
+
Assist
|
|
52
68
|
</ui-chip>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<ui-chip type="assist" @click="${this.handleClickHandler}" elevated>Enabled</ui-chip>
|
|
57
|
-
<ui-chip type="assist" disabled @click="${this.handleClickHandler}" elevated>Disabled</ui-chip>
|
|
58
|
-
|
|
59
|
-
<ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
|
|
60
|
-
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
61
|
-
With icon
|
|
69
|
+
<ui-chip type="assist" disabled @click="${this.handleClickHandler}">
|
|
70
|
+
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
71
|
+
Assist
|
|
62
72
|
</ui-chip>
|
|
63
|
-
|
|
64
73
|
<ui-chip type="assist" @click="${this.handleClickHandler}" disabled elevated>
|
|
65
74
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
66
|
-
|
|
75
|
+
Assist
|
|
67
76
|
</ui-chip>
|
|
68
77
|
</div>
|
|
69
78
|
</section>
|
|
70
79
|
|
|
71
80
|
<section class="demo-section">
|
|
72
|
-
<h2 class="
|
|
73
|
-
<div class="
|
|
74
|
-
<
|
|
81
|
+
<h2 class="display-large">Filter chip</h2>
|
|
82
|
+
<div class="grid-5">
|
|
83
|
+
<span> </span>
|
|
84
|
+
<span class="column-title title-medium">Unchecked</span>
|
|
85
|
+
<span class="column-title title-medium">Checked</span>
|
|
86
|
+
<span class="column-title title-medium">List</span>
|
|
87
|
+
<span class="column-title title-medium">Elevated</span>
|
|
88
|
+
|
|
89
|
+
<span class="row-name title-small">Enabled</span>
|
|
90
|
+
<ui-chip type="filter" @click="${this.handleClickHandler}" @select="${this.handleSelect}">Filter</ui-chip>
|
|
75
91
|
<ui-chip type="filter" checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
|
|
76
|
-
>
|
|
77
|
-
>
|
|
78
|
-
<ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
|
|
79
|
-
>Images</ui-chip
|
|
92
|
+
>Filter</ui-chip
|
|
80
93
|
>
|
|
81
94
|
<ui-chip
|
|
82
95
|
type="filter"
|
|
83
|
-
list
|
|
96
|
+
list
|
|
84
97
|
@click="${this.handleClickHandler}"
|
|
85
98
|
@list="${this.handleList}"
|
|
86
99
|
@select="${this.handleSelect}"
|
|
87
100
|
>Other</ui-chip
|
|
88
101
|
>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
102
|
+
<ui-chip
|
|
103
|
+
type="filter"
|
|
104
|
+
list
|
|
105
|
+
elevated
|
|
106
|
+
@click="${this.handleClickHandler}"
|
|
107
|
+
@list="${this.handleList}"
|
|
108
|
+
@select="${this.handleSelect}"
|
|
109
|
+
>Other</ui-chip
|
|
93
110
|
>
|
|
94
|
-
|
|
95
|
-
|
|
111
|
+
|
|
112
|
+
<span class="row-name title-small">Disabled</span>
|
|
113
|
+
<ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
|
|
114
|
+
>Filter</ui-chip
|
|
96
115
|
>
|
|
97
|
-
<ui-chip type="filter" disabled @click="${this.handleClickHandler}"
|
|
98
|
-
>
|
|
116
|
+
<ui-chip type="filter" disabled checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
|
|
117
|
+
>Filter</ui-chip
|
|
99
118
|
>
|
|
100
119
|
<ui-chip
|
|
101
120
|
type="filter"
|
|
102
|
-
list
|
|
121
|
+
list
|
|
122
|
+
disabled
|
|
103
123
|
@click="${this.handleClickHandler}"
|
|
124
|
+
@list="${this.handleList}"
|
|
125
|
+
@select="${this.handleSelect}"
|
|
126
|
+
>Other</ui-chip
|
|
127
|
+
>
|
|
128
|
+
<ui-chip
|
|
129
|
+
type="filter"
|
|
130
|
+
list
|
|
104
131
|
elevated
|
|
132
|
+
disabled
|
|
133
|
+
@click="${this.handleClickHandler}"
|
|
105
134
|
@list="${this.handleList}"
|
|
106
135
|
@select="${this.handleSelect}"
|
|
107
136
|
>Other</ui-chip
|
|
@@ -110,52 +139,78 @@ class ComponentDemoPage extends DemoPage {
|
|
|
110
139
|
</section>
|
|
111
140
|
|
|
112
141
|
<section class="demo-section">
|
|
113
|
-
<h2 class="
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
|
|
142
|
+
<h2 class="display-large">Input chip</h2>
|
|
143
|
+
|
|
144
|
+
<div class="grid-5">
|
|
145
|
+
<span> </span>
|
|
146
|
+
<span class="column-title title-medium">Regular</span>
|
|
147
|
+
<span class="column-title title-medium">removable</span>
|
|
148
|
+
<span class="column-title title-medium">Disabled</span>
|
|
149
|
+
<span class="column-title title-medium">Elevated</span>
|
|
150
|
+
|
|
151
|
+
<span class="row-name title-small">Regular</span>
|
|
152
|
+
<ui-chip type="input" @click="${this.handleClickHandler}">Input</ui-chip>
|
|
153
|
+
<ui-chip type="input" removable @click="${this.handleClickHandler}" @close="${this.handleClose}"
|
|
154
|
+
>Input</ui-chip
|
|
118
155
|
>
|
|
119
|
-
<ui-chip type="input" disabled @click="${this.handleClickHandler}">
|
|
120
|
-
|
|
121
|
-
|
|
156
|
+
<ui-chip type="input" disabled @click="${this.handleClickHandler}">Input</ui-chip>
|
|
157
|
+
<ui-chip type="input" elevated @click="${this.handleClickHandler}">Input</ui-chip>
|
|
158
|
+
|
|
159
|
+
<span class="row-name title-small">With icon</span>
|
|
122
160
|
<ui-chip type="input" @click="${this.handleClickHandler}">
|
|
123
161
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
124
|
-
|
|
162
|
+
Input
|
|
125
163
|
</ui-chip>
|
|
126
|
-
<ui-chip type="input" @click="${this.handleClickHandler}"
|
|
164
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
|
|
127
165
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
128
|
-
|
|
166
|
+
Input
|
|
129
167
|
</ui-chip>
|
|
130
|
-
<ui-chip type="input" @click="${this.handleClickHandler}"
|
|
168
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
|
|
131
169
|
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
132
|
-
|
|
170
|
+
Input
|
|
133
171
|
</ui-chip>
|
|
134
|
-
|
|
135
|
-
|
|
172
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
|
|
173
|
+
<ui-icon slot="icon">${calendarIcon}</ui-icon>
|
|
174
|
+
Input
|
|
175
|
+
</ui-chip>
|
|
176
|
+
|
|
177
|
+
<span class="row-name title-small">With avatar</span>
|
|
136
178
|
<ui-chip type="input" @click="${this.handleClickHandler}">
|
|
137
179
|
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
138
|
-
|
|
180
|
+
Input
|
|
139
181
|
</ui-chip>
|
|
140
|
-
<ui-chip type="input" @click="${this.handleClickHandler}"
|
|
182
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
|
|
141
183
|
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
142
|
-
|
|
184
|
+
Input
|
|
143
185
|
</ui-chip>
|
|
144
|
-
<ui-chip type="input" @click="${this.handleClickHandler}"
|
|
186
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
|
|
145
187
|
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
146
|
-
|
|
188
|
+
Input
|
|
189
|
+
</ui-chip>
|
|
190
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
|
|
191
|
+
<img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
|
|
192
|
+
Input
|
|
147
193
|
</ui-chip>
|
|
148
194
|
</div>
|
|
149
195
|
</section>
|
|
150
196
|
|
|
151
197
|
<section class="demo-section">
|
|
152
|
-
<h2 class="
|
|
153
|
-
<div class="demo-row grid-3">
|
|
198
|
+
<h2 class="display-large">Suggestion chip</h2>
|
|
199
|
+
<div class="demo-row grid-3 frame">
|
|
154
200
|
<ui-chip type="suggestion" @click="${this.handleClickHandler}">Enabled</ui-chip>
|
|
155
201
|
<ui-chip type="suggestion" @click="${this.handleClickHandler}" elevated>Elevated</ui-chip>
|
|
156
202
|
<ui-chip type="suggestion" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
|
|
157
203
|
</div>
|
|
158
204
|
</section>
|
|
205
|
+
|
|
206
|
+
<section class="demo-section">
|
|
207
|
+
<h2 class="display-large">Chip set</h2>
|
|
208
|
+
<ui-chip-set>
|
|
209
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
|
|
210
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
|
|
211
|
+
<ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
|
|
212
|
+
</ui-chip-set>
|
|
213
|
+
</section>
|
|
159
214
|
`
|
|
160
215
|
}
|
|
161
216
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@api-client/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "Internal UI component library for the API Client ecosystem.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "build/src/index.js",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"lint-staged": "^16.0.0",
|
|
219
219
|
"oauth2-mock-server": "^8.0.0",
|
|
220
220
|
"prettier": "^3.5.1",
|
|
221
|
-
"sinon": "^
|
|
221
|
+
"sinon": "^21.0.0",
|
|
222
222
|
"ts-lit-plugin": "^2.0.2",
|
|
223
223
|
"typescript": "^5.5.2",
|
|
224
224
|
"typescript-eslint": "^8.24.1",
|
|
@@ -262,16 +262,12 @@ export default class BaseButton extends UiElement {
|
|
|
262
262
|
|
|
263
263
|
override handlePointerEnter(e: PointerEvent): void {
|
|
264
264
|
super.handlePointerEnter(e)
|
|
265
|
-
|
|
266
|
-
this.ripple.beginHover(e)
|
|
267
|
-
}
|
|
265
|
+
this.ripple?.beginHover(e)
|
|
268
266
|
}
|
|
269
267
|
|
|
270
268
|
override handlePointerLeave(e: PointerEvent): void {
|
|
271
269
|
super.handlePointerLeave(e)
|
|
272
|
-
|
|
273
|
-
this.ripple.endHover()
|
|
274
|
-
}
|
|
270
|
+
this.ripple?.endHover()
|
|
275
271
|
}
|
|
276
272
|
|
|
277
273
|
protected override render(): TemplateResult {
|