npm - dap-design-system - Versions diffs - 0.62.3 → 0.63.0 - Mend

dap-design-system 0.62.3 → 0.63.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.

Files changed (663) hide show

package/dist/components/form/input-group/input-group.component.js CHANGED Viewed

@@ -1,25 +1,23 @@
 import { clsx as c } 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 { queryAssignedElements as b } from "../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { ifDefined as o } from "../../../node_modules/lit-html/directives/if-defined.js";
-import { html as s } from "../../../node_modules/lit-html/static.js";
-import { GenericFormElement as h } from "../../../internal/mixin/genericFormElement.js";
-import f from "../../feedback/feedback.component.js";
-import m from "../../icon/icon.component.js";
-import u from "../../icon-button/icon-button.component.js";
-import $ from "../../tooltip/tooltip.component.js";
-import g from "../../typography/typography.component.js";
-import k from "../form-label/form-label.component.js";
-import y from "./input-group.scss.js";
-import { unsafeCSS as _ } from "../../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as b } from "lit";
+import { queryAssignedElements as h } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+import { html as s } from "lit/static-html.js";
+import { GenericFormElement as f } from "../../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as m } from "../../../internal/templates/formLabel.js";
+import u from "../../feedback/feedback.component.js";
+import g from "../../icon/icon.component.js";
+import $ from "../../icon-button/icon-button.component.js";
+import k from "../../tooltip/tooltip.component.js";
+import y from "../../typography/typography.component.js";
+import L from "../form-label/form-label.component.js";
+import _ from "./input-group.scss.js";
 var z = Object.defineProperty, C = (p, t, e, a) => {
-  for (var i = void 0, l = p.length - 1, n; l >= 0; l--)
-    (n = p[l]) && (i = n(t, e, i) || i);
+  for (var i = void 0, d = p.length - 1, n; d >= 0; d--)
+    (n = p[d]) && (i = n(t, e, i) || i);
   return i && z(t, e, i), i;
 };
