@justeattakeaway/pie-chip 0.6.2 → 0.6.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.
Files changed (8) hide show
  1. package/custom-elements.json +16 -34
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +32 -25
  4. package/dist/react.d.ts +5 -0
  5. package/dist/react.js +3 -2
  6. package/package.json +4 -4
  7. package/src/defs.ts +12 -0
  8. package/src/index.ts +9 -7
package/custom-elements.json CHANGED
@@ -28,6 +28,14 @@
28
28
  },
29
29
  "default": "'pie-chip-close'",
30
30
  "description": "Event name for when the chip is closed."
31
+ },
32
+ {
33
+ "kind": "variable",
34
+ "name": "defaultProps",
35
+ "type": {
36
+ "text": "DefaultProps"
37
+ },
38
+ "default": "{\n variant: 'default',\n disabled: false,\n isSelected: false,\n isLoading: false,\n isDismissible: false,\n}"
31
39
  }
32
40
  ],
33
41
  "exports": [
@@ -46,6 +54,14 @@
46
54
  "name": "ON_CHIP_CLOSE_EVENT",
47
55
  "module": "src/defs.js"
48
56
  }
57
+ },
58
+ {
59
+ "kind": "js",
60
+ "name": "defaultProps",
61
+ "declaration": {
62
+ "name": "defaultProps",
63
+ "module": "src/defs.js"
64
+ }
49
65
  }
50
66
  ]
51
67
  },
@@ -75,47 +91,30 @@
75
91
  "text": "ChipProps['variant']"
76
92
  },
77
93
  "privacy": "public",
78
- "default": "'default'",
79
94
  "attribute": "variant"
80
95
  },
81
96
  {
82
97
  "kind": "field",
83
98
  "name": "disabled",
84
- "type": {
85
- "text": "boolean"
86
- },
87
99
  "privacy": "public",
88
- "default": "false",
89
100
  "attribute": "disabled"
90
101
  },
91
102
  {
92
103
  "kind": "field",
93
104
  "name": "isSelected",
94
- "type": {
95
- "text": "boolean"
96
- },
97
105
  "privacy": "public",
98
- "default": "false",
99
106
  "attribute": "isSelected"
100
107
  },
101
108
  {
102
109
  "kind": "field",
103
110
  "name": "isLoading",
104
- "type": {
105
- "text": "boolean"
106
- },
107
111
  "privacy": "public",
108
- "default": "false",
109
112
  "attribute": "isLoading"
110
113
  },
111
114
  {
112
115
  "kind": "field",
113
116
  "name": "isDismissible",
114
- "type": {
115
- "text": "boolean"
116
- },
117
117
  "privacy": "public",
118
- "default": "false",
119
118
  "attribute": "isDismissible"
120
119
  },
121
120
  {
@@ -176,39 +175,22 @@
176
175
  "type": {
177
176
  "text": "ChipProps['variant']"
178
177
  },
179
- "default": "'default'",
180
178
  "fieldName": "variant"
181
179
  },
182
180
  {
183
181
  "name": "disabled",
184
- "type": {
185
- "text": "boolean"
186
- },
187
- "default": "false",
188
182
  "fieldName": "disabled"
189
183
  },
190
184
  {
191
185
  "name": "isSelected",
192
- "type": {
193
- "text": "boolean"
194
- },
195
- "default": "false",
196
186
  "fieldName": "isSelected"
197
187
  },
198
188
  {
199
189
  "name": "isLoading",
200
- "type": {
201
- "text": "boolean"
202
- },
203
- "default": "false",
204
190
  "fieldName": "isLoading"
205
191
  },
206
192
  {
207
193
  "name": "isDismissible",
208
- "type": {
209
- "text": "boolean"
210
- },
211
- "default": "false",
212
194
  "fieldName": "isDismissible"
213
195
  },
