@spectrum-web-components/button 1.5.0 → 1.5.1-beta.0
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 +11 -41
- package/package.json +9 -9
- package/src/Button.dev.js +4 -6
- package/src/Button.dev.js.map +2 -2
- package/src/Button.js +1 -1
- package/src/Button.js.map +2 -2
package/README.md
CHANGED
|
@@ -140,7 +140,7 @@ fulfill the accessibility contract of the button.
|
|
|
140
140
|
#### Variants
|
|
141
141
|
|
|
142
142
|
There are many button variants to choose from in Spectrum. The `variant`
|
|
143
|
-
attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative
|
|
143
|
+
attribute defaults to `accent`, but also accepts the following value: `accent`, `primary`, `secondary`, `negative`. They display as follows:
|
|
144
144
|
|
|
145
145
|
<sp-tabs selected="accent" auto label="Variant Attribute Options">
|
|
146
146
|
<sp-tab value="accent">Accent</sp-tab>
|
|
@@ -210,40 +210,6 @@ attribute defaults to `accent`, but also accepts the following value: `accent`,
|
|
|
210
210
|
</sp-button-group>
|
|
211
211
|
```
|
|
212
212
|
|
|
213
|
-
</sp-tab-panel>
|
|
214
|
-
<sp-tab value="black">Black</sp-tab>
|
|
215
|
-
<sp-tab-panel value="black">
|
|
216
|
-
|
|
217
|
-
```html demo
|
|
218
|
-
<sp-button-group style="min-width: max-content">
|
|
219
|
-
<sp-button static-color="black">Label only</sp-button>
|
|
220
|
-
<sp-button static-color="black">
|
|
221
|
-
<sp-icon-help slot="icon"></sp-icon-help>
|
|
222
|
-
Icon + Label
|
|
223
|
-
</sp-button>
|
|
224
|
-
<sp-button static-color="black" label="Icon only" icon-only>
|
|
225
|
-
<sp-icon-help slot="icon"></sp-icon-help>
|
|
226
|
-
</sp-button>
|
|
227
|
-
</sp-button-group>
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
</sp-tab-panel>
|
|
231
|
-
<sp-tab value="white">White</sp-tab>
|
|
232
|
-
<sp-tab-panel value="white">
|
|
233
|
-
|
|
234
|
-
```html demo
|
|
235
|
-
<sp-button-group style="min-width: max-content">
|
|
236
|
-
<sp-button static-color="white">Label only</sp-button>
|
|
237
|
-
<sp-button static-color="white">
|
|
238
|
-
<sp-icon-help slot="icon"></sp-icon-help>
|
|
239
|
-
Icon + Label
|
|
240
|
-
</sp-button>
|
|
241
|
-
<sp-button static-color="white" label="Icon only" icon-only>
|
|
242
|
-
<sp-icon-help slot="icon"></sp-icon-help>
|
|
243
|
-
</sp-button>
|
|
244
|
-
</sp-button-group>
|
|
245
|
-
```
|
|
246
|
-
|
|
247
213
|
</sp-tab-panel>
|
|
248
214
|
</sp-tabs>
|
|
249
215
|
|
|
@@ -423,9 +389,11 @@ To ensure maximum contrast with the background, use static black for light backg
|
|
|
423
389
|
<sp-tab-panel value="black">
|
|
424
390
|
|
|
425
391
|
```html demo
|
|
426
|
-
<div
|
|
427
|
-
|
|
428
|
-
|
|
392
|
+
<div
|
|
393
|
+
style="background-color: var(--spectrum-docs-static-black-background-color); padding: 20px"
|
|
394
|
+
>
|
|
395
|
+
<sp-button static-color="black">Click me</sp-button>
|
|
396
|
+
<sp-button static-color="black" treatment="outline">Click me</sp-button>
|
|
429
397
|
</div>
|
|
430
398
|
```
|
|
431
399
|
|
|
@@ -434,9 +402,11 @@ To ensure maximum contrast with the background, use static black for light backg
|
|
|
434
402
|
<sp-tab-panel value="white">
|
|
435
403
|
|
|
436
404
|
```html demo
|
|
437
|
-
<div
|
|
438
|
-
|
|
439
|
-
|
|
405
|
+
<div
|
|
406
|
+
style="background-color: var(--spectrum-docs-static-white-background-color); padding: 20px"
|
|
407
|
+
>
|
|
408
|
+
<sp-button static-color="white">Click me</sp-button>
|
|
409
|
+
<sp-button static-color="white" treatment="outline">Click me</sp-button>
|
|
440
410
|
</div>
|
|
441
411
|
```
|
|
442
412
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/button",
|
|
3
|
-
"version": "1.5.0",
|
|
3
|
+
"version": "1.5.1-beta.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -89,14 +89,14 @@
|
|
|
89
89
|
"css"
|
|
90
90
|
],
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@spectrum-web-components/base": "1.5.0",
|
|
93
|
-
"@spectrum-web-components/clear-button": "1.5.0",
|
|
94
|
-
"@spectrum-web-components/close-button": "1.5.0",
|
|
95
|
-
"@spectrum-web-components/icon": "1.5.0",
|
|
96
|
-
"@spectrum-web-components/icons-ui": "1.5.0",
|
|
97
|
-
"@spectrum-web-components/progress-circle": "1.5.0",
|
|
98
|
-
"@spectrum-web-components/reactive-controllers": "1.5.0",
|
|
99
|
-
"@spectrum-web-components/shared": "1.5.0"
|
|
92
|
+
"@spectrum-web-components/base": "1.5.1-beta.0",
|
|
93
|
+
"@spectrum-web-components/clear-button": "1.5.1-beta.0",
|
|
94
|
+
"@spectrum-web-components/close-button": "1.5.1-beta.0",
|
|
95
|
+
"@spectrum-web-components/icon": "1.5.1-beta.0",
|
|
96
|
+
"@spectrum-web-components/icons-ui": "1.5.1-beta.0",
|
|
97
|
+
"@spectrum-web-components/progress-circle": "1.5.1-beta.0",
|
|
98
|
+
"@spectrum-web-components/reactive-controllers": "1.5.1-beta.0",
|
|
99
|
+
"@spectrum-web-components/shared": "1.5.1-beta.0"
|
|
100
100
|
},
|
|
101
101
|
"devDependencies": {
|
|
102
102
|
"@spectrum-css/button": "14.1.6"
|
package/src/Button.dev.js
CHANGED
|
@@ -81,24 +81,22 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
|
|
|
81
81
|
}
|
|
82
82
|
return;
|
|
83
83
|
case "white":
|
|
84
|
-
this.staticColor =
|
|
85
|
-
this.removeAttribute("variant");
|
|
84
|
+
this.staticColor = "white";
|
|
86
85
|
if (true) {
|
|
87
86
|
window.__swc.warn(
|
|
88
87
|
this,
|
|
89
|
-
`The "
|
|
88
|
+
`The "white" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='white'" instead.`,
|
|
90
89
|
"https://opensource.adobe.com/spectrum-web-components/components/button/api",
|
|
91
90
|
{ level: "deprecation" }
|
|
92
91
|
);
|
|
93
92
|
}
|
|
94
93
|
return;
|
|
95
94
|
case "black":
|
|
96
|
-
this.staticColor =
|
|
97
|
-
this.removeAttribute("variant");
|
|
95
|
+
this.staticColor = "black";
|
|
98
96
|
if (true) {
|
|
99
97
|
window.__swc.warn(
|
|
100
98
|
this,
|
|
101
|
-
`The "black"
|
|
99
|
+
`The "black" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "static-color='black'" instead.`,
|
|
102
100
|
"https://opensource.adobe.com/spectrum-web-components/components/button/api",
|
|
103
101
|
{ level: "deprecation" }
|
|
104
102
|
);
|
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 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 =
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,OAAO,kBAAkB;AACzB,SAAS,8BAA8B;AAWhC,aAAM,iBAAiB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AACO,aAAM,sBAAsB,CAAC,SAAS,OAAO;AAU7C,aAAM,eAAe,WAAW,YAAY,EAAE,eAAe,KAAK,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBxE,cAAc;AACV,UAAM;AAbV,SAAO,eAAe;AAItB,SAAO,UAAU;
|
|
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 = 'white';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"white\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"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 = 'black';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"black\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static-color='black'\" 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 * 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 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,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var e=(o,i,t,n)=>{for(var r=n>1?void 0:n?u(i,t):i,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(n?l(i,t,r):l(r))||r);return n&&r&&c(i,t,r),r};import{html as p,SizedMixin as d}from"@spectrum-web-components/base";import{property as a}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="white";return;case"black":this.staticColor="black";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()}renderButton(){return p`
|
|
2
2
|
${this.buttonContent}
|
|
3
3
|
${this.pendingStateController.renderPendingState()}
|
|
4
4
|
`}}e([a({type:String,attribute:"pending-label"})],Button.prototype,"pendingLabel",2),e([a({type:Boolean,reflect:!0,attribute:!0})],Button.prototype,"pending",2),e([a()],Button.prototype,"variant",1),e([a({reflect:!0,attribute:"static-color"})],Button.prototype,"staticColor",2),e([a({reflect:!0})],Button.prototype,"treatment",2),e([a({type:Boolean})],Button.prototype,"quiet",1),e([a({type:Boolean,attribute:"no-wrap",reflect:!0})],Button.prototype,"noWrap",2);
|
package/src/Button.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Button.ts"],
|
|
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 =
|
|
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,
|
|
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 = 'white';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"white\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"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 = 'black';\n if (window.__swc.DEBUG) {\n window.__swc.warn(\n this,\n `The \"black\" value of the \"variant\" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use \"static-color='black'\" 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 * 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 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,GA0FjB,KAAQ,SAA2B,SAYnC,KAAO,UAA8B,OAiBrC,KAAO,OAAS,GA7GZ,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,YAAc,QASnB,OACJ,IAAK,QACD,KAAK,YAAc,QASnB,OACJ,KAAK,KACD,OACJ,QACS,eAAe,SAASA,CAAO,EAGhC,KAAK,SAAWA,EAFhB,KAAK,SAAW,SAIpB,KACR,CACA,KAAK,aAAa,UAAW,KAAK,OAAO,EAC7C,CAmBA,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,cAA+B,CAC9C,OAAOR;AAAA,cACD,KAAK,aAAa;AAAA,cAClB,KAAK,uBAAuB,mBAAmB,CAAC;AAAA,SAE1D,CACJ,CApJWS,EAAA,CADNP,EAAS,CAAE,KAAM,OAAQ,UAAW,eAAgB,CAAC,GAL7C,OAMF,4BAIAO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,EAAK,CAAC,GATlD,OAUF,uBAwBIO,EAAA,CADVP,EAAS,GAjCD,OAkCE,uBAwEJO,EAAA,CADNP,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAzG7C,OA0GF,2BAMAO,EAAA,CADNP,EAAS,CAAE,QAAS,EAAK,CAAC,GA/GlB,OAgHF,yBAMIO,EAAA,CADVP,EAAS,CAAE,KAAM,OAAQ,CAAC,GArHlB,OAsHE,qBAWJO,EAAA,CADNP,EAAS,CAAE,KAAM,QAAS,UAAW,UAAW,QAAS,EAAK,CAAC,GAhIvD,OAiIF",
|
|
6
6
|
"names": ["html", "SizedMixin", "property", "ButtonBase", "buttonStyles", "PendingStateController", "variant", "quiet", "changes", "__decorateClass"]
|
|
7
7
|
}
|