dap-design-system 0.60.2 → 0.61.0

package/dist/components/form/radio-group/radio-group.component.js

@@ -0,0 +1,263 @@
+var $ = Object.defineProperty, V = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var z = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
+var g = (d, t, e) => t in d ? $(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, v = (d, t) => {
+  for (var e in t || (t = {}))
+    z.call(t, e) && g(d, e, t[e]);
+  if (m)
+    for (var e of m(t))
+      S.call(t, e) && g(d, e, t[e]);
+  return d;
+}, k = (d, t) => V(d, A(t));
+var f = (d, t, e) => new Promise((i, s) => {
+  var o = (l) => {
+    try {
+      n(e.next(l));
+    } catch (p) {
+      s(p);
+    }
+  }, a = (l) => {
+    try {
+      n(e.throw(l));
+    } catch (p) {
+      s(p);
+    }
+  }, n = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(o, a);
+  n((e = e.apply(d, t)).next());
+});
+import { clsx as R } from "../../../node_modules/clsx/dist/clsx.js";
+import "../../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/lit-html/lit-html.js";
+import "../../../node_modules/lit-element/lit-element.js";
+import { property as y } from "../../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as w } from "../../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as r } from "../../../node_modules/lit-html/directives/if-defined.js";
+import { html as h } from "../../../node_modules/lit-html/static.js";
+import { GenericFormElement as C } from "../../../internal/mixin/genericFormElement.js";
+import L from "../../feedback/feedback.component.js";
+import I from "../../icon/icon.component.js";
+import q from "../../icon-button/icon-button.component.js";
+import F from "../../tooltip/tooltip.component.js";
+import _ from "../../typography/typography.component.js";
+import D from "../form-label/form-label.component.js";
+import E from "../input-group/input-group.scss.js";
+import { unsafeCSS as x } from "../../../node_modules/@lit/reactive-element/css-tag.js";
+var M = Object.defineProperty, b = (d, t, e, i) => {
+  for (var s = void 0, o = d.length - 1, a; o >= 0; o--)
+    (a = d[o]) && (s = a(t, e, s) || s);
+  return s && M(t, e, s), s;
+};
+const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c extends C {
+  constructor() {
+    super(...arguments), this.tooltipPlacement = "bottom", this.optionalLabel = "";
+  }
+  /** A radio value may be `false` or `0`, so emptiness is not the same as falsiness. */
+  get hasValue() {
+    return this.value !== void 0 && this.value !== null && this.value !== "";
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("value") && (this._previousValue = t.get("value"));
+  }
+  updated(t) {
+    super.updated(t), t.has("value") && this._previousValue !== this.value && this.updateRadioStates();
+  }
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), (t === "disabled" || t === "invalid") && this.getAllRadios().forEach((s) => {
+      s[t] = i !== null;
+    });
+  }
+  _handleSlotChange(t) {
+    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("dap-ds-radio-button")];
+  }
+  updateRadioStates() {
+    const t = this.getAllRadios();
+    if (t.forEach((e, i) => {
+      e.checked = e.value === this.value, e.size = this.size, e.posInSet = i + 1, e.setSize = t.length, this.name && (e.name = this.name), e.focusable = e.checked;
+    }), !this.hasValue) {
+      const e = t.find((i) => !i.disabled);
+      e && (e.focusable = !0);
+    }
+    this.internals.setFormValue(this.value), this.setValidity();
+  }
+  syncRadioElements() {
+    return f(this, null, function* () {
+      const t = this.getAllRadios();
+      if (yield Promise.all(
+        t.map((e, i) => f(this, null, function* () {
+          yield e.updateComplete, e.checked = e.value === this.value, e.size = this.size, e.posInSet = i + 1, e.setSize = t.length, this.name && (e.name = this.name), e.focusable = e.checked;
+        }))
+      ), !this.hasValue) {
+        const e = t.find((i) => !i.disabled);
+        e && t.forEach((i) => {
+          i.focusable = i === e;
+        });
+      }
+      this.internals.setFormValue(this.value), this.setValidity();
+    });
+  }
+  handleRadioClick(t) {
+    const e = t.target.closest(
+      "dap-ds-radio-button"
+    ), i = this.getAllRadios(), s = this.value;
+    e.disabled || (this.value = e.value, i.forEach((o) => {
+      o.checked = o === e, o.focusable = o === e;
+    }), this.value !== s && (this.emit("dds-change", { value: e.value, checked: !0 }), this.internals.setFormValue(this.value), this.setValidity()));
+  }
+  handleKeyDown(t) {
+    var n;
+    if (!T.includes(t.key))
+      return;
+    const e = this.getAllRadios().filter((l) => !l.disabled), i = (n = e.find((l) => l.checked)) != null ? n : e[0], s = t.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1, o = this.value;
+    let a = e.indexOf(i) + s;
+    a < 0 && (a = e.length - 1), a > e.length - 1 && (a = 0), this.getAllRadios().forEach((l) => {
+      l.checked = !1, l.focusable = !1, l.tabIndex = -1;
+    }), this.value = e[a].value, e[a].checked = !0, e[a].focusable = !0, e[a].tabIndex = 0, e[a].focus(), this.value !== o && (this.emit("dds-change", { value: e[a].value, checked: !0 }), this.internals.setFormValue(this.value), this.setValidity()), t.preventDefault();
+  }
+  setValidity() {
+    const e = this.getAllRadios().some((i) => i.checked);
+    this.required && !e ? this.internals.setValidity(
+      { valueMissing: !0 },
+      this.validationMessage,
+      this.innerInput
+    ) : this.internals.setValidity({});
+  }
+  get validationMessage() {
+    return " ";
+  }
+  checkValidity() {
+    return !this.required || this.hasValue;
+  }
+  get validity() {
+    return k(v({}, this.internals.validity), {
+      valid: this.checkValidity(),
+      valueMissing: this.required && !this.hasValue
+    });
+  }
+  reportValidity() {
+    return this.required ? this.checkValidity() : !0;
+  }
+  handleLabelClick() {
+    var i;
+    const t = this.getAllRadios();
+    ((i = t.find((s) => s.checked)) != null ? i : t[0]).focus();
+  }
+  handleInvalid(t) {
+    t.preventDefault();
+  }
+  render() {
+    return h`
+      <fieldset
+        id="input"
+        part="base"
+        class="input-group"
+        .disabled=${this.disabled}
+        form=${r(this.form)}
+        name=${this.name}
+        role="radiogroup"
+        tabindex="-1"
+        aria-labelledby="label"
+        aria-required=${this.required}
+        aria-describedby=${`description ${this.feedbackId}`}
+        aria-errormessage=${r(this.feedbackId)}
+        @invalid=${this.handleInvalid}>
+        ${(this.label || this.tooltip) && h`<legend class="input-group__legend">
+          <div class="label-container">
+            ${this.label && h`<dap-ds-form-label
+              part="label"
+              id="label"
+              .size=${this.size}
+              .required=${this.required}
+              .requiredLabel=${this.requiredLabel}
+              .optionalLabel=${this.optionalLabel}
+              .optional=${this.optional}
+              .subtle=${this.subtle}
+              .disabled=${this.disabled}
+              .noMargin=${!!this.description}
+              .hideLabel=${this.hideLabel}
+              label=${r(this.label)}
+              @click=${this.handleLabelClick}>
+            </dap-ds-form-label>`}
+            ${this.tooltip && h` <dap-ds-tooltip
+              part="tooltip"
+              content=${this.tooltip}
+              mode="toggle"
+              placement=${this.tooltipPlacement}>
+              <dap-ds-icon-button
+                clean
+                slot="trigger"
+                class="info-button"
+                aria-label=${this.tooltipAriaLabel}
+                size=${this.size}
+                iconSize=${this.size === "xs" ? "16" : "22"}>
+                <dap-ds-icon
+                  name="information-line"
+                  class="info-button"></dap-ds-icon>
+              </dap-ds-icon-button>
+            </dap-ds-tooltip>`}
+          </div>
+          ${this.description && h`
+            <dap-ds-typography
+              part="description"
+              variant="description"
+              class=${R("input-description")}
+              size=${r(this.size)}
+              id="description">
+              ${this.description}
+            </dap-ds-typography>
+          `}
+        </legend>`}
+        <div part="container" class="input-group__items">
+          <input id="hidden" hidden @invalid=${this.handleInvalid} />
+          <slot
+            @click=${this.handleRadioClick}
+            @keydown=${this.handleKeyDown}
+            @blur=${this.onBlur}
+            @focus=${this.onFocus}
+            @slotchange=${this.syncRadioElements}></slot>
+        </div>
+        ${this.feedback && this._renderFeedback()}
+      </fieldset>
+    `;
+  }
+  _renderFeedback() {
+    return h`
+      <dap-ds-feedback
+        part="feedback"
+        feedbackType=${r(this.feedbackType)}
+        feedbackSize="${r(this.size)}"
+        id="feedback"
+        .subtle=${this.subtle}>
+        <slot
+          name="feedback-icon"
+          @slotchange="${this._handleSlotChange}"></slot>
+        ${this.feedback}
+      </dap-ds-feedback>
+    `;
+  }
+};
+c.tagName = "dap-ds-radio-group", c.dependencies = {
+  "dap-ds-form-label": D,
+  "dap-ds-tooltip": F,
+  "dap-ds-icon-button": q,
+  "dap-ds-icon": I,
+  "dap-ds-typography": _,
+  "dap-ds-feedback": L
+}, c.styles = x(E);
+let u = c;
+b([
+  y()
+], u.prototype, "tooltipPlacement");
+b([
+  w("#hidden")
+], u.prototype, "hiddenInput");
+b([
+  y()
+], u.prototype, "optionalLabel");
+export {
+  u as default
+};
+//# sourceMappingURL=radio-group.component.js.map

