@spectrum-web-components/button 0.19.11-react.49 → 0.19.11-react.75
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/custom-elements.json +33 -0
- package/package.json +9 -9
- package/src/Button.d.ts +3 -2
- package/src/Button.dev.js +36 -11
- package/src/Button.dev.js.map +2 -2
- package/src/Button.js +1 -1
- package/src/Button.js.map +3 -3
- package/src/ButtonBase.dev.js +3 -6
- package/src/ButtonBase.dev.js.map +2 -2
- package/src/ButtonBase.js +3 -6
- package/src/ButtonBase.js.map +2 -2
- package/src/button.css.dev.js +833 -639
- package/src/button.css.dev.js.map +2 -2
- package/src/button.css.js +833 -639
- package/src/button.css.js.map +2 -2
- package/src/spectrum-button.css.dev.js +833 -639
- package/src/spectrum-button.css.dev.js.map +2 -2
- package/src/spectrum-button.css.js +833 -639
- package/src/spectrum-button.css.js.map +2 -2
- package/src/spectrum-config.js +21 -8
- package/stories/index.js +1 -0
- package/stories/index.js.map +2 -2
- package/test/button.test.js +2 -1
- package/test/button.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -59,6 +59,14 @@
|
|
|
59
59
|
},
|
|
60
60
|
"default": "[\n 'accent',\n 'primary',\n 'secondary',\n 'negative',\n 'white',\n 'black',\n]"
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "variable",
|
|
64
|
+
"name": "VALID_STATICS",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "array"
|
|
67
|
+
},
|
|
68
|
+
"default": "['white', 'black']"
|
|
69
|
+
},
|
|
62
70
|
{
|
|
63
71
|
"kind": "class",
|
|
64
72
|
"description": "",
|
|
@@ -93,6 +101,16 @@
|
|
|
93
101
|
"privacy": "private",
|
|
94
102
|
"default": "'accent'"
|
|
95
103
|
},
|
|
104
|
+
{
|
|
105
|
+
"kind": "field",
|
|
106
|
+
"name": "static",
|
|
107
|
+
"type": {
|
|
108
|
+
"text": "'black' | 'white' | undefined"
|
|
109
|
+
},
|
|
110
|
+
"privacy": "public",
|
|
111
|
+
"attribute": "static",
|
|
112
|
+
"reflects": true
|
|
113
|
+
},
|
|
96
114
|
{
|
|
97
115
|
"kind": "field",
|
|
98
116
|
"name": "treatment",
|
|
@@ -411,6 +429,13 @@
|
|
|
411
429
|
"description": "The visual variant to apply to this button.",
|
|
412
430
|
"fieldName": "variant"
|
|
413
431
|
},
|
|
432
|
+
{
|
|
433
|
+
"name": "static",
|
|
434
|
+
"type": {
|
|
435
|
+
"text": "'black' | 'white' | undefined"
|
|
436
|
+
},
|
|
437
|
+
"fieldName": "static"
|
|
438
|
+
},
|
|
414
439
|
{
|
|
415
440
|
"name": "treatment",
|
|
416
441
|
"type": {
|
|
@@ -473,6 +498,14 @@
|
|
|
473
498
|
"module": "src/Button.ts"
|
|
474
499
|
}
|
|
475
500
|
},
|
|
501
|
+
{
|
|
502
|
+
"kind": "js",
|
|
503
|
+
"name": "VALID_STATICS",
|
|
504
|
+
"declaration": {
|
|
505
|
+
"name": "VALID_STATICS",
|
|
506
|
+
"module": "src/Button.ts"
|
|
507
|
+
}
|
|
508
|
+
},
|
|
476
509
|
{
|
|
477
510
|
"kind": "js",
|
|
478
511
|
"name": "Button",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/button",
|
|
3
|
-
"version": "0.19.11-react.
|
|
3
|
+
"version": "0.19.11-react.75+9897d0a1c",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -82,15 +82,15 @@
|
|
|
82
82
|
"lit-html"
|
|
83
83
|
],
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@spectrum-web-components/base": "^0.7.5-react.
|
|
86
|
-
"@spectrum-web-components/clear-button": "^0.2.6-react.
|
|
87
|
-
"@spectrum-web-components/close-button": "^0.3.9-react.
|
|
88
|
-
"@spectrum-web-components/icon": "^0.12.8-react.
|
|
89
|
-
"@spectrum-web-components/icons-ui": "^0.9.8-react.
|
|
90
|
-
"@spectrum-web-components/shared": "^0.15.6-react.
|
|
85
|
+
"@spectrum-web-components/base": "^0.7.5-react.75+9897d0a1c",
|
|
86
|
+
"@spectrum-web-components/clear-button": "^0.2.6-react.75+9897d0a1c",
|
|
87
|
+
"@spectrum-web-components/close-button": "^0.3.9-react.75+9897d0a1c",
|
|
88
|
+
"@spectrum-web-components/icon": "^0.12.8-react.75+9897d0a1c",
|
|
89
|
+
"@spectrum-web-components/icons-ui": "^0.9.8-react.75+9897d0a1c",
|
|
90
|
+
"@spectrum-web-components/shared": "^0.15.6-react.75+9897d0a1c"
|
|
91
91
|
},
|
|
92
92
|
"devDependencies": {
|
|
93
|
-
"@spectrum-css/button": "^
|
|
93
|
+
"@spectrum-css/button": "^9.0.0"
|
|
94
94
|
},
|
|
95
95
|
"types": "./src/index.d.ts",
|
|
96
96
|
"customElements": "custom-elements.json",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"./sp-*.js",
|
|
99
99
|
"./**/*.dev.js"
|
|
100
100
|
],
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "9897d0a1c48b8cee4e5a19c58acfdec2c1dc0623"
|
|
102
102
|
}
|
package/src/Button.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { CSSResultArray
|
|
1
|
+
import { CSSResultArray } from '@spectrum-web-components/base';
|
|
2
2
|
import { StyledButton } from './StyledButton.js';
|
|
3
3
|
export declare type DeprecatedButtonVariants = 'cta' | 'overBackground';
|
|
4
4
|
export declare type ButtonStatics = 'white' | 'black';
|
|
5
5
|
export declare type ButtonVariants = 'accent' | 'primary' | 'secondary' | 'negative' | ButtonStatics | DeprecatedButtonVariants;
|
|
6
6
|
export declare const VALID_VARIANTS: string[];
|
|
7
|
+
export declare const VALID_STATICS: string[];
|
|
7
8
|
export declare type ButtonTreatments = 'fill' | 'outline';
|
|
8
9
|
declare const Button_base: typeof StyledButton & {
|
|
9
10
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
@@ -23,6 +24,7 @@ export declare class Button extends Button_base {
|
|
|
23
24
|
get variant(): ButtonVariants;
|
|
24
25
|
set variant(variant: ButtonVariants);
|
|
25
26
|
private _variant;
|
|
27
|
+
static: 'black' | 'white' | undefined;
|
|
26
28
|
/**
|
|
27
29
|
* The visual variant to apply to this button.
|
|
28
30
|
*/
|
|
@@ -31,6 +33,5 @@ export declare class Button extends Button_base {
|
|
|
31
33
|
* Style this button to be less obvious
|
|
32
34
|
*/
|
|
33
35
|
set quiet(quiet: boolean);
|
|
34
|
-
protected firstUpdated(changes: PropertyValues<this>): void;
|
|
35
36
|
}
|
|
36
37
|
export {};
|
package/src/Button.dev.js
CHANGED
|
@@ -10,9 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
10
10
|
__defProp(target, key, result);
|
|
11
11
|
return result;
|
|
12
12
|
};
|
|
13
|
-
import {
|
|
14
|
-
SizedMixin
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
13
|
+
import { SizedMixin } from "@spectrum-web-components/base";
|
|
16
14
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
15
|
import { StyledButton } from "./StyledButton.dev.js";
|
|
18
16
|
import buttonStyles from "./button.css.js";
|
|
@@ -24,6 +22,7 @@ export const VALID_VARIANTS = [
|
|
|
24
22
|
"white",
|
|
25
23
|
"black"
|
|
26
24
|
];
|
|
25
|
+
export const VALID_STATICS = ["white", "black"];
|
|
27
26
|
export class Button extends SizedMixin(StyledButton) {
|
|
28
27
|
constructor() {
|
|
29
28
|
super(...arguments);
|
|
@@ -43,11 +42,40 @@ export class Button extends SizedMixin(StyledButton) {
|
|
|
43
42
|
switch (variant) {
|
|
44
43
|
case "cta":
|
|
45
44
|
this._variant = "accent";
|
|
45
|
+
if (true) {
|
|
46
|
+
window.__swc.warn(
|
|
47
|
+
this,
|
|
48
|
+
`The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`,
|
|
49
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button/#variants"
|
|
50
|
+
);
|
|
51
|
+
}
|
|
46
52
|
break;
|
|
47
53
|
case "overBackground":
|
|
48
|
-
this.
|
|
54
|
+
this.removeAttribute("variant");
|
|
55
|
+
this.static = "white";
|
|
49
56
|
this.treatment = "outline";
|
|
50
|
-
|
|
57
|
+
if (true) {
|
|
58
|
+
window.__swc.warn(
|
|
59
|
+
this,
|
|
60
|
+
`The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static='white'" with "treatment='outline'" instead.`,
|
|
61
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button#static"
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
return;
|
|
65
|
+
case "white":
|
|
66
|
+
case "black":
|
|
67
|
+
this.static = variant;
|
|
68
|
+
this.removeAttribute("variant");
|
|
69
|
+
if (true) {
|
|
70
|
+
window.__swc.warn(
|
|
71
|
+
this,
|
|
72
|
+
`The "black" and "white" values of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static='black'" or "static='white'" instead.`,
|
|
73
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button#static"
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
return;
|
|
77
|
+
case null:
|
|
78
|
+
return;
|
|
51
79
|
default:
|
|
52
80
|
if (!VALID_VARIANTS.includes(variant)) {
|
|
53
81
|
this._variant = "accent";
|
|
@@ -61,16 +89,13 @@ export class Button extends SizedMixin(StyledButton) {
|
|
|
61
89
|
set quiet(quiet) {
|
|
62
90
|
this.treatment = quiet ? "outline" : "fill";
|
|
63
91
|
}
|
|
64
|
-
firstUpdated(changes) {
|
|
65
|
-
super.firstUpdated(changes);
|
|
66
|
-
if (!this.hasAttribute("variant")) {
|
|
67
|
-
this.setAttribute("variant", this.variant);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
92
|
}
|
|
71
93
|
__decorateClass([
|
|
72
94
|
property()
|
|
73
95
|
], Button.prototype, "variant", 1);
|
|
96
|
+
__decorateClass([
|
|
97
|
+
property({ type: String, reflect: true })
|
|
98
|
+
], Button.prototype, "static", 2);
|
|
74
99
|
__decorateClass([
|
|
75
100
|
property({ reflect: true })
|
|
76
101
|
], Button.prototype, "treatment", 2);
|
package/src/Button.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Button.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { CSSResultArray, SizedMixin } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.dev.js'\nimport buttonStyles from './button.css.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n | 'accent'\n | 'primary'\n | 'secondary'\n | 'negative'\n | ButtonStatics\n | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n 'accent',\n 'primary',\n 'secondary',\n 'negative',\n 'white',\n 'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(StyledButton) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles];\n }\n\n /**\n * The visual variant to apply to this button.\n */\n @property()\n public get variant(): ButtonVariants {\n return this._variant;\n }\n public set variant(variant: ButtonVariants) {\n if (variant === this.variant) return;\n\n this.requestUpdate('variant', this.variant);\n switch (variant) {\n case 'cta':\n this._variant = 'accent';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n );\n }\n break;\n case 'overBackground':\n this.removeAttribute('variant');\n this.static = 'white';\n this.treatment = 'outline';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n );\n }\n return;\n case 'white':\n case 'black':\n this.static = variant;\n this.removeAttribute('variant');\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n );\n }\n return;\n case null:\n return;\n default:\n if (!VALID_VARIANTS.includes(variant)) {\n this._variant = 'accent';\n } else {\n this._variant = variant;\n }\n break;\n }\n this.setAttribute('variant', this.variant);\n }\n private _variant: ButtonVariants = 'accent';\n\n @property({ type: String, reflect: true })\n public static: 'black' | 'white' | undefined;\n\n /**\n * The visual variant to apply to this button.\n */\n @property({ reflect: true })\n public treatment: ButtonTreatments = 'fill';\n\n /**\n * Style this button to be less obvious\n */\n @property({ type: Boolean })\n public set quiet(quiet: boolean) {\n this.treatment = quiet ? 'outline' : 'fill';\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA,SAAyB,kBAAkB;AAC3C,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,kBAAkB;AAWlB,aAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AACO,aAAM,gBAAgB,CAAC,SAAS,OAAO;AAUvC,aAAM,eAAe,WAAW,YAAY,EAAE;AAAA,EAA9C;AAAA;AA+DH,SAAQ,WAA2B;AASnC,SAAO,YAA8B;AAAA;AAAA,EAvErC,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,YAAY;AAAA,EACzC;AAAA,EAMA,IAAW,UAA0B;AACjC,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAW,QAAQ,SAAyB;AACxC,QAAI,YAAY,KAAK;AAAS;AAE9B,SAAK,cAAc,WAAW,KAAK,OAAO;AAC1C,YAAQ,SAAS;AAAA,MACb,KAAK;AACD,aAAK,WAAW;AAChB,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,kDAAkD,KAAK;AAAA,YACvD;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AACD,aAAK,gBAAgB,SAAS;AAC9B,aAAK,SAAS;AACd,aAAK,YAAY;AACjB,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,6DAA6D,KAAK;AAAA,YAClE;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AACD,aAAK,SAAS;AACd,aAAK,gBAAgB,SAAS;AAC9B,YAAI,MAAoB;AACpB,iBAAO,MAAM;AAAA,YACT;AAAA,YACA,iEAAiE,KAAK;AAAA,YACtE;AAAA,UACJ;AAAA,QACJ;AACA;AAAA,MACJ,KAAK;AACD;AAAA,MACJ;AACI,YAAI,CAAC,eAAe,SAAS,OAAO,GAAG;AACnC,eAAK,WAAW;AAAA,QACpB,OAAO;AACH,eAAK,WAAW;AAAA,QACpB;AACA;AAAA,IACR;AACA,SAAK,aAAa,WAAW,KAAK,OAAO;AAAA,EAC7C;AAAA,EAgBA,IAAW,MAAM,OAAgB;AAC7B,SAAK,YAAY,QAAQ,YAAY;AAAA,EACzC;AACJ;AAxEe;AAAA,EADV,SAAS;AAAA,GARD,OASE;AAyDJ;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjEhC,OAkEF;AAMA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAvElB,OAwEF;AAMI;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA7ElB,OA8EE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=(s,a,t,r)=>{for(var e=r>1?void 0:r?l(a,t):a,o=s.length-1,c;o>=0;o--)(c=s[o])&&(e=(r?c(a,t,e):c(e))||e);return r&&e&&u(a,t,e),e};import{SizedMixin as p}from"@spectrum-web-components/base";import{property as n}from"@spectrum-web-components/base/src/decorators.js";import{StyledButton as h}from"./StyledButton.js";import d from"./button.css.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATICS=["white","black"];export class Button extends p(h){constructor(){super(...arguments);this._variant="accent";this.treatment="fill"}static get styles(){return[...super.styles,d]}get variant(){return this._variant}set variant(t){if(t!==this.variant){switch(this.requestUpdate("variant",this.variant),t){case"cta":this._variant="accent";break;case"overBackground":this.removeAttribute("variant"),this.static="white",this.treatment="outline";return;case"white":case"black":this.static=t,this.removeAttribute("variant");return;case null:return;default:VALID_VARIANTS.includes(t)?this._variant=t:this._variant="accent";break}this.setAttribute("variant",this.variant)}}set quiet(t){this.treatment=t?"outline":"fill"}}i([n()],Button.prototype,"variant",1),i([n({type:String,reflect:!0})],Button.prototype,"static",2),i([n({reflect:!0})],Button.prototype,"treatment",2),i([n({type:Boolean})],Button.prototype,"quiet",1);
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
package/src/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Button.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {
|
|
5
|
-
"mappings": "qNAYA,
|
|
6
|
-
"names": ["SizedMixin", "property", "StyledButton", "buttonStyles", "variant", "quiet", "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { CSSResultArray, SizedMixin } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.js';\nimport buttonStyles from './button.css.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStatics = 'white' | 'black';\nexport type ButtonVariants =\n | 'accent'\n | 'primary'\n | 'secondary'\n | 'negative'\n | ButtonStatics\n | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n 'accent',\n 'primary',\n 'secondary',\n 'negative',\n 'white',\n 'black',\n];\nexport const VALID_STATICS = ['white', 'black'];\n\nexport type ButtonTreatments = 'fill' | 'outline';\n\n/**\n * @element sp-button\n *\n * @slot - text label of the Button\n * @slot icon - The icon to use for Button\n */\nexport class Button extends SizedMixin(StyledButton) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles];\n }\n\n /**\n * The visual variant to apply to this button.\n */\n @property()\n public get variant(): ButtonVariants {\n return this._variant;\n }\n public set variant(variant: ButtonVariants) {\n if (variant === this.variant) return;\n\n this.requestUpdate('variant', this.variant);\n switch (variant) {\n case 'cta':\n this._variant = 'accent';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"cta\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"variant='accent'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/#variants'\n );\n }\n break;\n case 'overBackground':\n this.removeAttribute('variant');\n this.static = 'white';\n this.treatment = 'outline';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"overBackground\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='white'\" with \"treatment='outline'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n );\n }\n return;\n case 'white':\n case 'black':\n this.static = variant;\n this.removeAttribute('variant');\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"black\" and \"white\" values of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static='black'\" or \"static='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button#static'\n );\n }\n return;\n case null:\n return;\n default:\n if (!VALID_VARIANTS.includes(variant)) {\n this._variant = 'accent';\n } else {\n this._variant = variant;\n }\n break;\n }\n this.setAttribute('variant', this.variant);\n }\n private _variant: ButtonVariants = 'accent';\n\n @property({ type: String, reflect: true })\n public static: 'black' | 'white' | undefined;\n\n /**\n * The visual variant to apply to this button.\n */\n @property({ reflect: true })\n public treatment: ButtonTreatments = 'fill';\n\n /**\n * Style this button to be less obvious\n */\n @property({ type: Boolean })\n public set quiet(quiet: boolean) {\n this.treatment = quiet ? 'outline' : 'fill';\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAAyB,cAAAA,MAAkB,gCAC3C,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,oBAC7B,OAAOC,MAAkB,kBAWlB,aAAM,eAAiB,CAC1B,SACA,UACA,YACA,WACA,QACA,OACJ,EACa,cAAgB,CAAC,QAAS,OAAO,EAUvC,aAAM,eAAeH,EAAWE,CAAY,CAAE,CAA9C,kCA+DH,KAAQ,SAA2B,SASnC,KAAO,UAA8B,OAvErC,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAY,CACzC,CAMA,IAAW,SAA0B,CACjC,OAAO,KAAK,QAChB,CACA,IAAW,QAAQC,EAAyB,CACxC,GAAIA,IAAY,KAAK,QAGrB,QADA,KAAK,cAAc,UAAW,KAAK,OAAO,EAClCA,EAAS,CACb,IAAK,MACD,KAAK,SAAW,SAQhB,MACJ,IAAK,iBACD,KAAK,gBAAgB,SAAS,EAC9B,KAAK,OAAS,QACd,KAAK,UAAY,UAQjB,OACJ,IAAK,QACL,IAAK,QACD,KAAK,OAASA,EACd,KAAK,gBAAgB,SAAS,EAQ9B,OACJ,KAAK,KACD,OACJ,QACS,eAAe,SAASA,CAAO,EAGhC,KAAK,SAAWA,EAFhB,KAAK,SAAW,SAIpB,KACR,CACA,KAAK,aAAa,UAAW,KAAK,OAAO,EAC7C,CAgBA,IAAW,MAAMC,EAAgB,CAC7B,KAAK,UAAYA,EAAQ,UAAY,MACzC,CACJ,CAxEeC,EAAA,CADVL,EAAS,GARD,OASE,uBAyDJK,EAAA,CADNL,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAjEhC,OAkEF,sBAMAK,EAAA,CADNL,EAAS,CAAE,QAAS,EAAK,CAAC,GAvElB,OAwEF,yBAMIK,EAAA,CADVL,EAAS,CAAE,KAAM,OAAQ,CAAC,GA7ElB,OA8EE",
|
|
6
|
+
"names": ["SizedMixin", "property", "StyledButton", "buttonStyles", "variant", "quiet", "__decorateClass"]
|
|
7
7
|
}
|
package/src/ButtonBase.dev.js
CHANGED
|
@@ -47,12 +47,9 @@ export class ButtonBase extends LikeAnchor(
|
|
|
47
47
|
get buttonContent() {
|
|
48
48
|
const content = [
|
|
49
49
|
html`
|
|
50
|
-
<
|
|
51
|
-
<slot
|
|
52
|
-
|
|
53
|
-
@slotchange=${this.manageTextObservedSlot}
|
|
54
|
-
></slot>
|
|
55
|
-
</div>
|
|
50
|
+
<span id="label" ?hidden=${!this.hasLabel}>
|
|
51
|
+
<slot @slotchange=${this.manageTextObservedSlot}></slot>
|
|
52
|
+
</span>
|
|
56
53
|
`
|
|
57
54
|
];
|
|
58
55
|
if (this.hasIcon) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ButtonBase.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport {\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends LikeAnchor(\n ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EACI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAMA,aAAM,mBAAmB;AAAA,EAC5B,gBAAgB,oBAAoB,WAAW,eAAe,CAAC;AACnE,EAAE;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport {\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends LikeAnchor(\n ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <span id=\"label\" ?hidden=${!this.hasLabel}>\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n if (this.hasIcon) {\n content.unshift(html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `);\n }\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n\n super.click();\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n this.anchorElement.click();\n handled = true;\n } else if (this.type !== 'button') {\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private handleRemoveActive(): void {\n this.active = false;\n }\n\n private handlePointerdown(): void {\n this.active = true;\n }\n\n private manageAnchor(): void {\n if (this.href && this.href.length > 0) {\n if (this.getAttribute('role') === 'button') {\n this.setAttribute('role', 'link');\n }\n this.removeEventListener('click', this.shouldProxyClick);\n } else {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n this.setAttribute('role', 'button');\n }\n this.addEventListener('click', this.shouldProxyClick);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = 0;\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n this.addEventListener('pointerdown', this.handlePointerdown);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n if (changed.has('label')) {\n this.setAttribute('aria-label', this.label || '');\n }\n if (changed.has('active')) {\n if (this.active) {\n this.addEventListener('focusout', this.handleRemoveActive);\n this.addEventListener('pointerup', this.handleRemoveActive);\n this.addEventListener('pointercancel', this.handleRemoveActive);\n this.addEventListener('pointerleave', this.handleRemoveActive);\n } else {\n this.removeEventListener('focusout', this.handleRemoveActive);\n this.removeEventListener('pointerup', this.handleRemoveActive);\n this.removeEventListener(\n 'pointercancel',\n this.handleRemoveActive\n );\n this.removeEventListener(\n 'pointerleave',\n this.handleRemoveActive\n );\n }\n }\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ButtonBase.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(o,r,e,t)=>{for(var i=t>1?void 0:t?c(r,e):r,a=o.length-1,h;a>=0;a--)(h=o[a])&&(i=(t?h(r,e,i):h(i))||i);return t&&i&&d(r,e,i),i};import{html as n}from"@spectrum-web-components/base";import{property as l,query as u}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as p}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as v}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotPresence as b,ObserveSlotText as m}from"@spectrum-web-components/shared";export class ButtonBase extends p(m(b(v,'[slot="icon"]'))){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return this.slotHasContent}get focusElement(){return this}get buttonContent(){const e=[n`
|
|
2
|
-
<
|
|
3
|
-
<slot
|
|
4
|
-
|
|
5
|
-
@slotchange=${this.manageTextObservedSlot}
|
|
6
|
-
></slot>
|
|
7
|
-
</div>
|
|
2
|
+
<span id="label" ?hidden=${!this.hasLabel}>
|
|
3
|
+
<slot @slotchange=${this.manageTextObservedSlot}></slot>
|
|
4
|
+
</span>
|
|
8
5
|
`];return this.hasIcon&&e.unshift(n`
|
|
9
6
|
<slot name="icon" ?icon-only=${!this.hasLabel}></slot>
|
|
10
7
|
`),e}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return n`
|
package/src/ButtonBase.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ButtonBase.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport {\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends LikeAnchor(\n ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <
|
|
5
|
-
"mappings": "qNAYA,OACI,QAAAA,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,cAAAC,MAAkB,qDAC3B,OAAS,aAAAC,MAAiB,mDAC1B,OACI,uBAAAC,EACA,mBAAAC,MACG,kCAMA,aAAM,mBAAmBH,EAC5BG,EAAgBD,EAAoBD,EAAW,eAAe,CAAC,CACnE,CAAE,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport {\n ObserveSlotPresence,\n ObserveSlotText,\n} from '@spectrum-web-components/shared';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends LikeAnchor(\n ObserveSlotText(ObserveSlotPresence(Focusable, '[slot=\"icon\"]'))\n) {\n protected get hasIcon(): boolean {\n return this.slotContentIsPresent;\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <span id=\"label\" ?hidden=${!this.hasLabel}>\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n if (this.hasIcon) {\n content.unshift(html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `);\n }\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n\n super.click();\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n this.anchorElement.click();\n handled = true;\n } else if (this.type !== 'button') {\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private handleRemoveActive(): void {\n this.active = false;\n }\n\n private handlePointerdown(): void {\n this.active = true;\n }\n\n private manageAnchor(): void {\n if (this.href && this.href.length > 0) {\n if (this.getAttribute('role') === 'button') {\n this.setAttribute('role', 'link');\n }\n this.removeEventListener('click', this.shouldProxyClick);\n } else {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n this.setAttribute('role', 'button');\n }\n this.addEventListener('click', this.shouldProxyClick);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = 0;\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n this.addEventListener('pointerdown', this.handlePointerdown);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n if (changed.has('label')) {\n this.setAttribute('aria-label', this.label || '');\n }\n if (changed.has('active')) {\n if (this.active) {\n this.addEventListener('focusout', this.handleRemoveActive);\n this.addEventListener('pointerup', this.handleRemoveActive);\n this.addEventListener('pointercancel', this.handleRemoveActive);\n this.addEventListener('pointerleave', this.handleRemoveActive);\n } else {\n this.removeEventListener('focusout', this.handleRemoveActive);\n this.removeEventListener('pointerup', this.handleRemoveActive);\n this.removeEventListener(\n 'pointercancel',\n this.handleRemoveActive\n );\n this.removeEventListener(\n 'pointerleave',\n this.handleRemoveActive\n );\n }\n }\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["html", "property", "query", "LikeAnchor", "Focusable", "ObserveSlotPresence", "ObserveSlotText", "content", "event", "handled", "proxy", "code", "changed", "__decorateClass"]
|
|
7
7
|
}
|