214
196
  {
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { LitElement } from 'lit';
3
4
  import type { TemplateResult } from 'lit';
@@ -35,6 +36,10 @@ export declare interface ChipProps {
35
36
  isDismissible?: boolean;
36
37
  }
37
38
 
39
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<ChipProps, 'variant' | 'disabled' | 'isSelected' | 'isLoading' | 'isDismissible'>;
40
+
41
+ export declare const defaultProps: DefaultProps;
42
+
38
43
  /**
39
44
  * Event name for when the chip is closed.
40
45
  *
package/dist/index.js CHANGED
@@ -1,20 +1,26 @@
1
- import { unsafeCSS as b, LitElement as g, html as d, nothing as p } from "lit";
1
+ import { unsafeCSS as g, LitElement as m, html as p, nothing as v } from "lit";
2
2
  import { property as n } from "lit/decorators.js";
3
- import { ifDefined as v } from "lit/directives/if-defined.js";
4
- import { validPropertyValues as m, defineCustomElement as f, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
3
+ import { ifDefined as h } from "lit/directives/if-defined.js";
4
+ import { validPropertyValues as f, defineCustomElement as u, dispatchCustomEvent as y } from "@justeattakeaway/pie-webc-core";
5
5
  import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
6
6
  import "@justeattakeaway/pie-spinner";
7
- const y = `*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--icon-display-override: block;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not([disabled]),.c-chip[isLoading]:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.c-chip[variant=outline]:not([disabled],[isSelected],[isLoading]){--chip-border-color: var(--dt-color-border-strong)}.c-chip[variant=outline],.c-chip[variant=ghost]{--chip-bg-color: transparent}.c-chip[variant=outline]:hover:not([disabled]),.c-chip[variant=ghost]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip[variant=outline]:active:not([disabled]),.c-chip[variant=outline][isLoading]:not([disabled]),.c-chip[variant=ghost]:active:not([disabled]),.c-chip[variant=ghost][isLoading]:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip[isSelected]{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip[isSelected]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip[isSelected]:active:not([disabled]),.c-chip[isSelected][isLoading]:not([disabled]){--active-modifier: var(--dt-color-active-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.c-chip[isDismissible][isSelected]{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip[isDismissible][isSelected] .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip[isLoading]>*:not(.c-chip-spinner){visibility:hidden}.c-chip[isLoading] .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
8
- `, S = ["default", "outline", "ghost"], k = "pie-chip-close";
9
- var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (s, i, t, r) => {
10
- for (var e = r > 1 ? void 0 : r ? w(i, t) : i, c = s.length - 1, a; c >= 0; c--)
11
- (a = s[c]) && (e = (r ? a(i, t, e) : a(e)) || e);
12
- return r && e && x(i, t, e), e;
7
+ const S = `*,*:after,*:before{box-sizing:inherit}.c-chip{--chip-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--icon-display-override: block;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--chip-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:1px solid;border-color:var(--chip-border-color);cursor:pointer;min-width:var(--chip-min-width);font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not([disabled]),.c-chip[isLoading]:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--chip-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.c-chip[variant=outline]:not([disabled],[isSelected],[isLoading]){--chip-border-color: var(--dt-color-border-strong)}.c-chip[variant=outline],.c-chip[variant=ghost]{--chip-bg-color: transparent}.c-chip[variant=outline]:hover:not([disabled]),.c-chip[variant=ghost]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-chip[variant=outline]:active:not([disabled]),.c-chip[variant=outline][isLoading]:not([disabled]),.c-chip[variant=ghost]:active:not([disabled]),.c-chip[variant=ghost][isLoading]:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--chip-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-chip[isSelected]{--chip-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary)}.c-chip[isSelected]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip[isSelected]:active:not([disabled]),.c-chip[isSelected][isLoading]:not([disabled]){--active-modifier: var(--dt-color-active-02);--chip-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.c-chip[isDismissible][isSelected]{padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible)}.c-chip[isDismissible][isSelected] .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:pointer;padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip[isLoading]>*:not(.c-chip-spinner){visibility:hidden}.c-chip[isLoading] .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip[disabled]{--chip-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);cursor:not-allowed}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
8
+ `, k = ["default", "outline", "ghost"], x = "pie-chip-close", s = {
9
+ variant: "default",
10
+ disabled: !1,
11
+ isSelected: !1,
12
+ isLoading: !1,
13
+ isDismissible: !1
13
14
  };
14
- const h = "pie-chip";
15
- class o extends g {
15
+ var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (d, i, t, r) => {
16
+ for (var e = r > 1 ? void 0 : r ? L(i, t) : i, c = d.length - 1, a; c >= 0; c--)
17
+ (a = d[c]) && (e = (r ? a(i, t, e) : a(e)) || e);
18
+ return r && e && w(i, t, e), e;
19
+ };
20
+ const b = "pie-chip";
21
+ class o extends m {
16
22
  constructor() {
17
- super(...arguments), this.variant = "default", this.disabled = !1, this.isSelected = !1, this.isLoading = !1, this.isDismissible = !1;
23
+ super(...arguments), this.variant = s.variant, this.disabled = s.disabled, this.isSelected = s.isSelected, this.isLoading = s.isLoading, this.isDismissible = s.isDismissible;
18
24
  }
19
25
  /**
20
26
  * Template for the loading state
@@ -23,7 +29,7 @@ class o extends g {
23
29
  */
24
30
  renderSpinner() {
25
31
  const { isSelected: i } = this;
26
- return d`
32
+ return p`
27
33
  <pie-spinner
28
34
  class="c-chip-spinner"
29
35
  size="small"
@@ -36,7 +42,7 @@ class o extends g {
36
42
  * @private
37
43
  */
38
44
  _handleCloseButtonClick() {
39
- u(this, k);
45
+ y(this, x);
40
46
  }
41
47
  /**
42
48
  * Template for the dismissible state
@@ -45,11 +51,11 @@ class o extends g {
45
51
  */
46
52
  renderCloseButton() {
47
53
  var i;
48
- return d`
54
+ return p`
49
55
  <button
50
56
  @click="${this._handleCloseButtonClick}"
51
57
  ?disabled=${this.disabled}
52
- aria-label="${v((i = this.aria) == null ? void 0 : i.close)}"
58
+ aria-label="${h((i = this.aria) == null ? void 0 : i.close)}"
53
59
  class="c-chip-closeBtn"
54
60
  data-test-id="chip-close-button">
55
61
  <icon-close-circle-filled size="m"></icon-close-circle-filled>
@@ -64,12 +70,12 @@ class o extends g {
64
70
  isLoading: e,
65
71
  isDismissible: c
66
72
  } = this;
67
- return d`
73
+ return p`
68
74
  <div
69
75
  aria-atomic="true"
70
76
  aria-busy="${e}"
71
77
  aria-current="${r}"
72
- aria-label="${v((a = this.aria) == null ? void 0 : a.label)}"
78
+ aria-label="${h((a = this.aria) == null ? void 0 : a.label)}"
73
79
  aria-live="polite"
74
80
  class="c-chip"
75
81
  data-test-id="pie-chip"
@@ -81,16 +87,16 @@ class o extends g {
81
87
  ?isLoading="${e}"
82
88
  ?isDismissible="${c}">
83
89
  <slot name="icon"></slot>
84
- ${e ? this.renderSpinner() : p}
90
+ ${e ? this.renderSpinner() : v}
85
91
  <slot></slot>
86
- ${c && r ? this.renderCloseButton() : p}
92
+ ${c && r ? this.renderCloseButton() : v}
87
93
  </div>`;
88
94
  }
89
95
  }
90
- o.styles = b(y);
96
+ o.styles = g(S);
91
97
  l([
92
98
  n(),
93
- m(h, S, "primary")
99
+ f(b, k, s.variant)
94
100
  ], o.prototype, "variant", 2);
95
101
  l([
96
102
  n({ type: Boolean })
@@ -107,9 +113,10 @@ l([
107
113
  l([
108
114
  n({ type: Object })
109
115
  ], o.prototype, "aria", 2);
110
- f(h, o);
116
+ u(b, o);
111
117
  export {
112
- k as ON_CHIP_CLOSE_EVENT,
118
+ x as ON_CHIP_CLOSE_EVENT,
113
119
  o as PieChip,
114
- S as variants
120
+ s as defaultProps,
121
+ k as variants
115
122
  };
package/dist/react.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { LitElement } from 'lit';
3
4
  import * as React_2 from 'react';
@@ -36,6 +37,10 @@ export declare interface ChipProps {
36
37
  isDismissible?: boolean;
37
38
  }
38
39
 
40
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<ChipProps, 'variant' | 'disabled' | 'isSelected' | 'isLoading' | 'isDismissible'>;
41
+
42
+ export declare const defaultProps: DefaultProps;
43
+
39
44
  /**
40
45
  * Event name for when the chip is closed.
41
46
  *
package/dist/react.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i from "react";
2
2
  import { createComponent as e } from "@lit/react";
3
3
  import { PieChip as p } from "./index.js";
4
- import { ON_CHIP_CLOSE_EVENT as f, variants as N } from "./index.js";
4
+ import { ON_CHIP_CLOSE_EVENT as f, defaultProps as N, variants as E } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
7
  import "lit/directives/if-defined.js";
@@ -21,5 +21,6 @@ const o = e({
21
21
  export {
22
22
  f as ON_CHIP_CLOSE_EVENT,
23
23
  n as PieChip,
24
- N as variants
24
+ N as defaultProps,
25
+ E as variants
25
26
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-chip",
3
3
  "description": "PIE Design System Chip built using Web Components",
4
- "version": "0.6.2",
4
+ "version": "0.6.3",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -40,9 +40,9 @@
40
40
  "cem-plugin-module-file-extensions": "0.0.5"
41
41
  },
42
42
  "dependencies": {
43
- "@justeattakeaway/pie-icons-webc": "0.23.1",
44
- "@justeattakeaway/pie-spinner": "0.6.4",
45
- "@justeattakeaway/pie-webc-core": "0.22.0"
43
+ "@justeattakeaway/pie-icons-webc": "0.24.0",
44
+ "@justeattakeaway/pie-spinner": "0.6.5",
45
+ "@justeattakeaway/pie-webc-core": "0.23.0"
46
46
  },
47
47
  "volta": {
48
48
  "extends": "../../../package.json"
package/src/defs.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
2
+
1
3
  export const variants = ['default', 'outline', 'ghost'] as const;
2
4
 
3
5
  export type AriaProps = {
@@ -40,3 +42,13 @@ export interface ChipProps {
40
42
  */
41
43
 
42
44
  export const ON_CHIP_CLOSE_EVENT = 'pie-chip-close';
45
+
46
+ export type DefaultProps = ComponentDefaultPropsGeneric<ChipProps, 'variant' | 'disabled' | 'isSelected' | 'isLoading' | 'isDismissible'>;
47
+
48
+ export const defaultProps: DefaultProps = {
49
+ variant: 'default',
50
+ disabled: false,
51
+ isSelected: false,
52
+ isLoading: false,
53
+ isDismissible: false,
54
+ };
package/src/index.ts CHANGED
@@ -8,7 +8,9 @@ import {
8
8
  validPropertyValues, defineCustomElement, dispatchCustomEvent,
9
9
  } from '@justeattakeaway/pie-webc-core';
10
10
  import styles from './chip.scss?inline';
11
- import { ChipProps, variants, ON_CHIP_CLOSE_EVENT } from './defs';
11
+ import {
12
+ ChipProps, variants, ON_CHIP_CLOSE_EVENT, defaultProps,
13
+ } from './defs';
12
14
  import '@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js';
13
15
  import '@justeattakeaway/pie-spinner';
14
16
 
@@ -25,20 +27,20 @@ const componentSelector = 'pie-chip';
25
27
  */
26
28
  export class PieChip extends LitElement implements ChipProps {
27
29
  @property()
28
- @validPropertyValues(componentSelector, variants, 'primary')
29
- public variant: ChipProps['variant'] = 'default';
30
+ @validPropertyValues(componentSelector, variants, defaultProps.variant)
31
+ public variant: ChipProps['variant'] = defaultProps.variant;
30
32
 
31
33
  @property({ type: Boolean })
32
- public disabled = false;
34
+ public disabled = defaultProps.disabled;
33
35
 
34
36
  @property({ type: Boolean })
35
- public isSelected = false;
37
+ public isSelected = defaultProps.isSelected;
36
38
 
37
39
  @property({ type: Boolean })
38
- public isLoading = false;
40
+ public isLoading = defaultProps.isLoading;
39
41
 
40
42
  @property({ type: Boolean })
41
- public isDismissible = false;
43
+ public isDismissible = defaultProps.isDismissible;
42
44
 
43
45
  @property({ type: Object })
44
46
  public aria: ChipProps['aria'];