dap-design-system 0.61.1 → 0.61.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/dist/components/icon-button/icon-button.component.js +32 -29
- package/dist/components/icon-button/icon-button.component.js.map +1 -1
- package/dist/manifest/types/vue/index.d.ts +587 -587
- package/dist/manifest/vscode.html-custom-data.json +508 -508
- package/dist/manifest/web-types.json +1202 -1202
- package/dist/react/index.d.ts +19 -19
- package/dist/react-types.ts +20 -20
- package/dist/react.js +208 -208
- package/package.json +1 -1
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { clsx as
|
|
1
|
+
import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
|
|
2
2
|
import "../../node_modules/@lit/reactive-element/reactive-element.js";
|
|
3
3
|
import "../../node_modules/lit-html/lit-html.js";
|
|
4
4
|
import "../../node_modules/lit-element/lit-element.js";
|
|
5
5
|
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
|
|
6
|
-
import { ifDefined as
|
|
6
|
+
import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
|
|
7
7
|
import { html as d } from "../../node_modules/lit-html/static.js";
|
|
8
8
|
import { DdsElement as m } from "../../internal/dds-hu-element.js";
|
|
9
9
|
import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
|
|
10
10
|
import b from "../icon/icon.component.js";
|
|
11
11
|
import z from "./icon-button.scss.js";
|
|
12
12
|
import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
|
|
13
|
-
var v = Object.defineProperty, r = (h, t, e,
|
|
14
|
-
for (var n = void 0,
|
|
15
|
-
(l = h[
|
|
13
|
+
var v = Object.defineProperty, r = (h, t, e, i) => {
|
|
14
|
+
for (var n = void 0, s = h.length - 1, l; s >= 0; s--)
|
|
15
|
+
(l = h[s]) && (n = l(t, e, n) || n);
|
|
16
16
|
return n && v(t, e, n), n;
|
|
17
17
|
};
|
|
18
|
-
const
|
|
18
|
+
const g = S(m), c = class c extends g {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(), this.variant = "neutral", this.clean = !1, this.disabled = !1, this.htmlType = "button", this._ariaLabelForButton = null, this.handleSlotChange = () => {
|
|
21
21
|
if (this.shadowRoot) {
|
|
22
22
|
const t = this.shadowRoot.querySelector("slot");
|
|
23
23
|
if (t) {
|
|
24
24
|
const e = t.assignedElements({ flatten: !0 });
|
|
25
|
-
for (const
|
|
26
|
-
|
|
25
|
+
for (const i of e)
|
|
26
|
+
i instanceof HTMLSlotElement && (i.__ddsSlotListenerAdded || (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0));
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
this.applySizeToSlotIcons();
|
|
@@ -38,23 +38,23 @@ const L = S(m), c = class c extends L {
|
|
|
38
38
|
* Recursively finds all icon elements in slots and nested slots
|
|
39
39
|
*/
|
|
40
40
|
findIconElementsInSlot(t) {
|
|
41
|
-
const e = [],
|
|
42
|
-
for (const
|
|
43
|
-
if (
|
|
44
|
-
e.push(
|
|
45
|
-
else if (
|
|
46
|
-
e.push(...this.findIconElementsInSlot(
|
|
47
|
-
else if (
|
|
41
|
+
const e = [], i = t.assignedElements({ flatten: !0 }), n = t.assignedNodes({ flatten: !0 });
|
|
42
|
+
for (const s of i)
|
|
43
|
+
if (s.tagName === "DAP-DS-ICON")
|
|
44
|
+
e.push(s);
|
|
45
|
+
else if (s instanceof HTMLSlotElement)
|
|
46
|
+
e.push(...this.findIconElementsInSlot(s));
|
|
47
|
+
else if (s.children) {
|
|
48
48
|
const l = Array.from(
|
|
49
|
-
|
|
49
|
+
s.querySelectorAll("dap-ds-icon")
|
|
50
50
|
);
|
|
51
51
|
e.push(...l);
|
|
52
52
|
}
|
|
53
|
-
for (const
|
|
54
|
-
if (
|
|
55
|
-
e.includes(
|
|
56
|
-
else if (
|
|
57
|
-
const l = Array.from(
|
|
53
|
+
for (const s of n)
|
|
54
|
+
if (s instanceof Element && s.tagName === "DAP-DS-ICON")
|
|
55
|
+
e.includes(s) || e.push(s);
|
|
56
|
+
else if (s instanceof Element) {
|
|
57
|
+
const l = Array.from(s.querySelectorAll("dap-ds-icon"));
|
|
58
58
|
for (const f of l)
|
|
59
59
|
e.includes(f) || e.push(f);
|
|
60
60
|
}
|
|
@@ -68,8 +68,8 @@ const L = S(m), c = class c extends L {
|
|
|
68
68
|
const t = this.shadowRoot.querySelector("slot");
|
|
69
69
|
if (!t) return;
|
|
70
70
|
const e = this.findIconElementsInSlot(t);
|
|
71
|
-
for (const
|
|
72
|
-
this.iconSize !== void 0 ? (
|
|
71
|
+
for (const i of e)
|
|
72
|
+
this.iconSize !== void 0 ? (i.setAttribute("staticSize", this.iconSize.toString()), i.setAttribute("size", this.iconSize.toString())) : (i.setAttribute("size", this.effectiveSize), i.removeAttribute("staticSize"));
|
|
73
73
|
}
|
|
74
74
|
/**
|
|
75
75
|
* Sets up slotchange listeners for the main slot and any nested slots
|
|
@@ -77,8 +77,8 @@ const L = S(m), c = class c extends L {
|
|
|
77
77
|
setupSlotListeners(t) {
|
|
78
78
|
t.addEventListener("slotchange", this.handleSlotChange);
|
|
79
79
|
const e = t.assignedElements({ flatten: !0 });
|
|
80
|
-
for (const
|
|
81
|
-
|
|
80
|
+
for (const i of e)
|
|
81
|
+
i instanceof HTMLSlotElement && (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0);
|
|
82
82
|
}
|
|
83
83
|
firstUpdated(t) {
|
|
84
84
|
if (super.firstUpdated(t), this.shadowRoot) {
|
|
@@ -90,7 +90,10 @@ const L = S(m), c = class c extends L {
|
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
updated(t) {
|
|
93
|
-
|
|
93
|
+
var i;
|
|
94
|
+
super.updated(t);
|
|
95
|
+
const e = (i = this.getAttribute("aria-label")) != null ? i : this.ariaLabel;
|
|
96
|
+
e != null && e !== "" && (this._ariaLabelForButton = e), this.removeAttribute("aria-label"), (t.has("size") || t.has("sizeMap") || t.has("iconSize") || this.sizeMap) && requestAnimationFrame(() => {
|
|
94
97
|
this.applySizeToSlotIcons();
|
|
95
98
|
});
|
|
96
99
|
}
|
|
@@ -104,8 +107,8 @@ const L = S(m), c = class c extends L {
|
|
|
104
107
|
part="base"
|
|
105
108
|
.disabled=${this.disabled}
|
|
106
109
|
type=${this.htmlType}
|
|
107
|
-
aria-label=${
|
|
108
|
-
class=${
|
|
110
|
+
aria-label=${p(this.effectiveAriaLabel) || ""}
|
|
111
|
+
class=${u(
|
|
109
112
|
"icon-button",
|
|
110
113
|
{
|
|
111
114
|
[`icon-button--${this.effectiveSize}`]: this.effectiveSize && this.iconSize === void 0
|
|
@@ -121,7 +124,7 @@ const L = S(m), c = class c extends L {
|
|
|
121
124
|
exportparts="icon, base: icon-base"
|
|
122
125
|
name="${this.icon}"
|
|
123
126
|
aria-hidden="true"
|
|
124
|
-
staticSize=${
|
|
127
|
+
staticSize=${p(this.iconSize)}
|
|
125
128
|
size=${this.effectiveSize === "xxs" ? "xs" : this.effectiveSize}>
|
|
126
129
|
</dap-ds-icon>` : d` <slot></slot> `}
|
|
127
130
|
</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n static tagName = 'dap-ds-icon-button'\n\n static dependencies = {\n 'dap-ds-icon': DapDSIcon,\n }\n\n /** The type of the button.\n * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n */\n @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n /** Adds a transparent background to the button */\n @property({ type: Boolean, reflect: true }) clean? = false\n\n /**\n * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n */\n @property({ type: Number }) iconSize: number\n\n constructor() {\n super()\n this.size = 'md' as ButtonSize\n }\n\n /** The disabled state of the button. */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /**\n * The type of the button.\n * @type {'button' | 'submit' | 'reset'}\n */\n @property() htmlType: HtmlButtonType = 'button'\n\n /** The icon of the button. You can use the icon names from the icon component */\n @property() icon: string\n\n /** The name of the button */\n @property() name: string\n\n static readonly styles = unsafeCSS(styles)\n\n /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n private _ariaLabelForButton: string | null = null\n\n /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n private get effectiveAriaLabel(): string | null {\n return this.ariaLabel ?? this._ariaLabelForButton\n }\n\n /**\n * Recursively finds all icon elements in slots and nested slots\n */\n private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n const iconElements: Element[] = []\n\n // Get both assigned elements and nodes (to catch all content)\n const assignedElements = slot.assignedElements({ flatten: true })\n const assignedNodes = slot.assignedNodes({ flatten: true })\n\n // First, check assigned elements\n for (const element of assignedElements) {\n // If it's an icon element, add it\n if (element.tagName === 'DAP-DS-ICON') {\n iconElements.push(element)\n }\n // If it's a nested slot, recursively find icons in it\n else if (element instanceof HTMLSlotElement) {\n iconElements.push(...this.findIconElementsInSlot(element))\n }\n // If it's a custom element, search for icons in its light DOM children\n // (slot default content appears in light DOM)\n else if (element.children) {\n const lightDomIcons = Array.from(\n element.querySelectorAll('dap-ds-icon'),\n )\n iconElements.push(...lightDomIcons)\n }\n }\n\n // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n for (const node of assignedNodes) {\n if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n if (!iconElements.includes(node)) {\n iconElements.push(node)\n }\n }\n // Check children of element nodes\n else if (node instanceof Element) {\n const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n for (const icon of childIcons) {\n if (!iconElements.includes(icon)) {\n iconElements.push(icon)\n }\n }\n }\n }\n\n return iconElements\n }\n\n /**\n * Applies size props to all icon elements in the slot\n */\n private applySizeToSlotIcons(): void {\n if (!this.shadowRoot) return\n\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (!iconSlot) return\n\n const iconElements = this.findIconElementsInSlot(iconSlot)\n\n for (const iconElement of iconElements) {\n if (this.iconSize !== undefined) {\n iconElement.setAttribute('staticSize', this.iconSize.toString())\n iconElement.setAttribute('size', this.iconSize.toString())\n } else {\n iconElement.setAttribute('size', this.effectiveSize)\n iconElement.removeAttribute('staticSize')\n }\n }\n }\n\n /**\n * Handles slot change events to update icon sizes\n */\n private handleSlotChange = (): void => {\n // Set up listeners on any newly assigned nested slots\n if (this.shadowRoot) {\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (iconSlot) {\n const assignedElements = iconSlot.assignedElements({ flatten: true })\n for (const element of assignedElements) {\n if (element instanceof HTMLSlotElement) {\n // Check if we already have a listener on this slot\n if (!(element as any).__ddsSlotListenerAdded) {\n element.addEventListener('slotchange', this.handleSlotChange)\n ;(element as any).__ddsSlotListenerAdded = true\n }\n }\n }\n }\n }\n\n // Apply size to icons\n this.applySizeToSlotIcons()\n }\n\n /**\n * Sets up slotchange listeners for the main slot and any nested slots\n */\n private setupSlotListeners(slot: HTMLSlotElement): void {\n slot.addEventListener('slotchange', this.handleSlotChange)\n\n // Also listen to nested slots that are already assigned\n const assignedElements = slot.assignedElements({ flatten: true })\n for (const element of assignedElements) {\n if (element instanceof HTMLSlotElement) {\n element.addEventListener('slotchange', this.handleSlotChange)\n ;(element as any).__ddsSlotListenerAdded = true\n }\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n\n if (this.shadowRoot) {\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (iconSlot) {\n this.setupSlotListeners(iconSlot)\n }\n }\n\n // Use requestAnimationFrame to ensure slots are fully assigned\n requestAnimationFrame(() => {\n this.applySizeToSlotIcons()\n })\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.updated(changedProperties)\n\n // Persist value before removing host attribute so the inner button keeps it\n if (this.ariaLabel != null && this.ariaLabel !== '') {\n this._ariaLabelForButton = this.ariaLabel\n } else if (changedProperties.has('ariaLabel')) {\n this._ariaLabelForButton = null\n }\n this.removeAttribute('aria-label')\n\n // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n if (\n changedProperties.has('size') ||\n changedProperties.has('sizeMap') ||\n changedProperties.has('iconSize') ||\n this.sizeMap\n ) {\n requestAnimationFrame(() => {\n this.applySizeToSlotIcons()\n })\n }\n }\n\n focus() {\n this.shadowRoot?.querySelector('button')?.focus()\n }\n\n render() {\n return html`\n <button\n part=\"base\"\n .disabled=${this.disabled}\n type=${this.htmlType}\n aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n class=${clsx(\n 'icon-button',\n {\n [`icon-button--${this.effectiveSize}`]:\n this.effectiveSize && this.iconSize === undefined,\n },\n { [`icon-button--${this.size}`]: this.size },\n { 'icon-button--disabled': this.disabled },\n { 'icon-button--clean': this.clean },\n `icon-button--${this.variant}`,\n )}>\n <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n ${this.icon\n ? html` <dap-ds-icon\n part=\"content\"\n exportparts=\"icon, base: icon-base\"\n name=\"${this.icon}\"\n aria-hidden=\"true\"\n staticSize=${ifDefined(this.iconSize)}\n size=${(this.effectiveSize === 'xxs'\n ? 'xs'\n : this.effectiveSize) as ButtonSize}>\n </dap-ds-icon>`\n : html` <slot></slot> `}\n </button>\n `\n }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n static tagName = 'dap-ds-icon-button'\n\n static dependencies = {\n 'dap-ds-icon': DapDSIcon,\n }\n\n /** The type of the button.\n * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n */\n @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n /** Adds a transparent background to the button */\n @property({ type: Boolean, reflect: true }) clean? = false\n\n /**\n * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n */\n @property({ type: Number }) iconSize: number\n\n constructor() {\n super()\n this.size = 'md' as ButtonSize\n }\n\n /** The disabled state of the button. */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /**\n * The type of the button.\n * @type {'button' | 'submit' | 'reset'}\n */\n @property() htmlType: HtmlButtonType = 'button'\n\n /** The icon of the button. You can use the icon names from the icon component */\n @property() icon: string\n\n /** The name of the button */\n @property() name: string\n\n static readonly styles = unsafeCSS(styles)\n\n /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n private _ariaLabelForButton: string | null = null\n\n /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n private get effectiveAriaLabel(): string | null {\n return this.ariaLabel ?? this._ariaLabelForButton\n }\n\n /**\n * Recursively finds all icon elements in slots and nested slots\n */\n private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n const iconElements: Element[] = []\n\n // Get both assigned elements and nodes (to catch all content)\n const assignedElements = slot.assignedElements({ flatten: true })\n const assignedNodes = slot.assignedNodes({ flatten: true })\n\n // First, check assigned elements\n for (const element of assignedElements) {\n // If it's an icon element, add it\n if (element.tagName === 'DAP-DS-ICON') {\n iconElements.push(element)\n }\n // If it's a nested slot, recursively find icons in it\n else if (element instanceof HTMLSlotElement) {\n iconElements.push(...this.findIconElementsInSlot(element))\n }\n // If it's a custom element, search for icons in its light DOM children\n // (slot default content appears in light DOM)\n else if (element.children) {\n const lightDomIcons = Array.from(\n element.querySelectorAll('dap-ds-icon'),\n )\n iconElements.push(...lightDomIcons)\n }\n }\n\n // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n for (const node of assignedNodes) {\n if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n if (!iconElements.includes(node)) {\n iconElements.push(node)\n }\n }\n // Check children of element nodes\n else if (node instanceof Element) {\n const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n for (const icon of childIcons) {\n if (!iconElements.includes(icon)) {\n iconElements.push(icon)\n }\n }\n }\n }\n\n return iconElements\n }\n\n /**\n * Applies size props to all icon elements in the slot\n */\n private applySizeToSlotIcons(): void {\n if (!this.shadowRoot) return\n\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (!iconSlot) return\n\n const iconElements = this.findIconElementsInSlot(iconSlot)\n\n for (const iconElement of iconElements) {\n if (this.iconSize !== undefined) {\n iconElement.setAttribute('staticSize', this.iconSize.toString())\n iconElement.setAttribute('size', this.iconSize.toString())\n } else {\n iconElement.setAttribute('size', this.effectiveSize)\n iconElement.removeAttribute('staticSize')\n }\n }\n }\n\n /**\n * Handles slot change events to update icon sizes\n */\n private handleSlotChange = (): void => {\n // Set up listeners on any newly assigned nested slots\n if (this.shadowRoot) {\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (iconSlot) {\n const assignedElements = iconSlot.assignedElements({ flatten: true })\n for (const element of assignedElements) {\n if (element instanceof HTMLSlotElement) {\n // Check if we already have a listener on this slot\n if (!(element as any).__ddsSlotListenerAdded) {\n element.addEventListener('slotchange', this.handleSlotChange)\n ;(element as any).__ddsSlotListenerAdded = true\n }\n }\n }\n }\n }\n\n // Apply size to icons\n this.applySizeToSlotIcons()\n }\n\n /**\n * Sets up slotchange listeners for the main slot and any nested slots\n */\n private setupSlotListeners(slot: HTMLSlotElement): void {\n slot.addEventListener('slotchange', this.handleSlotChange)\n\n // Also listen to nested slots that are already assigned\n const assignedElements = slot.assignedElements({ flatten: true })\n for (const element of assignedElements) {\n if (element instanceof HTMLSlotElement) {\n element.addEventListener('slotchange', this.handleSlotChange)\n ;(element as any).__ddsSlotListenerAdded = true\n }\n }\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties)\n\n if (this.shadowRoot) {\n const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n if (iconSlot) {\n this.setupSlotListeners(iconSlot)\n }\n }\n\n // Use requestAnimationFrame to ensure slots are fully assigned\n requestAnimationFrame(() => {\n this.applySizeToSlotIcons()\n })\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.updated(changedProperties)\n\n // Persist value before removing host attribute so the inner button keeps it.\n // Read the attribute string directly: the native `ariaLabel` getter is empty\n // once the attribute is stripped, and Lit's AttributePart caches the value so\n // it is never re-applied to the host on later re-renders (e.g. when the button\n // toggles disabled). Fall back to the native property for consumers that set it\n // via `.ariaLabel`. Only overwrite when a value is actually present so the\n // persisted label survives re-renders that no longer carry the attribute.\n const incomingAriaLabel = this.getAttribute('aria-label') ?? this.ariaLabel\n if (incomingAriaLabel != null && incomingAriaLabel !== '') {\n this._ariaLabelForButton = incomingAriaLabel\n }\n this.removeAttribute('aria-label')\n\n // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n if (\n changedProperties.has('size') ||\n changedProperties.has('sizeMap') ||\n changedProperties.has('iconSize') ||\n this.sizeMap\n ) {\n requestAnimationFrame(() => {\n this.applySizeToSlotIcons()\n })\n }\n }\n\n focus() {\n this.shadowRoot?.querySelector('button')?.focus()\n }\n\n render() {\n return html`\n <button\n part=\"base\"\n .disabled=${this.disabled}\n type=${this.htmlType}\n aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n class=${clsx(\n 'icon-button',\n {\n [`icon-button--${this.effectiveSize}`]:\n this.effectiveSize && this.iconSize === undefined,\n },\n { [`icon-button--${this.size}`]: this.size },\n { 'icon-button--disabled': this.disabled },\n { 'icon-button--clean': this.clean },\n `icon-button--${this.variant}`,\n )}>\n <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n ${this.icon\n ? html` <dap-ds-icon\n part=\"content\"\n exportparts=\"icon, base: icon-base\"\n name=\"${this.icon}\"\n aria-hidden=\"true\"\n staticSize=${ifDefined(this.iconSize)}\n size=${(this.effectiveSize === 'xxs'\n ? 'xs'\n : this.effectiveSize) as ButtonSize}>\n </dap-ds-icon>`\n : html` <slot></slot> `}\n </button>\n `\n }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","incomingAriaLabel","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAMA,IAA0BC,EAAWC,CAAU,GAyDhCC,IAArB,MAAqBA,UAAwBH,EAAwB;AAAA,EAoBnE,cAAc;AACN,UAAA,GAX+C,KAAA,UAAA,WAGF,KAAA,QAAA,IAaE,KAAA,WAAA,IAMhB,KAAA,WAAA,UAWvC,KAAQ,sBAAqC,MAmF7C,KAAQ,mBAAmB,MAAY;AAErC,UAAI,KAAK,YAAY;AACnB,cAAMI,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,YAAIA,GAAU;AACZ,gBAAMC,IAAmBD,EAAS,iBAAiB,EAAE,SAAS,IAAM;AACpE,qBAAWE,KAAWD;AACpB,YAAIC,aAAmB,oBAEfA,EAAgB,2BACZA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB,GAC1DA,EAAgB,yBAAyB;AAAA,QAGjD;AAAA,MACF;AAIF,WAAK,qBAAqB;AAAA,IAC5B,GA5HE,KAAK,OAAO;AAAA,EAAA;AAAA;AAAA,EAwBd,IAAY,qBAAoC;;AACvC,YAAAC,IAAA,KAAK,cAAL,OAAAA,IAAkB,KAAK;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMxB,uBAAuBC,GAAkC;AAC/D,UAAMC,IAA0B,CAAC,GAG3BJ,IAAmBG,EAAK,iBAAiB,EAAE,SAAS,IAAM,GAC1DE,IAAgBF,EAAK,cAAc,EAAE,SAAS,IAAM;AAG1D,eAAWF,KAAWD;AAEhB,UAAAC,EAAQ,YAAY;AACtB,QAAAG,EAAa,KAAKH,CAAO;AAAA,eAGlBA,aAAmB;AAC1B,QAAAG,EAAa,KAAK,GAAG,KAAK,uBAAuBH,CAAO,CAAC;AAAA,eAIlDA,EAAQ,UAAU;AACzB,cAAMK,IAAgB,MAAM;AAAA,UAC1BL,EAAQ,iBAAiB,aAAa;AAAA,QACxC;AACa,QAAAG,EAAA,KAAK,GAAGE,CAAa;AAAA,MAAA;AAKtC,eAAWC,KAAQF;AACjB,UAAIE,aAAgB,WAAWA,EAAK,YAAY;AAC9C,QAAKH,EAAa,SAASG,CAAI,KAC7BH,EAAa,KAAKG,CAAI;AAAA,eAIjBA,aAAgB,SAAS;AAChC,cAAMC,IAAa,MAAM,KAAKD,EAAK,iBAAiB,aAAa,CAAC;AAClE,mBAAWE,KAAQD;AACjB,UAAKJ,EAAa,SAASK,CAAI,KAC7BL,EAAa,KAAKK,CAAI;AAAA,MAE1B;AAIG,WAAAL;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMD,uBAA6B;AAC/B,QAAA,CAAC,KAAK,WAAY;AAEtB,UAAML,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,QAAI,CAACA,EAAU;AAET,UAAAK,IAAe,KAAK,uBAAuBL,CAAQ;AAEzD,eAAWW,KAAeN;AACpB,MAAA,KAAK,aAAa,UACpBM,EAAY,aAAa,cAAc,KAAK,SAAS,UAAU,GAC/DA,EAAY,aAAa,QAAQ,KAAK,SAAS,UAAU,MAE7CA,EAAA,aAAa,QAAQ,KAAK,aAAa,GACnDA,EAAY,gBAAgB,YAAY;AAAA,EAE5C;AAAA;AAAA;AAAA;AAAA,EA+BM,mBAAmBP,GAA6B;AACjD,IAAAA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB;AAGzD,UAAMH,IAAmBG,EAAK,iBAAiB,EAAE,SAAS,IAAM;AAChE,eAAWF,KAAWD;AACpB,MAAIC,aAAmB,oBACbA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB,GAC1DA,EAAgB,yBAAyB;AAAA,EAE/C;AAAA,EAGQ,aACRU,GACM;AAGN,QAFA,MAAM,aAAaA,CAAkB,GAEjC,KAAK,YAAY;AACnB,YAAMZ,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,MAAIA,KACF,KAAK,mBAAmBA,CAAQ;AAAA,IAClC;AAIF,0BAAsB,MAAM;AAC1B,WAAK,qBAAqB;AAAA,IAAA,CAC3B;AAAA,EAAA;AAAA,EAGO,QACRa,GACM;;AACN,UAAM,QAAQA,CAAiB;AAS/B,UAAMC,KAAoBX,IAAA,KAAK,aAAa,YAAY,MAA9B,OAAAA,IAAmC,KAAK;AAC9D,IAAAW,KAAqB,QAAQA,MAAsB,OACrD,KAAK,sBAAsBA,IAE7B,KAAK,gBAAgB,YAAY,IAI/BD,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,SAAS,KAC/BA,EAAkB,IAAI,UAAU,KAChC,KAAK,YAEL,sBAAsB,MAAM;AAC1B,WAAK,qBAAqB;AAAA,IAAA,CAC3B;AAAA,EACH;AAAA,EAGF,QAAQ;;AACN,KAAAE,KAAAZ,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,cAA/B,QAAAY,EAA0C;AAAA,EAAM;AAAA,EAGlD,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,oBAGS,KAAK,QAAQ;AAAA,eAClB,KAAK,QAAQ;AAAA,qBACPC,EAAU,KAAK,kBAAkB,KAAK,EAAE;AAAA,gBAC7CC;AAAA,MACN;AAAA,MACA;AAAA,QACE,CAAC,gBAAgB,KAAK,aAAa,EAAE,GACnC,KAAK,iBAAiB,KAAK,aAAa;AAAA,MAC5C;AAAA,MACA,EAAE,CAAC,gBAAgB,KAAK,IAAI,EAAE,GAAG,KAAK,KAAK;AAAA,MAC3C,EAAE,yBAAyB,KAAK,SAAS;AAAA,MACzC,EAAE,sBAAsB,KAAK,MAAM;AAAA,MACnC,gBAAgB,KAAK,OAAO;AAAA,IAAA,CAC7B;AAAA;AAAA,UAEC,KAAK,OACHF;AAAAA;AAAAA;AAAAA,sBAGU,KAAK,IAAI;AAAA;AAAA,2BAEJC,EAAU,KAAK,QAAQ,CAAC;AAAA,qBAC7B,KAAK,kBAAkB,QAC3B,OACA,KAAK,aAA4B;AAAA,8BAEvCD,kBAAqB;AAAA;AAAA;AAAA,EAAA;AAIjC;AA1PEjB,EAAO,UAAU,sBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeoB;AACjB,GAmCgBpB,EAAA,SAASqB,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBvB;AAU+BwB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAbvBF,EAayB,WAAA,OAAA;AAKhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlBPF,EAkBS,WAAA,UAAA;AAQgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GA1BvBF,EA0ByB,WAAA,UAAA;AAMhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhCSF,EAgCP,WAAA,UAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAnCSF,EAmCP,WAAA,MAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAtCSF,EAsCP,WAAA,MAAA;"}
|