@spectrum-web-components/button 0.49.0-beta.0 → 0.49.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -12
- package/package.json +10 -10
- package/src/Button.d.ts +19 -6
- package/src/Button.dev.js +42 -11
- package/src/Button.dev.js.map +2 -2
- package/src/Button.js +2 -2
- package/src/Button.js.map +2 -2
- package/src/CloseButton.d.ts +3 -3
- package/src/CloseButton.dev.js +2 -2
- package/src/CloseButton.dev.js.map +2 -2
- package/src/CloseButton.js +2 -2
- package/src/CloseButton.js.map +2 -2
- package/src/button.css.dev.js +1 -1
- package/src/button.css.dev.js.map +1 -1
- package/src/button.css.js +1 -1
- package/src/button.css.js.map +1 -1
- package/src/spectrum-button.css.dev.js +1 -1
- package/src/spectrum-button.css.dev.js.map +1 -1
- package/src/spectrum-button.css.js +1 -1
- package/src/spectrum-button.css.js.map +1 -1
- package/src/spectrum-config.js +5 -1
- package/stories/button-primary-fill.stories.js +13 -0
- package/stories/button-primary-fill.stories.js.map +2 -2
- package/stories/index.js +1 -0
- package/stories/index.js.map +2 -2
- package/stories/template.js.map +2 -2
- package/test/button.test.js +55 -5
- package/test/button.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -177,12 +177,12 @@ attribute defaults to `accent` but also accepts the following value: `accent`, `
|
|
|
177
177
|
|
|
178
178
|
```html demo
|
|
179
179
|
<sp-button-group style="min-width: max-content">
|
|
180
|
-
<sp-button static="black">Label only</sp-button>
|
|
181
|
-
<sp-button static="black">
|
|
180
|
+
<sp-button static-color="black">Label only</sp-button>
|
|
181
|
+
<sp-button static-color="black">
|
|
182
182
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
183
183
|
Icon + Label
|
|
184
184
|
</sp-button>
|
|
185
|
-
<sp-button static="black" label="Icon only" icon-only>
|
|
185
|
+
<sp-button static-color="black" label="Icon only" icon-only>
|
|
186
186
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
187
187
|
</sp-button>
|
|
188
188
|
</sp-button-group>
|
|
@@ -194,12 +194,12 @@ attribute defaults to `accent` but also accepts the following value: `accent`, `
|
|
|
194
194
|
|
|
195
195
|
```html demo
|
|
196
196
|
<sp-button-group style="min-width: max-content">
|
|
197
|
-
<sp-button static="white">Label only</sp-button>
|
|
198
|
-
<sp-button static="white">
|
|
197
|
+
<sp-button static-color="white">Label only</sp-button>
|
|
198
|
+
<sp-button static-color="white">
|
|
199
199
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
200
200
|
Icon + Label
|
|
201
201
|
</sp-button>
|
|
202
|
-
<sp-button static="white" label="Icon only" icon-only>
|
|
202
|
+
<sp-button static-color="white" label="Icon only" icon-only>
|
|
203
203
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
204
204
|
</sp-button>
|
|
205
205
|
</sp-button-group>
|
|
@@ -250,12 +250,17 @@ The `treatment` attribute accepts `fill` and `outline` as values, and defaults t
|
|
|
250
250
|
<sp-button-group
|
|
251
251
|
style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
|
|
252
252
|
>
|
|
253
|
-
<sp-button treatment="outline" static="black">Label only</sp-button>
|
|
254
|
-
<sp-button treatment="outline" static="black">
|
|
253
|
+
<sp-button treatment="outline" static-color="black">Label only</sp-button>
|
|
254
|
+
<sp-button treatment="outline" static-color="black">
|
|
255
255
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
256
256
|
Icon + Label
|
|
257
257
|
</sp-button>
|
|
258
|
-
<sp-button
|
|
258
|
+
<sp-button
|
|
259
|
+
treatment="outline"
|
|
260
|
+
static-color="black"
|
|
261
|
+
label="Icon only"
|
|
262
|
+
icon-only
|
|
263
|
+
>
|
|
259
264
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
260
265
|
</sp-button>
|
|
261
266
|
</sp-button-group>
|
|
@@ -269,12 +274,17 @@ The `treatment` attribute accepts `fill` and `outline` as values, and defaults t
|
|
|
269
274
|
<sp-button-group
|
|
270
275
|
style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
|
|
271
276
|
>
|
|
272
|
-
<sp-button treatment="outline" static="white">Label only</sp-button>
|
|
273
|
-
<sp-button treatment="outline" static="white">
|
|
277
|
+
<sp-button treatment="outline" static-color="white">Label only</sp-button>
|
|
278
|
+
<sp-button treatment="outline" static-color="white">
|
|
274
279
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
275
280
|
Icon + Label
|
|
276
281
|
</sp-button>
|
|
277
|
-
<sp-button
|
|
282
|
+
<sp-button
|
|
283
|
+
treatment="outline"
|
|
284
|
+
static-color="white"
|
|
285
|
+
label="Icon only"
|
|
286
|
+
icon-only
|
|
287
|
+
>
|
|
278
288
|
<sp-icon-help slot="icon"></sp-icon-help>
|
|
279
289
|
</sp-button>
|
|
280
290
|
</sp-button-group>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/button",
|
|
3
|
-
"version": "0.49.0-beta.
|
|
3
|
+
"version": "0.49.0-beta.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -82,16 +82,16 @@
|
|
|
82
82
|
"lit-html"
|
|
83
83
|
],
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@spectrum-web-components/base": "^0.49.0-beta.
|
|
86
|
-
"@spectrum-web-components/clear-button": "^0.49.0-beta.
|
|
87
|
-
"@spectrum-web-components/close-button": "^0.49.0-beta.
|
|
88
|
-
"@spectrum-web-components/icon": "^0.49.0-beta.
|
|
89
|
-
"@spectrum-web-components/icons-ui": "^0.49.0-beta.
|
|
90
|
-
"@spectrum-web-components/progress-circle": "^0.49.0-beta.
|
|
91
|
-
"@spectrum-web-components/shared": "^0.49.0-beta.
|
|
85
|
+
"@spectrum-web-components/base": "^0.49.0-beta.2",
|
|
86
|
+
"@spectrum-web-components/clear-button": "^0.49.0-beta.2",
|
|
87
|
+
"@spectrum-web-components/close-button": "^0.49.0-beta.2",
|
|
88
|
+
"@spectrum-web-components/icon": "^0.49.0-beta.2",
|
|
89
|
+
"@spectrum-web-components/icons-ui": "^0.49.0-beta.2",
|
|
90
|
+
"@spectrum-web-components/progress-circle": "^0.49.0-beta.2",
|
|
91
|
+
"@spectrum-web-components/shared": "^0.49.0-beta.2"
|
|
92
92
|
},
|
|
93
93
|
"devDependencies": {
|
|
94
|
-
"@spectrum-css/button": "^13.
|
|
94
|
+
"@spectrum-css/button": "^13.3.0"
|
|
95
95
|
},
|
|
96
96
|
"types": "./src/index.d.ts",
|
|
97
97
|
"customElements": "custom-elements.json",
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"./sp-*.js",
|
|
100
100
|
"./**/*.dev.js"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "2a8752a182e31dfd71c010b72bece20b0b5d1c9e"
|
|
103
103
|
}
|
package/src/Button.d.ts
CHANGED
|
@@ -2,10 +2,10 @@ import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-co
|
|
|
2
2
|
import { ButtonBase } from './ButtonBase.js';
|
|
3
3
|
import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
|
|
4
4
|
export type DeprecatedButtonVariants = 'cta' | 'overBackground';
|
|
5
|
-
export type
|
|
6
|
-
export type ButtonVariants = 'accent' | 'primary' | 'secondary' | 'negative' |
|
|
5
|
+
export type ButtonStaticColors = 'white' | 'black';
|
|
6
|
+
export type ButtonVariants = 'accent' | 'primary' | 'secondary' | 'negative' | ButtonStaticColors | DeprecatedButtonVariants;
|
|
7
7
|
export declare const VALID_VARIANTS: string[];
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const VALID_STATIC_COLORS: string[];
|
|
9
9
|
export type ButtonTreatments = 'fill' | 'outline';
|
|
10
10
|
declare const Button_base: typeof ButtonBase & {
|
|
11
11
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
@@ -34,18 +34,31 @@ export declare class Button extends Button_base {
|
|
|
34
34
|
get variant(): ButtonVariants;
|
|
35
35
|
set variant(variant: ButtonVariants);
|
|
36
36
|
private _variant;
|
|
37
|
-
static: 'black' | 'white' | undefined;
|
|
38
37
|
/**
|
|
39
|
-
*
|
|
38
|
+
* @deprecated Use `staticColor` instead.
|
|
39
|
+
*/
|
|
40
|
+
static?: 'black' | 'white';
|
|
41
|
+
/**
|
|
42
|
+
* The static color variant to use for this button.
|
|
43
|
+
*/
|
|
44
|
+
staticColor?: 'black' | 'white';
|
|
45
|
+
/**
|
|
46
|
+
* The visual treatment to apply to this button.
|
|
40
47
|
*/
|
|
41
48
|
treatment: ButtonTreatments;
|
|
42
49
|
/**
|
|
43
50
|
* Style this button to be less obvious
|
|
44
51
|
*/
|
|
45
52
|
set quiet(quiet: boolean);
|
|
53
|
+
/**
|
|
54
|
+
* Disables text wrapping within the button component's label.
|
|
55
|
+
* Please note that this option is not a part of the design specification
|
|
56
|
+
* and should be used carefully, with consideration of this overflow behavior
|
|
57
|
+
* and the readability of the button's content.
|
|
58
|
+
*/
|
|
59
|
+
noWrap: boolean;
|
|
46
60
|
get quiet(): boolean;
|
|
47
61
|
protected firstUpdated(changes: PropertyValues<this>): void;
|
|
48
|
-
protected update(changes: PropertyValues): void;
|
|
49
62
|
protected updated(changed: PropertyValues): void;
|
|
50
63
|
protected renderButton(): TemplateResult;
|
|
51
64
|
}
|
package/src/Button.dev.js
CHANGED
|
@@ -25,7 +25,7 @@ export const VALID_VARIANTS = [
|
|
|
25
25
|
"white",
|
|
26
26
|
"black"
|
|
27
27
|
];
|
|
28
|
-
export const
|
|
28
|
+
export const VALID_STATIC_COLORS = ["white", "black"];
|
|
29
29
|
export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
|
|
30
30
|
/**
|
|
31
31
|
* Initializes the `PendingStateController` for the Button component.
|
|
@@ -37,6 +37,7 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
|
|
|
37
37
|
this.pending = false;
|
|
38
38
|
this._variant = "accent";
|
|
39
39
|
this.treatment = "fill";
|
|
40
|
+
this.noWrap = false;
|
|
40
41
|
this.pendingStateController = new PendingStateController(this);
|
|
41
42
|
}
|
|
42
43
|
static get styles() {
|
|
@@ -61,31 +62,45 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
|
|
|
61
62
|
window.__swc.warn(
|
|
62
63
|
this,
|
|
63
64
|
`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.`,
|
|
64
|
-
"https://opensource.adobe.com/spectrum-web-components/components/button/#variants"
|
|
65
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button/#variants",
|
|
66
|
+
{ level: "deprecation" }
|
|
65
67
|
);
|
|
66
68
|
}
|
|
67
69
|
break;
|
|
68
70
|
case "overBackground":
|
|
69
71
|
this.removeAttribute("variant");
|
|
70
|
-
this.
|
|
72
|
+
this.staticColor = "white";
|
|
71
73
|
this.treatment = "outline";
|
|
72
74
|
if (true) {
|
|
73
75
|
window.__swc.warn(
|
|
74
76
|
this,
|
|
75
|
-
`The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "
|
|
76
|
-
"https://opensource.adobe.com/spectrum-web-components/components/button
|
|
77
|
+
`The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`,
|
|
78
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button",
|
|
79
|
+
{ level: "deprecation" }
|
|
77
80
|
);
|
|
78
81
|
}
|
|
79
82
|
return;
|
|
80
83
|
case "white":
|
|
84
|
+
this.staticColor = variant;
|
|
85
|
+
this.removeAttribute("variant");
|
|
86
|
+
if (true) {
|
|
87
|
+
window.__swc.warn(
|
|
88
|
+
this,
|
|
89
|
+
`The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
|
|
90
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button/api",
|
|
91
|
+
{ level: "deprecation" }
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
return;
|
|
81
95
|
case "black":
|
|
82
|
-
this.
|
|
96
|
+
this.staticColor = variant;
|
|
83
97
|
this.removeAttribute("variant");
|
|
84
98
|
if (true) {
|
|
85
99
|
window.__swc.warn(
|
|
86
100
|
this,
|
|
87
|
-
`The "black" and "white" values of the "variant" attribute on <${this.localName}>
|
|
88
|
-
"https://opensource.adobe.com/spectrum-web-components/components/button
|
|
101
|
+
`The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
|
|
102
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button/api",
|
|
103
|
+
{ level: "deprecation" }
|
|
89
104
|
);
|
|
90
105
|
}
|
|
91
106
|
return;
|
|
@@ -116,11 +131,21 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
|
|
|
116
131
|
this.pendingStateController.hostUpdated();
|
|
117
132
|
}
|
|
118
133
|
}
|
|
119
|
-
update(changes) {
|
|
120
|
-
super.update(changes);
|
|
121
|
-
}
|
|
122
134
|
updated(changed) {
|
|
123
135
|
super.updated(changed);
|
|
136
|
+
if (changed.has("static")) {
|
|
137
|
+
if (this.static) {
|
|
138
|
+
this.staticColor = this.static;
|
|
139
|
+
if (true) {
|
|
140
|
+
window.__swc.warn(
|
|
141
|
+
this,
|
|
142
|
+
`The "static" attribute/property on <${this.localName}> has been deprecated. Use "static-color" instead. "static" will be removed in a future release.`,
|
|
143
|
+
"https://opensource.adobe.com/spectrum-web-components/components/button/api",
|
|
144
|
+
{ level: "deprecation" }
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
124
149
|
}
|
|
125
150
|
renderButton() {
|
|
126
151
|
return html`
|
|
@@ -141,10 +166,16 @@ __decorateClass([
|
|
|
141
166
|
__decorateClass([
|
|
142
167
|
property({ type: String, reflect: true })
|
|
143
168
|
], Button.prototype, "static", 2);
|
|
169
|
+
__decorateClass([
|
|
170
|
+
property({ reflect: true, attribute: "static-color" })
|
|
171
|
+
], Button.prototype, "staticColor", 2);
|
|
144
172
|
__decorateClass([
|
|
145
173
|
property({ reflect: true })
|
|
146
174
|
], Button.prototype, "treatment", 2);
|
|
147
175
|
__decorateClass([
|
|
148
176
|
property({ type: Boolean })
|
|
149
177
|
], Button.prototype, "quiet", 1);
|
|
178
|
+
__decorateClass([
|
|
179
|
+
property({ type: Boolean, attribute: "no-wrap", reflect: true })
|
|
180
|
+
], Button.prototype, "noWrap", 2);
|
|
150
181
|
//# sourceMappingURL=Button.dev.js.map
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.dev.js'\nimport buttonStyles from './button.css.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStaticColors = 'white' | 'black';\nexport type ButtonVariants =\n | 'accent'\n | 'primary'\n | 'secondary'\n | 'negative'\n | ButtonStaticColors\n | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n 'accent',\n 'primary',\n 'secondary',\n 'negative',\n 'white',\n 'black',\n];\nexport const VALID_STATIC_COLORS = ['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(ButtonBase, { noDefaultSize: true }) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles];\n }\n\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n // Use this property to set the button into a pending state\n @property({ type: Boolean, reflect: true, attribute: true })\n public pending = false;\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Button component.\n * The `PendingStateController` manages the pending state of the Button.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public override click(): void {\n if (this.pending) {\n return;\n }\n super.click();\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 { level: 'deprecation' }\n );\n }\n break;\n case 'overBackground':\n this.removeAttribute('variant');\n this.staticColor = '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 \"staticColor='white'\" with \"treatment='outline'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button',\n { level: 'deprecation' }\n );\n }\n return;\n case 'white':\n this.staticColor = 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}> have been deprecated and will be removed in a future release. Use \"static-color='black'\" or \"static-color='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\n );\n }\n return;\n case 'black':\n this.staticColor = 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}> have been deprecated and will be removed in a future release. Use \"static-color='black'\" or \"static-color='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\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 /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ type: String, reflect: true })\n public static?: 'black' | 'white';\n\n /**\n * The static color variant to use for this button.\n */\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'black' | 'white';\n\n /**\n * The visual treatment 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 /**\n * Disables text wrapping within the button component's label.\n * Please note that this option is not a part of the design specification\n * and should be used carefully, with consideration of this overflow behavior\n * and the readability of the button's content.\n */\n @property({ type: Boolean, attribute: 'no-wrap', reflect: true })\n public noWrap = false;\n\n public get quiet(): boolean {\n return this.treatment === 'outline';\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n // There is no Spectrum design context for an `<sp-button>` without a variant\n // apply one manually when a consumer has not applied one themselves.\n\n if (!this.hasAttribute('variant')) {\n this.setAttribute('variant', this.variant);\n }\n if (this.pending) {\n this.pendingStateController.hostUpdated();\n }\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('static')) {\n if (this.static) {\n this.staticColor = this.static;\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"static\" attribute/property on <${this.localName}> has been deprecated. Use \"static-color\" instead. \"static\" will be removed in a future release.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${this.pendingStateController.renderPendingState()}\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Button.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var e=(o,a,t,n)=>{for(var i=n>1?void 0:n?p(a,t):a,s=o.length-1,c;s>=0;s--)(c=o[s])&&(i=(n?c(a,t,i):c(i))||i);return n&&i&&l(a,t,i),i};import{html as u,SizedMixin as d}from"@spectrum-web-components/base";import{property as r}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as h}from"./ButtonBase.js";import b from"./button.css.js";import{PendingStateController as w}from"@spectrum-web-components/reactive-controllers/src/PendingState.js";export const VALID_VARIANTS=["accent","primary","secondary","negative","white","black"],VALID_STATIC_COLORS=["white","black"];export class Button extends d(h,{noDefaultSize:!0}){constructor(){super();this.pendingLabel="Pending";this.pending=!1;this._variant="accent";this.treatment="fill";this.noWrap=!1;this.pendingStateController=new w(this)}static get styles(){return[...super.styles,b]}click(){this.pending||super.click()}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.staticColor="white",this.treatment="outline";return;case"white":this.staticColor=t,this.removeAttribute("variant");return;case"black":this.staticColor=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"}get quiet(){return this.treatment==="outline"}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("variant")||this.setAttribute("variant",this.variant),this.pending&&this.pendingStateController.hostUpdated()}updated(t){super.updated(t),t.has("static")&&this.static&&(this.staticColor=this.static)}renderButton(){return u`
|
|
2
2
|
${this.buttonContent}
|
|
3
3
|
${this.pendingStateController.renderPendingState()}
|
|
4
|
-
`}}
|
|
4
|
+
`}}e([r({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),e([r({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),e([r()],Button.prototype,"variant",1),e([r({type:String,reflect:!0})],Button.prototype,"static",2),e([r({reflect:!0,attribute:"static-color"})],Button.prototype,"staticColor",2),e([r({reflect:!0})],Button.prototype,"treatment",2),e([r({type:Boolean})],Button.prototype,"quiet",1),e([r({type:Boolean,attribute:"no-wrap",reflect:!0})],Button.prototype,"noWrap",2);
|
|
5
5
|
//# 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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from './ButtonBase.js';\nimport buttonStyles from './button.css.js';\nimport { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\n\nexport type DeprecatedButtonVariants = 'cta' | 'overBackground';\nexport type ButtonStaticColors = 'white' | 'black';\nexport type ButtonVariants =\n | 'accent'\n | 'primary'\n | 'secondary'\n | 'negative'\n | ButtonStaticColors\n | DeprecatedButtonVariants;\nexport const VALID_VARIANTS = [\n 'accent',\n 'primary',\n 'secondary',\n 'negative',\n 'white',\n 'black',\n];\nexport const VALID_STATIC_COLORS = ['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(ButtonBase, { noDefaultSize: true }) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles];\n }\n\n @property({ type: String, attribute: 'pending-label' })\n public pendingLabel = 'Pending';\n\n // Use this property to set the button into a pending state\n @property({ type: Boolean, reflect: true, attribute: true })\n public pending = false;\n\n public pendingStateController: PendingStateController<this>;\n\n /**\n * Initializes the `PendingStateController` for the Button component.\n * The `PendingStateController` manages the pending state of the Button.\n */\n constructor() {\n super();\n this.pendingStateController = new PendingStateController(this);\n }\n\n public override click(): void {\n if (this.pending) {\n return;\n }\n super.click();\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 { level: 'deprecation' }\n );\n }\n break;\n case 'overBackground':\n this.removeAttribute('variant');\n this.staticColor = '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 \"staticColor='white'\" with \"treatment='outline'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button',\n { level: 'deprecation' }\n );\n }\n return;\n case 'white':\n this.staticColor = 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}> have been deprecated and will be removed in a future release. Use \"static-color='black'\" or \"static-color='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\n );\n }\n return;\n case 'black':\n this.staticColor = 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}> have been deprecated and will be removed in a future release. Use \"static-color='black'\" or \"static-color='white'\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\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 /**\n * @deprecated Use `staticColor` instead.\n */\n @property({ type: String, reflect: true })\n public static?: 'black' | 'white';\n\n /**\n * The static color variant to use for this button.\n */\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'black' | 'white';\n\n /**\n * The visual treatment 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 /**\n * Disables text wrapping within the button component's label.\n * Please note that this option is not a part of the design specification\n * and should be used carefully, with consideration of this overflow behavior\n * and the readability of the button's content.\n */\n @property({ type: Boolean, attribute: 'no-wrap', reflect: true })\n public noWrap = false;\n\n public get quiet(): boolean {\n return this.treatment === 'outline';\n }\n\n protected override firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n // There is no Spectrum design context for an `<sp-button>` without a variant\n // apply one manually when a consumer has not applied one themselves.\n\n if (!this.hasAttribute('variant')) {\n this.setAttribute('variant', this.variant);\n }\n if (this.pending) {\n this.pendingStateController.hostUpdated();\n }\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('static')) {\n if (this.static) {\n this.staticColor = this.static;\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"static\" attribute/property on <${this.localName}> has been deprecated. Use \"static-color\" instead. \"static\" will be removed in a future release.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/button/api',\n { level: 'deprecation' }\n );\n }\n }\n }\n }\n\n protected override renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${this.pendingStateController.renderPendingState()}\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAEI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAkB,kBACzB,OAAS,0BAAAC,MAA8B,oEAWhC,aAAM,eAAiB,CAC1B,SACA,UACA,YACA,WACA,QACA,OACJ,EACa,oBAAsB,CAAC,QAAS,OAAO,EAU7C,aAAM,eAAeJ,EAAWE,EAAY,CAAE,cAAe,EAAK,CAAC,CAAE,CAkBxE,aAAc,CACV,MAAM,EAbV,KAAO,aAAe,UAItB,KAAO,QAAU,GA4FjB,KAAQ,SAA2B,SAkBnC,KAAO,UAA8B,OAiBrC,KAAO,OAAS,GArHZ,KAAK,uBAAyB,IAAIE,EAAuB,IAAI,CACjE,CApBA,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQD,CAAY,CACzC,CAoBgB,OAAc,CACtB,KAAK,SAGT,MAAM,MAAM,CAChB,CAMA,IAAW,SAA0B,CACjC,OAAO,KAAK,QAChB,CACA,IAAW,QAAQE,EAAyB,CACxC,GAAIA,IAAY,KAAK,QAGrB,QADA,KAAK,cAAc,UAAW,KAAK,OAAO,EAClCA,EAAS,CACb,IAAK,MACD,KAAK,SAAW,SAShB,MACJ,IAAK,iBACD,KAAK,gBAAgB,SAAS,EAC9B,KAAK,YAAc,QACnB,KAAK,UAAY,UASjB,OACJ,IAAK,QACD,KAAK,YAAcA,EACnB,KAAK,gBAAgB,SAAS,EAS9B,OACJ,IAAK,QACD,KAAK,YAAcA,EACnB,KAAK,gBAAgB,SAAS,EAS9B,OACJ,KAAK,KACD,OACJ,QACS,eAAe,SAASA,CAAO,EAGhC,KAAK,SAAWA,EAFhB,KAAK,SAAW,SAIpB,KACR,CACA,KAAK,aAAa,UAAW,KAAK,OAAO,EAC7C,CAyBA,IAAW,MAAMC,EAAgB,CAC7B,KAAK,UAAYA,EAAQ,UAAY,MACzC,CAWA,IAAW,OAAiB,CACxB,OAAO,KAAK,YAAc,SAC9B,CAEmB,aAAaC,EAAqC,CACjE,MAAM,aAAaA,CAAO,EAIrB,KAAK,aAAa,SAAS,GAC5B,KAAK,aAAa,UAAW,KAAK,OAAO,EAEzC,KAAK,SACL,KAAK,uBAAuB,YAAY,CAEhD,CAEmB,QAAQC,EAA+B,CACtD,MAAM,QAAQA,CAAO,EAEjBA,EAAQ,IAAI,QAAQ,GAChB,KAAK,SACL,KAAK,YAAc,KAAK,OAWpC,CAEmB,cAA+B,CAC9C,OAAOT;AAAA,cACD,KAAK,aAAa;AAAA,cAClB,KAAK,uBAAuB,mBAAmB,CAAC;AAAA,SAE1D,CACJ,CA9KWU,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,CAAC,GAL7C,OAMF,4BAIAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,EAAK,CAAC,GATlD,OAUF,uBAwBIQ,EAAA,CADVR,EAAS,GAjCD,OAkCE,uBA0EJQ,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA3GhC,OA4GF,sBAMAQ,EAAA,CADNR,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAjH7C,OAkHF,2BAMAQ,EAAA,CADNR,EAAS,CAAE,QAAS,EAAK,CAAC,GAvHlB,OAwHF,yBAMIQ,EAAA,CADVR,EAAS,CAAE,KAAM,OAAQ,CAAC,GA7HlB,OA8HE,qBAWJQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,UAAW,UAAW,QAAS,EAAK,CAAC,GAxIvD,OAyIF",
|
|
6
6
|
"names": ["html", "SizedMixin", "property", "ButtonBase", "buttonStyles", "PendingStateController", "variant", "quiet", "changes", "changed", "__decorateClass"]
|
|
7
7
|
}
|
package/src/CloseButton.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';
|
|
|
4
4
|
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';
|
|
5
5
|
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';
|
|
6
6
|
import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
|
|
7
|
-
import type {
|
|
7
|
+
import type { ButtonStaticColors } from './Button.js';
|
|
8
8
|
declare const CloseButton_base: typeof StyledButton & {
|
|
9
9
|
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
10
10
|
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
@@ -20,8 +20,8 @@ export declare class CloseButton extends CloseButton_base {
|
|
|
20
20
|
/**
|
|
21
21
|
* The visual variant to apply to this button.
|
|
22
22
|
*/
|
|
23
|
-
variant:
|
|
24
|
-
|
|
23
|
+
variant: ButtonStaticColors | '';
|
|
24
|
+
staticColor?: 'black' | 'white';
|
|
25
25
|
protected get buttonContent(): TemplateResult[];
|
|
26
26
|
}
|
|
27
27
|
export {};
|
package/src/CloseButton.dev.js
CHANGED
|
@@ -65,6 +65,6 @@ __decorateClass([
|
|
|
65
65
|
property({ reflect: true })
|
|
66
66
|
], CloseButton.prototype, "variant", 2);
|
|
67
67
|
__decorateClass([
|
|
68
|
-
property({
|
|
69
|
-
], CloseButton.prototype, "
|
|
68
|
+
property({ reflect: true, attribute: "static-color" })
|
|
69
|
+
], CloseButton.prototype, "staticColor", 2);
|
|
70
70
|
//# sourceMappingURL=CloseButton.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["CloseButton.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 CSSResultArray,\n html,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.dev.js'\nimport buttonStyles from '@spectrum-web-components/close-button/src/close-button.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,kBAAkB;AACzB,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,uBAAuB;AAG9B,MAAM,YAAkD;AAAA,EACpD,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMd;AAQO,aAAM,oBAAoB,WAAW,cAAc;AAAA,EACtD,eAAe;AACnB,CAAC,EAAE;AAAA,EAFI;AAAA;AAWH,SAAO,
|
|
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 CSSResultArray,\n html,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.dev.js'\nimport buttonStyles from '@spectrum-web-components/close-button/src/close-button.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport type { ButtonStaticColors } from './Button.dev.js'\n\nconst crossIcon: Record<string, () => TemplateResult> = {\n s: () => html`\n <sp-icon-cross200\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross200\"\n ></sp-icon-cross200>\n `,\n m: () => html`\n <sp-icon-cross300\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross300\"\n ></sp-icon-cross300>\n `,\n l: () => html`\n <sp-icon-cross400\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross400\"\n ></sp-icon-cross400>\n `,\n xl: () => html`\n <sp-icon-cross500\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross500\"\n ></sp-icon-cross500>\n `,\n};\n\n/**\n * @element sp-close-button\n *\n * @slot - text label of the Close Button\n * @slot icon - The icon to use for Close Button\n */\nexport class CloseButton extends SizedMixin(StyledButton, {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles, crossMediumStyles];\n }\n\n /**\n * The visual variant to apply to this button.\n */\n @property({ reflect: true })\n public variant: ButtonStaticColors | '' = '';\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'black' | 'white';\n\n protected override get buttonContent(): TemplateResult[] {\n return [crossIcon[this.size]()];\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,kBAAkB;AACzB,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,uBAAuB;AAG9B,MAAM,YAAkD;AAAA,EACpD,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,GAAG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMd;AAQO,aAAM,oBAAoB,WAAW,cAAc;AAAA,EACtD,eAAe;AACnB,CAAC,EAAE;AAAA,EAFI;AAAA;AAWH,SAAO,UAAmC;AAAA;AAAA,EAR1C,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,cAAc,iBAAiB;AAAA,EAC5D;AAAA,EAWA,IAAuB,gBAAkC;AACrD,WAAO,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;AAAA,EAClC;AACJ;AARW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAVlB,YAWF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAb7C,YAcF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/CloseButton.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(c,s,e,o)=>{for(var t=o>1?void 0:o?u(s,e):s,i=c.length-1,n;i>=0;i--)(n=c[i])&&(t=(o?n(s,e,t):n(t))||t);return o&&t&&m(s,e,t),t};import{html as r,SizedMixin as a}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{StyledButton as S}from"./StyledButton.js";import f from"@spectrum-web-components/close-button/src/close-button.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-cross.css.js";const C={s:()=>r`
|
|
2
2
|
<sp-icon-cross200
|
|
3
3
|
slot="icon"
|
|
4
4
|
class="icon spectrum-UIIcon-Cross200"
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
slot="icon"
|
|
19
19
|
class="icon spectrum-UIIcon-Cross500"
|
|
20
20
|
></sp-icon-cross500>
|
|
21
|
-
`};export class CloseButton extends a(S,{noDefaultSize:!0}){constructor(){super(...arguments);this.variant=""}static get styles(){return[...super.styles,
|
|
21
|
+
`};export class CloseButton extends a(S,{noDefaultSize:!0}){constructor(){super(...arguments);this.variant=""}static get styles(){return[...super.styles,f,y]}get buttonContent(){return[C[this.size]()]}}l([p({reflect:!0})],CloseButton.prototype,"variant",2),l([p({reflect:!0,attribute:"static-color"})],CloseButton.prototype,"staticColor",2);
|
|
22
22
|
//# sourceMappingURL=CloseButton.js.map
|
package/src/CloseButton.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["CloseButton.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 CSSResultArray,\n html,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.js';\nimport buttonStyles from '@spectrum-web-components/close-button/src/close-button.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport type {
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,oBAC7B,OAAOC,MAAkB,gEACzB,MAAO,8DACP,MAAO,8DACP,MAAO,8DACP,MAAO,8DACP,OAAOC,MAAuB,+DAG9B,MAAMC,EAAkD,CACpD,EAAG,IAAMN;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,GAAI,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMd,EAQO,aAAM,oBAAoBC,EAAWE,EAAc,CACtD,cAAe,EACnB,CAAC,CAAE,CAFI,kCAWH,KAAO,
|
|
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 CSSResultArray,\n html,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { StyledButton } from './StyledButton.js';\nimport buttonStyles from '@spectrum-web-components/close-button/src/close-button.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';\nimport crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';\nimport type { ButtonStaticColors } from './Button.js';\n\nconst crossIcon: Record<string, () => TemplateResult> = {\n s: () => html`\n <sp-icon-cross200\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross200\"\n ></sp-icon-cross200>\n `,\n m: () => html`\n <sp-icon-cross300\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross300\"\n ></sp-icon-cross300>\n `,\n l: () => html`\n <sp-icon-cross400\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross400\"\n ></sp-icon-cross400>\n `,\n xl: () => html`\n <sp-icon-cross500\n slot=\"icon\"\n class=\"icon spectrum-UIIcon-Cross500\"\n ></sp-icon-cross500>\n `,\n};\n\n/**\n * @element sp-close-button\n *\n * @slot - text label of the Close Button\n * @slot icon - The icon to use for Close Button\n */\nexport class CloseButton extends SizedMixin(StyledButton, {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [...super.styles, buttonStyles, crossMediumStyles];\n }\n\n /**\n * The visual variant to apply to this button.\n */\n @property({ reflect: true })\n public variant: ButtonStaticColors | '' = '';\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'black' | 'white';\n\n protected override get buttonContent(): TemplateResult[] {\n return [crossIcon[this.size]()];\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,oBAC7B,OAAOC,MAAkB,gEACzB,MAAO,8DACP,MAAO,8DACP,MAAO,8DACP,MAAO,8DACP,OAAOC,MAAuB,+DAG9B,MAAMC,EAAkD,CACpD,EAAG,IAAMN;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,EAAG,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,GAAI,IAAMA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMd,EAQO,aAAM,oBAAoBC,EAAWE,EAAc,CACtD,cAAe,EACnB,CAAC,CAAE,CAFI,kCAWH,KAAO,QAAmC,GAR1C,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,EAAcC,CAAiB,CAC5D,CAWA,IAAuB,eAAkC,CACrD,MAAO,CAACC,EAAU,KAAK,IAAI,EAAE,CAAC,CAClC,CACJ,CARWC,EAAA,CADNL,EAAS,CAAE,QAAS,EAAK,CAAC,GAVlB,YAWF,uBAGAK,EAAA,CADNL,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAb7C,YAcF",
|
|
6
6
|
"names": ["html", "SizedMixin", "property", "StyledButton", "buttonStyles", "crossMediumStyles", "crossIcon", "__decorateClass"]
|
|
7
7
|
}
|