@cas-smartdesign/button 5.1.0 → 5.2.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.
|
@@ -72,8 +72,9 @@ var window;(window||={})["@cas-smartdesign/button"]=(()=>{var n=Object.definePro
|
|
|
72
72
|
outline: 1px dashed #111;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
:
|
|
76
|
-
|
|
75
|
+
.icon:not([src]),
|
|
76
|
+
.icon[src=""],
|
|
77
|
+
.icon[src="data:,"] {
|
|
77
78
|
display: none;
|
|
78
79
|
}
|
|
79
80
|
|
|
@@ -96,7 +97,9 @@ var window;(window||={})["@cas-smartdesign/button"]=(()=>{var n=Object.definePro
|
|
|
96
97
|
max-width: var(--sd-button-max-icon-size, 32px);
|
|
97
98
|
}
|
|
98
99
|
</style>
|
|
99
|
-
<
|
|
100
|
+
<slot name="icon">
|
|
101
|
+
<img class="icon" src="data:," alt part="icon" />
|
|
102
|
+
</slot>
|
|
100
103
|
<div class="content">
|
|
101
104
|
<slot></slot>
|
|
102
105
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../element-base/element-base.ts", "../button.html", "../button.ts"],
|
|
4
|
-
"sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t:
|
|
5
|
-
"mappings": "mfA8BO,IAAeA,EAAf,MAAeA,UAAoB,WAAY,CAO1C,kBAAwC,CAC5C,IAAMC,EAAK,KAAK,GAAA,EAChB,GAAID,EAAY,eAAeC,CAAE,EAC7B,OAAOD,EAAY,eAAeC,CAAE,EAExC,IAAMC,EAAW,KAAK,SAAA,EAEtB,OAAK,OAAe,UAEf,OAAe,SAAS,gBAAgBA,EAAU,KAAK,GAAA,CAAI,EAEhEF,EAAY,eAAeC,CAAE,EAAIC,EAC1BA,CACX,CAEO,mBAAoB,CACvB,IAAMA,EAAW,KAAK,iBAAA,EAEjB,OAAe,UAEf,OAAe,SAAS,aAAa,IAAI,EAEzC,KAAK,aACN,KAAK,aAAa,CAAE,KAAM,MAAA,CAAQ,EAClC,KAAK,WAAW,YAAY,SAAS,WAAWA,EAAS,QAAS,EAAI,CAAC,EACvE,sBAAsB,IAAM,KAAK,cAAc,IAAI,YAAyB,OAAO,CAAC,CAAC,EAE7F,CAEO,UAAUC,EAAmB,CAC5B,KAAK,WACLA,EAAA,EAEA,KAAK,iBAAiB,QAAS,IAAMA,EAAA,CAAO,CAEpD,CACJ,EAvCIH,EAAwB,eAEpB,CAAA,EAND,IAAeI,EAAfJ,EC9BP,IAAAK,EAAe
|
|
4
|
+
"sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t.icon:not([src]),\\n\\t.icon[src=\\\"\\\"],\\n\\t.icon[src=\\\"data:,\\\"] {\\n\\t\\tdisplay: none;\\n\\t}\\n\\n\\t.content {\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tmin-width: 0px;\\n\\t}\\n\\n\\t.content ::slotted(*) {\\n\\t\\tmargin-left: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.content ::slotted(*:last-child) {\\n\\t\\tmargin-right: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.icon {\\n\\t\\tmax-height: var(--sd-button-max-icon-size, 32px);\\n\\t\\tmax-width: var(--sd-button-max-icon-size, 32px);\\n\\t}\\n</style>\\n<slot name=\\\"icon\\\">\\n\\t<img class=\\\"icon\\\" src=\\\"data:,\\\" alt part=\\\"icon\\\" />\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"", "import { ElementBase } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Button.ID]: Button;\n }\n}\n\nexport class Button extends ElementBase {\n public static readonly ID = \"sd-button\";\n private _image: HTMLImageElement;\n private _isSpaceOrEnterKeyDown = false;\n\n public get imageElement() {\n return this._image;\n }\n\n public get icon(): string {\n return this.getAttribute(\"icon\");\n }\n\n public set icon(icon: string) {\n if (this.icon !== icon) {\n if (icon) {\n this.setAttribute(\"icon\", icon);\n } else {\n this.removeAttribute(\"icon\");\n }\n this.updateIcon();\n }\n }\n\n public get primary(): boolean {\n return this.hasAttribute(\"primary\");\n }\n\n public set primary(primary: boolean) {\n if (primary) {\n this.setAttribute(\"primary\", \"\");\n } else {\n this.removeAttribute(\"primary\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n public is(): string {\n return Button.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n this.addEventListener(\"keydown\", (e) => {\n if (this.isSpaceOrEnter(e)) {\n this._isSpaceOrEnterKeyDown = true;\n e.preventDefault(); // prevent potential scroll-down triggered by space\n }\n });\n this.addEventListener(\"keyup\", (e) => {\n if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n this._isSpaceOrEnterKeyDown = false;\n this.click();\n }\n });\n // As Button is not an input element, click is fired even in disabled state\n this.addEventListener(\n \"click\",\n (event) => {\n if (this.disabled || this.hasAttribute(\"disabled\")) {\n event.stopImmediatePropagation();\n return;\n }\n\n const type = this.getAttribute(\"type\")?.toLowerCase()?.trim();\n\n if (type !== \"submit\" && type !== \"reset\") {\n return;\n }\n\n const form = this.closest(\"form\");\n\n if (form && type === \"submit\") {\n form.requestSubmit();\n }\n\n if (form && type === \"reset\") {\n form.reset();\n }\n },\n { capture: true },\n );\n }\n\n private isSpaceOrEnter(event: KeyboardEvent): boolean {\n switch (event.key) {\n case \" \":\n case \"Space\":\n case \"Enter\":\n return true;\n default:\n return false;\n }\n }\n\n public click() {\n if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n super.click();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n\n this._image = this.shadowRoot.querySelector(\".icon\") as HTMLImageElement;\n\n this.updateIcon();\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n }\n\n public attributeChangedCallback(): void {\n this.updateIcon();\n }\n\n private updateIcon() {\n if (this._image) {\n const iconSrc = this.getAttribute(\"icon\");\n if (iconSrc) {\n this._image.src = iconSrc;\n }\n }\n }\n}\n\nif (!customElements.get(Button.ID)) {\n customElements.define(Button.ID, Button);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_ElementBase", "is", "template", "actor", "ElementBase", "htmlTemplate", "_Button", "ElementBase", "e", "event", "type", "form", "icon", "primary", "disabled", "template", "iconSrc", "Button"]
|
|
7
7
|
}
|
package/dist/button.mjs
CHANGED
|
@@ -73,8 +73,9 @@ const a = `<style>
|
|
|
73
73
|
outline: 1px dashed #111;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
:
|
|
77
|
-
|
|
76
|
+
.icon:not([src]),
|
|
77
|
+
.icon[src=""],
|
|
78
|
+
.icon[src="data:,"] {
|
|
78
79
|
display: none;
|
|
79
80
|
}
|
|
80
81
|
|
|
@@ -97,7 +98,9 @@ const a = `<style>
|
|
|
97
98
|
max-width: var(--sd-button-max-icon-size, 32px);
|
|
98
99
|
}
|
|
99
100
|
</style>
|
|
100
|
-
<
|
|
101
|
+
<slot name="icon">
|
|
102
|
+
<img class="icon" src="data:," alt part="icon" />
|
|
103
|
+
</slot>
|
|
101
104
|
<div class="content">
|
|
102
105
|
<slot></slot>
|
|
103
106
|
</div>
|
package/dist/button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.mjs","sources":["../button.html?raw","../button.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t:
|
|
1
|
+
{"version":3,"file":"button.mjs","sources":["../button.html?raw","../button.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t.icon:not([src]),\\n\\t.icon[src=\\\"\\\"],\\n\\t.icon[src=\\\"data:,\\\"] {\\n\\t\\tdisplay: none;\\n\\t}\\n\\n\\t.content {\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tmin-width: 0px;\\n\\t}\\n\\n\\t.content ::slotted(*) {\\n\\t\\tmargin-left: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.content ::slotted(*:last-child) {\\n\\t\\tmargin-right: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.icon {\\n\\t\\tmax-height: var(--sd-button-max-icon-size, 32px);\\n\\t\\tmax-width: var(--sd-button-max-icon-size, 32px);\\n\\t}\\n</style>\\n<slot name=\\\"icon\\\">\\n\\t<img class=\\\"icon\\\" src=\\\"data:,\\\" alt part=\\\"icon\\\" />\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"","import { ElementBase } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Button.ID]: Button;\n }\n}\n\nexport class Button extends ElementBase {\n public static readonly ID = \"sd-button\";\n private _image: HTMLImageElement;\n private _isSpaceOrEnterKeyDown = false;\n\n public get imageElement() {\n return this._image;\n }\n\n public get icon(): string {\n return this.getAttribute(\"icon\");\n }\n\n public set icon(icon: string) {\n if (this.icon !== icon) {\n if (icon) {\n this.setAttribute(\"icon\", icon);\n } else {\n this.removeAttribute(\"icon\");\n }\n this.updateIcon();\n }\n }\n\n public get primary(): boolean {\n return this.hasAttribute(\"primary\");\n }\n\n public set primary(primary: boolean) {\n if (primary) {\n this.setAttribute(\"primary\", \"\");\n } else {\n this.removeAttribute(\"primary\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n public is(): string {\n return Button.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n this.addEventListener(\"keydown\", (e) => {\n if (this.isSpaceOrEnter(e)) {\n this._isSpaceOrEnterKeyDown = true;\n e.preventDefault(); // prevent potential scroll-down triggered by space\n }\n });\n this.addEventListener(\"keyup\", (e) => {\n if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n this._isSpaceOrEnterKeyDown = false;\n this.click();\n }\n });\n // As Button is not an input element, click is fired even in disabled state\n this.addEventListener(\n \"click\",\n (event) => {\n if (this.disabled || this.hasAttribute(\"disabled\")) {\n event.stopImmediatePropagation();\n return;\n }\n\n const type = this.getAttribute(\"type\")?.toLowerCase()?.trim();\n\n if (type !== \"submit\" && type !== \"reset\") {\n return;\n }\n\n const form = this.closest(\"form\");\n\n if (form && type === \"submit\") {\n form.requestSubmit();\n }\n\n if (form && type === \"reset\") {\n form.reset();\n }\n },\n { capture: true },\n );\n }\n\n private isSpaceOrEnter(event: KeyboardEvent): boolean {\n switch (event.key) {\n case \" \":\n case \"Space\":\n case \"Enter\":\n return true;\n default:\n return false;\n }\n }\n\n public click() {\n if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n super.click();\n }\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n\n this._image = this.shadowRoot.querySelector(\".icon\") as HTMLImageElement;\n\n this.updateIcon();\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n }\n\n public attributeChangedCallback(): void {\n this.updateIcon();\n }\n\n private updateIcon() {\n if (this._image) {\n const iconSrc = this.getAttribute(\"icon\");\n if (iconSrc) {\n this._image.src = iconSrc;\n }\n }\n }\n}\n\nif (!customElements.get(Button.ID)) {\n customElements.define(Button.ID, Button);\n}\n"],"names":["htmlTemplate","_Button","ElementBase","e","event","type","form","icon","primary","disabled","template","iconSrc","Button"],"mappings":"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"}
|
package/dist/docs/doc.mjs
CHANGED
|
@@ -152,8 +152,9 @@ document.querySelector("#declarative-with-code").addEventListener("click", (even
|
|
|
152
152
|
outline: 1px dashed #111;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
:
|
|
156
|
-
|
|
155
|
+
.icon:not([src]),
|
|
156
|
+
.icon[src=""],
|
|
157
|
+
.icon[src="data:,"] {
|
|
157
158
|
display: none;
|
|
158
159
|
}
|
|
159
160
|
|
|
@@ -176,7 +177,9 @@ document.querySelector("#declarative-with-code").addEventListener("click", (even
|
|
|
176
177
|
max-width: var(--sd-button-max-icon-size, 32px);
|
|
177
178
|
}
|
|
178
179
|
</style>
|
|
179
|
-
<
|
|
180
|
+
<slot name="icon">
|
|
181
|
+
<img class="icon" src="data:," alt part="icon" />
|
|
182
|
+
</slot>
|
|
180
183
|
<div class="content">
|
|
181
184
|
<slot></slot>
|
|
182
185
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cas-smartdesign/button",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "A button element which encloses the look and feel of the smartdesign button",
|
|
5
5
|
"main": "dist/button-with-externals.js",
|
|
6
6
|
"module": "dist/button.mjs",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@cas-smartdesign/license-generator": "^1.
|
|
21
|
+
"@cas-smartdesign/license-generator": "^1.8.0",
|
|
22
22
|
"@cas-smartdesign/element-preview": "^0.3.0"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|