package/dist/components/form/radio-group/radio-group.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.component.js","sources":["../../../../src/components/form/radio-group/radio-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonFormElementSize, PopupPlacement } from '@/common/types'\nimport DapDSRadioButton from '@/components/radio-button/radio-button.component'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport DapDSFeedback from '../../feedback/feedback.component'\nimport DapDSIcon from '../../icon/icon.component'\nimport DapDSIconButton from '../../icon-button/icon-button.component'\nimport DapDSTooltip from '../../tooltip/tooltip.component'\nimport DapDSTypography from '../../typography/typography.component'\nimport DapDSFormLabel from '../form-label/form-label.component'\nimport styles from '../input-group/input-group.scss?inline'\n\nconst KEY_CODES = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ']\n\n/**\n * `dap-ds-radio-group`\n * @summary A radio group is a form element that allows the user to select one option from a set.\n * @element dap-ds-radio-group\n * @title - Radio group\n * @group radio-button\n *\n * @event dds-change - Fired when the radio group is checked.\n * @event dds-blur - Emitted when the radio group loses focus.\n * @event dds-focus - Emitted when the radio group gains focus.\n *\n * @property {string} name - The name of the radio group.\n * @property {string} value - The value of the radio group.\n * @property {boolean} disabled - Whether the radio group is disabled.\n * @property {boolean} required - Whether the radio group is required.\n * @property {string} label - The label of the radio group.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the radio group.\n * @property {string} tooltip - The tooltip of the radio group.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the radio group.\n * @property {string} feedback - The feedback of the radio group.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the radio group.\n * @property {string} optionalLabel - Text of optional label.\n * @property {string} requiredLabel - Text of required indicator. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {'xs' | 'sm' | 'lg'} size - The size of the radio group. Default is `sm`.\n * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.\n *\n * @slot - The content of the radio group.\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main radio group container.\n * @csspart label - The label of the radio group.\n * @csspart tooltip - The tooltip of the radio group.\n * @csspart container - The container of the radio group items.\n */\nexport default class DapDSRadioGroup extends GenericFormElement {\n  static tagName = 'dap-ds-radio-group'\n\n  static dependencies = {\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /** The placement of the tooltip.\n   * @type { 'top' | 'right' | 'bottom' | 'left' }\n   */\n  @property() tooltipPlacement: PopupPlacement = 'bottom'\n\n  @query('#hidden') hiddenInput!: HTMLInputElement\n  @property() optionalLabel = ''\n\n  private _previousValue?: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** A radio value may be `false` or `0`, so emptiness is not the same as falsiness. */\n  private get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null && this.value !== ''\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties)\n\n    // Handle external value changes\n    if (changedProperties.has('value')) {\n      this._previousValue = changedProperties.get('value') as string\n    }\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Update radio button states when value changes from outside\n    if (changedProperties.has('value') && this._previousValue !== this.value) {\n      this.updateRadioStates()\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ) {\n    super.attributeChangedCallback(name, _old, value)\n    if (name === 'disabled' || name === 'invalid') {\n      this.getAllRadios().forEach(item => {\n        item[name] = value !== null\n      })\n    }\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  private getAllRadios() {\n    return [...this.querySelectorAll<DapDSRadioButton>('dap-ds-radio-button')]\n  }\n\n  private updateRadioStates() {\n    const radios = this.getAllRadios()\n\n    radios.forEach((radio, index) => {\n      radio.checked = radio.value === this.value\n      radio.size = this.size\n      radio.posInSet = index + 1\n      radio.setSize = radios.length\n      if (this.name) {\n        radio.name = this.name\n      }\n      radio.focusable = radio.checked\n    })\n\n    if (!this.hasValue) {\n      const firstFocusable = radios.find(radio => !radio.disabled)\n      if (firstFocusable) {\n        firstFocusable.focusable = true\n      }\n    }\n\n    this.internals.setFormValue(this.value)\n    this.setValidity()\n  }\n\n  private async syncRadioElements() {\n    const radios = this.getAllRadios()\n\n    await Promise.all(\n      radios.map(async (radio, index) => {\n        await radio.updateComplete\n        radio.checked = radio.value === this.value\n        radio.size = this.size\n        radio.posInSet = index + 1\n        radio.setSize = radios.length\n        if (this.name) {\n          radio.name = this.name\n        }\n        radio.focusable = radio.checked\n      }),\n    )\n\n    if (!this.hasValue) {\n      const firstFocusable = radios.find(radio => !radio.disabled)\n      if (firstFocusable) {\n        radios.forEach(radio => {\n          radio.focusable = radio === firstFocusable\n        })\n      }\n    }\n\n    this.internals.setFormValue(this.value)\n    this.setValidity()\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<DapDSRadioButton>(\n      'dap-ds-radio-button',\n    )\n    const radios = this.getAllRadios()\n    const oldValue = this.value\n\n    if (target!.disabled) {\n      return\n    }\n\n    this.value = target!.value\n    radios.forEach(radio => {\n      radio.checked = radio === target\n      radio.focusable = radio === target\n    })\n\n    if (this.value !== oldValue) {\n      this.emit('dds-change', { value: target!.value, checked: true })\n\n      this.internals.setFormValue(this.value)\n      this.setValidity()\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!KEY_CODES.includes(event.key)) {\n      return\n    }\n\n    const radios = this.getAllRadios().filter(radio => !radio.disabled)\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0]\n    const step =\n      event.key === ' '\n        ? 0\n        : ['ArrowUp', 'ArrowLeft'].includes(event.key)\n          ? -1\n          : 1\n    const oldValue = this.value\n    let index = radios.indexOf(checkedRadio) + step\n\n    if (index < 0) {\n      index = radios.length - 1\n    }\n\n    if (index > radios.length - 1) {\n      index = 0\n    }\n\n    this.getAllRadios().forEach(radio => {\n      radio.checked = false\n      radio.focusable = false\n      radio.tabIndex = -1\n    })\n\n    this.value = radios[index].value\n    radios[index].checked = true\n    radios[index].focusable = true\n    radios[index].tabIndex = 0\n    radios[index].focus()\n\n    if (this.value !== oldValue) {\n      this.emit('dds-change', { value: radios[index].value, checked: true })\n\n      this.internals.setFormValue(this.value)\n      this.setValidity()\n    }\n\n    event.preventDefault()\n  }\n\n  setValidity(): void {\n    const radios = this.getAllRadios()\n    const isValid = radios.some(radio => radio.checked)\n\n    if (this.required && !isValid) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        this.validationMessage,\n        this.innerInput,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  get validationMessage(): string {\n    return ' '\n  }\n\n  checkValidity() {\n    return !this.required || this.hasValue\n  }\n\n  get validity() {\n    return {\n      ...this.internals.validity,\n      valid: this.checkValidity(),\n      valueMissing: this.required && !this.hasValue,\n    }\n  }\n\n  reportValidity() {\n    return this.required ? this.checkValidity() : true\n  }\n\n  handleLabelClick() {\n    const radios = this.getAllRadios()\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0]\n\n    checkedRadio.focus()\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  render() {\n    return html`\n      <fieldset\n        id=\"input\"\n        part=\"base\"\n        class=\"input-group\"\n        .disabled=${this.disabled}\n        form=${ifDefined(this.form)}\n        name=${this.name}\n        role=\"radiogroup\"\n        tabindex=\"-1\"\n        aria-labelledby=\"label\"\n        aria-required=${this.required}\n        aria-describedby=${`description ${this.feedbackId}`}\n        aria-errormessage=${ifDefined(this.feedbackId)}\n        @invalid=${this.handleInvalid}>\n        ${(this.label || this.tooltip) &&\n        html`<legend class=\"input-group__legend\">\n          <div class=\"label-container\">\n            ${this.label &&\n            html`<dap-ds-form-label\n              part=\"label\"\n              id=\"label\"\n              .size=${this.size}\n              .required=${this.required}\n              .requiredLabel=${this.requiredLabel}\n              .optionalLabel=${this.optionalLabel}\n              .optional=${this.optional}\n              .subtle=${this.subtle}\n              .disabled=${this.disabled}\n              .noMargin=${!!this.description}\n              .hideLabel=${this.hideLabel}\n              label=${ifDefined(this.label)}\n              @click=${this.handleLabelClick}>\n            </dap-ds-form-label>`}\n            ${this.tooltip &&\n            html` <dap-ds-tooltip\n              part=\"tooltip\"\n              content=${this.tooltip}\n              mode=\"toggle\"\n              placement=${this.tooltipPlacement}>\n              <dap-ds-icon-button\n                clean\n                slot=\"trigger\"\n                class=\"info-button\"\n                aria-label=${this.tooltipAriaLabel}\n                size=${this.size as 'xs' | 'sm' | 'md' | 'lg'}\n                iconSize=${this.size === 'xs' ? '16' : '22'}>\n                <dap-ds-icon\n                  name=\"information-line\"\n                  class=\"info-button\"></dap-ds-icon>\n              </dap-ds-icon-button>\n            </dap-ds-tooltip>`}\n          </div>\n          ${this.description &&\n          html`\n            <dap-ds-typography\n              part=\"description\"\n              variant=\"description\"\n              class=${clsx('input-description')}\n              size=${ifDefined(this.size as CommonFormElementSize)}\n              id=\"description\">\n              ${this.description}\n            </dap-ds-typography>\n          `}\n        </legend>`}\n        <div part=\"container\" class=\"input-group__items\">\n          <input id=\"hidden\" hidden @invalid=${this.handleInvalid} />\n          <slot\n            @click=${this.handleRadioClick}\n            @keydown=${this.handleKeyDown}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @slotchange=${this.syncRadioElements}></slot>\n        </div>\n        ${this.feedback && this._renderFeedback()}\n      </fieldset>\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm')}\"\n        id=\"feedback\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["KEY_CODES","_DapDSRadioGroup","GenericFormElement","changedProperties","name","_old","value","item","event","radios","radio","index","firstFocusable","__async","target","oldValue","checkedRadio","_a","step","isValid","__spreadProps","__spreadValues","html","ifDefined","clsx","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSRadioGroup","__decorateClass","property","query"],"mappings":"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"}

