@justeattakeaway/pie-card 0.19.4 → 0.19.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.
@@ -31,6 +31,14 @@
31
31
  {
32
32
  "kind": "variable",
33
33
  "name": "paddingValues"
34
+ },
35
+ {
36
+ "kind": "variable",
37
+ "name": "defaultProps",
38
+ "type": {
39
+ "text": "DefaultProps"
40
+ },
41
+ "default": "{\n tag: 'button',\n variant: 'default',\n disabled: false,\n isDraggable: false,\n}"
34
42
  }
35
43
  ],
36
44
  "exports": [
@@ -57,6 +65,14 @@
57
65
  "name": "paddingValues",
58
66
  "module": "src/defs.js"
59
67
  }
68
+ },
69
+ {
70
+ "kind": "js",
71
+ "name": "defaultProps",
72
+ "declaration": {
73
+ "name": "defaultProps",
74
+ "module": "src/defs.js"
75
+ }
60
76
  }
61
77
  ]
62
78
  },
@@ -76,7 +92,6 @@
76
92
  "text": "CardProps['tag']"
77
93
  },
78
94
  "privacy": "public",
79
- "default": "'button'",
80
95
  "attribute": "tag"
81
96
  },
82
97
  {
@@ -86,7 +101,6 @@
86
101
  "text": "CardProps['variant']"
87
102
  },
88
103
  "privacy": "public",
89
- "default": "'default'",
90
104
  "attribute": "variant"
91
105
  },