-const d = class d extends h {
+const l = class l extends f {
   handleLabelClick() {
     var e;
     const t = (e = this.allInputs.find((a) => a.checked)) != null ? e : this.allInputs[0];
@@ -49,21 +47,23 @@ const d = class d extends h {
         aria-errormessage=${o(this.feedbackId)}>
         ${(this.label || this.tooltip) && s`<legend class="input-group__legend">
           <div class="label-container">
-            ${this.label && s`<dap-ds-form-label
-              part="label"
-              id="label"
-              .size=${this.size}
-              .required=${this.required}
-              .requiredLabel=${this.requiredLabel}
-              .optional=${this.optional}
-              .optionalLabel=${this.optionalLabel}
-              .disabled=${this.disabled}
-              .subtle=${this.subtle}
-              .noMargin=${!!this.description}
-              .hideLabel=${this.hideLabel}
-              label=${o(this.label)}
+            ${this.label && s`<span
+              class="label-click-target"
               @click=${this.handleLabelClick}>
-            </dap-ds-form-label>`}
+              ${m({
+      label: this.label,
+      id: "label",
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      subtle: this.subtle,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+            </span>`}
             ${this.tooltip && s` <dap-ds-tooltip
               part="tooltip"
               content=${this.tooltip}
@@ -119,17 +119,17 @@ const d = class d extends h {
     `;
   }
 };
-d.tagName = "dap-ds-input-group", d.dependencies = {
-  "dap-ds-form-label": k,
-  "dap-ds-tooltip": $,
-  "dap-ds-icon-button": u,
-  "dap-ds-icon": m,
-  "dap-ds-typography": g,
-  "dap-ds-feedback": f
-}, d.styles = _(y);
-let r = d;
+l.tagName = "dap-ds-input-group", l.dependencies = {
+  "dap-ds-form-label": L,
+  "dap-ds-tooltip": k,
+  "dap-ds-icon-button": $,
+  "dap-ds-icon": g,
+  "dap-ds-typography": y,
+  "dap-ds-feedback": u
+}, l.styles = b(_);
+let r = l;
 C([
-  b()
+  h()
 ], r.prototype, "allInputs");
 export {
   r as default

package/dist/components/form/input-group/input-group.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.component.js","sources":["../../../../src/components/form/input-group/input-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport DapDSCheckbox from '@/components/checkbox/checkbox.component'\nimport DapDSSwitch from '@/components/switch/switch.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.scss?inline'\n\n/*\n `dap-ds-input-group`\n * @summary An input group is a container for inputs.\n * @element dap-ds-input-group\n * @title - Input group\n * @group form\n \n @property {string} label - The label of the input 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 input group.\n * @property {string} tooltip - The tooltip of the input group.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the input group.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} optionalLabel - The label of the input group when it is optional.\n * @property {string} requiredLabel - The indicator of the input group when it is required. (default: '')\n @property {boolean} disabled - Whether the input group is disabled.\n * @property {'xs' \| 'sm' \| 'lg'} size - The size of the input group. Default is `sm`.\n * @property {boolean} required - Whether the input group is required.\n * @property {boolean} optional - Whether the input group is optional.\n * @property {string} feedback - The feedback of the input.\n * @property {string} feedbackType - The type of the feedback.\n * @property {boolean} subtle - Whether the input group label is subtle.\n \n @slot - The content of the input group items.\n * @slot feedback-icon - The custom icon of the feedback.\n \n @csspart base - The main input group container.\n * @csspart label - The label of the input group.\n * @csspart description - The description of the input group.\n * @csspart tooltip - The tooltip of the input group.\n * @csspart container - The container of the input group items.\n */\nexport default class DapDSInputGroup extends GenericFormElement {\n static tagName = 'dap-ds-input-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 static readonly styles = unsafeCSS(styles)\n\n @queryAssignedElements() allInputs: DapDSCheckbox[] \| DapDSSwitch[]\n\n handleLabelClick() {\n const checkedInput =\n this.allInputs.find(input => input.checked) ?? this.allInputs[0]\n\n checkedInput?.focus()\n }\n\n private getItems() {\n return [\n ...this.querySelectorAll<DapDSSwitch \| DapDSCheckbox>(\n 'dap-ds-switch, dap-ds-checkbox',\n ),\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.getItems().forEach(item => {\n item[name] = value !== null\n })\n }\n }\n\n render() {\n return html`\n <fieldset\n id=\"input\"\n class=\"input-group\"\n part=\"base\"\n .disabled=${this.disabled}\n aria-labelledby=\"label\"\n aria-describedby=${`description ${this.feedbackId}`}\n aria-errormessage=${ifDefined(this.feedbackId)}>\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 .optional~~=${~~this.optional}\n .optionalLabel~~=${~~this.optionalLabel}\n .disabled~~=${~~this.disabled}\n .subtle~~=${~~this.subtle}\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 class=\"input-group__toggle-button\"\n slot=\"trigger\"\n aria-label=${this.tooltipAriaLabel}\n size=${this.size as 'xs' \| 'sm' \| '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 <slot></slot>\n </div>\n ${this.feedback && this._renderFeedback()}\n </fieldset>\n `\n }\n\n private _handleSlotChange(event: Event) {\n const target = event?.target as HTMLInputElement\n target.setAttribute('slot', 'icon')\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' \| 'xs')}\"\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":["_DapDSInputGroup","GenericFormElement","checkedInput","_a","input","name","_old","value","item","html","ifDefined","clsx","event","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSInputGroup","__decorateClass","queryAssignedElements"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAmDA~~,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAmB;AAAA,EAgB9D,mBAAmB;;AACX,UAAAC,KACJC,IAAA,KAAK,UAAU,KAAK,CAAAC,MAASA,EAAM,OAAO,MAA1C,OAAAD,IAA+C,KAAK,UAAU,CAAC;AAEjE,IAAAD,KAAA,QAAAA,EAAc;AAAA,EAAM;AAAA,EAGd,WAAW;AACV,WAAA;AAAA,MACL,GAAG,KAAK;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAAA,EAGF,yBACEG,GACAC,GACAC,GACA;AACM,UAAA,yBAAyBF,GAAMC,GAAMC,CAAK,IAC5CF,MAAS,cAAcA,MAAS,cAC7B,KAAA,SAAA,EAAW,QAAQ,CAAQG,MAAA;AACzB,MAAAA,EAAAH,CAAI,IAAIE,MAAU;AAAA,IAAA,CACxB;AAAA,EACH;AAAA,EAGF,SAAS;AACA,WAAAE;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~,oBAKS,KAAK,QAAQ;AAAA;AAAA,2BAEN,eAAe,KAAK,UAAU,EAAE;AAAA,4BAC/BC,EAAU,KAAK,UAAU,CAAC;AAAA,WAC3C,KAAK,SAAS,KAAK,YACtBD;~~AAAAA~~;~~AAAAA~~,cAEM,KAAK,SACPA;~~AAAAA~~;~~AAAAA;AAAAA~~,~~sBAGU~~,KAAK,~~IAAI~~;AAAA,~~0BACL~~,~~KAAK,QAAQ~~;AAAA~~,+BACR~~,KAAK,~~aAAa~~;AAAA,~~0BACvB~~,KAAK~~,QAAQ~~;AAAA~~,+BACR~~,KAAK~~,aAAa~~;AAAA,~~0BACvB~~,KAAK~~,QAAQ~~;AAAA,~~wBACf~~,KAAK~~,MAAM~~;AAAA,~~0BACT~~,~~CAAC~~,~~CAAC,~~KAAK~~,WAAW~~;AAAA,~~2BACjB~~,KAAK~~,SAAS~~;AAAA,~~sBACnBC~~,~~EAAU~~,KAAK,~~KAAK~~,CAAC;AAAA,~~uBACpB~~,KAAK,~~gBAAgB~~;AAAA,~~iCACX~~;AAAA,~~cACnB~~,KAAK,~~WACPD~~;~~AAAAA~~;~~AAAAA~~,wBAEY,KAAK,OAAO;AAAA;AAAA,0BAEV,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKlB,KAAK,gBAAgB;AAAA,uBAC3B,KAAK,IAA0B;AAAA,2BAC3B,KAAK,SAAS,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,8BAK7B;AAAA;AAAA,YAElB,KAAK,eACPA;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~,~~sBAIYE~~,EAAK,mBAAmB,CAAC;AAAA,~~qBAC1BD~~,EAAU,KAAK,IAA6B,CAAC;AAAA;AAAA,gBAElD,KAAK,WAAW;AAAA;AAAA,WAErB;AAAA,kBACO;AAAA;AAAA;AAAA;AAAA,UAIR,KAAK,YAAY,KAAK,gBAAiB,CAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKvC,~~kBAAkBE~~,GAAc;AAE/B,KADQA,KAAA,gBAAAA,EAAO,QACf,aAAa,QAAQ,MAAM;AAAA,EAAA;AAAA,EAG5B,kBAAkB;AACjB,~~WAAAH~~;~~AAAAA~~;~~AAAAA~~;~~AAAAA~~,uBAGYC,EAAU,KAAK,YAAY,CAAC;AAAA,wBAC3BA,EAAU,KAAK,IAA0B,CAAC;AAAA;AAAA,kBAEhD,KAAK,MAAM;AAAA;AAAA;AAAA,yBAGJ,KAAK,iBAAiB;AAAA,UACrC,KAAK,QAAQ;AAAA;AAAA;AAAA,EAAA;AAIvB;~~AAnIEV~~,EAAO,UAAU,sBAEjBA,EAAO,eAAe;AAAA,EACpB,~~qBAAqBa~~;AAAA,EACrB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AAAA,EACf,qBAAqBC;AAAA,EACrB,mBAAmBC;AACrB,~~GAEgBlB~~,EAAA,~~SAASmB~~,EAAUC,CAAM;AAZ3C,IAAqBC,~~IAArBrB~~;~~AAc2BsB~~,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAdJF,EAcM,WAAA,WAAA;"}
1	+ {"version":3,"file":"input-group.component.js","sources":["../../../../src/components/form/input-group/input-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport DapDSCheckbox from '@/components/checkbox/checkbox.component'\nimport DapDSSwitch from '@/components/switch/switch.component'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\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.scss?inline'\n\n/*\n `dap-ds-input-group`\n * @summary An input group is a container for inputs.\n * @element dap-ds-input-group\n * @title - Input group\n * @group form\n \n @property {string} label - The label of the input 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 input group.\n * @property {string} tooltip - The tooltip of the input group.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the input group.\n * @property {string} tooltipAriaLabel - The aria label of the tooltip.\n * @property {string} optionalLabel - The label of the input group when it is optional.\n * @property {string} requiredLabel - The indicator of the input group when it is required. (default: '')\n @property {boolean} disabled - Whether the input group is disabled.\n * @property {'xs' \| 'sm' \| 'lg'} size - The size of the input group. Default is `sm`.\n * @property {boolean} required - Whether the input group is required.\n * @property {boolean} optional - Whether the input group is optional.\n * @property {string} feedback - The feedback of the input.\n * @property {string} feedbackType - The type of the feedback.\n * @property {boolean} subtle - Whether the input group label is subtle.\n \n @slot - The content of the input group items.\n * @slot feedback-icon - The custom icon of the feedback.\n \n @csspart base - The main input group container.\n * @csspart label - The label of the input group.\n * @csspart description - The description of the input group.\n * @csspart tooltip - The tooltip of the input group.\n * @csspart container - The container of the input group items.\n * @csspart feedback - The feedback of the input group.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nexport default class DapDSInputGroup extends GenericFormElement {\n static tagName = 'dap-ds-input-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 static readonly styles = unsafeCSS(styles)\n\n @queryAssignedElements() allInputs: DapDSCheckbox[] \| DapDSSwitch[]\n\n handleLabelClick() {\n const checkedInput =\n this.allInputs.find(input => input.checked) ?? this.allInputs[0]\n\n checkedInput?.focus()\n }\n\n private getItems() {\n return [\n ...this.querySelectorAll<DapDSSwitch \| DapDSCheckbox>(\n 'dap-ds-switch, dap-ds-checkbox',\n ),\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.getItems().forEach(item => {\n item[name] = value !== null\n })\n }\n }\n\n render() {\n return html`\n <fieldset\n id=\"input\"\n class=\"input-group\"\n part=\"base\"\n .disabled=${this.disabled}\n aria-labelledby=\"label\"\n aria-describedby=${`description ${this.feedbackId}`}\n aria-errormessage=${ifDefined(this.feedbackId)}>\n ${(this.label \|\| this.tooltip) &&\n html`<legend class=\"input-group__legend\">\n <div class=\"label-container\">\n ${this.label &&\n html`<span\n class=\"label-click-target\"\n @click=${this.handleLabelClick}>\n ${formLabelTemplate({\n label: this.label,\n id: 'label',\n size: this.size,\n required: this.required,\n requiredLabel: this.requiredLabel,\n optional: this.optional,\n optionalLabel: this.optionalLabel,\n disabled: this.disabled,\n subtle: this.subtle,\n noMargin: !!this.description,\n hideLabel: this.hideLabel,\n })}\n </span>`}\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 class=\"input-group__toggle-button\"\n slot=\"trigger\"\n aria-label=${this.tooltipAriaLabel}\n size=${this.size as 'xs' \| 'sm' \| '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 <slot></slot>\n </div>\n ${this.feedback && this._renderFeedback()}\n </fieldset>\n `\n }\n\n private _handleSlotChange(event: Event) {\n const target = event?.target as HTMLInputElement\n target.setAttribute('slot', 'icon')\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' \| 'xs')}\"\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":["_DapDSInputGroup","GenericFormElement","checkedInput","_a","input","name","_old","value","item","html","ifDefined","formLabelTemplate","clsx","event","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSInputGroup","__decorateClass","queryAssignedElements"],"mappings":";;;;;;;;;;;;;;;;;;;AAwDA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAmB;AAAA,EAgB9D,mBAAmB;;AACX,UAAAC,KACJC,IAAA,KAAK,UAAU,KAAK,CAAAC,MAASA,EAAM,OAAO,MAA1C,OAAAD,IAA+C,KAAK,UAAU,CAAC;AAEjE,IAAAD,KAAA,QAAAA,EAAc;AAAA,EAAM;AAAA,EAGd,WAAW;AACV,WAAA;AAAA,MACL,GAAG,KAAK;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAAA,EAGF,yBACEG,GACAC,GACAC,GACA;AACM,UAAA,yBAAyBF,GAAMC,GAAMC,CAAK,IAC5CF,MAAS,cAAcA,MAAS,cAC7B,KAAA,SAAA,EAAW,QAAQ,CAAQG,MAAA;AACzB,MAAAA,EAAAH,CAAI,IAAIE,MAAU;AAAA,IAAA,CACxB;AAAA,EACH;AAAA,EAGF,SAAS;AACA,WAAAE;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKS,KAAK,QAAQ;AAAA;AAAA,2BAEN,eAAe,KAAK,UAAU,EAAE;AAAA,4BAC/BC,EAAU,KAAK,UAAU,CAAC;AAAA,WAC3C,KAAK,SAAS,KAAK,YACtBD;AAAA;AAAA,cAEM,KAAK,SACPA;AAAA;AAAA,uBAEW,KAAK,gBAAgB;AAAA,gBAC5BE,EAAkB;AAAA,MAClB,OAAO,KAAK;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,eAAe,KAAK;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,eAAe,KAAK;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,UAAU,CAAC,CAAC,KAAK;AAAA,MACjB,WAAW,KAAK;AAAA,IAAA,CACjB,CAAC;AAAA,oBACI;AAAA,cACN,KAAK,WACPF;AAAA;AAAA,wBAEY,KAAK,OAAO;AAAA;AAAA,0BAEV,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKlB,KAAK,gBAAgB;AAAA,uBAC3B,KAAK,IAA0B;AAAA,2BAC3B,KAAK,SAAS,OAAO,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,8BAK7B;AAAA;AAAA,YAElB,KAAK,eACPA;AAAA;AAAA;AAAA;AAAA,sBAIYG,EAAK,mBAAmB,CAAC;AAAA,qBAC1BF,EAAU,KAAK,IAA6B,CAAC;AAAA;AAAA,gBAElD,KAAK,WAAW;AAAA;AAAA,WAErB;AAAA,kBACO;AAAA;AAAA;AAAA;AAAA,UAIR,KAAK,YAAY,KAAK,gBAAiB,CAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKvC,kBAAkBG,GAAc;AAE/B,KADQA,KAAA,gBAAAA,EAAO,QACf,aAAa,QAAQ,MAAM;AAAA,EAAA;AAAA,EAG5B,kBAAkB;AACjB,WAAAJ;AAAA;AAAA;AAAA,uBAGYC,EAAU,KAAK,YAAY,CAAC;AAAA,wBAC3BA,EAAU,KAAK,IAA0B,CAAC;AAAA;AAAA,kBAEhD,KAAK,MAAM;AAAA;AAAA;AAAA,yBAGJ,KAAK,iBAAiB;AAAA,UACrC,KAAK,QAAQ;AAAA;AAAA;AAAA,EAAA;AAIvB;AArIEV,EAAO,UAAU,sBAEjBA,EAAO,eAAe;AAAA,EACpB,qBAAqBc;AAAA,EACrB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AAAA,EACf,qBAAqBC;AAAA,EACrB,mBAAmBC;AACrB,GAEgBnB,EAAA,SAASoB,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBtB;AAc2BuB,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAdJF,EAcM,WAAA,WAAA;"}

package/dist/components/form/input-group/input-group.scss.js CHANGED Viewed

@@ -1,5 +1,5 @@
-const o = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:host :focus-visible{outline:none}.input-group{margin:0;padding:0;border-width:0}.input-group__label-container{display:flex;align-items:center;justify-content:space-between}.input-group__legend{display:flex;flex-direction:column;width:100%;margin-bottom:var(--dds-spacing-400)}.input-group__items{display:flex;flex-direction:column;gap:var(--dds-spacing-300)}.input-group__toggle-button dap-ds-icon{display:flex}.input-group__toggle-button:hover dap-ds-icon{color:var(--dds-icon-neutral-base)}.input-group__toggle-button:active dap-ds-icon{color:var(--dds-icon-neutral-strong)}.input-group__toggle-button.disabled dap-ds-icon{color:var(--dds-icon-neutral-disabled)}";
+const d = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host :focus-visible{outline:none}.label-click-target{display:contents}.input-group{margin:0;padding:0;border-width:0}.input-group__label-container{display:flex;align-items:center;justify-content:space-between}.input-group__legend{display:flex;flex-direction:column;width:100%;margin-bottom:var(--dds-spacing-400)}.input-group__items{display:flex;flex-direction:column;gap:var(--dds-spacing-300)}.input-group__toggle-button dap-ds-icon{display:flex}.input-group__toggle-button:hover dap-ds-icon{color:var(--dds-icon-neutral-base)}.input-group__toggle-button:active dap-ds-icon{color:var(--dds-icon-neutral-strong)}.input-group__toggle-button.disabled dap-ds-icon{color:var(--dds-icon-neutral-disabled)}";
 export {
-  o as default
+  d as default
 };
 //# sourceMappingURL=input-group.scss.js.map

package/dist/components/form/radio-group/radio-group.component.d.ts CHANGED Viewed

@@ -42,6 +42,11 @@ import { default as DapDSFormLabel } from '../form-label/form-label.component';
  * @csspart label - The label of the radio group.
  * @csspart tooltip - The tooltip of the radio group.
  * @csspart container - The container of the radio group items.
+ * @csspart description - The description of the radio group.
+ * @csspart feedback - The feedback of the radio group.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  */
 export default class DapDSRadioGroup extends GenericFormElement {
     static tagName: string;

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

@@ -2,14 +2,14 @@ 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) => {
+var g = (d, t, e) => t in d ? $(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, k = (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));
+}, v = (d, t) => V(d, A(t));
 var f = (d, t, e) => new Promise((i, s) => {
   var o = (l) => {
     try {
@@ -26,29 +26,26 @@ var f = (d, t, e) => new Promise((i, s) => {
   }, 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 { clsx as L } from "../../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as R } from "lit";
+import { property as y, query as w } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { html as r } from "lit/static-html.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) => {
+import { formLabelTemplate as I } from "../../../internal/templates/formLabel.js";
+import q from "../../feedback/feedback.component.js";
+import F from "../../icon/icon.component.js";
+import _ from "../../icon-button/icon-button.component.js";
+import D from "../../tooltip/tooltip.component.js";
+import E from "../../typography/typography.component.js";
+import x from "../form-label/form-label.component.js";
+import M from "../input-group/input-group.scss.js";
+var T = 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;
+  return s && T(t, e, s), s;
 };
-const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c extends C {
+const U = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c extends C {
   constructor() {
     super(...arguments), this.tooltipPlacement = "bottom", this.optionalLabel = "";
   }
@@ -109,7 +106,7 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
   }
   handleKeyDown(t) {
     var n;
-    if (!T.includes(t.key))
+    if (!U.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;
@@ -132,7 +129,7 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
     return !this.required || this.hasValue;
   }
   get validity() {
-    return k(v({}, this.internals.validity), {
+    return v(k({}, this.internals.validity), {
       valid: this.checkValidity(),
       valueMissing: this.required && !this.hasValue
     });
@@ -149,39 +146,41 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
     t.preventDefault();
   }
   render() {
-    return h`
+    return r`
       <fieldset
         id="input"
         part="base"
         class="input-group"
         .disabled=${this.disabled}
-        form=${r(this.form)}
+        form=${h(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)}
+        aria-errormessage=${h(this.feedbackId)}
         @invalid=${this.handleInvalid}>
-        ${(this.label || this.tooltip) && h`<legend class="input-group__legend">
+        ${(this.label || this.tooltip) && r`<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)}
+            ${this.label && r`<span
+              class="label-click-target"
               @click=${this.handleLabelClick}>
-            </dap-ds-form-label>`}
-            ${this.tooltip && h` <dap-ds-tooltip
+              ${I({
+      label: this.label,
+      id: "label",
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      subtle: this.subtle,
+      disabled: this.disabled,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+            </span>`}
+            ${this.tooltip && r` <dap-ds-tooltip
               part="tooltip"
               content=${this.tooltip}
               mode="toggle"
@@ -199,12 +198,12 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
               </dap-ds-icon-button>
             </dap-ds-tooltip>`}
           </div>
-          ${this.description && h`
+          ${this.description && r`
             <dap-ds-typography
               part="description"
               variant="description"
-              class=${R("input-description")}
-              size=${r(this.size)}
+              class=${L("input-description")}
+              size=${h(this.size)}
               id="description">
               ${this.description}
             </dap-ds-typography>
@@ -224,11 +223,11 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
     `;
   }
   _renderFeedback() {
-    return h`
+    return r`
       <dap-ds-feedback
         part="feedback"
-        feedbackType=${r(this.feedbackType)}
-        feedbackSize="${r(this.size)}"
+        feedbackType=${h(this.feedbackType)}
+        feedbackSize="${h(this.size)}"
         id="feedback"
         .subtle=${this.subtle}>
         <slot
@@ -240,13 +239,13 @@ const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c
   }
 };
 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);
+  "dap-ds-form-label": x,
+  "dap-ds-tooltip": D,
+  "dap-ds-icon-button": _,
+  "dap-ds-icon": F,
+  "dap-ds-typography": E,
+  "dap-ds-feedback": q
+}, c.styles = R(M);
 let u = c;
 b([
   y()

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

	@@ -1 +1 @@
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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"}
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'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\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 * @csspart description - The description of the radio group.\n * @csspart feedback - The feedback of the radio group.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\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`<span\n class=\"label-click-target\"\n @click=${this.handleLabelClick}>\n ${formLabelTemplate({\n label: this.label,\n id: 'label',\n size: this.size,\n required: this.required,\n requiredLabel: this.requiredLabel,\n optional: this.optional,\n optionalLabel: this.optionalLabel,\n subtle: this.subtle,\n disabled: this.disabled,\n noMargin: !!this.description,\n hideLabel: this.hideLabel,\n })}\n </span>`}\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","formLabelTemplate","clsx","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSRadioGroup","__decorateClass","property","query"],"mappings":"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"}

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

@@ -1,18 +1,15 @@
-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;
+import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as h } from "lit";
+import { property as r } from "lit/decorators.js";
+import { html as l, unsafeStatic as f } from "lit/static-html.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import _ from "./_styles/icon.scss.js";
+var g = Object.defineProperty, o = (d, e, t, n) => {
+  for (var s = void 0, c = d.length - 1, u; c >= 0; c--)
+    (u = d[c]) && (s = u(e, t, s) || s);
+  return s && g(e, t, s), s;
 };
-const a = class a extends f {
+const a = class a extends m {
   constructor() {
     super(...arguments), this.size = "md", this.focusable = !1;
   }
@@ -20,16 +17,16 @@ const a = class a extends f {
   get _isDecorative() {
     return this.ariaHidden !== "false";
   }
-  willUpdate(t) {
-    super.willUpdate(t), this.setAttribute("aria-hidden", this._isDecorative ? "true" : "false");
+  willUpdate(e) {
+    super.willUpdate(e), this.setAttribute("aria-hidden", this._isDecorative ? "true" : "false");
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.classList.add("dap-ds-icon");
+  firstUpdated(e) {
+    super.firstUpdated(e), this.classList.add("dap-ds-icon");
   }
   render() {
     return l`
       <span
-        class=${u("icon", {})}
+        class=${p("icon", {})}
         part="base"
         tabindex="-1"
         aria-hidden=${this._isDecorative ? "true" : "false"}>
@@ -38,33 +35,33 @@ const a = class a extends f {
     `;
   }
   _getNamedIcon() {
-    var e, n;
-    const t = `dap-ds-icon-${this.name}`;
+    var t, n;
+    const e = `dap-ds-icon-${this.name}`;
     return l`
-     <${m(t)}
+     <${f(e)}
         part="icon"
-        size=${(e = this.staticSize) != null ? e : this._getIconSizePx(this.size)}
+        size=${(t = this.staticSize) != null ? t : 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)}
+      </${f(e)}
     `;
   }
   _getSlotIcon() {
     return l`
       <span
         part="icon"
-        class=${u("icon--custom-icon", { [this.size]: !0 })}
+        class=${p("icon--custom-icon", { [this.size]: !0 })}
         aria-hidden=${this._isDecorative ? "true" : "false"}>
         <slot></slot>
       </span>
     `;
   }
-  _getIconSizePx(t) {
-    switch (t) {
+  _getIconSizePx(e) {
+    switch (e) {
       case "xxl":
         return 40;
       case "xl":
@@ -82,7 +79,7 @@ const a = class a extends f {
     }
   }
 };
-a.tagName = "dap-ds-icon", a.styles = _(h);
+a.tagName = "dap-ds-icon", a.styles = h(_);
 let i = a;
 o([
   r()