package/dist/components/form/radio-group/radio-group.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSRadioGroup } from './radio-group.component.js';
-export * from './radio-group.component.js';
+import { default as DapDSRadioGroup } from './radio-group.component';
+export * from './radio-group.component';
 export default DapDSRadioGroup;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/form/radio-group/radio-group.js

@@ -0,0 +1,6 @@
+import o from "./radio-group.component.js";
+o.define();
+export {
+  o as default
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/form/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":["../../../../src/components/form/radio-group/radio-group.ts"],"sourcesContent":["import DapDSRadioGroup from './radio-group.component'\n\nexport * from './radio-group.component'\nexport default DapDSRadioGroup\n\nDapDSRadioGroup.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-radio-group': DapDSRadioGroup\n  }\n}\n"],"names":["DapDSRadioGroup"],"mappings":";AAKAA,EAAgB,OAAO;"}

package/dist/components/icon/_styles/icon.scss.js

@@ -0,0 +1,5 @@
+const i = ":host{display:flex;align-items:center;outline:none;fill:currentcolor;--dds-icon-size-xs: 12px;--dds-icon-size-sm: 16px;--dds-icon-size-md: 20px;--dds-icon-size-lg: 24px;--dds-icon-size-xl: 32px;--dds-icon-size-xxl: 40px}.icon{outline:none}.icon .icon--custom-icon{display:flex;align-items:center;justify-content:center}.icon .icon--custom-icon.xxl ::slotted(svg){width:var(--dds-icon-size-xxl);height:var(--dds-icon-size-xxl)}.icon .icon--custom-icon.xl ::slotted(svg){width:var(--dds-icon-size-xl);height:var(--dds-icon-size-xl)}.icon .icon--custom-icon.lg ::slotted(svg){width:var(--dds-icon-size-lg);height:var(--dds-icon-size-lg)}.icon .icon--custom-icon.md ::slotted(svg){width:var(--dds-icon-size-md);height:var(--dds-icon-size-md)}.icon .icon--custom-icon.sm ::slotted(svg){width:var(--dds-icon-size-sm);height:var(--dds-icon-size-sm)}.icon .icon--custom-icon.xs ::slotted(svg){width:var(--dds-icon-size-xs);height:var(--dds-icon-size-xs)}";
+export {
+  i as default
+};
+//# sourceMappingURL=icon.scss.js.map

package/dist/components/icon/_styles/icon.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/icon/icon.component.d.ts

@@ -23,6 +23,7 @@ export type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
  * @cssproperty --dds-icon-size-xxl - The size of extra extra large icons (default: 40px)
  */
 export default class DapDSIcon extends DdsElement {
+    static tagName: string;
     /** The name of the icon */
     name: string;
     /** The size of the icon

package/dist/components/icon/icon.component.js

@@ -0,0 +1,102 @@
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { html as l, unsafeStatic as m } from "../../node_modules/lit-html/static.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import h from "./_styles/icon.scss.js";
+import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, o = (d, t, e, n) => {
+  for (var s = void 0, c = d.length - 1, p; c >= 0; c--)
+    (p = d[c]) && (s = p(t, e, s) || s);
+  return s && g(t, e, s), s;
+};
+const a = class a extends f {
+  constructor() {
+    super(...arguments), this.size = "md", this.focusable = !1;
+  }
+  /** True unless the consumer explicitly opted out with `aria-hidden="false"`. */
+  get _isDecorative() {
+    return this.ariaHidden !== "false";
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.setAttribute("aria-hidden", this._isDecorative ? "true" : "false");
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.classList.add("dap-ds-icon");
+  }
+  render() {
+    return l`
+      <span
+        class=${u("icon", {})}
+        part="base"
+        tabindex="-1"
+        aria-hidden=${this._isDecorative ? "true" : "false"}>
+        ${this.name ? this._getNamedIcon() : this._getSlotIcon()}
+      </span>
+    `;
+  }
+  _getNamedIcon() {
+    var e, n;
+    const t = `dap-ds-icon-${this.name}`;
+    return l`
+     <${m(t)}
+        part="icon"
+        size=${(e = this.staticSize) != null ? e : this._getIconSizePx(this.size)}
+        viewBox="0 0 24 24"
+        role="img"
+        aria-hidden=${this._isDecorative ? "true" : "false"}
+        aria-label=${(n = this.ariaLabel) != null ? n : ""}
+        tabindex=${this.focusable ? 0 : -1}
+      >
+      </${m(t)}
+    `;
+  }
+  _getSlotIcon() {
+    return l`
+      <span
+        part="icon"
+        class=${u("icon--custom-icon", { [this.size]: !0 })}
+        aria-hidden=${this._isDecorative ? "true" : "false"}>
+        <slot></slot>
+      </span>
+    `;
+  }
+  _getIconSizePx(t) {
+    switch (t) {
+      case "xxl":
+        return 40;
+      case "xl":
+        return 32;
+      case "lg":
+        return 24;
+      case "md":
+        return 20;
+      case "sm":
+        return 16;
+      case "xs":
+        return 12;
+      default:
+        return 20;
+    }
+  }
+};
+a.tagName = "dap-ds-icon", a.styles = _(h);
+let i = a;
+o([
+  r()
+], i.prototype, "name");
+o([
+  r()
+], i.prototype, "size");
+o([
+  r({ type: Number })
+], i.prototype, "staticSize");
+o([
+  r({ type: Boolean })
+], i.prototype, "focusable");
+export {
+  i as default
+};
+//# sourceMappingURL=icon.component.js.map

package/dist/components/icon/icon.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.component.js","sources":["../../../src/components/icon/icon.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/icon.scss?inline'\n\nexport type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'\n\n/**\n * `dap-ds-icon`\n * @summary An icon is a graphical symbol that represents an object or action.\n * @element dap-ds-icon\n * @title - Icon\n *\n * @property {boolean} ariaHidden - Whether the icon is hidden from the accessibility tree. Default is true.\n * @property {string} ariaLabel - The aria label of the icon.\n *\n * @slot - The content of the icon for custom svg icons.\n *\n * @csspart base - The main icon container.\n * @csspart icon - The icon of the icon.\n *\n * @cssproperty --dds-icon-size-xs - The size of extra small icons (default: 12px)\n * @cssproperty --dds-icon-size-sm - The size of small icons (default: 16px)\n * @cssproperty --dds-icon-size-md - The size of medium icons (default: 20px)\n * @cssproperty --dds-icon-size-lg - The size of large icons (default: 24px)\n * @cssproperty --dds-icon-size-xl - The size of extra large icons (default: 32px)\n * @cssproperty --dds-icon-size-xxl - The size of extra extra large icons (default: 40px)\n */\nexport default class DapDSIcon extends DdsElement {\n  static tagName = 'dap-ds-icon'\n\n  /** The name of the icon */\n  @property() name: string\n  /** The size of the icon\n   * @type {'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property() size: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' = 'md'\n  /** The size of the icon in pixels. This overrides the size attribute. */\n  @property({ type: Number }) staticSize?: number\n  /** Whether the icon is focusable. Default is false. */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** True unless the consumer explicitly opted out with `aria-hidden=\"false\"`. */\n  private get _isDecorative(): boolean {\n    return this.ariaHidden !== 'false'\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.willUpdate(_changedProperties)\n\n    // Icons are decorative by default, so the host is hidden from the a11y tree.\n    // Consumers opt out with aria-hidden=\"false\" (kept as an explicit \"false\"\n    // rather than removing the attribute, which is how the opt-out is tracked).\n    this.setAttribute('aria-hidden', this._isDecorative ? 'true' : 'false')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <span\n        class=${clsx('icon', {})}\n        part=\"base\"\n        tabindex=\"-1\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        ${this.name ? this._getNamedIcon() : this._getSlotIcon()}\n      </span>\n    `\n  }\n\n  private _getNamedIcon() {\n    const IconTag = `dap-ds-icon-${this.name}`\n\n    return html`\n     <${unsafeStatic(IconTag)}\n        part=\"icon\"\n        size=${this.staticSize ?? this._getIconSizePx(this.size)}\n        viewBox=\"0 0 24 24\"\n        role=\"img\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}\n        aria-label=${this.ariaLabel ?? ''}\n        tabindex=${this.focusable ? 0 : -1}\n      >\n      </${unsafeStatic(IconTag)}\n    `\n  }\n\n  private _getSlotIcon() {\n    return html`\n      <span\n        part=\"icon\"\n        class=${clsx('icon--custom-icon', { [this.size]: true })}\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getIconSizePx(size: IconSize): number {\n    const defaultSize = 20\n    switch (size) {\n      case 'xxl':\n        return 40\n      case 'xl':\n        return 32\n      case 'lg':\n        return 24\n      case 'md':\n        return defaultSize\n      case 'sm':\n        return 16\n      case 'xs':\n        return 12\n      default:\n        return defaultSize\n    }\n  }\n}\n"],"names":["_DapDSIcon","DdsElement","_changedProperties","html","clsx","IconTag","unsafeStatic","_a","_b","size","unsafeCSS","styles","DapDSIcon","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQ+D,KAAA,OAAA,MAIV,KAAA,YAAA;AAAA,EAAA;AAAA;AAAA,EAKnD,IAAY,gBAAyB;AACnC,WAAO,KAAK,eAAe;AAAA,EAAA;AAAA,EAGnB,WACRC,GACM;AACN,UAAM,WAAWA,CAAkB,GAKnC,KAAK,aAAa,eAAe,KAAK,gBAAgB,SAAS,OAAO;AAAA,EAAA;AAAA,EAG9D,aACRA,GACM;AACN,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;AACA,WAAAC;AAAAA;AAAAA,gBAEKC,EAAK,QAAQ,EAAE,CAAC;AAAA;AAAA;AAAA,sBAGV,KAAK,gBAAgB,SAAS,OAAO;AAAA,UACjD,KAAK,OAAO,KAAK,cAAkB,IAAA,KAAK,aAAc,CAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKtD,gBAAgB;;AAChB,UAAAC,IAAU,eAAe,KAAK,IAAI;AAEjC,WAAAF;AAAAA,QACHG,EAAaD,CAAO,CAAC;AAAA;AAAA,gBAEdE,IAAA,KAAK,eAAL,OAAAA,IAAmB,KAAK,eAAe,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,sBAG1C,KAAK,gBAAgB,SAAS,OAAO;AAAA,sBACtCC,IAAA,KAAK,cAAL,OAAAA,IAAkB,EAAE;AAAA,mBACtB,KAAK,YAAY,IAAI,EAAE;AAAA;AAAA,UAEhCF,EAAaD,CAAO,CAAC;AAAA;AAAA,EAAA;AAAA,EAIrB,eAAe;AACd,WAAAF;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,qBAAqB,EAAE,CAAC,KAAK,IAAI,GAAG,IAAM,CAAC;AAAA,sBAC1C,KAAK,gBAAgB,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMjD,eAAeK,GAAwB;AAE7C,YAAQA,GAAM;AAAA,MACZ,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAEJ;AAlGET,EAAO,UAAU,eAaDA,EAAA,SAASU,EAAUC,CAAM;AAd3C,IAAqBC,IAArBZ;AAIca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,MAAA;AAEgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,YAAA;AAECC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,WAAA;"}

package/dist/components/icon/icon.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSIcon } from './icon.component.js';
-export * from './icon.component.js';
+import { default as DapDSIcon } from './icon.component';
+export * from './icon.component';
 export default DapDSIcon;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/icon/icon.js

@@ -0,0 +1,6 @@
+import e from "./icon.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/icon.ts"],"sourcesContent":["import DapDSIcon from './icon.component'\n\nexport * from './icon.component'\nexport default DapDSIcon\n\nDapDSIcon.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-icon': DapDSIcon\n  }\n}\n"],"names":["DapDSIcon"],"mappings":";AAKAA,EAAU,OAAO;"}

package/dist/components/icon-button/icon-button.component.d.ts

@@ -1,6 +1,7 @@
 import { PropertyValueMap } from 'lit';
 import { Size } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSIcon } from '../icon/icon.component';
 declare const IconButtonBaseWithSized: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -60,6 +61,10 @@ export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;
  * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)
  */
 export default class DapDSIconButton extends IconButtonBaseWithSized {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     /** The type of the button.
      * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}
      */