92
106
  {
@@ -122,18 +136,14 @@
122
136
  {
123
137
  "kind": "field",
124
138
  "name": "disabled",
125
- "type": {
126
- "text": "boolean"
127
- },
128
139
  "privacy": "public",
129
- "default": "false",
130
140
  "attribute": "disabled"
131
141
  },
132
142
  {
133
143
  "kind": "field",
134
144
  "name": "aria",
135
145
  "type": {
136
- "text": "CardProps['aria']"
146
+ "text": "CardProps['aria'] | undefined"
137
147
  },
138
148
  "privacy": "public",
139
149
  "attribute": "aria"
@@ -141,11 +151,7 @@
141
151
  {
142
152
  "kind": "field",
143
153
  "name": "isDraggable",
144
- "type": {
145
- "text": "boolean"
146
- },
147
154
  "privacy": "public",
148
- "default": "false",
149
155
  "attribute": "isDraggable"
150
156
  },
151
157
  {
@@ -186,7 +192,6 @@
186
192
  "type": {
187
193
  "text": "CardProps['tag']"
188
194
  },
189
- "default": "'button'",
190
195
  "fieldName": "tag"
191
196
  },
192
197
  {
@@ -194,7 +199,6 @@
194
199
  "type": {
195
200
  "text": "CardProps['variant']"
196
201
  },
197
- "default": "'default'",
198
202
  "fieldName": "variant"
199
203
  },
200
204
  {
@@ -220,25 +224,17 @@
220
224
  },
221
225
  {
222
226
  "name": "disabled",
223
- "type": {
224
- "text": "boolean"
225
- },
226
- "default": "false",
227
227
  "fieldName": "disabled"
228
228
  },
229
229
  {
230
230
  "name": "aria",
231
231
  "type": {
232
- "text": "CardProps['aria']"
232
+ "text": "CardProps['aria'] | undefined"
233
233
  },
234
234
  "fieldName": "aria"
235
235
  },
236
236
  {
237
237
  "name": "isDraggable",
238
- "type": {
239
- "text": "boolean"
240
- },
241
- "default": "false",
242
238
  "fieldName": "isDraggable"
243
239
  },
244
240
  {
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';
@@ -47,6 +48,10 @@ export declare interface CardProps {
47
48
  padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
48
49
  }
49
50
 
51
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
52
+
53
+ export declare const defaultProps: DefaultProps;
54
+
50
55
  declare type PaddingValue = typeof spacingTokens[number];
51
56
 
52
57
  export declare const paddingValues: string[];
@@ -61,7 +66,7 @@ export declare class PieCard extends LitElement implements CardProps {
61
66
  target?: string;
62
67
  rel?: string;
63
68
  disabled: boolean;
64
- aria: CardProps['aria'];
69
+ aria?: CardProps['aria'];
65
70
  isDraggable: boolean;
66
71
  padding?: CardProps['padding'];
67
72
  /**
package/dist/index.js CHANGED
@@ -1,18 +1,23 @@
1
- import { unsafeCSS as f, LitElement as p, html as g, nothing as s } from "lit";
2
- import { ifDefined as h } from "lit/directives/if-defined.js";
1
+ import { unsafeCSS as p, LitElement as h, html as f, nothing as v } from "lit";
2
+ import { ifDefined as m } from "lit/directives/if-defined.js";
3
3
  import { property as d } from "lit/decorators.js";
4
- import { validPropertyValues as b, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
5
- const y = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
6
- `, $ = ["default", "outline", "inverse", "outline-inverse"], S = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], k = u.flatMap((i) => [i, ...u.map((o) => `${i},${o}`)]);
7
- var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, o, a, e) => {
8
- for (var r = e > 1 ? void 0 : e ? C(o, a) : o, l = i.length - 1, n; l >= 0; l--)
9
- (n = i[l]) && (r = (e ? n(o, a, r) : n(r)) || r);
10
- return e && r && x(o, a, r), r;
4
+ import { validPropertyValues as g, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
5
+ const $ = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
6
+ `, S = ["default", "outline", "inverse", "outline-inverse"], k = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], x = u.flatMap((i) => [i, ...u.map((e) => `${i},${e}`)]), l = {
7
+ tag: "button",
8
+ variant: "default",
9
+ disabled: !1,
10
+ isDraggable: !1
11
11
  };
12
- const v = "pie-card";
13
- class t extends p {
12
+ var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, e, a, o) => {
13
+ for (var r = o > 1 ? void 0 : o ? C(e, a) : e, n = i.length - 1, s; n >= 0; n--)
14
+ (s = i[n]) && (r = (o ? s(e, a, r) : s(r)) || r);
15
+ return o && r && D(e, a, r), r;
16
+ };
17
+ const b = "pie-card";
18
+ class t extends h {
14
19
  constructor() {
15
- super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
20
+ super(...arguments), this.tag = l.tag, this.variant = l.variant, this.disabled = l.disabled, this.isDraggable = l.isDraggable;
16
21
  }
17
22
  /**
18
23
  * Renders the card as an anchor element.
@@ -21,8 +26,8 @@ class t extends p {
21
26
  */
22
27
  renderAnchor() {
23
28
  var a;
24
- const o = this.generatePaddingCSS();
25
- return g`
29
+ const e = this.generatePaddingCSS();
30
+ return f`
26
31
  <a
27
32
  class="c-card"
28
33
  data-test-id="pie-card"
@@ -31,12 +36,12 @@ class t extends p {
31
36
  variant=${this.variant || "default"}
32
37
  ?disabled=${this.disabled}
33
38
  href=${this.href || ""}
34
- target=${this.target || s}
35
- rel=${this.rel || s}
39
+ target=${this.target || v}
40
+ rel=${this.rel || v}
36
41
  role="link"
37
- aria-label=${((a = this.aria) == null ? void 0 : a.label) || s}
42
+ aria-label=${((a = this.aria) == null ? void 0 : a.label) || v}
38
43
  aria-disabled=${this.disabled ? "true" : "false"}
39
- style=${h(o)}>
44
+ style=${m(e)}>
40
45
  <slot></slot>
41
46
  </div>
42
47
  </a>`;
@@ -52,47 +57,47 @@ class t extends p {
52
57
  * @private
53
58
  */
54
59
  generatePaddingCSS() {
55
- const { padding: o } = this;
60
+ const { padding: e } = this;
56
61
  let a = "";
57
- if (!o)
62
+ if (!e)
58
63
  return "";
59
- const e = o.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
60
- return e.length > 0 && e.length <= 2 && (a += `var(--dt-spacing-${e[0]})`, e.length > 1 && (a += ` var(--dt-spacing-${e[1]})`)), a ? `padding: ${a}` : "";
64
+ const o = e.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
65
+ return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
61
66
  }
62
67
  render() {
63
68
  const {
64
- variant: o,
69
+ variant: e,
65
70
  disabled: a,
66
- tag: e,
71
+ tag: o,
67
72
  aria: r,
68
- isDraggable: l
69
- } = this, n = this.generatePaddingCSS();
70
- return e === "a" ? this.renderAnchor() : g`
73
+ isDraggable: n
74
+ } = this, s = this.generatePaddingCSS();
75
+ return o === "a" ? this.renderAnchor() : f`
71
76
  <div
72
77
  class="c-card"
73
78
  data-test-id="pie-card"
74
- tag=${e || "button"}
75
- ?isDraggable="${l}"
76
- variant=${o || "default"}
79
+ tag=${o || "button"}
80
+ ?isDraggable="${n}"
81
+ variant=${e || "default"}
77
82
  ?disabled=${a}
78
83
  role="button"
79
84
  tabindex="0"
80
- aria-label=${(r == null ? void 0 : r.label) || s}
85
+ aria-label=${(r == null ? void 0 : r.label) || v}
81
86
  aria-disabled=${a ? "true" : "false"}
82
- style=${n || ""}>
87
+ style=${s || ""}>
83
88
  <slot></slot>
84
89
  </div>
85
90
  </div>`;
86
91
  }
87
92
  }
88
- t.styles = f(y);
93
+ t.styles = p($);
89
94
  c([
90
95
  d(),
91
- b(v, S, "button")
96
+ g(b, k, l.tag)
92
97
  ], t.prototype, "tag", 2);
93
98
  c([
94
99
  d(),
95
- b(v, $, "default")
100
+ g(b, S, l.variant)
96
101
  ], t.prototype, "variant", 2);
97
102
  c([
98
103
  d({ type: String, reflect: !0 })
@@ -114,12 +119,13 @@ c([
114
119
  ], t.prototype, "isDraggable", 2);
115
120
  c([
116
121
  d({ type: String }),
117
- b(v, k, void 0)
122
+ g(b, x, void 0)
118
123
  ], t.prototype, "padding", 2);
119
- m(v, t);
124
+ y(b, t);
120
125
  export {
121
126
  t as PieCard,
122
- k as paddingValues,
123
- S as tags,
124
- $ as variants
127
+ l as defaultProps,
128
+ x as paddingValues,
129
+ k as tags,
130
+ S as variants
125
131
  };
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';
@@ -48,6 +49,10 @@ export declare interface CardProps {
48
49
  padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
49
50
  }
50
51
 
52
+ export declare type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
53
+
54
+ export declare const defaultProps: DefaultProps;
55
+
51
56
  declare type PaddingValue = typeof spacingTokens[number];
52
57
 
53
58
  export declare const paddingValues: string[];
@@ -64,7 +69,7 @@ declare class PieCard_2 extends LitElement implements CardProps {
64
69
  target?: string;
65
70
  rel?: string;
66
71
  disabled: boolean;
67
- aria: CardProps['aria'];
72
+ aria?: CardProps['aria'];
68
73
  isDraggable: boolean;
69
74
  padding?: CardProps['padding'];
70
75
  /**
package/dist/react.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as a from "react";
2
2
  import { createComponent as e } from "@lit/react";
3
3
  import { PieCard as r } from "./index.js";
4
- import { paddingValues as P, tags as f, variants as l } from "./index.js";
4
+ import { defaultProps as P, paddingValues as f, tags as l, variants as g } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/directives/if-defined.js";
7
7
  import "lit/decorators.js";
@@ -15,7 +15,8 @@ const t = e({
15
15
  }), n = t;
16
16
  export {
17
17
  n as PieCard,
18
- P as paddingValues,
19
- f as tags,
20
- l as variants
18
+ P as defaultProps,
19
+ f as paddingValues,
20
+ l as tags,
21
+ g as variants
21
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.19.4",
3
+ "version": "0.19.5",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -41,7 +41,7 @@
41
41
  "cem-plugin-module-file-extensions": "0.0.5"
42
42
  },
43
43
  "dependencies": {
44
- "@justeattakeaway/pie-webc-core": "0.22.0"
44
+ "@justeattakeaway/pie-webc-core": "0.23.0"
45
45
  },
46
46
  "volta": {
47
47
  "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', 'inverse', 'outline-inverse'] as const;
2
4
  export const tags = ['a', 'button'] as const;
3
5
 
@@ -58,3 +60,12 @@ export interface CardProps {
58
60
  */
59
61
  padding?: PaddingValue | `${PaddingValue},${PaddingValue}`;
60
62
  }
63
+
64
+ export type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
65
+
66
+ export const defaultProps: DefaultProps = {
67
+ tag: 'button',
68
+ variant: 'default',
69
+ disabled: false,
70
+ isDraggable: false,
71
+ };
package/src/index.ts CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  variants,
10
10
  tags,
11
11
  CardProps,
12
+ defaultProps,
12
13
  paddingValues,
13
14
  } from './defs';
14
15
 
@@ -22,12 +23,12 @@ const componentSelector = 'pie-card';
22
23
  */
23
24
  export class PieCard extends LitElement implements CardProps {
24
25
  @property()
25
- @validPropertyValues(componentSelector, tags, 'button')
26
- public tag: CardProps['tag'] = 'button';
26
+ @validPropertyValues(componentSelector, tags, defaultProps.tag)
27
+ public tag: CardProps['tag'] = defaultProps.tag;
27
28
 
28
29
  @property()
29
- @validPropertyValues(componentSelector, variants, 'default')
30
- public variant: CardProps['variant'] = 'default';
30
+ @validPropertyValues(componentSelector, variants, defaultProps.variant)
31
+ public variant: CardProps['variant'] = defaultProps.variant;
31
32
 
32
33
  @property({ type: String, reflect: true })
33
34
  public href?: string;
@@ -39,13 +40,13 @@ export class PieCard extends LitElement implements CardProps {
39
40
  public rel?: string;
40
41
 
41
42
  @property({ type: Boolean })
42
- public disabled = false;
43
+ public disabled = defaultProps.disabled;
43
44
 
44
45
  @property({ type: Object })
45
- public aria: CardProps['aria'];
46
+ public aria?: CardProps['aria'];
46
47
 
47
48
  @property({ type: Boolean })
48
- public isDraggable = false;
49
+ public isDraggable = defaultProps.isDraggable;
49
50
 
50
51
  @property({ type: String })
51
52
  @validPropertyValues(componentSelector, paddingValues, undefined)