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/password-input/password-input.component.js CHANGED Viewed

@@ -1,25 +1,19 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f, html as n } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as w } from "../../node_modules/lit-html/directives/if-defined.js";
-import "../../localization/localization.js";
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as r, css as b, nothing as m, html as d } from "lit";
+import { state as f, property as u } from "lit/decorators.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
 import g from "../icon/icon.component.js";
 import y from "../icon-button/icon-button.component.js";
-import { InputBaseElement as d } from "../input/input-base-element.js";
+import { InputBaseElement as l } from "../input/input-base-element.js";
 import x from "../spinner/spinner.component.js";
-import $ from "../stack/stack.component.js";
-import V from "./password-input.scss.js";
-import { unsafeCSS as c, css as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var k = Object.defineProperty, h = (r, t, a, v) => {
-  for (var s = void 0, e = r.length - 1, p; e >= 0; e--)
-    (p = r[e]) && (s = p(t, a, s) || s);
-  return s && k(t, a, s), s;
+import V from "../stack/stack.component.js";
+import $ from "./password-input.scss.js";
+var _ = Object.defineProperty, c = (a, t, n, k) => {
+  for (var s = void 0, e = a.length - 1, p; e >= 0; e--)
+    (p = a[e]) && (s = p(t, n, s) || s);
+  return s && _(t, n, s), s;
 };
-const i = class i extends d {
+const i = class i extends l {
   constructor() {
     super(), this.passwordVisibile = !1, this.toggleButtonTestId = "password-input-toggle-button", this.type = "password";
   }
@@ -31,20 +25,20 @@ const i = class i extends d {
   }
   render() {
     return this.renderInput(
-      n` <span
+      d` <span
         part="postfix"
-        class=${m("input__addon-postfix password-input", {
+        class=${h("input__addon-postfix password-input", {
         "password-input--visible": this.passwordVisibile
       })}>
         <dap-ds-stack direction="row" slot="postfix">
-          ${this.loading ? n`<dap-ds-spinner size="lg"></dap-ds-spinner>` : f}
+          ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : m}
           <dap-ds-icon-button
             part="show-button"
             data-testid=${this.toggleButtonTestId}
             exportparts="base:show-button-base, content: show-button-content"
             size=${w(this.getIconSize(this.size))}
             role="switch"
-            arialabel="${this.passwordVisibile ? l("hide") : l("show")}"
+            arialabel="${this.passwordVisibile ? this.localize.t("hide") : this.localize.t("show")}"
             aria-checked=${this.passwordVisibile === !0 ? "true" : "false"}
             .disabled=${this.disabled}
             @click=${this._toggleVisibility}>
@@ -67,20 +61,20 @@ const i = class i extends d {
   }
 };
 i.tagName = "dap-ds-password-input", i.dependencies = {
-  "dap-ds-stack": $,
+  "dap-ds-stack": V,
   "dap-ds-spinner": x,
   "dap-ds-icon-button": y,
   "dap-ds-icon": g
-}, i.styles = _`
-    ${c(d.styles)}
-    ${c(V)}
+}, i.styles = b`
+    ${r(l.styles)}
+    ${r($)}
   `;
 let o = i;
-h([
-  u()
+c([
+  f()
 ], o.prototype, "passwordVisibile");
-h([
-  b()
+c([
+  u()
 ], o.prototype, "toggleButtonTestId");
 export {
   o as default

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

	@@ -1 +1 @@
1	- {"version":3,"file":"password-input.component.js","sources":["../../../src/components/password-input/password-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { css, html, nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { translate } from '@/localization/localization'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\nimport style from './password-input.scss?inline'\n\n/*\n `dap-ds-password-input`\n * @summary A password input a field for entering a password.\n * @element dap-ds-password-input\n * @title - Password input\n \n @property {string} label - The label of the password input.\n * @property {string} placeholder - The placeholder of the password input.\n * @property {string} description - The description of the password input.\n * @property {string} tooltip - The tooltip of the password input.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} status - The status of the password input. Can be `success` or `error`.\n * @property {'xs' \| 'sm' \| 'sm'} size - The size of the password input. Default is `sm`.\n * @property {string} name - The name of the password input.\n * @property {string} value - The value of the password input.\n * @property {boolean} disabled - The disabled state of the password input. Default is false.\n * @property {boolean} required - The required state of the password input. Default is false.\n * @property {boolean} readonly - The readonly state of the password input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the password input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' \| 'positive' \| 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the password input. Default is false.\n * @property {boolean} optional - The optional state of the password input.\n * @property {string} optionalLabel - The optional label of the password input.\n * @property {string} requiredLabel - The required indicator of the password input. (default: '')\n @property {boolean} subtle - The weight of the label. Default is `false`\n \n @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n \n @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n \n @csspart postfix - The postfix of the password input.\n * @csspart password-input - The password input.\n * @csspart password-input--visible - The visible password input.\n * @csspart show-button - The show button of the password input.\n * @csspart show-button-base - The base of the show button.\n * @csspart show-button-content - The content of the show button.\n * @csspart show-icon - The show icon of the password input.\n * @csspart show-icon-base - The base of the show icon.\n * @csspart hide-button - The hide button of the password input.\n * @csspart hide-button-base - The base of the hide button.\n * @csspart hide-button-content - The content of the hide button.\n * @csspart hide-icon - The hide icon of the password input.\n * @csspart hide-icon-base - The base of the hide icon.\n /\nexport default class DapDSPasswordInput extends InputBaseElement {\n static tagName = 'dap-ds-password-input'\n\n static dependencies = {\n 'dap-ds-stack': DapDSStack,\n 'dap-ds-spinner': DapDSSpinner,\n 'dap-ds-icon-button': DapDSIconButton,\n 'dap-ds-icon': DapDSIcon,\n }\n\n @state() passwordVisibile: boolean = false\n\n /* `data-testid` for the show/hide toggle button. */\n @property() toggleButtonTestId = 'password-input-toggle-button'\n\n static readonly styles = css`\n ${unsafeCSS(InputBaseElement.styles)}\n ${unsafeCSS(style)}\n `\n constructor() {\n super()\n this.type = 'password'\n }\n\n private _toggleVisibility() {\n this.passwordVisibile = !this.passwordVisibile\n this.type = this.passwordVisibile ? 'text' : 'password'\n }\n\n private getIconSize(size: string) {\n if (size === 'sm') {\n return 'md'\n }\n return size\n }\n\n render() {\n return this.renderInput(\n html` <span\n part=\"postfix\"\n class=${clsx('input__addon-postfix password-input', {\n 'password-input--visible': this.passwordVisibile,\n })}>\n <dap-ds-stack direction=\"row\" slot=\"postfix\">\n ${this.loading\n ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n : nothing}\n <dap-ds-icon-button\n part=\"show-button\"\n data-testid=${this.toggleButtonTestId}\n exportparts=\"base:show-button-base, content: show-button-content\"\n size=${ifDefined(this.getIconSize(this.size)) as 'lg' \| 'md' \| 'sm'}\n role=\"switch\"\n arialabel=\"${this.passwordVisibile\n ? translate('hide')\n : translate('show')}\"\n aria-checked=${this.passwordVisibile === true ? 'true' : 'false'}\n .disabled=${this.disabled}\n @click=${this._toggleVisibility}>\n <slot name=\"icon\">\n <dap-ds-icon\n name=\"eye-line\"\n class=\"input__icon-show\"\n part=\"show-icon\"\n exportparts=\"icon: show-icon, base: show-icon-base\"></dap-ds-icon>\n <dap-ds-icon\n name=\"eye-off-line\"\n class=\"input__icon-hide\"\n part=\"hide-icon\"\n exportparts=\"icon: hide-icon, base: hide-icon-base\"></dap-ds-icon>\n </slot>\n </dap-ds-icon-button>\n </dap-ds-stack>\n </span>`,\n )\n }\n}\n"],"names":["_DapDSPasswordInput","InputBaseElement","size","html","clsx","nothing","ifDefined","translate","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","css","unsafeCSS","style","DapDSPasswordInput","__decorateClass","state","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmGA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAiB;AAAA,EAmB/D,cAAc;AACN,UAAA,GAV6B,KAAA,mBAAA,IAGJ,KAAA,qBAAA,gCAQ/B,KAAK,OAAO;AAAA,EAAA;AAAA,EAGN,oBAAoB;AACrB,SAAA,mBAAmB,CAAC,KAAK,kBACzB,KAAA,OAAO,KAAK,mBAAmB,SAAS;AAAA,EAAA;AAAA,EAGvC,YAAYC,GAAc;AAChC,WAAIA,MAAS,OACJ,OAEFA;AAAA,EAAA;AAAA,EAGT,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAAA;AAAAA,gBAEUC,EAAK,uCAAuC;AAAA,QAClD,2BAA2B,KAAK;AAAA,MAAA,CACjC,CAAC;AAAA;AAAA,YAEE,KAAK,UACHD,iDACAE,CAAO;AAAA;AAAA;AAAA,0BAGK,KAAK,kBAAkB;AAAA;AAAA,mBAE9BC,EAAU,KAAK,YAAY,KAAK,IAAI,CAAC,CAAuB;AAAA;AAAA,yBAEtD,KAAK,mBACdC,EAAU,MAAM,IAChBA,EAAU,MAAM,CAAC;AAAA,2BACN,KAAK,qBAAqB,KAAO,SAAS,OAAO;AAAA,wBACpD,KAAK,QAAQ;AAAA,qBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBvC;AAAA,EAAA;AAEJ;AA3EEP,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBQ;AAAA,EAChB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AACjB,GAOAX,EAAgB,SAASY;AAAAA,MACrBC,EAAUZ,EAAiB,MAAM,CAAC;AAAA,MAClCY,EAAUC,CAAK,CAAC;AAAA;AAjBtB,IAAqBC,IAArBf;AAUWgB,EAAA;AAAA,EAARC,EAAM;AAAA,GAVYF,EAUV,WAAA,kBAAA;AAGGC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAbSH,EAaP,WAAA,oBAAA;"}
1	+ {"version":3,"file":"password-input.component.js","sources":["../../../src/components/password-input/password-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { css, html, nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\nimport style from './password-input.scss?inline'\n\n/*\n `dap-ds-password-input`\n * @summary A password input a field for entering a password.\n * @element dap-ds-password-input\n * @title - Password input\n \n @property {string} label - The label of the password input.\n * @property {string} placeholder - The placeholder of the password input.\n * @property {string} description - The description of the password input.\n * @property {string} tooltip - The tooltip of the password input.\n * @property {'top' \| 'right' \| 'bottom' \| 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} status - The status of the password input. Can be `success` or `error`.\n * @property {'xs' \| 'sm' \| 'sm'} size - The size of the password input. Default is `sm`.\n * @property {string} name - The name of the password input.\n * @property {string} value - The value of the password input.\n * @property {boolean} disabled - The disabled state of the password input. Default is false.\n * @property {boolean} required - The required state of the password input. Default is false.\n * @property {boolean} readonly - The readonly state of the password input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the password input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' \| 'positive' \| 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the password input. Default is false.\n * @property {boolean} optional - The optional state of the password input.\n * @property {string} optionalLabel - The optional label of the password input.\n * @property {string} requiredLabel - The required indicator of the password input. (default: '')\n @property {boolean} subtle - The weight of the label. Default is `false`\n \n @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n \n @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n \n @csspart postfix - The postfix of the password input.\n * @csspart show-button - The show button of the password input.\n * @csspart show-button-base - The base of the show button.\n * @csspart show-button-content - The content of the show button.\n * @csspart show-icon - The show icon of the password input.\n * @csspart show-icon-base - The base of the show icon.\n * @csspart hide-icon - The hide icon of the password input.\n * @csspart hide-icon-base - The base of the hide icon.\n * @csspart base - The main input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\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 DapDSPasswordInput extends InputBaseElement {\n static tagName = 'dap-ds-password-input'\n\n static dependencies = {\n 'dap-ds-stack': DapDSStack,\n 'dap-ds-spinner': DapDSSpinner,\n 'dap-ds-icon-button': DapDSIconButton,\n 'dap-ds-icon': DapDSIcon,\n }\n\n @state() passwordVisibile: boolean = false\n\n /* `data-testid` for the show/hide toggle button. */\n @property() toggleButtonTestId = 'password-input-toggle-button'\n\n static readonly styles = css`\n ${unsafeCSS(InputBaseElement.styles)}\n ${unsafeCSS(style)}\n `\n constructor() {\n super()\n this.type = 'password'\n }\n\n private _toggleVisibility() {\n this.passwordVisibile = !this.passwordVisibile\n this.type = this.passwordVisibile ? 'text' : 'password'\n }\n\n private getIconSize(size: string) {\n if (size === 'sm') {\n return 'md'\n }\n return size\n }\n\n render() {\n return this.renderInput(\n html` <span\n part=\"postfix\"\n class=${clsx('input__addon-postfix password-input', {\n 'password-input--visible': this.passwordVisibile,\n })}>\n <dap-ds-stack direction=\"row\" slot=\"postfix\">\n ${this.loading\n ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n : nothing}\n <dap-ds-icon-button\n part=\"show-button\"\n data-testid=${this.toggleButtonTestId}\n exportparts=\"base:show-button-base, content: show-button-content\"\n size=${ifDefined(this.getIconSize(this.size)) as 'lg' \| 'md' \| 'sm'}\n role=\"switch\"\n arialabel=\"${this.passwordVisibile\n ? this.localize.t('hide')\n : this.localize.t('show')}\"\n aria-checked=${this.passwordVisibile === true ? 'true' : 'false'}\n .disabled=${this.disabled}\n @click=${this._toggleVisibility}>\n <slot name=\"icon\">\n <dap-ds-icon\n name=\"eye-line\"\n class=\"input__icon-show\"\n part=\"show-icon\"\n exportparts=\"icon: show-icon, base: show-icon-base\"></dap-ds-icon>\n <dap-ds-icon\n name=\"eye-off-line\"\n class=\"input__icon-hide\"\n part=\"hide-icon\"\n exportparts=\"icon: hide-icon, base: hide-icon-base\"></dap-ds-icon>\n </slot>\n </dap-ds-icon-button>\n </dap-ds-stack>\n </span>`,\n )\n }\n}\n"],"names":["_DapDSPasswordInput","InputBaseElement","size","html","clsx","nothing","ifDefined","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","css","unsafeCSS","style","DapDSPasswordInput","__decorateClass","state","property"],"mappings":";;;;;;;;;;;;;;;AAwGA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAiB;AAAA,EAmB/D,cAAc;AACN,UAAA,GAV6B,KAAA,mBAAA,IAGJ,KAAA,qBAAA,gCAQ/B,KAAK,OAAO;AAAA,EAAA;AAAA,EAGN,oBAAoB;AACrB,SAAA,mBAAmB,CAAC,KAAK,kBACzB,KAAA,OAAO,KAAK,mBAAmB,SAAS;AAAA,EAAA;AAAA,EAGvC,YAAYC,GAAc;AAChC,WAAIA,MAAS,OACJ,OAEFA;AAAA,EAAA;AAAA,EAGT,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAA;AAAA,gBAEUC,EAAK,uCAAuC;AAAA,QAClD,2BAA2B,KAAK;AAAA,MAAA,CACjC,CAAC;AAAA;AAAA,YAEE,KAAK,UACHD,iDACAE,CAAO;AAAA;AAAA;AAAA,0BAGK,KAAK,kBAAkB;AAAA;AAAA,mBAE9BC,EAAU,KAAK,YAAY,KAAK,IAAI,CAAC,CAAuB;AAAA;AAAA,yBAEtD,KAAK,mBACd,KAAK,SAAS,EAAE,MAAM,IACtB,KAAK,SAAS,EAAE,MAAM,CAAC;AAAA,2BACZ,KAAK,qBAAqB,KAAO,SAAS,OAAO;AAAA,wBACpD,KAAK,QAAQ;AAAA,qBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBvC;AAAA,EAAA;AAEJ;AA3EEN,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBO;AAAA,EAChB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AACjB,GAOAV,EAAgB,SAASW;AAAA,MACrBC,EAAUX,EAAiB,MAAM,CAAC;AAAA,MAClCW,EAAUC,CAAK,CAAC;AAAA;AAjBtB,IAAqBC,IAArBd;AAUWe,EAAA;AAAA,EAARC,EAAM;AAAA,GAVYF,EAUV,WAAA,kBAAA;AAGGC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAbSH,EAaP,WAAA,oBAAA;"}

package/dist/components/popup/popup-base-element.d.ts CHANGED Viewed

@@ -42,6 +42,12 @@ export default class PopupBaseElement extends PopupBaseElement_base {
     disableViewportAutoClose: boolean;
     connectedCallback(): Promise<void>;
     protected firstUpdated(changedProps: Map<string, unknown>): void;
+    /**
+     * Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the
+     * combobox/datepicker field frame) expose state on their own inner control.
+     */
+    private triggerSupportsExpanded;
+    private syncTriggerAria;
     updated(changedProps: Map<string, unknown>): Promise<void>;
     _handleTriggerSlotChange(e?: Event | undefined): Promise<void>;
     _handleTriggerSlotChangeCallback(_e?: Event): void;

package/dist/components/popup/popup-base-element.js CHANGED Viewed

@@ -1,60 +1,85 @@
 var O = Object.getPrototypeOf;
-var W = Reflect.get;
-var y = (h, t, e) => W(O(h), e, t);
-var u = (h, t, e) => new Promise((n, p) => {
-  var l = (s) => {
+var $ = Reflect.get;
+var y = (l, t, e) => $(O(l), e, t);
+var g = (l, t, e) => new Promise((u, n) => {
+  var a = (s) => {
     try {
-      g(e.next(s));
-    } catch (a) {
-      p(a);
+      d(e.next(s));
+    } catch (p) {
+      n(p);
     }
-  }, d = (s) => {
+  }, h = (s) => {
     try {
-      g(e.throw(s));
-    } catch (a) {
-      p(a);
+      d(e.throw(s));
+    } catch (p) {
+      n(p);
     }
-  }, g = (s) => s.done ? n(s.value) : Promise.resolve(s.value).then(l, d);
-  g((e = e.apply(h, t)).next());
+  }, d = (s) => s.done ? u(s.value) : Promise.resolve(s.value).then(a, h);
+  d((e = e.apply(l, t)).next());
 });
-import { autoUpdate as H, computePosition as U, offset as M, flip as T, shift as k, size as V, arrow as q } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { clsx as _ } 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 o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as S } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { html as w } from "../../node_modules/lit-html/static.js";
-import { SizedMixin as B } from "../../internal/mixin/sizedMixin.js";
-import { DdsElement as j } from "../../internal/dds-hu-element.js";
-import z from "./popup.scss.js";
-import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var N = Object.defineProperty, r = (h, t, e, n) => {
-  for (var p = void 0, l = h.length - 1, d; l >= 0; l--)
-    (d = h[l]) && (p = d(t, e, p) || p);
-  return p && N(t, e, p), p;
+import { autoUpdate as U, computePosition as W, offset as H, flip as N, shift as M, size as k, arrow as B } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { clsx as S } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as P } from "lit";
+import { query as C, property as o } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SizedMixin as L } from "../../internal/mixin/sizedMixin.js";
+import { DdsElement as V } from "../../internal/dds-hu-element.js";
+import q from "./popup.scss.js";
+var D = Object.defineProperty, r = (l, t, e, u) => {
+  for (var n = void 0, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (n = h(t, e, n) || n);
+  return n && D(t, e, n), n;
 };
-const c = class c extends B(j) {
+const I = /* @__PURE__ */ new Set([
+  "application",
+  "button",
+  "checkbox",
+  "columnheader",
+  "combobox",
+  "gridcell",
+  "link",
+  "menuitem",
+  "row",
+  "rowheader",
+  "tab",
+  "treeitem"
+]), R = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "image",
+  "reset",
+  "submit"
+]), c = class c extends L(V) {
   constructor() {
     super(...arguments), this.triggerElement = null, this.intersectionObserver = null, this.disabled = !1, this.opened = !1, this.placement = "bottom", this.floatingStrategy = "absolute", this.offset = 0, this.maxHeight = 250, this.maxWidth = "auto", this.disableViewportAutoClose = !1;
   }
   connectedCallback() {
-    return u(this, null, function* () {
+    return g(this, null, function* () {
       y(c.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.startUpdate();
     });
   }
   firstUpdated(t) {
-    var e, n;
-    super.firstUpdated(t), (e = this.triggerElement) == null || e.setAttribute("aria-controls", "popup"), (n = this.triggerElement) == null || n.setAttribute("aria-expanded", "false");
+    super.firstUpdated(t), this.triggerElement || this._handleTriggerSlotChange(), this.syncTriggerAria();
+  }
+  /**
+   * Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the
+   * combobox/datepicker field frame) expose state on their own inner control.
+   */
+  triggerSupportsExpanded(t) {
+    const e = t.getAttribute("role");
+    return e ? I.has(e) : t.tagName === "BUTTON" ? !0 : t.tagName === "A" ? t.hasAttribute("href") : t.tagName === "INPUT" ? R.has(t.type) : !1;
+  }
+  syncTriggerAria() {
+    const t = this.triggerElement;
+    !t || !this.triggerSupportsExpanded(t) || (t.hasAttribute("aria-controls") || t.setAttribute("aria-controls", "popup"), t.setAttribute("aria-expanded", String(!!this.opened)));
   }
   updated(t) {
-    return u(this, null, function* () {
-      var e, n;
-      y(c.prototype, this, "updated").call(this, t), t.has("opened") && (this.opened ? (this.startUpdate(), (e = this.triggerElement) == null || e.setAttribute("aria-expanded", "true"), this.emit("dds-opened")) : (this.stopUpdate(), (n = this.triggerElement) == null || n.setAttribute("aria-expanded", "false"), this.emit("dds-closed"))), t.has("anchor") && this._handleTriggerSlotChange(), this.opened && (yield this.updateComplete, this.updatePosition());
+    return g(this, null, function* () {
+      y(c.prototype, this, "updated").call(this, t), t.has("opened") && (this.opened ? (this.startUpdate(), this.syncTriggerAria(), this.emit("dds-opened")) : (this.stopUpdate(), this.syncTriggerAria(), this.emit("dds-closed"))), t.has("anchor") && this._handleTriggerSlotChange(), this.opened && (yield this.updateComplete, this.updatePosition());
     });
   }
   _handleTriggerSlotChange(t) {
-    return u(this, null, function* () {
+    return g(this, null, function* () {
       var e;
       this._handleTriggerSlotChangeCallback(t), yield this.stopUpdate(), this.triggerElement = this.querySelector(
         ':scope > [slot="trigger"]'
@@ -71,17 +96,17 @@ const c = class c extends B(j) {
   }
   startUpdate() {
     var t;
-    this.triggerElement && ((t = this.intersectionObserver) == null || t.disconnect(), this.intersectionObserver = new IntersectionObserver(
+    !this.triggerElement || !this.popup || ((t = this.intersectionObserver) == null || t.disconnect(), this.intersectionObserver = new IntersectionObserver(
       (e) => {
         e[0] && !e[0].isIntersecting && this.opened && !this.disableViewportAutoClose && (this.opened = !1, this.emit("dds-close"));
       },
       { threshold: 0 }
-    ), this.intersectionObserver.observe(this.triggerElement), this.cleanup = H(this.triggerElement, this.popup, () => {
+    ), this.intersectionObserver.observe(this.triggerElement), this.cleanup = U(this.triggerElement, this.popup, () => {
       this.updatePosition();
     }));
   }
   stopUpdate() {
-    return u(this, null, function* () {
+    return g(this, null, function* () {
       return new Promise((t) => {
         this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null), this.cleanup ? (this.cleanup(), this.cleanup = void 0, requestAnimationFrame(() => t())) : t();
       });
@@ -91,67 +116,67 @@ const c = class c extends B(j) {
     super.disconnectedCallback(), this.intersectionObserver && (this.intersectionObserver.disconnect(), this.intersectionObserver = null), this.stopUpdate();
   }
   updatePosition() {
-    return u(this, null, function* () {
-      var g;
-      if (this.disabled || !this.triggerElement)
+    return g(this, null, function* () {
+      var d;
+      if (this.disabled || !this.triggerElement || !this.popup)
         return;
       const t = this.triggerElement.getBoundingClientRect();
       if (!(t.top < window.innerHeight && t.bottom > 0 && t.left < window.innerWidth && t.right > 0)) {
         this.opened && !this.disableViewportAutoClose && (this.opened = !1, this.emit("dds-close"));
         return;
       }
-      const { x: n, y: p, placement: l, middlewareData: d } = yield U(
+      const { x: u, y: n, placement: a, middlewareData: h } = yield W(
         this.triggerElement,
         this.popup,
         {
           placement: this.placement,
           strategy: this.floatingStrategy,
           middleware: [
-            M(this.offset),
-            T(),
-            k(),
-            V({
-              apply: ({ rects: s, availableHeight: a, availableWidth: m, elements: f }) => {
-                const b = Math.max(0, a), x = Math.max(0, m), $ = this.sync;
-                this.popup.style.width = $ ? `${s.reference.width}px` : "";
-                const v = typeof this.maxHeight == "number" ? this.maxHeight : void 0, C = v != null ? Math.min(v, b) : b;
-                this.popup.style.maxHeight = C >= f.floating.scrollHeight ? "" : `${C}px`;
-                const E = typeof this.maxWidth == "number" ? this.maxWidth : void 0, A = E != null ? Math.min(E, x) : x;
-                this.popup.style.maxWidth = `${A}px`, this.fullWidth && (this.popup.style.width = "100vw");
+            H(this.offset),
+            N(),
+            M(),
+            k({
+              apply: ({ rects: s, availableHeight: p, availableWidth: f, elements: m }) => {
+                const w = Math.max(0, p), x = Math.max(0, f), A = this.sync;
+                this.popup.style.width = A ? `${s.reference.width}px` : "";
+                const v = typeof this.maxHeight == "number" ? this.maxHeight : void 0, E = v != null ? Math.min(v, w) : w;
+                this.popup.style.maxHeight = E >= m.floating.scrollHeight ? "" : `${E}px`;
+                const _ = typeof this.maxWidth == "number" ? this.maxWidth : void 0, T = _ != null ? Math.min(_, x) : x;
+                this.popup.style.maxWidth = `${T}px`, this.fullWidth && (this.popup.style.width = "100vw");
               }
             }),
-            ...this.arrowElement ? [q({ element: this.arrowElement, padding: 8 })] : []
+            ...this.arrowElement ? [B({ element: this.arrowElement, padding: 8 })] : []
           ]
         }
       );
       if (Object.assign(this.popup.style, {
-        left: `${n}px`,
-        top: `${p}px`
+        left: `${u}px`,
+        top: `${n}px`
       }), this.arrowElement) {
-        const { x: s, y: a } = d.arrow, [m] = l.split("-"), f = (g = {
+        const { x: s, y: p } = h.arrow, [f] = a.split("-"), m = (d = {
           top: "bottom",
           right: "left",
           bottom: "top",
           left: "right"
-        }[m]) != null ? g : "";
+        }[f]) != null ? d : "";
         Object.assign(this.arrowElement.style, {
           left: s != null ? `${s}px` : "",
-          top: a != null ? `${a}px` : "",
-          [f]: "-5px"
+          top: p != null ? `${p}px` : "",
+          [m]: "-5px"
         }), this.arrowElement.classList.remove(
           "popup__arrow--top",
           "popup__arrow--right",
           "popup__arrow--bottom",
           "popup__arrow--left"
-        ), this.arrowElement.classList.add(`popup__arrow--${m}`);
+        ), this.arrowElement.classList.add(`popup__arrow--${f}`);
       }
     });
   }
   renderTrigger() {
-    return w``;
+    return b``;
   }
   renderPopup() {
-    return w`
+    return b`
       <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}>
         ${this.renderTrigger()}
       </slot>
@@ -159,7 +184,7 @@ const c = class c extends B(j) {
         part="popup"
         id="popup"
         ?inert=${!this.opened}
-        class=${_("popup", `popup--${this.size}`, {
+        class=${S("popup", `popup--${this.size}`, {
       "popup--opened": this.opened,
       "popup--fixed": this.floatingStrategy === "fixed",
       "popup--has-arrow": this.hasArrow,
@@ -167,21 +192,21 @@ const c = class c extends B(j) {
       "popup--full-width": this.fullWidth
     })}>
         <slot @slotchange=${this._handleContentSlotChange}></slot>
-        ${this.hasArrow ? w`<div
+        ${this.hasArrow ? b`<div
               part="arrow"
-              class=${_("popup__arrow")}
+              class=${S("popup__arrow")}
               role="presentation"></div>` : ""}
       </div>
     `;
   }
 };
-c.styles = L(z);
+c.styles = P(q);
 let i = c;
 r([
-  S(".popup")
+  C(".popup")
 ], i.prototype, "popup");
 r([
-  S(".popup__arrow")
+  C(".popup__arrow")
 ], i.prototype, "arrowElement");
 r([
   o({ reflect: !0, type: Boolean })

package/dist/components/popup/popup-base-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popup-base-element.js","sources":["../../../src/components/popup/popup-base-element.ts"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n Coords,\n flip,\n offset,\n shift,\n size,\n} from '@floating-ui/dom'\nimport { clsx } from 'clsx'\nimport { TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport { FloatingStrategy, PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './popup.scss?inline'\n\nexport default class PopupBaseElement extends SizedMixin(DdsElement) {\n static readonly styles = unsafeCSS(styles)\n\n protected triggerElement: Element \| null = null\n private cleanup: ReturnType<typeof autoUpdate> \| undefined\n private intersectionObserver: IntersectionObserver \| null = null\n\n @query('.popup') protected readonly popup!: HTMLDivElement\n @query('.popup__arrow') private readonly arrowElement?: HTMLDivElement\n\n /** The disabled state of the popup. /\n @property({ reflect: true, type: Boolean }) disabled? = false\n\n /* The open state of the popup. /\n @property({ reflect: true, type: Boolean }) opened? = false\n\n /* The placement of the popup.\n * @type {'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'}\n /\n @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n /* The floating strategy of the popup.\n * @type {'absolute' \| 'fixed'}\n /\n @property({ reflect: true })\n floatingStrategy: FloatingStrategy = 'absolute'\n\n /* The offset of the popup. /\n @property({ type: Number }) offset = 0\n\n /* Whether the popup should sync its width with the trigger. /\n @property({ type: Boolean }) sync?: boolean\n\n /* The maximum height of the popup. /\n @property({ type: Number }) maxHeight: number \| 'auto' = 250\n\n /* The maximum width of the popup. /\n @property({ type: Number }) maxWidth: number \| 'auto' = 'auto'\n\n /* Whether the popup has an arrow. /\n @property({ type: Boolean }) hasArrow: boolean\n\n /* Whether the popup should overflow. /\n @property({ type: Boolean }) overflow: boolean\n\n /* Whether the popup should take full width of the screen. /\n @property({ type: Boolean }) fullWidth: boolean\n\n /* Whether to keep popup open when trigger leaves viewport. /\n @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n async connectedCallback() {\n super.connectedCallback()\n\n await this.updateComplete\n this.startUpdate()\n }\n\n protected firstUpdated(changedProps: Map<string, unknown>) {\n super.firstUpdated(changedProps)\n\n this.triggerElement?.setAttribute('aria-controls', 'popup')\n this.triggerElement?.setAttribute('aria-expanded', 'false')\n }\n\n async updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps)\n\n if (changedProps.has('opened')) {\n if (this.opened) {\n this.startUpdate()\n this.triggerElement?.setAttribute('aria-expanded', 'true')\n this.emit('dds-opened')\n } else {\n this.stopUpdate()\n this.triggerElement?.setAttribute('aria-expanded', 'false')\n this.emit('dds-closed')\n }\n }\n\n if (changedProps.has('anchor')) {\n this._handleTriggerSlotChange()\n }\n\n if (this.opened) {\n await this.updateComplete\n this.updatePosition()\n }\n }\n\n async _handleTriggerSlotChange(e?: Event \| undefined) {\n this._handleTriggerSlotChangeCallback(e)\n\n await this.stopUpdate()\n\n // Use :scope > to only match direct children, not descendants\n this.triggerElement = this.querySelector<HTMLElement>(\n ':scope > [slot=\"trigger\"]',\n )\n\n if (!this.triggerElement) {\n this.triggerElement = this.shadowRoot?.querySelector(\n 'slot[name=\"trigger\"] ',\n ) as HTMLElement\n }\n\n if (this.triggerElement instanceof HTMLSlotElement) {\n this.triggerElement = this.triggerElement.assignedElements({\n flatten: true,\n })[0] as HTMLElement\n }\n\n if (this.triggerElement) {\n this.startUpdate()\n }\n }\n\n public _handleTriggerSlotChangeCallback(_e?: Event) {\n return\n }\n\n public _handleContentSlotChange(_e: Event) {\n return\n }\n\n public startUpdate() {\n if (!this.triggerElement) {\n return\n }\n\n // Create IntersectionObserver to detect when trigger is out of viewport\n this.intersectionObserver?.disconnect()\n this.intersectionObserver = new IntersectionObserver(\n entries => {\n // If trigger is not intersecting (out of viewport), close the popup\n if (\n entries[0] &&\n !entries[0].isIntersecting &&\n this.opened &&\n !this.disableViewportAutoClose\n ) {\n this.opened = false\n this.emit('dds-close')\n }\n },\n { threshold: 0 },\n )\n this.intersectionObserver.observe(this.triggerElement)\n\n this.cleanup = autoUpdate(this.triggerElement, this.popup, () => {\n this.updatePosition()\n })\n }\n\n public async stopUpdate(): Promise<void> {\n return new Promise(resolve => {\n if (this.intersectionObserver) {\n this.intersectionObserver.disconnect()\n this.intersectionObserver = null\n }\n\n if (this.cleanup) {\n this.cleanup()\n this.cleanup = undefined\n requestAnimationFrame(() => resolve())\n } else {\n resolve()\n }\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n // Clean up the IntersectionObserver\n if (this.intersectionObserver) {\n this.intersectionObserver.disconnect()\n this.intersectionObserver = null\n }\n\n this.stopUpdate()\n }\n\n protected async updatePosition() {\n if (this.disabled \|\| !this.triggerElement) {\n return\n }\n\n // Check if trigger element is visible in viewport\n const triggerRect = this.triggerElement.getBoundingClientRect()\n const isVisible =\n triggerRect.top < window.innerHeight &&\n triggerRect.bottom > 0 &&\n triggerRect.left < window.innerWidth &&\n triggerRect.right > 0\n\n if (!isVisible) {\n if (this.opened && !this.disableViewportAutoClose) {\n this.opened = false\n this.emit('dds-close')\n }\n return\n }\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.triggerElement,\n this.popup,\n {\n placement: this.placement,\n strategy: this.floatingStrategy,\n middleware: [\n offset(this.offset),\n flip(),\n shift(),\n size({\n apply: ({ rects, availableHeight, availableWidth, elements }) => {\n const safeAvailableHeight = Math.max(0, availableHeight)\n const safeAvailableWidth = Math.max(0, availableWidth)\n const syncWidth = this.sync\n this.popup.style.width = syncWidth\n ? `${rects.reference.width}px`\n : ''\n\n const configuredMaxHeight =\n typeof this.maxHeight === 'number' ? this.maxHeight : undefined\n const effectiveMaxHeight =\n configuredMaxHeight != null\n ? Math.min(configuredMaxHeight, safeAvailableHeight)\n : safeAvailableHeight\n this.popup.style.maxHeight =\n effectiveMaxHeight >= elements.floating.scrollHeight\n ? ''\n : `${effectiveMaxHeight}px`\n\n const configuredMaxWidth =\n typeof this.maxWidth === 'number' ? this.maxWidth : undefined\n const effectiveMaxWidth =\n configuredMaxWidth != null\n ? Math.min(configuredMaxWidth, safeAvailableWidth)\n : safeAvailableWidth\n this.popup.style.maxWidth = `${effectiveMaxWidth}px`\n\n if (this.fullWidth) {\n this.popup.style.width = '100vw'\n }\n },\n }),\n ...(this.arrowElement\n ? [arrow({ element: this.arrowElement, padding: 8 })]\n : []),\n ],\n },\n )\n\n Object.assign(this.popup.style, {\n left: `${x}px`,\n top: `${y}px`,\n })\n\n if (this.arrowElement) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow as Coords\n const [side] = placement.split('-')\n const staticSide =\n {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[side] ?? ''\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: `-5px`,\n })\n\n this.arrowElement.classList.remove(\n 'popup__arrow--top',\n 'popup__arrow--right',\n 'popup__arrow--bottom',\n 'popup__arrow--left',\n )\n this.arrowElement.classList.add(`popup__arrow--${side}`)\n }\n }\n\n renderTrigger(): TemplateResult {\n return html``\n }\n\n renderPopup() {\n return html`\n <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}>\n ${this.renderTrigger()}\n </slot>\n <div\n part=\"popup\"\n id=\"popup\"\n ?inert=${!this.opened}\n class=${clsx('popup', `popup--${this.size}`, {\n 'popup--opened': this.opened,\n 'popup--fixed': this.floatingStrategy === 'fixed',\n 'popup--has-arrow': this.hasArrow,\n 'popup--overflow': this.overflow,\n 'popup--full-width': this.fullWidth,\n })}>\n <slot @slotchange=${this._handleContentSlotChange}></slot>\n ${this.hasArrow\n ? html`<div\n part=\"arrow\"\n class=${clsx('popup__arrow')}\n role=\"presentation\"></div>`\n : ''}\n </div>\n `\n }\n}\n"],"names":["_PopupBaseElement","SizedMixin","DdsElement","__async","__superGet","changedProps","_a","_b","e","_e","entries","autoUpdate","resolve","triggerRect","x","y","placement","middlewareData","computePosition","offset","flip","shift","size","rects","availableHeight","availableWidth","elements","safeAvailableHeight","safeAvailableWidth","syncWidth","configuredMaxHeight","effectiveMaxHeight","configuredMaxWidth","effectiveMaxWidth","arrow","arrowX","arrowY","side","staticSide","html","clsx","unsafeCSS","styles","PopupBaseElement","__decorateClass","query","property"],"mappings":"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"}
1	+ {"version":3,"file":"popup-base-element.js","sources":["../../../src/components/popup/popup-base-element.ts"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n Coords,\n flip,\n offset,\n shift,\n size,\n} from '@floating-ui/dom'\nimport { clsx } from 'clsx'\nimport { TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport { FloatingStrategy, PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './popup.scss?inline'\n\n// Roles on which ARIA 1.2 permits aria-expanded; on any other role axe reports aria-allowed-attr\nconst EXPANDABLE_ROLES = new Set([\n 'application',\n 'button',\n 'checkbox',\n 'columnheader',\n 'combobox',\n 'gridcell',\n 'link',\n 'menuitem',\n 'row',\n 'rowheader',\n 'tab',\n 'treeitem',\n])\n\nconst EXPANDABLE_INPUT_TYPES = new Set([\n 'button',\n 'checkbox',\n 'image',\n 'reset',\n 'submit',\n])\n\nexport default class PopupBaseElement extends SizedMixin(DdsElement) {\n static readonly styles = unsafeCSS(styles)\n\n protected triggerElement: Element \| null = null\n private cleanup: ReturnType<typeof autoUpdate> \| undefined\n private intersectionObserver: IntersectionObserver \| null = null\n\n @query('.popup') protected readonly popup!: HTMLDivElement\n @query('.popup__arrow') private readonly arrowElement?: HTMLDivElement\n\n /** The disabled state of the popup. /\n @property({ reflect: true, type: Boolean }) disabled? = false\n\n /* The open state of the popup. /\n @property({ reflect: true, type: Boolean }) opened? = false\n\n /* The placement of the popup.\n * @type {'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'}\n /\n @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n /* The floating strategy of the popup.\n * @type {'absolute' \| 'fixed'}\n /\n @property({ reflect: true })\n floatingStrategy: FloatingStrategy = 'absolute'\n\n /* The offset of the popup. /\n @property({ type: Number }) offset = 0\n\n /* Whether the popup should sync its width with the trigger. /\n @property({ type: Boolean }) sync?: boolean\n\n /* The maximum height of the popup. /\n @property({ type: Number }) maxHeight: number \| 'auto' = 250\n\n /* The maximum width of the popup. /\n @property({ type: Number }) maxWidth: number \| 'auto' = 'auto'\n\n /* Whether the popup has an arrow. /\n @property({ type: Boolean }) hasArrow: boolean\n\n /* Whether the popup should overflow. /\n @property({ type: Boolean }) overflow: boolean\n\n /* Whether the popup should take full width of the screen. /\n @property({ type: Boolean }) fullWidth: boolean\n\n /* Whether to keep popup open when trigger leaves viewport. /\n @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n async connectedCallback() {\n super.connectedCallback()\n\n await this.updateComplete\n this.startUpdate()\n }\n\n protected firstUpdated(changedProps: Map<string, unknown>) {\n super.firstUpdated(changedProps)\n\n // Resolve the trigger element on first render. Normally this happens via the\n // trigger slot's `slotchange` event, but that event does NOT fire when the\n // slotted trigger is server-rendered (declarative shadow DOM) and the\n // component hydrates. Without this, the popup never finds its anchor and\n // floating-ui positions it at (0,0) — e.g. datepicker/select dropdowns\n // appearing in the top-left corner under SSR.\n if (!this.triggerElement) {\n void this._handleTriggerSlotChange()\n }\n\n this.syncTriggerAria()\n }\n\n /\n Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the\n * combobox/datepicker field frame) expose state on their own inner control.\n /\n private triggerSupportsExpanded(el: Element): boolean {\n const role = el.getAttribute('role')\n if (role) {\n return EXPANDABLE_ROLES.has(role)\n }\n if (el.tagName === 'BUTTON') {\n return true\n }\n if (el.tagName === 'A') {\n return el.hasAttribute('href')\n }\n if (el.tagName === 'INPUT') {\n return EXPANDABLE_INPUT_TYPES.has((el as HTMLInputElement).type)\n }\n return false\n }\n\n private syncTriggerAria() {\n const trigger = this.triggerElement\n if (!trigger \|\| !this.triggerSupportsExpanded(trigger)) {\n return\n }\n // Keep a trigger's own aria-controls (e.g. select points at its option list)\n if (!trigger.hasAttribute('aria-controls')) {\n trigger.setAttribute('aria-controls', 'popup')\n }\n trigger.setAttribute('aria-expanded', String(!!this.opened))\n }\n\n async updated(changedProps: Map<string, unknown>) {\n super.updated(changedProps)\n\n if (changedProps.has('opened')) {\n if (this.opened) {\n this.startUpdate()\n this.syncTriggerAria()\n this.emit('dds-opened')\n } else {\n this.stopUpdate()\n this.syncTriggerAria()\n this.emit('dds-closed')\n }\n }\n\n if (changedProps.has('anchor')) {\n this._handleTriggerSlotChange()\n }\n\n if (this.opened) {\n await this.updateComplete\n this.updatePosition()\n }\n }\n\n async _handleTriggerSlotChange(e?: Event \| undefined) {\n this._handleTriggerSlotChangeCallback(e)\n\n await this.stopUpdate()\n\n // Use :scope > to only match direct children, not descendants\n this.triggerElement = this.querySelector<HTMLElement>(\n ':scope > [slot=\"trigger\"]',\n )\n\n if (!this.triggerElement) {\n this.triggerElement = this.shadowRoot?.querySelector(\n 'slot[name=\"trigger\"] ',\n ) as HTMLElement\n }\n\n if (this.triggerElement instanceof HTMLSlotElement) {\n this.triggerElement = this.triggerElement.assignedElements({\n flatten: true,\n })[0] as HTMLElement\n }\n\n if (this.triggerElement) {\n this.startUpdate()\n }\n }\n\n public _handleTriggerSlotChangeCallback(_e?: Event) {\n return\n }\n\n public _handleContentSlotChange(_e: Event) {\n return\n }\n\n public startUpdate() {\n // `this.popup` (the floating element) is required by floating-ui's\n // autoUpdate. Subclasses that delegate to a nested popup (e.g. command) have\n // no local `.popup`, and it may not exist yet during firstUpdated — bail\n // rather than calling autoUpdate with a null floating element.\n if (!this.triggerElement \|\| !this.popup) {\n return\n }\n\n // Create IntersectionObserver to detect when trigger is out of viewport\n this.intersectionObserver?.disconnect()\n this.intersectionObserver = new IntersectionObserver(\n entries => {\n // If trigger is not intersecting (out of viewport), close the popup\n if (\n entries[0] &&\n !entries[0].isIntersecting &&\n this.opened &&\n !this.disableViewportAutoClose\n ) {\n this.opened = false\n this.emit('dds-close')\n }\n },\n { threshold: 0 },\n )\n this.intersectionObserver.observe(this.triggerElement)\n\n this.cleanup = autoUpdate(this.triggerElement, this.popup, () => {\n this.updatePosition()\n })\n }\n\n public async stopUpdate(): Promise<void> {\n return new Promise(resolve => {\n if (this.intersectionObserver) {\n this.intersectionObserver.disconnect()\n this.intersectionObserver = null\n }\n\n if (this.cleanup) {\n this.cleanup()\n this.cleanup = undefined\n requestAnimationFrame(() => resolve())\n } else {\n resolve()\n }\n })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n // Clean up the IntersectionObserver\n if (this.intersectionObserver) {\n this.intersectionObserver.disconnect()\n this.intersectionObserver = null\n }\n\n this.stopUpdate()\n }\n\n protected async updatePosition() {\n // `this.popup` (the floating element) can be null on subclasses that\n // delegate to a nested popup (e.g. command) — see startUpdate. Without this\n // guard computePosition passes null to floating-ui, whose isRTL calls\n // getComputedStyle(null) and throws \"not of type Element\" under jsdom.\n if (this.disabled \|\| !this.triggerElement \|\| !this.popup) {\n return\n }\n\n // Check if trigger element is visible in viewport\n const triggerRect = this.triggerElement.getBoundingClientRect()\n const isVisible =\n triggerRect.top < window.innerHeight &&\n triggerRect.bottom > 0 &&\n triggerRect.left < window.innerWidth &&\n triggerRect.right > 0\n\n if (!isVisible) {\n if (this.opened && !this.disableViewportAutoClose) {\n this.opened = false\n this.emit('dds-close')\n }\n return\n }\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.triggerElement,\n this.popup,\n {\n placement: this.placement,\n strategy: this.floatingStrategy,\n middleware: [\n offset(this.offset),\n flip(),\n shift(),\n size({\n apply: ({ rects, availableHeight, availableWidth, elements }) => {\n const safeAvailableHeight = Math.max(0, availableHeight)\n const safeAvailableWidth = Math.max(0, availableWidth)\n const syncWidth = this.sync\n this.popup.style.width = syncWidth\n ? `${rects.reference.width}px`\n : ''\n\n const configuredMaxHeight =\n typeof this.maxHeight === 'number' ? this.maxHeight : undefined\n const effectiveMaxHeight =\n configuredMaxHeight != null\n ? Math.min(configuredMaxHeight, safeAvailableHeight)\n : safeAvailableHeight\n this.popup.style.maxHeight =\n effectiveMaxHeight >= elements.floating.scrollHeight\n ? ''\n : `${effectiveMaxHeight}px`\n\n const configuredMaxWidth =\n typeof this.maxWidth === 'number' ? this.maxWidth : undefined\n const effectiveMaxWidth =\n configuredMaxWidth != null\n ? Math.min(configuredMaxWidth, safeAvailableWidth)\n : safeAvailableWidth\n this.popup.style.maxWidth = `${effectiveMaxWidth}px`\n\n if (this.fullWidth) {\n this.popup.style.width = '100vw'\n }\n },\n }),\n ...(this.arrowElement\n ? [arrow({ element: this.arrowElement, padding: 8 })]\n : []),\n ],\n },\n )\n\n Object.assign(this.popup.style, {\n left: `${x}px`,\n top: `${y}px`,\n })\n\n if (this.arrowElement) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow as Coords\n const [side] = placement.split('-')\n const staticSide =\n {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[side] ?? ''\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: `-5px`,\n })\n\n this.arrowElement.classList.remove(\n 'popup__arrow--top',\n 'popup__arrow--right',\n 'popup__arrow--bottom',\n 'popup__arrow--left',\n )\n this.arrowElement.classList.add(`popup__arrow--${side}`)\n }\n }\n\n renderTrigger(): TemplateResult {\n return html``\n }\n\n renderPopup() {\n return html`\n <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}>\n ${this.renderTrigger()}\n </slot>\n <div\n part=\"popup\"\n id=\"popup\"\n ?inert=${!this.opened}\n class=${clsx('popup', `popup--${this.size}`, {\n 'popup--opened': this.opened,\n 'popup--fixed': this.floatingStrategy === 'fixed',\n 'popup--has-arrow': this.hasArrow,\n 'popup--overflow': this.overflow,\n 'popup--full-width': this.fullWidth,\n })}>\n <slot @slotchange=${this._handleContentSlotChange}></slot>\n ${this.hasArrow\n ? html`<div\n part=\"arrow\"\n class=${clsx('popup__arrow')}\n role=\"presentation\"></div>`\n : ''}\n </div>\n `\n }\n}\n"],"names":["EXPANDABLE_ROLES","EXPANDABLE_INPUT_TYPES","_PopupBaseElement","SizedMixin","DdsElement","__async","__superGet","changedProps","el","role","trigger","e","_a","_e","entries","autoUpdate","resolve","triggerRect","x","y","placement","middlewareData","computePosition","offset","flip","shift","size","rects","availableHeight","availableWidth","elements","safeAvailableHeight","safeAvailableWidth","syncWidth","configuredMaxHeight","effectiveMaxHeight","configuredMaxWidth","effectiveMaxWidth","arrow","arrowX","arrowY","side","staticSide","html","clsx","unsafeCSS","styles","PopupBaseElement","__decorateClass","query","property"],"mappings":"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"}

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

@@ -1,19 +1,15 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as o } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as t } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
-import { SizedMixin as f } from "../../internal/mixin/sizedMixin.js";
-import v from "./progress.scss.js";
-import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, i = (h, a, s, p) => {
-  for (var r = void 0, d = h.length - 1, g; d >= 0; d--)
-    (g = h[d]) && (r = g(a, s, r) || r);
-  return r && $(a, s, r), r;
+import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as u, html as n, nothing as o } from "lit";
+import { property as t } from "lit/decorators.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
+import f from "./progress.scss.js";
+var y = Object.defineProperty, i = (h, a, s, c) => {
+  for (var r = void 0, p = h.length - 1, d; p >= 0; p--)
+    (d = h[p]) && (r = d(a, s, r) || r);
+  return r && y(a, s, r), r;
 };
-const _ = f(u), c = class c extends _ {
+const $ = v(m), l = class l extends $ {
   constructor() {
     super(...arguments), this.variant = "linear", this.color = "brand", this.max = 100, this.indeterminate = !1, this.showPercentage = !1, this.ariaLive = "polite";
   }
@@ -88,12 +84,12 @@ const _ = f(u), c = class c extends _ {
     `;
   }
   render() {
-    var p, r;
+    var c, r;
     const a = this.indeterminate ? "status" : "progressbar", s = this.indeterminate ? "true" : "false";
     return n`
       <div
         part="base"
-        class=${m(
+        class=${g(
       "progress",
       `progress--${this.variant}`,
       `progress--${this.color}`,
@@ -104,7 +100,7 @@ const _ = f(u), c = class c extends _ {
     )}
         role=${a}
         aria-busy=${s}
-        aria-label=${(r = (p = this.ariaLabel) != null ? p : this.label) != null ? r : this.indeterminate ? l("progress.loading") : l("progress.progress", {
+        aria-label=${(r = (c = this.ariaLabel) != null ? c : this.label) != null ? r : this.indeterminate ? this.localize.t("progress.loading") : this.localize.t("progress.progress", {
       percentage: Math.round(this.percentage)
     })}
         aria-live=${this.ariaLive}
@@ -120,7 +116,7 @@ const _ = f(u), c = class c extends _ {
         <!-- Screen reader announcements -->
         <div class="sr-only" aria-live=${this.ariaLive} aria-atomic="true">
-          ${this.indeterminate ? l("progress.loading") : l("progress.progress", {
+          ${this.indeterminate ? this.localize.t("progress.loading") : this.localize.t("progress.progress", {
       percentage: Math.round(this.percentage)
     })}
         </div>
@@ -128,8 +124,8 @@ const _ = f(u), c = class c extends _ {
     `;
   }
 };
-c.tagName = "dap-ds-progress", c.styles = y(v);
-let e = c;
+l.tagName = "dap-ds-progress", l.styles = u(f);
+let e = l;
 i([
   t({ type: String, reflect: !0 })
 ], e.prototype, "variant");