@m3e/chips 1.0.0-rc.1 → 1.0.0-rc.3
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/README.md +1 -2
- package/dist/custom-elements.json +4884 -608
- package/dist/html-custom-data.json +10 -10
- package/dist/index.js +69 -30
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +87 -76
- package/dist/index.min.js.map +1 -1
- package/dist/src/AssistChipElement.d.ts +2 -1
- package/dist/src/AssistChipElement.d.ts.map +1 -1
- package/dist/src/ChipElement.d.ts +1 -4
- package/dist/src/ChipElement.d.ts.map +1 -1
- package/dist/src/ChipSetElement.d.ts +1 -2
- package/dist/src/ChipSetElement.d.ts.map +1 -1
- package/dist/src/FilterChipElement.d.ts +13 -1
- package/dist/src/FilterChipElement.d.ts.map +1 -1
- package/dist/src/FilterChipSetElement.d.ts +0 -1
- package/dist/src/FilterChipSetElement.d.ts.map +1 -1
- package/dist/src/InputChipElement.d.ts +14 -1
- package/dist/src/InputChipElement.d.ts.map +1 -1
- package/dist/src/InputChipSetElement.d.ts +1 -2
- package/dist/src/InputChipSetElement.d.ts.map +1 -1
- package/dist/src/SuggestionChipElement.d.ts +2 -1
- package/dist/src/SuggestionChipElement.d.ts.map +1 -1
- package/package.json +5 -5
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -183
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/AssistChipElement.ts +0 -103
- package/src/ChipElement.ts +0 -336
- package/src/ChipSetElement.ts +0 -60
- package/src/ChipVariant.ts +0 -2
- package/src/FilterChipElement.ts +0 -254
- package/src/FilterChipSetElement.ts +0 -161
- package/src/InputChipElement.ts +0 -287
- package/src/InputChipSetElement.ts +0 -360
- package/src/SuggestionChipElement.ts +0 -104
- package/src/index.ts +0 -9
- package/tsconfig.json +0 -9
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { M3eChipElement } from "./ChipElement";
|
|
2
2
|
declare const M3eAssistChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormSubmitterMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & typeof M3eChipElement;
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
5
4
|
* A chip users interact with to perform a smart or automated action that can span multiple applications.
|
|
6
5
|
*
|
|
7
6
|
* @description
|
|
@@ -40,6 +39,8 @@ declare const M3eAssistChipElement_base: import("node_modules/@m3e/core/dist/src
|
|
|
40
39
|
* @attr value - A string representing the value of the chip.
|
|
41
40
|
* @attr variant - The appearance variant of the chip.
|
|
42
41
|
*
|
|
42
|
+
* @fires click - Emitted when the element is clicked.
|
|
43
|
+
*
|
|
43
44
|
* @cssprop --m3e-chip-container-shape - Border radius of the chip container.
|
|
44
45
|
* @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
|
|
45
46
|
* @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssistChipElement.d.ts","sourceRoot":"","sources":["../../src/AssistChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C
|
|
1
|
+
{"version":3,"file":"AssistChipElement.d.ts","sourceRoot":"","sources":["../../src/AssistChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,oBAAqB,SAAQ,yBAKzC;IACC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
2
2
|
import { ChipVariant } from "./ChipVariant";
|
|
3
|
-
declare const M3eChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
4
3
|
/**
|
|
5
|
-
* @summary
|
|
6
4
|
* A non-interactive chip used to convey small pieces of information.
|
|
7
5
|
*
|
|
8
6
|
* @description
|
|
@@ -50,7 +48,7 @@ declare const M3eChipElement_base: import("node_modules/@m3e/core/dist/src/share
|
|
|
50
48
|
* @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
|
|
51
49
|
* @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
|
|
52
50
|
*/
|
|
53
|
-
export declare class M3eChipElement extends
|
|
51
|
+
export declare class M3eChipElement extends LitElement {
|
|
54
52
|
#private;
|
|
55
53
|
/** The styles of the element. */
|
|
56
54
|
static styles: CSSResultGroup;
|
|
@@ -82,5 +80,4 @@ declare global {
|
|
|
82
80
|
"m3e-chip": M3eChipElement;
|
|
83
81
|
}
|
|
84
82
|
}
|
|
85
|
-
export {};
|
|
86
83
|
//# sourceMappingURL=ChipElement.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipElement.d.ts","sourceRoot":"","sources":["../../src/ChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ChipElement.d.ts","sourceRoot":"","sources":["../../src/ChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAiBhG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA4KpC;IAEF,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAK9E;;;OAGG;IAC0B,OAAO,EAAE,WAAW,CAAc;IAE/D,mDAAmD;IACnD,IAAgB,KAAK,IAGJ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAczE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAsBpC,gBAAgB;IAChB,SAAS,CAAC,WAAW,IAAI,OAAO;IAIhC,gBAAgB;IAChB,SAAS,CAAC,mBAAmB,IAAI,OAAO;IAQxC,gBAAgB;IAChB,SAAS,CAAC,WAAW,IAAI,OAAO;CAkBjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
-
declare const M3eChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").VerticalMixin> &
|
|
2
|
+
declare const M3eChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").VerticalMixin> & typeof LitElement;
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
5
4
|
* A container used to organize chips into a cohesive unit.
|
|
6
5
|
*
|
|
7
6
|
* @description
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipSetElement.d.ts","sourceRoot":"","sources":["../../src/ChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D
|
|
1
|
+
{"version":3,"file":"ChipSetElement.d.ts","sourceRoot":"","sources":["../../src/ChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,iBAAkB,SAAQ,sBAAoB;IACzD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}
|
|
@@ -2,7 +2,6 @@ import { CSSResultGroup, PropertyValues } from "lit";
|
|
|
2
2
|
import { M3eChipElement } from "./ChipElement";
|
|
3
3
|
declare const M3eFilterChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof M3eChipElement;
|
|
4
4
|
/**
|
|
5
|
-
* @summary
|
|
6
5
|
* A chip users interact with to select/deselect options.
|
|
7
6
|
*
|
|
8
7
|
* @description
|
|
@@ -12,6 +11,18 @@ declare const M3eFilterChipElement_base: import("node_modules/@m3e/core/dist/src
|
|
|
12
11
|
* with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
|
|
13
12
|
* differentiation and contextual emphasis.
|
|
14
13
|
*
|
|
14
|
+
* @example
|
|
15
|
+
* The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that
|
|
16
|
+
* allow a user to choose an option. You can use the `multi` attribute to enable multiselect.
|
|
17
|
+
* ```html
|
|
18
|
+
* <m3e-filter-chip-set aria-label="Filter by topic">
|
|
19
|
+
* <m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
|
|
20
|
+
* <m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
|
|
21
|
+
* <m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
|
|
22
|
+
* <m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
|
|
23
|
+
* </m3e-filter-chip-set>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
15
26
|
* @tag m3e-filter-chip
|
|
16
27
|
*
|
|
17
28
|
* @slot - Renders the label of the chip.
|
|
@@ -26,6 +37,7 @@ declare const M3eFilterChipElement_base: import("node_modules/@m3e/core/dist/src
|
|
|
26
37
|
*
|
|
27
38
|
* @fires input - Emitted when the selected state changes.
|
|
28
39
|
* @fires change - Emitted when the selected state changes.
|
|
40
|
+
* @fires click - Emitted when the element is clicked.
|
|
29
41
|
*
|
|
30
42
|
* @cssprop --m3e-chip-container-shape - Border radius of the chip container.
|
|
31
43
|
* @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterChipElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBhE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C
|
|
1
|
+
{"version":3,"file":"FilterChipElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBhE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0GpC;IAIF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,2BAA2B;cACR,WAAW,IAAI,OAAO;CAsB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
|
|
@@ -5,7 +5,6 @@ import { M3eChipSetElement } from "./ChipSetElement";
|
|
|
5
5
|
import { M3eFilterChipElement } from "./FilterChipElement";
|
|
6
6
|
declare const M3eFilterChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LabelledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormAssociatedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof M3eChipSetElement;
|
|
7
7
|
/**
|
|
8
|
-
* @summary
|
|
9
8
|
* A container that organizes filter chips into a cohesive group, enabling selection and
|
|
10
9
|
* deselection of values used to refine content or trigger contextual behavior.
|
|
11
10
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterChipSetElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,EAA8D,SAAS,EAAiB,MAAM,WAAW,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;;AAE3D
|
|
1
|
+
{"version":3,"file":"FilterChipSetElement.d.ts","sourceRoot":"","sources":["../../src/FilterChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,EAA8D,SAAS,EAAiB,MAAM,WAAW,CAAC;AACjH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,uBAAwB,SAAQ,4BAE5C;;IACC,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,yCAEb;IAEd;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;OAGG;IACiE,sBAAsB,UAAS;IAEnG,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,oBAAoB,EAAE,CAE3C;IAED,uCAAuC;IACvC,IAAI,QAAQ,IAAI,SAAS,oBAAoB,EAAE,CAE9C;IAED,wCAAwC;IACxC,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAU7C;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,6BAUvB;IAED,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAsBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}
|
|
@@ -3,7 +3,6 @@ import { M3eIconButtonElement } from "@m3e/icon-button";
|
|
|
3
3
|
import { M3eChipElement } from "./ChipElement";
|
|
4
4
|
declare const M3eInputChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof M3eChipElement;
|
|
5
5
|
/**
|
|
6
|
-
* @summary
|
|
7
6
|
* A chip which represents a discrete piece of information entered by a user.
|
|
8
7
|
*
|
|
9
8
|
* @description
|
|
@@ -11,6 +10,19 @@ declare const M3eInputChipElement_base: import("node_modules/@m3e/core/dist/src/
|
|
|
11
10
|
* and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,
|
|
12
11
|
* keyboard interaction, and appearance variants including `elevated` and `outlined`.
|
|
13
12
|
*
|
|
13
|
+
* @example
|
|
14
|
+
* The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.
|
|
15
|
+
* In this example, the `input` slot specifies the `input` element used to add input chips and the
|
|
16
|
+
* field label's `for` attribute targets the `input` element to provide an accessible label.
|
|
17
|
+
* ```html
|
|
18
|
+
* <m3e-form-field>
|
|
19
|
+
* <label slot="label" for="keywords">Keywords</label>
|
|
20
|
+
* <m3e-input-chip-set aria-label="Enter keywords">
|
|
21
|
+
* <input id="keywords" slot="input" placeholder="New keyword..." />
|
|
22
|
+
* </m3e-input-chip-set>
|
|
23
|
+
* </m3e-form-field>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
14
26
|
* @tag m3e-input-chip
|
|
15
27
|
*
|
|
16
28
|
* @slot - Renders the label of the chip.
|
|
@@ -26,6 +38,7 @@ declare const M3eInputChipElement_base: import("node_modules/@m3e/core/dist/src/
|
|
|
26
38
|
* @attr variant - The appearance variant of the chip.
|
|
27
39
|
*
|
|
28
40
|
* @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.
|
|
41
|
+
* @fires click - Emitted when the element is clicked.
|
|
29
42
|
*
|
|
30
43
|
* @cssprop --m3e-chip-container-shape - Border radius of the chip container.
|
|
31
44
|
* @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputChipElement.d.ts","sourceRoot":"","sources":["../../src/InputChipElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAczE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C
|
|
1
|
+
{"version":3,"file":"InputChipElement.d.ts","sourceRoot":"","sources":["../../src/InputChipElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAczE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,mBAAoB,SAAQ,wBAGxC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoDpC;IAEF,gDAAgD;IAChC,QAAQ,CAAC,IAAI,EAAG,eAAe,CAAC;IAEhD,yDAAyD;IAChC,QAAQ,CAAC,YAAY,EAAG,oBAAoB,GAAG,IAAI,CAAC;IAE7E;;;OAGG;IAC0B,SAAS,UAAS;IAE/C;;;OAGG;IACsC,WAAW,SAAY;IAEhE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASxE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAgCpC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CA8ClD;AAED,UAAU,2BAA4B,SAAQ,mBAAmB;IAC/D,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACjF,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC7D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACjF,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
|
@@ -5,7 +5,6 @@ import { M3eChipSetElement } from "./ChipSetElement";
|
|
|
5
5
|
import { M3eInputChipElement } from "./InputChipElement";
|
|
6
6
|
declare const M3eInputChipSetElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredConstraintValidationMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").ConstraintValidationMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormAssociatedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof M3eChipSetElement;
|
|
7
7
|
/**
|
|
8
|
-
* @summary
|
|
9
8
|
* A container that transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.
|
|
10
9
|
*
|
|
11
10
|
* @description
|
|
@@ -47,7 +46,7 @@ export declare class M3eInputChipSetElement extends M3eInputChipSetElement_base
|
|
|
47
46
|
static styles: CSSResultGroup;
|
|
48
47
|
/** The chips of the set. */
|
|
49
48
|
get chips(): readonly M3eInputChipElement[];
|
|
50
|
-
/** The
|
|
49
|
+
/** The values of the set. */
|
|
51
50
|
get value(): readonly string[] | null;
|
|
52
51
|
/** @inheritdoc @internal */
|
|
53
52
|
get [formValue](): FormData | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputChipSetElement.d.ts","sourceRoot":"","sources":["../../src/InputChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAOL,SAAS,EAKV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;;AAEzD
|
|
1
|
+
{"version":3,"file":"InputChipSetElement.d.ts","sourceRoot":"","sources":["../../src/InputChipSetElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAOL,SAAS,EAKV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,sBACX,SAAQ,2BAKR,YAAW,gBAAgB;;IA6B3B,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyBpC;IAoBF,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,mBAAmB,EAAE,CAI1C;IAED,6BAA6B;IAC7B,IAAI,KAAK,IAAI,SAAS,MAAM,EAAE,GAAG,IAAI,CAGpC;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,oBAQvB;IAED,kBAAkB;IAClB,IAAI,gBAAgB,IAAI,OAAO,CAE9B;IAED,kBAAkB;IAClB,gBAAgB,IAAI,IAAI;IAIxB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAWlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQzE,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAcxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA6IrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,sBAAsB,CAAC;KAC9C;CACF"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { M3eChipElement } from "./ChipElement";
|
|
2
2
|
declare const M3eSuggestionChipElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormSubmitterMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & typeof M3eChipElement;
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
5
4
|
* A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as
|
|
6
5
|
* suggested responses or search filters.
|
|
7
6
|
*
|
|
@@ -41,6 +40,8 @@ declare const M3eSuggestionChipElement_base: import("node_modules/@m3e/core/dist
|
|
|
41
40
|
* @attr value - A string representing the value of the chip.
|
|
42
41
|
* @attr variant - The appearance variant of the chip.
|
|
43
42
|
*
|
|
43
|
+
* @fires click - Emitted when the element is clicked.
|
|
44
|
+
*
|
|
44
45
|
* @cssprop --m3e-chip-container-shape - Border radius of the chip container.
|
|
45
46
|
* @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
|
|
46
47
|
* @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuggestionChipElement.d.ts","sourceRoot":"","sources":["../../src/SuggestionChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C
|
|
1
|
+
{"version":3,"file":"SuggestionChipElement.d.ts","sourceRoot":"","sources":["../../src/SuggestionChipElement.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBACa,wBAAyB,SAAQ,6BAK7C;IACC,4BAA4B;cACT,mBAAmB,IAAI,OAAO;CAGlD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3e/chips",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.3",
|
|
4
4
|
"description": "Chips for M3E",
|
|
5
5
|
"author": "matraic <matraic@yahoo.com>",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"homepage": "https://matraic.github.io/m3e/",
|
|
7
|
+
"homepage": "https://matraic.github.io/m3e/#/components/chips.html",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
10
|
"url": "git+https://github.com/matraic/m3e.git"
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"clean": "rimraf dist"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@m3e/core": "1.0.0-rc.
|
|
36
|
-
"@m3e/icon-button": "1.0.0-rc.
|
|
37
|
-
"@m3e/form-field": "1.0.0-rc.
|
|
35
|
+
"@m3e/core": "1.0.0-rc.3",
|
|
36
|
+
"@m3e/icon-button": "1.0.0-rc.3",
|
|
37
|
+
"@m3e/form-field": "1.0.0-rc.3",
|
|
38
38
|
"lit": "^3.3.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
package/cem.config.mjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
globs: ["src/**/*.ts"],
|
|
5
|
-
exclude: ["src/**/*.spec.ts"],
|
|
6
|
-
packagejson: true,
|
|
7
|
-
outdir: "dist",
|
|
8
|
-
litelement: true,
|
|
9
|
-
plugins: [
|
|
10
|
-
customElementVsCodePlugin({
|
|
11
|
-
outdir: "dist",
|
|
12
|
-
htmlFileName: "html-custom-data.json",
|
|
13
|
-
cssFileName: "css-custom-data.json",
|
|
14
|
-
}),
|
|
15
|
-
],
|
|
16
|
-
};
|
package/demo/index.html
DELETED
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" style="overflow-y: auto">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Chips for M3E</title>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="description" content="Chips for M3E" />
|
|
8
|
-
<base href="./" />
|
|
9
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
-
<link
|
|
12
|
-
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
|
13
|
-
rel="stylesheet"
|
|
14
|
-
/>
|
|
15
|
-
<link
|
|
16
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
|
|
17
|
-
rel="stylesheet"
|
|
18
|
-
/>
|
|
19
|
-
<script type="importmap">
|
|
20
|
-
{
|
|
21
|
-
"imports": {
|
|
22
|
-
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
|
|
23
|
-
"@m3e/core": "../../core/dist/index.min.js",
|
|
24
|
-
"@m3e/core/a11y": "../../core/dist/a11y.min.js"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
</script>
|
|
28
|
-
<script type="module" src="../../icon/dist/index.min.js"></script>
|
|
29
|
-
<script type="module" src="../../icon-button/dist/index.min.js"></script>
|
|
30
|
-
<script type="module" src="../../form-field/dist/index.min.js"></script>
|
|
31
|
-
<script type="module" src="../../theme/dist/index.min.js"></script>
|
|
32
|
-
<script type="module" src="../dist/index.min.js"></script>
|
|
33
|
-
<style>
|
|
34
|
-
body {
|
|
35
|
-
font-family: "Roboto";
|
|
36
|
-
}
|
|
37
|
-
*:not(:defined) {
|
|
38
|
-
display: none;
|
|
39
|
-
}
|
|
40
|
-
</style>
|
|
41
|
-
</head>
|
|
42
|
-
<body>
|
|
43
|
-
<m3e-theme strong-focus>
|
|
44
|
-
<m3e-chip-set>
|
|
45
|
-
<m3e-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-chip>
|
|
46
|
-
<m3e-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-chip>
|
|
47
|
-
<m3e-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-chip>
|
|
48
|
-
<m3e-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-chip>
|
|
49
|
-
</m3e-chip-set>
|
|
50
|
-
<br /><br />
|
|
51
|
-
<m3e-chip>Static chip</m3e-chip>
|
|
52
|
-
<m3e-chip><m3e-icon slot="icon" name="face"></m3e-icon>Static chip w/ leading icon</m3e-chip>
|
|
53
|
-
<m3e-chip>Static chip w/ trailing icon<m3e-icon slot="trailing-icon" name="face"></m3e-icon></m3e-chip>
|
|
54
|
-
<m3e-chip>
|
|
55
|
-
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
56
|
-
Static chip w/ leading and trailing icons
|
|
57
|
-
<m3e-icon slot="trailing-icon" name="face"></m3e-icon>
|
|
58
|
-
</m3e-chip>
|
|
59
|
-
<br /><br />
|
|
60
|
-
<m3e-chip-set role="group" aria-label="Quick actions">
|
|
61
|
-
<m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
|
|
62
|
-
<m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
|
|
63
|
-
<m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
|
|
64
|
-
<m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
|
|
65
|
-
</m3e-chip-set>
|
|
66
|
-
|
|
67
|
-
<br /><br />
|
|
68
|
-
<m3e-assist-chip>Assist chip</m3e-assist-chip>
|
|
69
|
-
<m3e-assist-chip>
|
|
70
|
-
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
71
|
-
Assist chip w/ leading icon
|
|
72
|
-
</m3e-assist-chip>
|
|
73
|
-
<m3e-assist-chip disabled>
|
|
74
|
-
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
75
|
-
Disabled assist Chip w/ leading icon
|
|
76
|
-
</m3e-assist-chip>
|
|
77
|
-
<m3e-assist-chip disabled-interactive>
|
|
78
|
-
<m3e-icon slot="icon" name="directions_car"></m3e-icon>
|
|
79
|
-
Disabled interactive assist Chip w/ leading icon
|
|
80
|
-
</m3e-assist-chip>
|
|
81
|
-
|
|
82
|
-
<br /><br />
|
|
83
|
-
<m3e-assist-chip variant="elevated">Elevated assist chip</m3e-assist-chip>
|
|
84
|
-
<m3e-assist-chip variant="elevated" disabled>Disabled elevated assist chip</m3e-assist-chip>
|
|
85
|
-
<m3e-assist-chip variant="elevated" disabled-interactive>
|
|
86
|
-
Disabled interactive elevated assist chip
|
|
87
|
-
</m3e-assist-chip>
|
|
88
|
-
<br /><br />
|
|
89
|
-
<m3e-chip-set role="group" aria-label="Suggested replies">
|
|
90
|
-
<m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>
|
|
91
|
-
<m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>
|
|
92
|
-
<m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>
|
|
93
|
-
<m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>
|
|
94
|
-
</m3e-chip-set>
|
|
95
|
-
<br /><br />
|
|
96
|
-
<m3e-suggestion-chip>Suggestion chip</m3e-suggestion-chip>
|
|
97
|
-
<m3e-suggestion-chip>
|
|
98
|
-
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
99
|
-
Suggestion chip w/ leading icon
|
|
100
|
-
</m3e-suggestion-chip>
|
|
101
|
-
<m3e-suggestion-chip disabled>
|
|
102
|
-
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
103
|
-
Disabled suggestion Chip w/ leading icon
|
|
104
|
-
</m3e-suggestion-chip>
|
|
105
|
-
<m3e-suggestion-chip disabled-interactive>
|
|
106
|
-
<m3e-icon slot="icon" name="face"></m3e-icon>
|
|
107
|
-
Disabled interactive suggestion Chip w/ leading icon
|
|
108
|
-
</m3e-suggestion-chip>
|
|
109
|
-
|
|
110
|
-
<br /><br />
|
|
111
|
-
<m3e-suggestion-chip variant="elevated">Elevated suggestion chip</m3e-suggestion-chip>
|
|
112
|
-
<m3e-suggestion-chip variant="elevated" disabled>Disabled elevated suggestion chip</m3e-suggestion-chip>
|
|
113
|
-
<m3e-suggestion-chip variant="elevated" disabled-interactive>
|
|
114
|
-
Disabled interactive elevated suggestion chip
|
|
115
|
-
</m3e-suggestion-chip>
|
|
116
|
-
<br /><br />
|
|
117
|
-
<m3e-filter-chip-set aria-label="Filter by topic">
|
|
118
|
-
<m3e-filter-chip><m3e-icon slot="icon" name="palette"></m3e-icon>Design</m3e-filter-chip>
|
|
119
|
-
<m3e-filter-chip><m3e-icon slot="icon" name="accessibility_new"></m3e-icon>Accessibility</m3e-filter-chip>
|
|
120
|
-
<m3e-filter-chip><m3e-icon slot="icon" name="motion_photos_on"></m3e-icon>Motion</m3e-filter-chip>
|
|
121
|
-
<m3e-filter-chip><m3e-icon slot="icon" name="description"></m3e-icon>Documentation</m3e-filter-chip>
|
|
122
|
-
</m3e-filter-chip-set>
|
|
123
|
-
<br /><br />
|
|
124
|
-
<m3e-filter-chip-set multi>
|
|
125
|
-
<m3e-filter-chip>Apples</m3e-filter-chip>
|
|
126
|
-
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
127
|
-
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
128
|
-
</m3e-filter-chip-set>
|
|
129
|
-
<br /><br />
|
|
130
|
-
<m3e-filter-chip-set disabled>
|
|
131
|
-
<m3e-filter-chip>Apples</m3e-filter-chip>
|
|
132
|
-
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
133
|
-
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
134
|
-
</m3e-filter-chip-set>
|
|
135
|
-
<br /><br />
|
|
136
|
-
<m3e-filter-chip-set>
|
|
137
|
-
<m3e-filter-chip disabled>Apples</m3e-filter-chip>
|
|
138
|
-
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
139
|
-
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
140
|
-
</m3e-filter-chip-set>
|
|
141
|
-
<br /><br />
|
|
142
|
-
<m3e-filter-chip-set>
|
|
143
|
-
<m3e-filter-chip disabled-interactive>Apples</m3e-filter-chip>
|
|
144
|
-
<m3e-filter-chip>Oranges</m3e-filter-chip>
|
|
145
|
-
<m3e-filter-chip>Bananas</m3e-filter-chip>
|
|
146
|
-
</m3e-filter-chip-set>
|
|
147
|
-
<br /><br />
|
|
148
|
-
<m3e-input-chip-set aria-label="Fruits">
|
|
149
|
-
<m3e-input-chip removable>Lemon</m3e-input-chip>
|
|
150
|
-
<m3e-input-chip disabled removable>Orange</m3e-input-chip>
|
|
151
|
-
<m3e-input-chip removable>Grape</m3e-input-chip>
|
|
152
|
-
</m3e-input-chip-set>
|
|
153
|
-
<br /><br />
|
|
154
|
-
<m3e-input-chip-set>
|
|
155
|
-
<m3e-input-chip><m3e-icon slot="avatar" name="face"></m3e-icon>Input chip w/ avatar</m3e-input-chip>
|
|
156
|
-
<m3e-input-chip disabled>
|
|
157
|
-
<m3e-icon slot="avatar" name="face"></m3e-icon>
|
|
158
|
-
Disabled input chip w/ avatar
|
|
159
|
-
</m3e-input-chip>
|
|
160
|
-
<m3e-input-chip disabled-interactive>
|
|
161
|
-
<m3e-icon slot="avatar" name="face"></m3e-icon>
|
|
162
|
-
Disabled interactive input chip w/ avatar
|
|
163
|
-
</m3e-input-chip>
|
|
164
|
-
</m3e-input-chip-set>
|
|
165
|
-
|
|
166
|
-
<br /><br />
|
|
167
|
-
<m3e-form-field>
|
|
168
|
-
<label slot="label" for="keywords">Keywords</label>
|
|
169
|
-
<m3e-input-chip-set aria-label="Enter keywords">
|
|
170
|
-
<input id="keywords" slot="input" placeholder="New keyword..." />
|
|
171
|
-
</m3e-input-chip-set>
|
|
172
|
-
</m3e-form-field>
|
|
173
|
-
<br /><br />
|
|
174
|
-
<m3e-form-field>
|
|
175
|
-
<label slot="label" for="keywords2">Keywords</label>
|
|
176
|
-
<m3e-input-chip-set disabled>
|
|
177
|
-
<m3e-input-chip>Chip</m3e-input-chip>
|
|
178
|
-
<input id="keywords2" slot="input" placeholder="New keyword..." />
|
|
179
|
-
</m3e-input-chip-set>
|
|
180
|
-
</m3e-form-field>
|
|
181
|
-
</m3e-theme>
|
|
182
|
-
</body>
|
|
183
|
-
</html>
|
package/eslint.config.mjs
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import eslint from "@eslint/js";
|
|
2
|
-
import tseslint from "typescript-eslint";
|
|
3
|
-
import { fileURLToPath } from "url";
|
|
4
|
-
import { dirname } from "path";
|
|
5
|
-
|
|
6
|
-
export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
|
|
7
|
-
languageOptions: {
|
|
8
|
-
parserOptions: {
|
|
9
|
-
project: true,
|
|
10
|
-
tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
});
|
package/rollup.config.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import resolve from "@rollup/plugin-node-resolve";
|
|
2
|
-
import terser from "@rollup/plugin-terser";
|
|
3
|
-
import typescript from "@rollup/plugin-typescript";
|
|
4
|
-
|
|
5
|
-
const banner = `/**
|
|
6
|
-
* @license MIT
|
|
7
|
-
* Copyright (c) 2025 matraic
|
|
8
|
-
* See LICENSE file in the project root for full license text.
|
|
9
|
-
*/`;
|
|
10
|
-
|
|
11
|
-
export default [
|
|
12
|
-
{
|
|
13
|
-
input: "src/index.ts",
|
|
14
|
-
output: [
|
|
15
|
-
{
|
|
16
|
-
file: "dist/index.js",
|
|
17
|
-
format: "esm",
|
|
18
|
-
sourcemap: true,
|
|
19
|
-
banner: banner,
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
file: "dist/index.min.js",
|
|
23
|
-
format: "esm",
|
|
24
|
-
sourcemap: true,
|
|
25
|
-
banner: banner,
|
|
26
|
-
plugins: [terser({ mangle: true })],
|
|
27
|
-
},
|
|
28
|
-
],
|
|
29
|
-
external: ["@m3e/core", "@m3e/core/a11y", "@m3e/icon-button", "@m3e/form-field", "lit"],
|
|
30
|
-
plugins: [resolve(), typescript()],
|
|
31
|
-
},
|
|
32
|
-
];
|
package/src/AssistChipElement.ts
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { nothing } from "lit";
|
|
2
|
-
import { customElement } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
AttachInternals,
|
|
6
|
-
Disabled,
|
|
7
|
-
DisabledInteractive,
|
|
8
|
-
Focusable,
|
|
9
|
-
FormSubmitter,
|
|
10
|
-
KeyboardClick,
|
|
11
|
-
LinkButton,
|
|
12
|
-
Role,
|
|
13
|
-
} from "@m3e/core";
|
|
14
|
-
|
|
15
|
-
import { M3eChipElement } from "./ChipElement";
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* @summary
|
|
19
|
-
* A chip users interact with to perform a smart or automated action that can span multiple applications.
|
|
20
|
-
*
|
|
21
|
-
* @description
|
|
22
|
-
* The `m3e-assist-chip` component presents a Material 3 assist chip, providing users with quick access to
|
|
23
|
-
* contextually relevant actions. It is designed for use cases like suggested actions, quick filters, or
|
|
24
|
-
* secondary operations, and supports accessibility, keyboard interaction, and expressive state styling
|
|
25
|
-
* in line with Material 3 guidelines. Appearance variants include `elevated` and `outlined`, enabling visual
|
|
26
|
-
* differentiation and contextual emphasis.
|
|
27
|
-
*
|
|
28
|
-
* @example
|
|
29
|
-
* The following example illustrates use of the `m3e-assist-chip`. In this example, multiple chips are nested inside
|
|
30
|
-
* a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role="group"` to convey
|
|
31
|
-
* to assistive technologies that the chips are part of a related set of element.
|
|
32
|
-
* ```html
|
|
33
|
-
* <m3e-chip-set role="group" aria-label="Quick actions">
|
|
34
|
-
* <m3e-assist-chip><m3e-icon slot="icon" name="edit"></m3e-icon>Edit</m3e-assist-chip>
|
|
35
|
-
* <m3e-assist-chip><m3e-icon slot="icon" name="delete"></m3e-icon>Delete</m3e-assist-chip>
|
|
36
|
-
* <m3e-assist-chip><m3e-icon slot="icon" name="content_copy"></m3e-icon>Copy</m3e-assist-chip>
|
|
37
|
-
* <m3e-assist-chip><m3e-icon slot="icon" name="share"></m3e-icon>Share</m3e-assist-chip>
|
|
38
|
-
* </m3e-chip-set>
|
|
39
|
-
* ```
|
|
40
|
-
*
|
|
41
|
-
* @tag m3e-assist-chip
|
|
42
|
-
*
|
|
43
|
-
* @slot - Renders the label of the chip.
|
|
44
|
-
* @slot icon - Renders an icon before the chip's label.
|
|
45
|
-
*
|
|
46
|
-
* @attr disabled - A value indicating whether the element is disabled.
|
|
47
|
-
* @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
|
|
48
|
-
* @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
|
|
49
|
-
* @attr href - The URL to which the link button points.
|
|
50
|
-
* @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.
|
|
51
|
-
* @attr rel - The relationship between the `target` of the link button and the document.
|
|
52
|
-
* @attr target - The target of the link button.
|
|
53
|
-
* @attr type - The type of the element.
|
|
54
|
-
* @attr value - A string representing the value of the chip.
|
|
55
|
-
* @attr variant - The appearance variant of the chip.
|
|
56
|
-
*
|
|
57
|
-
* @cssprop --m3e-chip-container-shape - Border radius of the chip container.
|
|
58
|
-
* @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.
|
|
59
|
-
* @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.
|
|
60
|
-
* @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.
|
|
61
|
-
* @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.
|
|
62
|
-
* @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.
|
|
63
|
-
* @cssprop --m3e-chip-label-text-color - Label text color in default state.
|
|
64
|
-
* @cssprop --m3e-chip-icon-color - Icon color in default state.
|
|
65
|
-
* @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.
|
|
66
|
-
* @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.
|
|
67
|
-
* @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.
|
|
68
|
-
* @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.
|
|
69
|
-
* @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.
|
|
70
|
-
* @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.
|
|
71
|
-
* @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.
|
|
72
|
-
* @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.
|
|
73
|
-
* @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.
|
|
74
|
-
* @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.
|
|
75
|
-
* @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.
|
|
76
|
-
* @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.
|
|
77
|
-
* @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.
|
|
78
|
-
* @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.
|
|
79
|
-
* @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.
|
|
80
|
-
* @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.
|
|
81
|
-
* @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
|
|
82
|
-
* @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
|
|
83
|
-
* @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
|
|
84
|
-
* @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
|
|
85
|
-
*/
|
|
86
|
-
@customElement("m3e-assist-chip")
|
|
87
|
-
export class M3eAssistChipElement extends FormSubmitter(
|
|
88
|
-
AttachInternals(
|
|
89
|
-
LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button")))))),
|
|
90
|
-
true
|
|
91
|
-
)
|
|
92
|
-
) {
|
|
93
|
-
/** @internal @inheritdoc */
|
|
94
|
-
protected override _renderTrailingIcon(): unknown {
|
|
95
|
-
return nothing;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
declare global {
|
|
100
|
-
interface HTMLElementTagNameMap {
|
|
101
|
-
"m3e-assist-chip": M3eAssistChipElement;
|
|
102
|
-
}
|
|
103
|
-
}
|