@vonage/vwc-button 2.24.1 → 2.25.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/package.json +9 -9
- package/vwc-button.css.js +1 -1
- package/vwc-button.css.js.map +1 -1
- package/vwc-button.d.ts +1 -0
- package/vwc-button.js +6 -1
- package/vwc-button.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-button",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.25.3",
|
|
4
4
|
"description": "button component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/button#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@material/mwc-button": "^0.22.1",
|
|
30
|
-
"@vonage/vvd-core": "2.
|
|
31
|
-
"@vonage/vvd-foundation": "2.
|
|
32
|
-
"@vonage/vvd-style-coupling": "2.
|
|
33
|
-
"@vonage/vwc-icon": "2.
|
|
30
|
+
"@vonage/vvd-core": "2.25.3",
|
|
31
|
+
"@vonage/vvd-foundation": "2.25.3",
|
|
32
|
+
"@vonage/vvd-style-coupling": "2.25.3",
|
|
33
|
+
"@vonage/vwc-icon": "2.25.3",
|
|
34
34
|
"lit-element": "^2.4.0",
|
|
35
35
|
"tslib": "^2.3.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@vonage/vvd-design-tokens": "2.
|
|
39
|
-
"@vonage/vvd-typography": "2.
|
|
40
|
-
"@vonage/vvd-umbrella": "2.
|
|
38
|
+
"@vonage/vvd-design-tokens": "2.25.3",
|
|
39
|
+
"@vonage/vvd-typography": "2.25.3",
|
|
40
|
+
"@vonage/vvd-umbrella": "2.25.3",
|
|
41
41
|
"typescript": "^4.3.2"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "31c06c0afb665c0139f0f9f677b7489891267257"
|
|
44
44
|
}
|
package/vwc-button.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:initial;display:flex}.mdc-button>.trailing-icon vwc-icon
|
|
2
|
+
export const style = css `:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation-diverse);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation-diverse)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:initial;display:flex}.mdc-button>.trailing-icon vwc-icon,.mdc-button>.leading-icon vwc-icon{--gutter: 8px}:host([enlarged]) .mdc-button>.trailing-icon vwc-icon,:host([enlarged]) .mdc-button>.leading-icon vwc-icon{--gutter: 10px}:host([stacked]) .mdc-button>.trailing-icon vwc-icon,:host([stacked]) .mdc-button>.leading-icon vwc-icon{--gutter: 0}.mdc-button>.trailing-icon vwc-icon{margin-inline-start:var(--gutter)}.mdc-button>.leading-icon vwc-icon{margin-inline-end:var(--gutter)}:host([dense]) .mdc-button{--button-block-size: 32px}:host([dense]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 16px)}:host([enlarged]) .mdc-button{--button-block-size: 48px}:host([enlarged]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 24px)}:host([raised]) .mdc-button,:host([unelevated]) .mdc-button{--mdc-ripple-color: var(--vvd-button-on-color, var(--layout-color-text))}:host([unelevated]) .mdc-button{--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-fill));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-text))}.mdc-button:not(.layout-filled){--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-text));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-fill))}:host([dense]) .mdc-button{--mdc-button-horizontal-padding: 12px}:host([enlarged]) .mdc-button{--mdc-button-horizontal-padding: 20px}.mdc-button.button-stacked{--button-block-size: 68px;flex-direction:column;line-height:normal}:host([enlarged]) .mdc-button.button-stacked{--button-block-size: 80px}:host([dense]) .mdc-button.button-stacked{--button-block-size: 56px}.mdc-button.button-stacked>.leading-icon vwc-icon,.mdc-button.button-stacked .leading-icon ::slotted(*){margin-block-end:.5rem}.mdc-button.button-stacked>.trailing-icon vwc-icon,.mdc-button.button-stacked .trailing-icon ::slotted(*){margin-block-start:.5rem}.mdc-button.button-stacked .trailing-icon ::slotted(*),.mdc-button.button-stacked .leading-icon ::slotted(*){margin-inline-end:0;margin-inline-start:0}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-button-shape:6px}:host([shape=pill i]){--vvd-button-shape:24px}`;
|
|
3
3
|
//# sourceMappingURL=vwc-button.css.js.map
|
package/vwc-button.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-button.css.js","sourceRoot":"","sources":["src/vwc-button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-button.css.js","sourceRoot":"","sources":["src/vwc-button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,o3OAAo3O,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 100%;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([dense]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}:host([enlarged]){--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 600;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-button-font-family: var(--vvd-typography-font-family);--mdc-typography-button-font-size: var(--vvd-typography-font-size);--mdc-typography-button-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-button-font-weight: var(--vvd-typography-font-weight);--mdc-typography-button-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-button-line-height: var(--vvd-typography-line-height);--mdc-typography-button-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-button-text-transform: var(--vvd-typography-text-transform)}.mdc-button.layout-filled{--layout-color-fill:var(--connotation);--layout-color-text:var(--on-connotation)}.mdc-button.layout-outlined{--layout-color-fill:transparent;--layout-color-outline:var(--connotation-diverse);--layout-color-text:var(--connotation-diverse)}.mdc-button.layout-ghost,.mdc-button:not(.layout-filled):not(.layout-outlined){--layout-color-fill:transparent;--layout-color-text:var(--connotation-diverse)}.mdc-button{--mdc-button-disabled-ink-color: var(--vvd-formfield-disabled-ink);--mdc-button-disabled-fill-color: var(--vvd-color-neutral-30);--mdc-button-disabled-outline-color: var(--vvd-formfield-disabled-ink);--mdc-button-outline-color: var(--layout-color-outline, var(--mdc-theme-primary));--mdc-button-horizontal-padding: 16px;--button-block-size: 40px;--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);height:var(--vvd-button-block-size, var(--button-block-size));border-radius:var(--vvd-button-shape);font-stretch:var(--mdc-typography-button-font-stretch);letter-spacing:normal}.mdc-button.connotation-primary,.mdc-button:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-info):not(.connotation-announcement){--connotation:var(--vvd-color-primary);--on-connotation:var(--vvd-color-on-primary);--connotation-diverse:var(--vvd-color-primary)}.mdc-button.connotation-cta{--connotation:var(--vvd-color-cta);--on-connotation:var(--vvd-color-on-cta);--connotation-diverse:var(--vvd-color-cta-70)}.mdc-button.connotation-success{--connotation:var(--vvd-color-success);--on-connotation:var(--vvd-color-on-success);--connotation-diverse:var(--vvd-color-success-70)}.mdc-button.connotation-alert{--connotation:var(--vvd-color-alert);--on-connotation:var(--vvd-color-on-alert);--connotation-diverse:var(--vvd-color-alert-70)}.mdc-button.connotation-info{--connotation:var(--vvd-color-info);--on-connotation:var(--vvd-color-on-info);--connotation-diverse:var(--vvd-color-info-70)}.mdc-button.connotation-announcement{--connotation:var(--vvd-color-announcement);--on-connotation:var(--vvd-color-on-announcement);--connotation-diverse:var(--vvd-color-announcement-70)}.mdc-button:not(.mdc-button--dense) vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 20px)}.mdc-button .leading-icon,.mdc-button .trailing-icon{--connotation:initial;display:flex}.mdc-button>.trailing-icon vwc-icon,.mdc-button>.leading-icon vwc-icon{--gutter: 8px}:host([enlarged]) .mdc-button>.trailing-icon vwc-icon,:host([enlarged]) .mdc-button>.leading-icon vwc-icon{--gutter: 10px}:host([stacked]) .mdc-button>.trailing-icon vwc-icon,:host([stacked]) .mdc-button>.leading-icon vwc-icon{--gutter: 0}.mdc-button>.trailing-icon vwc-icon{margin-inline-start:var(--gutter)}.mdc-button>.leading-icon vwc-icon{margin-inline-end:var(--gutter)}:host([dense]) .mdc-button{--button-block-size: 32px}:host([dense]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 16px)}:host([enlarged]) .mdc-button{--button-block-size: 48px}:host([enlarged]) .mdc-button vwc-icon{--vvd-icon-size:var(--vvd-button-icon-size, 24px)}:host([raised]) .mdc-button,:host([unelevated]) .mdc-button{--mdc-ripple-color: var(--vvd-button-on-color, var(--layout-color-text))}:host([unelevated]) .mdc-button{--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-fill));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-text))}.mdc-button:not(.layout-filled){--mdc-theme-primary: var(--vvd-button-color, var(--layout-color-text));--mdc-theme-on-primary: var(--vvd-button-on-color, var(--layout-color-fill))}:host([dense]) .mdc-button{--mdc-button-horizontal-padding: 12px}:host([enlarged]) .mdc-button{--mdc-button-horizontal-padding: 20px}.mdc-button.button-stacked{--button-block-size: 68px;flex-direction:column;line-height:normal}:host([enlarged]) .mdc-button.button-stacked{--button-block-size: 80px}:host([dense]) .mdc-button.button-stacked{--button-block-size: 56px}.mdc-button.button-stacked>.leading-icon vwc-icon,.mdc-button.button-stacked .leading-icon ::slotted(*){margin-block-end:.5rem}.mdc-button.button-stacked>.trailing-icon vwc-icon,.mdc-button.button-stacked .trailing-icon ::slotted(*){margin-block-start:.5rem}.mdc-button.button-stacked .trailing-icon ::slotted(*),.mdc-button.button-stacked .leading-icon ::slotted(*){margin-inline-end:0;margin-inline-start:0}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-button-shape:6px}:host([shape=pill i]){--vvd-button-shape:24px}`;"]}
|
package/vwc-button.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export declare class VWCButton extends MWCButton {
|
|
|
25
25
|
shape?: ButtonShape;
|
|
26
26
|
type: ButtonType[number];
|
|
27
27
|
formId: string | null;
|
|
28
|
+
stacked: boolean;
|
|
28
29
|
protected updateFormAndButton(): void;
|
|
29
30
|
attributeChangedCallback(name: string, oldval: string | null, newval: string | null): void;
|
|
30
31
|
protected update(changes: PropertyValues): void;
|
package/vwc-button.js
CHANGED
|
@@ -18,6 +18,7 @@ let VWCButton = VWCButton_1 = class VWCButton extends MWCButton {
|
|
|
18
18
|
this.enlarged = false;
|
|
19
19
|
this.type = 'submit';
|
|
20
20
|
this.formId = null;
|
|
21
|
+
this.stacked = false;
|
|
21
22
|
_VWCButton__hiddenButton.set(this, VWCButton_1.createHiddenButton());
|
|
22
23
|
}
|
|
23
24
|
updateFormAndButton() {
|
|
@@ -97,7 +98,8 @@ let VWCButton = VWCButton_1 = class VWCButton extends MWCButton {
|
|
|
97
98
|
'mdc-button--outlined': this.outlined,
|
|
98
99
|
'mdc-button--dense': this.dense,
|
|
99
100
|
[`connotation-${this.connotation}`]: !!this.connotation,
|
|
100
|
-
[`layout-${this.layout}`]: !!this.layout
|
|
101
|
+
[`layout-${this.layout}`]: !!this.layout,
|
|
102
|
+
'button-stacked': this.stacked,
|
|
101
103
|
});
|
|
102
104
|
}
|
|
103
105
|
static createHiddenButton() {
|
|
@@ -143,6 +145,9 @@ __decorate([
|
|
|
143
145
|
__decorate([
|
|
144
146
|
property({ attribute: 'form', reflect: true })
|
|
145
147
|
], VWCButton.prototype, "formId", void 0);
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ type: Boolean, reflect: true })
|
|
150
|
+
], VWCButton.prototype, "stacked", void 0);
|
|
146
151
|
VWCButton = VWCButton_1 = __decorate([
|
|
147
152
|
customElement('vwc-button')
|
|
148
153
|
], VWCButton);
|
package/vwc-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-button.js","sourceRoot":"","sources":["src/vwc-button.ts"],"names":[],"mappings":";;;AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EACN,aAAa,EAAE,QAAQ,EAAE,IAAI,EAC7B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,oDAAoD,CAAC;AAY5F,SAAS,CAAC,MAAM,GAAG,CAAC,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;AAOpE,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;AAoB5C,IAAa,SAAS,iBAAtB,MAAa,SAAU,SAAQ,SAAS;IAAxC;;QAQU,UAAK,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAYjB,SAAI,GAAuB,QAAQ,CAAC;QAGpC,WAAM,GAAkB,IAAI,CAAC;QAE9B,mCAAoC,WAAS,CAAC,kBAAkB,EAAE,EAAC;IA8GpE,CAAC;IA5GU,mBAAmB;;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,MAAM,KAAK,IAAI,EAAE;YACpB,MAAA,uBAAA,IAAI,gCAAe,0CAAE,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAClD;IACF,CAAC;IAEQ,wBAAwB,CAChC,IAAY,EACZ,MAAqB,EACrB,MAAqB;;QAErB,IAAI,IAAI,KAAK,MAAM,IAAI,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE;YACnD,MAAA,uBAAA,IAAI,gCAAe,0CAAE,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAClD;aAAM;YACN,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;SACrD;IACF,CAAC;IAEkB,MAAM,CAAC,OAAuB;QAChD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACtB,CAAC,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;aACjB,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAuB,CAAC,CAAC;aAC5E,OAAO,CAAC,CAAC,aAAa,EAAE,EAAE;YAC1B,uBAAA,IAAI,gCAAe,CAAC,YAAY,CAAC,aAAuB,EAAG,IAAY,CAAC,aAAuB,CAAC,CAAC,CAAC;QACnG,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,OAA6B;;QACvD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACxB,MAAA,uBAAA,IAAI,gCAAe,0CAAE,YAAY,CAAC,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC,CAAC;SAC3E;QAED,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;QAC7D,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC;QAE7D,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAChC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACtB;SACD;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,EAAE;gBAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;gBAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;aACnB;SACD;IACF,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,uBAAA,IAAI,gCAAqC,CAAC,IAAI,CAAC;IACxD,CAAC;IAED,IAAI,IAAI,CAAC,CAAyB;IAElC,CAAC;IAES,YAAY,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,QAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;gBACnC,KAAK,OAAO;oBACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;oBAClB,MAAM;gBACP,KAAK,QAAQ;oBACZ,MAAM;gBACP;oBACC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;wBAC1B,uBAAA,IAAI,gCAAe,CAAC,KAAK,EAAE,CAAC;qBAC5B;yBAAM;wBACN,KAAK,CAAC,wBAAwB,EAAE,CAAC;qBACjC;oBACD,MAAM;aACN;SACD;IACF,CAAC;IAEkB,UAAU;QAC5B,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC;IACxD,CAAC;IAEkB,gBAAgB;QAClC,OAAO,QAAQ,CAAC;YACf,oBAAoB,EAAE,IAAI,CAAC,MAAM;YACjC,wBAAwB,EAAE,IAAI,CAAC,UAAU;YACzC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,mBAAmB,EAAE,IAAI,CAAC,KAAK;YAC/B,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW;YACvD,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;SACxC,CAAC,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,kBAAkB;QACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC9B,OAAO,MAAM,CAAC;IACf,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,uBAAA,IAAI,gCAAe,CAAC,CAAC;IACvC,CAAC;IAEQ,oBAAoB;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;CACD,CAAA;;AAxIC;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AAGd;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC1B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACpB;AAGtB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACzB;AAGjB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACnB;AAGtB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACT;AAGhC;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACrB;AAGpB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACL;AAGpC;IADA,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACjB;AA1BlB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA0IrB;SA1IY,SAAS","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-icon';\nimport {\n\tcustomElement, property, html, TemplateResult\n} from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { Button as MWCButton } from '@material/mwc-button';\nimport { style as vwcButtonStyle } from './vwc-button.css.js';\nimport { styles as mwcButtonStyles } from '@material/mwc-button/styles.css.js';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport type { Connotation, Layout, Shape } from '@vonage/vvd-foundation/constants.js';\nimport type { PropertyValues } from 'lit-element';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-button': VWCButton;\n\t}\n}\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCButton.styles = [styleCoupling, mwcButtonStyles, vwcButtonStyle];\n\nexport type ButtonLayout = Extract<\n\tLayout,\n\tLayout.Filled | Layout.Outlined | Layout.Ghost\n>;\n\nconst types = ['submit', 'reset', 'button'];\nexport type ButtonType = typeof types;\n\ntype ButtonConnotation = Extract<\n\tConnotation,\n\t| Connotation.Primary\n\t| Connotation.CTA\n\t| Connotation.Success\n\t| Connotation.Alert\n\t| Connotation.Info\n\t| Connotation.Announcement\n>;\n\ntype ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\n\n/**\n * This component is an extension of [<mwc-button>](https://github.com/material-components/material-components-web-components/tree/master/packages/button)\n * Our button supports native features like the 'form' and 'type' attributes\n */\n@customElement('vwc-button')\nexport class VWCButton extends MWCButton {\n\t@property({ type: String, reflect: true })\n\t\tname?: string;\n\n\t@property({ type: String, reflect: true })\n\t\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\toverride dense = false;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tenlarged = false;\n\n\t@property({ type: String, reflect: true })\n\t\tlayout?: ButtonLayout;\n\n\t@property({ type: String, reflect: true })\n\t\tconnotation?: ButtonConnotation;\n\n\t@property({ type: String, reflect: true })\n\t\tshape?: ButtonShape;\n\n\t@property({ type: String, reflect: true })\n\t\ttype: ButtonType[number] = 'submit';\n\n\t@property({ attribute: 'form', reflect: true })\n\t\tformId: string | null = null;\n\n\t#_hiddenButton: HTMLButtonElement = VWCButton.createHiddenButton();\n\n\tprotected updateFormAndButton(): void {\n\t\tconst formId = this.getAttribute('form');\n\t\tif (formId !== null) {\n\t\t\tthis.#_hiddenButton?.setAttribute('form', formId);\n\t\t}\n\t}\n\n\toverride attributeChangedCallback(\n\t\tname: string,\n\t\toldval: string | null,\n\t\tnewval: string | null\n\t): void {\n\t\tif (name === 'form' && newval && newval !== oldval) {\n\t\t\tthis.#_hiddenButton?.setAttribute('form', newval);\n\t\t} else {\n\t\t\tsuper.attributeChangedCallback(name, oldval, newval);\n\t\t}\n\t}\n\n\tprotected override update(changes: PropertyValues): void {\n\t\tsuper.update(changes);\n\t\t[...changes.keys()]\n\t\t\t.filter(attributeName => ['name', 'value'].includes(attributeName as string))\n\t\t\t.forEach((attributeName) => {\n\t\t\t\tthis.#_hiddenButton.setAttribute(attributeName as string, (this as any)[attributeName as string]);\n\t\t\t});\n\t}\n\n\tprotected override updated(changes: Map<string, boolean>): void {\n\t\tif (changes.has('type')) {\n\t\t\tthis.#_hiddenButton?.setAttribute('type', this.getAttribute('type') ?? '');\n\t\t}\n\n\t\tthis.toggleAttribute('outlined', this.layout === 'outlined');\n\t\tthis.toggleAttribute('unelevated', this.layout === 'filled');\n\n\t\tif (changes.has('dense')) {\n\t\t\tif (this.dense && this.enlarged) {\n\t\t\t\tthis.enlarged = false;\n\t\t\t}\n\t\t}\n\n\t\tif (changes.has('enlarged')) {\n\t\t\tif (this.enlarged && this.dense) {\n\t\t\t\tthis.removeAttribute('dense');\n\t\t\t\tthis.dense = false;\n\t\t\t}\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn (this.#_hiddenButton as HTMLButtonElement).form;\n\t}\n\n\tset form(_: HTMLFormElement | null) {\n\t\t// return nothing\n\t}\n\n\tprotected _handleClick(event: MouseEvent): void {\n\t\tif (this.form) {\n\t\t\tswitch (this.getAttribute('type')) {\n\t\t\tcase 'reset':\n\t\t\t\tthis.form.reset();\n\t\t\t\tbreak;\n\t\t\tcase 'button':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tif (event.target === this) {\n\t\t\t\t\tthis.#_hiddenButton.click();\n\t\t\t\t} else {\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected override renderIcon(): TemplateResult {\n\t\treturn html`<vwc-icon\ttype=\"${this.icon}\"></vwc-icon>`;\n\t}\n\n\tprotected override getRenderClasses() {\n\t\treturn classMap({\n\t\t\t'mdc-button--raised': this.raised,\n\t\t\t'mdc-button--unelevated': this.unelevated,\n\t\t\t'mdc-button--outlined': this.outlined,\n\t\t\t'mdc-button--dense': this.dense,\n\t\t\t[`connotation-${this.connotation}`]: !!this.connotation,\n\t\t\t[`layout-${this.layout}`]: !!this.layout\n\t\t});\n\t}\n\n\tstatic createHiddenButton(): HTMLButtonElement {\n\t\tconst button = document.createElement('button');\n\t\tbutton.style.display = 'none';\n\t\treturn button;\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.addEventListener('click', this._handleClick);\n\t\tthis.appendChild(this.#_hiddenButton);\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('click', this._handleClick);\n\t}\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"vwc-button.js","sourceRoot":"","sources":["src/vwc-button.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-icon';\nimport {\n\tcustomElement, property, html, TemplateResult\n} from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { Button as MWCButton } from '@material/mwc-button';\nimport { style as vwcButtonStyle } from './vwc-button.css.js';\nimport { styles as mwcButtonStyles } from '@material/mwc-button/styles.css.js';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport type { Connotation, Layout, Shape } from '@vonage/vvd-foundation/constants.js';\nimport type { PropertyValues } from 'lit-element';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-button': VWCButton;\n\t}\n}\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCButton.styles = [styleCoupling, mwcButtonStyles, vwcButtonStyle];\n\nexport type ButtonLayout = Extract<\n\tLayout,\n\tLayout.Filled | Layout.Outlined | Layout.Ghost\n>;\n\nconst types = ['submit', 'reset', 'button'];\nexport type ButtonType = typeof types;\n\ntype ButtonConnotation = Extract<\n\tConnotation,\n\t| Connotation.Primary\n\t| Connotation.CTA\n\t| Connotation.Success\n\t| Connotation.Alert\n\t| Connotation.Info\n\t| Connotation.Announcement\n>;\n\ntype ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\n\n/**\n * This component is an extension of [<mwc-button>](https://github.com/material-components/material-components-web-components/tree/master/packages/button)\n * Our button supports native features like the 'form' and 'type' attributes\n */\n@customElement('vwc-button')\nexport class VWCButton extends MWCButton {\n\t@property({ type: String, reflect: true })\n\t\tname?: string;\n\n\t@property({ type: String, reflect: true })\n\t\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\toverride dense = false;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tenlarged = false;\n\n\t@property({ type: String, reflect: true })\n\t\tlayout?: ButtonLayout;\n\n\t@property({ type: String, reflect: true })\n\t\tconnotation?: ButtonConnotation;\n\n\t@property({ type: String, reflect: true })\n\t\tshape?: ButtonShape;\n\n\t@property({ type: String, reflect: true })\n\t\ttype: ButtonType[number] = 'submit';\n\n\t@property({ attribute: 'form', reflect: true })\n\t\tformId: string | null = null;\n\n\t@property({ type: Boolean, reflect: true })\n\t\tstacked = false;\n\n\t#_hiddenButton: HTMLButtonElement = VWCButton.createHiddenButton();\n\n\tprotected updateFormAndButton(): void {\n\t\tconst formId = this.getAttribute('form');\n\t\tif (formId !== null) {\n\t\t\tthis.#_hiddenButton?.setAttribute('form', formId);\n\t\t}\n\t}\n\n\toverride attributeChangedCallback(\n\t\tname: string,\n\t\toldval: string | null,\n\t\tnewval: string | null\n\t): void {\n\t\tif (name === 'form' && newval && newval !== oldval) {\n\t\t\tthis.#_hiddenButton?.setAttribute('form', newval);\n\t\t} else {\n\t\t\tsuper.attributeChangedCallback(name, oldval, newval);\n\t\t}\n\t}\n\n\tprotected override update(changes: PropertyValues): void {\n\t\tsuper.update(changes);\n\t\t[...changes.keys()]\n\t\t\t.filter(attributeName => ['name', 'value'].includes(attributeName as string))\n\t\t\t.forEach((attributeName) => {\n\t\t\t\tthis.#_hiddenButton.setAttribute(attributeName as string, (this as any)[attributeName as string]);\n\t\t\t});\n\t}\n\n\tprotected override updated(changes: Map<string, boolean>): void {\n\t\tif (changes.has('type')) {\n\t\t\tthis.#_hiddenButton?.setAttribute('type', this.getAttribute('type') ?? '');\n\t\t}\n\n\t\tthis.toggleAttribute('outlined', this.layout === 'outlined');\n\t\tthis.toggleAttribute('unelevated', this.layout === 'filled');\n\n\t\tif (changes.has('dense')) {\n\t\t\tif (this.dense && this.enlarged) {\n\t\t\t\tthis.enlarged = false;\n\t\t\t}\n\t\t}\n\n\t\tif (changes.has('enlarged')) {\n\t\t\tif (this.enlarged && this.dense) {\n\t\t\t\tthis.removeAttribute('dense');\n\t\t\t\tthis.dense = false;\n\t\t\t}\n\t\t}\n\t}\n\n\tget form(): HTMLFormElement | null {\n\t\treturn (this.#_hiddenButton as HTMLButtonElement).form;\n\t}\n\n\tset form(_: HTMLFormElement | null) {\n\t\t// return nothing\n\t}\n\n\tprotected _handleClick(event: MouseEvent): void {\n\t\tif (this.form) {\n\t\t\tswitch (this.getAttribute('type')) {\n\t\t\tcase 'reset':\n\t\t\t\tthis.form.reset();\n\t\t\t\tbreak;\n\t\t\tcase 'button':\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tif (event.target === this) {\n\t\t\t\t\tthis.#_hiddenButton.click();\n\t\t\t\t} else {\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected override renderIcon(): TemplateResult {\n\t\treturn html`<vwc-icon\ttype=\"${this.icon}\"></vwc-icon>`;\n\t}\n\n\tprotected override getRenderClasses() {\n\t\treturn classMap({\n\t\t\t'mdc-button--raised': this.raised,\n\t\t\t'mdc-button--unelevated': this.unelevated,\n\t\t\t'mdc-button--outlined': this.outlined,\n\t\t\t'mdc-button--dense': this.dense,\n\t\t\t[`connotation-${this.connotation}`]: !!this.connotation,\n\t\t\t[`layout-${this.layout}`]: !!this.layout,\n\t\t\t'button-stacked': this.stacked,\n\t\t});\n\t}\n\n\tstatic createHiddenButton(): HTMLButtonElement {\n\t\tconst button = document.createElement('button');\n\t\tbutton.style.display = 'none';\n\t\treturn button;\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.addEventListener('click', this._handleClick);\n\t\tthis.appendChild(this.#_hiddenButton);\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('click', this._handleClick);\n\t}\n}\n\n"]}
|