@api-client/ui 0.0.4 → 0.0.7

package/dist/ui/button/UiButton.js

@@ -29,27 +29,10 @@ export default class UiButton extends Button {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
-    /**
-     * The type of the rendered button according to Material 3 spec.
-     *
-     * @default {ButtonType.filled}
-     * @attribute
-     */
-    type;
-    /**
-     * Determines when the element has an icon in the "icon" slot.
-     */
-    _hasIcon;
-    /**
-     * The name of the button, submitted as a pair with the button's value as part of the form data,
-     * when that button is used to submit the form.
-     * @attribute
-     */
-    name;
     #_value;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data.
@@ -66,25 +49,24 @@ export default class UiButton extends Button {
         this.#_value = value;
         this.#_internals?.setFormValue(value || null);
     }
-    /**
-     * Whether to render the icon at the inline end of the label rather than the
-     * inline start.
-     * @attribute
-     */
-    trailingIcon = false;
-    ripple;
-    showRipple = false;
-    /**
-     * Whether the button is a submit button for a form.
-     * @attribute
-     */
-    submit;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
+        /**
+         * Whether to render the icon at the inline end of the label rather than the
+         * inline start.
+         * @attribute
+         */
+        this.trailingIcon = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.type = ButtonType.filled;
         this._hasIcon = false;
     }
@@ -174,10 +156,6 @@ export default class UiButton extends Button {
     _iconTemplate() {
         return html `<slot name="icon" @slotchange="${this._iconSlotChange}"></slot>`;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: String, reflect: true, })

package/dist/ui/button/UiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport UiRipple from \"../effects/ripple.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the button rendered.\n */\nexport enum ButtonType {\n  'elevated' = 'elevated',\n  'filled' = 'filled',\n  'tonal' = 'tonal',\n  'outlined' = 'outlined',\n  'text' = 'text',\n}\n\n/**\n * A material design button.\n * \n * Note, this control is form associated.\n * \n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class UiButton extends Button {\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: ButtonType;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected _hasIcon: boolean;\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data, \n   * when that button is used to submit the form.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string;\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data. \n   * This value is passed to the server in params when the form is submitted using this button.\n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this.#_internals?.setFormValue(value || null);\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) trailingIcon = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Whether the button is a submit button for a form.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) submit?: boolean;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = ButtonType.filled;\n    this._hasIcon = false;\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      this._submitHandler();\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  protected _submitHandler(): void {\n    const { form, name, value, submit, disabled } = this;\n    if (!form || !submit || disabled) {\n      return;\n    }\n    let button: HTMLButtonElement | undefined;\n    if (name || value) {\n      button = document.createElement('button');\n      if (name) {\n        button.name = name;\n      }\n      if (value) {\n        button.value = value;\n      }\n      button.type = 'submit';\n      button.hidden = true;\n      form.append(button);\n    }\n    try {\n      form.requestSubmit(button);\n    } catch (_) {\n      // ...\n    }\n    if (button) {\n      form.removeChild(button);\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected _iconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = !!slot.assignedNodes().length;\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, trailingIcon = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this._hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${trailingIcon ? '' : this._iconTemplate()}\n        <slot></slot>\n        ${trailingIcon ? this._iconTemplate() : ''}\n      </div>\n    </div>\n    `;\n  }\n\n  protected _iconTemplate(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${this._iconSlotChange}\"></slot>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"UiButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport UiRipple from \"../effects/ripple.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the button rendered.\n */\nexport enum ButtonType {\n  'elevated' = 'elevated',\n  'filled' = 'filled',\n  'tonal' = 'tonal',\n  'outlined' = 'outlined',\n  'text' = 'text',\n}\n\n/**\n * A material design button.\n * \n * Note, this control is form associated.\n * \n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n */\nexport default class UiButton extends Button {\n  static get formAssociated(): boolean {\n    return true;\n  }\n\n  #_internals = this.attachInternals();\n\n  get form(): HTMLFormElement | null {\n    return this.#_internals && this.#_internals.form;\n  }\n\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: ButtonType;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected _hasIcon: boolean;\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data, \n   * when that button is used to submit the form.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string;\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data. \n   * This value is passed to the server in params when the form is submitted using this button.\n   * @attribute\n   */\n  @property({ type: String })\n  get value(): string | undefined {\n    return this.#_value;\n  }\n\n  set value(value: string | undefined) {\n    if (this.#_value === value) {\n      return;\n    }\n    this.#_value = value;\n    this.#_internals?.setFormValue(value || null);\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) trailingIcon = false;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Whether the button is a submit button for a form.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) submit?: boolean;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = ButtonType.filled;\n    this._hasIcon = false;\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      this._submitHandler();\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  protected _submitHandler(): void {\n    const { form, name, value, submit, disabled } = this;\n    if (!form || !submit || disabled) {\n      return;\n    }\n    let button: HTMLButtonElement | undefined;\n    if (name || value) {\n      button = document.createElement('button');\n      if (name) {\n        button.name = name;\n      }\n      if (value) {\n        button.value = value;\n      }\n      button.type = 'submit';\n      button.hidden = true;\n      form.append(button);\n    }\n    try {\n      form.requestSubmit(button);\n    } catch (_) {\n      // ...\n    }\n    if (button) {\n      form.removeChild(button);\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected _iconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = !!slot.assignedNodes().length;\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, trailingIcon = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this._hasIcon,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${trailingIcon ? '' : this._iconTemplate()}\n        <slot></slot>\n        ${trailingIcon ? this._iconTemplate() : ''}\n      </div>\n    </div>\n    `;\n  }\n\n  protected _iconTemplate(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=\"${this._iconSlotChange}\"></slot>`;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/button/UiIconButton.js

@@ -20,39 +20,17 @@ export var IconButtonType;
  * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
  */
 export default class UiIconButton extends Button {
-    /**
-     * The type of the rendered button according to Material 3 spec.
-     *
-     * @default {ButtonType.filled}
-     * @attribute
-     */
-    type;
-    /**
-     * Whether the button can be toggled.
-     * A toggle button behaves different as it gets the `aria-pressed` attribute
-     * which changes depending on the pressed state.
-     * A toggle button is activated until it is clicked/pressed again.
-     * A toggle button dispatched `active` event when the press state change.
-     * The host can check the `active` property to know the state.
-     *
-     * @attribute
-     */
-    toggle;
-    /**
-     * A flag that determines whether the button is activated (pressed when `toggle` is set).
-     * It is `undefined` and makes no effect when `toggle` is not set.
-     *
-     * @attribute
-     */
-    active;
-    ripple;
-    showRipple = false;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     constructor() {
         super();
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.type = IconButtonType.standard;
     }
     update(changedProperties) {
@@ -112,10 +90,6 @@ export default class UiIconButton extends Button {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: String, reflect: true, })

package/dist/ui/button/UiIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiIconButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the icon button rendered.\n */\nexport enum IconButtonType {\n  'filled' = 'filled', \n  'tonal' = 'tonal', \n  'outlined' = 'outlined', \n  'standard' = 'standard',\n}\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class UiIconButton extends Button {\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: IconButtonType;\n\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute \n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change. \n   * The host can check the `active` property to know the state.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) toggle?: boolean;\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) active?: boolean;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = IconButtonType.standard;\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active));\n    }\n    super.update(changedProperties);\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active;\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'));\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click();\n      }\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"UiIconButton.js","sourceRoot":"","sources":["../../../src/ui/button/UiIconButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,8BAA8B,CAAC;AAEtC;;GAEG;AACH,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,mCAAmB,CAAA;IACnB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;IACvB,uCAAuB,CAAA;AACzB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,MAAM;IAsC9C;QACE,KAAK,EAAE,CAAC;QARS,eAAU,GAAG,KAAK,CAAC;QAEnB,cAAS,GAAG,GAA6B,EAAE;YAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAuEQ,iBAAY,GAAG,GAAmB,EAAE;YAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,OAAO,IAAI,CAAA,wCAAwC,QAAQ,gBAAgB,CAAC;QAC9E,CAAC,CAAC;QArEA,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC,QAAQ,CAAC;IACtC,CAAC;IAEkB,MAAM,CAAC,iBAAuC;QAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;SACxD;QACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;YACjC,OAAO,CAAC,UAAU,EAAE,CAAC;SACtB;IACH,CAAC;IAES,KAAK,CAAC,SAAS;QACvB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEQ,UAAU,CAAC,OAAyB;QAC3C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,QAAQ,CAAC,MAAsB;QACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QACrC,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QACD,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YACvD,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC3B,gEAAgE;gBAChE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;aACzC;SACF;QACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAChB,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;SACF;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,OAAO,GAAC,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,OAAO,EAAE,IAAI;YACb,OAAO;SACR,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;kBACG,gBAAgB,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;;QAGrD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;;;;;KAK3C,CAAC;IACJ,CAAC;CAMF;AAxG6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;0CAAsB;AAYpB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;4CAAkB;AAQjB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC;4CAAkB;AAErC;IAAxB,UAAU,CAAC,WAAW,CAAC;4CAA6C;AAE5D;IAAR,KAAK,EAAE;gDAA8B","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { Button } from \"./Button.js\";\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\n\n/**\n * The type of the icon button rendered.\n */\nexport enum IconButtonType {\n  'filled' = 'filled', \n  'tonal' = 'tonal', \n  'outlined' = 'outlined', \n  'standard' = 'standard',\n}\n\n/**\n * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.\n */\nexport default class UiIconButton extends Button {\n  /**\n   * The type of the rendered button according to Material 3 spec.\n   * \n   * @default {ButtonType.filled}\n   * @attribute\n   */\n  @property({ type: String, reflect: true, }) type: IconButtonType;\n\n  /**\n   * Whether the button can be toggled.\n   * A toggle button behaves different as it gets the `aria-pressed` attribute \n   * which changes depending on the pressed state.\n   * A toggle button is activated until it is clicked/pressed again.\n   * A toggle button dispatched `active` event when the press state change. \n   * The host can check the `active` property to know the state.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) toggle?: boolean;\n\n  /**\n   * A flag that determines whether the button is activated (pressed when `toggle` is set).\n   * It is `undefined` and makes no effect when `toggle` is not set.\n   * \n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true, }) active?: boolean;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  constructor() {\n    super();\n\n    this.type = IconButtonType.standard;\n  }\n\n  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-pressed', String(this.active));\n    }\n    super.update(changedProperties);\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    this.endRipple();\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (!reason || reason === 'enter' || reason === 'space') {\n      if (this.toggle) {\n        this.active = !this.active;\n        // note, only dispatch events when user interacting with the UI.\n        this.dispatchEvent(new Event('active'));\n      }\n    }\n    if (reason === 'enter' || reason === 'space') {\n      if (!this.toggle) {\n        this.click();\n      }\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed=false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      <div class=\"state\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/chip/UiChip.js

@@ -35,49 +35,17 @@ export default class UiChip extends UiElement {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * The type of the rendered chip.
-     * @attribute
-     *
-     * @see https://m3.material.io/components/chips/guidelines
-     */
-    type;
-    /**
-     * Whether the chip should be rendered as elevated.
-     * @attribute
-     */
-    elevated;
-    /**
-     * Whether the chip renders the "close" icon at the end.
-     * @attribute
-     */
-    closable;
-    /**
-     * Whether the chip is currently checked.
-     * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.
-     * @attribute
-     */
-    checked;
-    /**
-     * The ID attribute of the list element that is rendered after activating the chip.
-     * When this is set the chip renders the dropdown icon at the end and sets `aria-*`
-     * attributes informing the assistive technology that this chip controls a list.
-     *
-     * @attribute
-     */
-    list;
-    ripple;
-    showRipple = false;
-    /**
-     * Determines when the element has an icon in the "icon" slot.
-     */
-    hasIcon;
-    /**
-     * Determines when the element has an image in the "avatar" slot.
-     */
-    hasAvatar;
     constructor() {
         super();
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+        };
         this.disabled = false;
         this.type = ChipType.assist;
         this.hasIcon = false;
@@ -136,10 +104,6 @@ export default class UiChip extends UiElement {
         const element = await this.getRipple();
         element?.endFocus();
     }
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     endPress(info) {
         super.endPress(info);
         this.endRipple();
@@ -255,10 +219,6 @@ export default class UiChip extends UiElement {
         }
         return nothing;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/ui/chip/UiChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/ui/chip/UiChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC,CAAC,gCAAgC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,8BAA8B,CAAC;AAEtC,MAAM,CAAN,IAAY,QAKX;AALD,WAAY,QAAQ;IAClB,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,2BAAe,CAAA;IACf,qCAAyB,CAAA;AAC3B,CAAC,EALW,QAAQ,KAAR,QAAQ,QAKnB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,SAAS;IAC3C;;;OAGG;IAEH,IAAI,QAAQ;QACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC7B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACtC,CAAC;IAED;;;;;OAKG;IACyB,IAAI,CAAW;IAE3C;;;OAGG;IACyC,QAAQ,CAAW;IAE/D;;;OAGG;IACyC,QAAQ,CAAW;IAE/D;;;;OAIG;IACyC,OAAO,CAAW;IAE9D;;;;;;OAMG;IACwC,IAAI,CAAU;IAEtB,MAAM,CAA4B;IAElD,UAAU,GAAG,KAAK,CAAC;IAEtC;;OAEG;IACgB,OAAO,CAAU;IAEpC;;OAEG;IACgB,SAAS,CAAU;IAEtC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,IAAI,CAAC;QAElD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;SACrC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;IACH,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;YACjC,OAAO,CAAC,UAAU,EAAE,CAAC;SACtB;IACH,CAAC;IAES,KAAK,CAAC,SAAS;QACvB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEQ,UAAU,CAAC,OAAyB;QAC3C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,KAAK,CAAC,aAAa,CAAC,CAAgB;QAC3C,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;YAC3D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;YAClD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACxB,CAAC;IAES,KAAK,CAAC,UAAU;QACxB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACvC,OAAO,EAAE,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEkB,SAAS,GAAG,GAA6B,EAAE;QAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC,CAAC;IAEO,QAAQ,CAAC,IAAoB;QACpC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,EAAE;YACb,OAAO;SACR;QACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAEQ,WAAW,CAAC,CAAa;QAChC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,MAAM,EAAE;YACjC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED;;OAEG;IACO,oBAAoB,CAAC,CAAQ;QACrC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;IAC/C,CAAC;IAED;;OAEG;IACO,sBAAsB,CAAC,CAAQ;QACvC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;IACjD,CAAC;IAES,eAAe,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAES,WAAW,CAAC,CAAQ;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAES,KAAK,CAAC,UAAU;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC;QACjC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,UAAU,EAAE,IAAI,CAAC,SAAS;YAC1B,OAAO;SACR,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;kBACG,gBAAgB,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;QAErD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;;UAEtC,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,YAAY,EAAE;;UAEnB,IAAI,CAAC,kBAAkB,EAAE;;;KAG9B,CAAC;IACJ,CAAC;IAES,iBAAiB;QACzB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,IAAI,KAAK,QAAQ,CAAC,UAAU,EAAE;YAChC,OAAO,OAAO,CAAC;SAChB;QACD,IAAI,IAAI,KAAK,QAAQ,CAAC,MAAM,EAAE;YAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC;gBAC3B,cAAc,EAAE,IAAI;gBACpB,YAAY,EAAE,IAAI;gBAClB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;aACxB,CAAC,CAAC;YACH,OAAO,IAAI,CAAA,gBAAgB,WAAW,yBAAyB,KAAK,SAAS,CAAC;SAC/E;QACD,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,oBAAoB,WAAW,CAAC;IACpF,CAAC;IAES,YAAY;QACpB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtB,IAAI,IAAI,KAAK,QAAQ,CAAC,KAAK,EAAE;YAC3B,OAAO,IAAI,CAAA,oCAAoC,IAAI,CAAC,sBAAsB,WAAW,CAAC;SACvF;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAES,kBAAkB;QAC1B,MAAM,EAAE,QAAQ,GAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC5C,IAAI,IAAI,KAAK,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,IAAI,EAAE;gBACR,OAAO,IAAI,CAAA,2DAA2D,IAAI,CAAC,eAAe,gBAAgB,UAAU,CAAC,WAAW,KAAK,aAAa,SAAS,CAAC;aAC7J;SACF;QACD,IAAI,IAAI,KAAK,QAAQ,CAAC,KAAK,IAAI,QAAQ,EAAE;YACvC,OAAO,IAAI,CAAA;;kBAEC,IAAI,CAAC,WAAW;qBACb,UAAU,CAAC,WAAW;;;SAGlC,KAAK,SAAS,CAAC;SACnB;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAES,YAAY,GAAG,GAAmB,EAAE;QAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA,wCAAwC,QAAQ,gBAAgB,CAAC;IAC9E,CAAC,CAAC;CACH;AA3QC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAG1C;AAc2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAgB;AAMC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoB;AAMnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoB;AAOnB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAmB;AASnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAe;AAEhC;IAAxB,UAAU,CAAC,WAAW,CAAC;sCAA6C;AAE5D;IAAR,KAAK,EAAE;0CAA8B;AAK7B;IAAR,KAAK,EAAE;uCAA4B;AAK3B;IAAR,KAAK,EAAE;yCAA8B","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { EventUtils } from \"@api-client/core/build/browser.js\"; // build/src/lib/events/Utils.js\nimport { UiElement } from \"../UiElement.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport { close, arrowDropDown, check } from \"../icons/Icons.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ChipType {\n  assist = 'assist',\n  filter = 'filter',\n  input = 'input',\n  suggestion = 'suggestion',\n}\n\n/**\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The type of the rendered chip.\n   * @attribute\n   * \n   * @see https://m3.material.io/components/chips/guidelines\n   */\n  @property({ type: String }) type: ChipType;\n\n  /**\n   * Whether the chip should be rendered as elevated.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) elevated?: boolean;\n\n  /**\n   * Whether the chip renders the \"close\" icon at the end.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) closable?: boolean;\n\n  /**\n   * Whether the chip is currently checked.\n   * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) checked?: boolean;\n\n  /**\n   * The ID attribute of the list element that is rendered after activating the chip.\n   * When this is set the chip renders the dropdown icon at the end and sets `aria-*` \n   * attributes informing the assistive technology that this chip controls a list.\n   * \n   * @attribute\n   */\n  @property({ type: String, reflect: true }) list?: string;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected hasIcon: boolean;\n\n  /**\n   * Determines when the element has an image in the \"avatar\" slot.\n   */\n  @state() protected hasAvatar: boolean;\n\n  constructor() {\n    super();\n\n    this.disabled = false;\n    this.type = ChipType.assist;\n    this.hasIcon = false;\n    this.hasAvatar = false;\n\n    this.actionController.cancelKeyboardEvents = true;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n      e.preventDefault();\n      this.listAction();\n    } else if (this.closable && e.code === 'Backspace') {\n      e.preventDefault();\n      this.closeAction();\n    }\n  }\n\n  protected async handleFocus(): Promise<void> {\n    const element = await this.getRipple();\n    element?.beginFocus();\n  }\n\n  protected async handleBlur(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endFocus();\n  }\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  override endPress(info: EndPressConfig): void {\n    super.endPress(info);\n    this.endRipple();\n    const { cancelled, reason } = info;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    if (this.type === ChipType.filter) {\n      this.toggleChecked();\n    }\n  }\n\n  /**\n   * Toggles the \"filter\" type of the chip.\n   */\n  toggleChecked(): void {\n    this.checked = !this.checked;\n    this.dispatchEvent(new Event('select'));\n  }\n\n  /**\n   * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n   */\n  protected handleAvatarSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasAvatar = !!slot.assignedNodes().length;\n  }\n\n  protected handleListClick(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.listAction();\n  }\n\n  protected handleClose(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.closeAction();\n  }\n\n  protected async closeAction(): Promise<void> {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  protected async listAction(): Promise<void> {\n    this.dispatchEvent(new Event('list'));\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      withAvatar: this.hasAvatar,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderLeadingIcon()}\n        ${this.renderAvatar()}\n        <slot></slot>\n        ${this.renderTrailingIcon()}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.suggestion) {\n      return nothing;\n    }\n    if (type === ChipType.filter) {\n      const iconClasses = classMap({\n        'leading-icon': true,\n        'check-mark': true,\n        checked: !!this.checked,\n      });\n      return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n    }\n    return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`;\n  }\n\n  protected renderAvatar(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.input) {\n      return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`;\n    }\n    return nothing;\n  }\n\n  protected renderTrailingIcon(): TemplateResult | typeof nothing {\n    const { closable=false, list, type } = this;\n    if (type === ChipType.filter) {\n      if (list) {\n        return html`<span class=\"trailing-icon\" role=\"presentation\" @click=\"${this.handleListClick}\" @keypress=\"${EventUtils.cancelEvent}\">${arrowDropDown}</span>`;\n      }\n    }\n    if (type === ChipType.input && closable) {\n      return html`<span \n        class=\"trailing-icon\" \n        @click=\"${this.handleClose}\" \n        @keypress=\"${EventUtils.cancelEvent}\"\n        role=\"button\"\n        aria-label=\"Activate to close or disabled this chip.\"\n      >${close}</span>`;\n    }\n    return nothing;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"UiChip.js","sourceRoot":"","sources":["../../../src/ui/chip/UiChip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, TemplateResult } from \"lit\";\nimport { property, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport { EventUtils } from \"@api-client/core/build/browser.js\"; // build/src/lib/events/Utils.js\nimport { UiElement } from \"../UiElement.js\";\nimport UiRipple from \"../effects/ripple.js\";\nimport { ripple } from '../effects/rippleDirective.js';\nimport { close, arrowDropDown, check } from \"../icons/Icons.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport { BeginPressConfig, EndPressConfig } from \"../controllers/ActionController.js\";\nimport '../../define/ui/ui-ripple.js';\n\nexport enum ChipType {\n  assist = 'assist',\n  filter = 'filter',\n  input = 'input',\n  suggestion = 'suggestion',\n}\n\n/**\n * @slot icon - The leading icon, sized 18x18 px\n * @slot avatar - The leading image, sized 24x24 px\n * @fires list - When the user requested to activate the list associated with the element.\n * @fires select - When the checked state changed through a user interaction. This only related to `filter` chips. Note, `select` is dispatched just before the `click` event.\n */\nexport default class UiChip extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) \n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * The type of the rendered chip.\n   * @attribute\n   * \n   * @see https://m3.material.io/components/chips/guidelines\n   */\n  @property({ type: String }) type: ChipType;\n\n  /**\n   * Whether the chip should be rendered as elevated.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) elevated?: boolean;\n\n  /**\n   * Whether the chip renders the \"close\" icon at the end.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) closable?: boolean;\n\n  /**\n   * Whether the chip is currently checked.\n   * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) checked?: boolean;\n\n  /**\n   * The ID attribute of the list element that is rendered after activating the chip.\n   * When this is set the chip renders the dropdown icon at the end and sets `aria-*` \n   * attributes informing the assistive technology that this chip controls a list.\n   * \n   * @attribute\n   */\n  @property({ type: String, reflect: true }) list?: string;\n\n  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;\n\n  @state() protected showRipple = false;\n\n  /**\n   * Determines when the element has an icon in the \"icon\" slot.\n   */\n  @state() protected hasIcon: boolean;\n\n  /**\n   * Determines when the element has an image in the \"avatar\" slot.\n   */\n  @state() protected hasAvatar: boolean;\n\n  constructor() {\n    super();\n\n    this.disabled = false;\n    this.type = ChipType.assist;\n    this.hasIcon = false;\n    this.hasAvatar = false;\n\n    this.actionController.cancelKeyboardEvents = true;\n\n    this.addEventListener('click', this.handleClick.bind(this));\n    this.addEventListener('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.bind(this));\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this));\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this));\n    this.addEventListener('focus', this.handleFocus.bind(this));\n    this.addEventListener('blur', this.handleBlur.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n\n  protected async pressRipple(): Promise<void> {\n    const element = await this.getRipple();\n    if (element && !element.isPressed) {\n      element.beginPress();\n    }\n  }\n\n  protected async endRipple(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endPress();\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options);\n    this.pressRipple();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (this.type === ChipType.filter && e.code === 'ArrowDown') {\n      e.preventDefault();\n      this.listAction();\n    } else if (this.closable && e.code === 'Backspace') {\n      e.preventDefault();\n      this.closeAction();\n    }\n  }\n\n  protected async handleFocus(): Promise<void> {\n    const element = await this.getRipple();\n    element?.beginFocus();\n  }\n\n  protected async handleBlur(): Promise<void> {\n    const element = await this.getRipple();\n    element?.endFocus();\n  }\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  override endPress(info: EndPressConfig): void {\n    super.endPress(info);\n    this.endRipple();\n    const { cancelled, reason } = info;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    if (this.type === ChipType.filter) {\n      this.toggleChecked();\n    }\n  }\n\n  /**\n   * Toggles the \"filter\" type of the chip.\n   */\n  toggleChecked(): void {\n    this.checked = !this.checked;\n    this.dispatchEvent(new Event('select'));\n  }\n\n  /**\n   * Sets the `hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedNodes().length;\n  }\n\n  /**\n   * Sets the `_hasAvatar` state property when the \"avatar\" slot change event is dispatched.\n   */\n  protected handleAvatarSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasAvatar = !!slot.assignedNodes().length;\n  }\n\n  protected handleListClick(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.listAction();\n  }\n\n  protected handleClose(e: Event): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.closeAction();\n  }\n\n  protected async closeAction(): Promise<void> {\n    this.dispatchEvent(new Event('close'));\n  }\n\n  protected async listAction(): Promise<void> {\n    this.dispatchEvent(new Event('list'));\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this;\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      withAvatar: this.hasAvatar,\n      pressed,\n    });\n    return html`\n    <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n      <div class=\"container\"></div>\n      ${when(this.showRipple, this.renderRipple)}\n      <div class=\"content\">\n        ${this.renderLeadingIcon()}\n        ${this.renderAvatar()}\n        <slot></slot>\n        ${this.renderTrailingIcon()}\n      </div>\n    </div>\n    `;\n  }\n\n  protected renderLeadingIcon(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.suggestion) {\n      return nothing;\n    }\n    if (type === ChipType.filter) {\n      const iconClasses = classMap({\n        'leading-icon': true,\n        'check-mark': true,\n        checked: !!this.checked,\n      });\n      return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`;\n    }\n    return html`<slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>`;\n  }\n\n  protected renderAvatar(): TemplateResult | typeof nothing {\n    const { type } = this;\n    if (type === ChipType.input) {\n      return html`<slot name=\"avatar\" @slotchange=\"${this.handleAvatarSlotChange}\"></slot>`;\n    }\n    return nothing;\n  }\n\n  protected renderTrailingIcon(): TemplateResult | typeof nothing {\n    const { closable=false, list, type } = this;\n    if (type === ChipType.filter) {\n      if (list) {\n        return html`<span class=\"trailing-icon\" role=\"presentation\" @click=\"${this.handleListClick}\" @keypress=\"${EventUtils.cancelEvent}\">${arrowDropDown}</span>`;\n      }\n    }\n    if (type === ChipType.input && closable) {\n      return html`<span \n        class=\"trailing-icon\" \n        @click=\"${this.handleClose}\" \n        @keypress=\"${EventUtils.cancelEvent}\"\n        role=\"button\"\n        aria-label=\"Activate to close or disabled this chip.\"\n      >${close}</span>`;\n    }\n    return nothing;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/collapse/UiCollapse.js

@@ -20,21 +20,6 @@ export default class UiCollapse extends UiElement {
         setDisabled(this, value);
         this.requestUpdate('disabled', old);
     }
-    /**
-     * Set noAnimation to true to disable animations.
-     * @attr
-     */
-    noAnimation;
-    /**
-     * Renders the collapse horizontally when true and vertically otherwise
-     * @attribute
-     */
-    horizontal = false;
-    /**
-     * Set opened to true to show the collapse element and to false to hide it.
-     * @attribute
-     */
-    open = false;
     get dimension() {
         return this.horizontal ? 'width' : 'height';
     }
@@ -55,7 +40,6 @@ export default class UiCollapse extends UiElement {
     get isAttached() {
         return !!this.parentNode;
     }
-    transitioningInternal = false;
     /**
      * @return When true, the element is transitioning its open state. When false,
      * the element has finished opening/closing.
@@ -63,12 +47,23 @@ export default class UiCollapse extends UiElement {
     get transitioning() {
         return this.transitioningInternal;
     }
-    /**
-     * Stores the desired size of the collapse body.
-     */
-    desiredSize = '';
     constructor() {
         super();
+        /**
+         * Renders the collapse horizontally when true and vertically otherwise
+         * @attribute
+         */
+        this.horizontal = false;
+        /**
+         * Set opened to true to show the collapse element and to false to hide it.
+         * @attribute
+         */
+        this.open = false;
+        this.transitioningInternal = false;
+        /**
+         * Stores the desired size of the collapse body.
+         */
+        this.desiredSize = '';
         this.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
     }
     connectedCallback() {

package/dist/ui/collapse/UiCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiCollapse.js","sourceRoot":"","sources":["../../../src/ui/collapse/UiCollapse.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * @fires transitioning - When the element is transitioning.\n * @slot - Main slot for the content\n */\nexport default class UiCollapse extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Set noAnimation to true to disable animations.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true }) noAnimation?: boolean;\n\n  /**\n   * Renders the collapse horizontally when true and vertically otherwise\n   * @attribute\n   */\n  @property({ type: Boolean }) horizontal = false;\n\n  /**\n   * Set opened to true to show the collapse element and to false to hide it.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  get dimension(): 'width' | 'height' {\n    return this.horizontal ? 'width' : 'height';\n  }\n\n  /**\n   * `maxWidth` or `maxHeight`.\n   * @private\n   */\n  get dimensionMax(): 'maxWidth' | 'maxHeight' {\n    return this.horizontal ? 'maxWidth' : 'maxHeight';\n  }\n\n  /**\n   * `max-width` or `max-height`.\n   * @private\n   */\n  get dimensionMaxCss(): 'max-width' | 'max-height' {\n    return this.horizontal ? 'max-width' : 'max-height';\n  }\n\n  get isAttached(): boolean {\n    return !!this.parentNode;\n  }\n\n  protected transitioningInternal = false;\n\n  /**\n   * @return When true, the element is transitioning its open state. When false,\n   * the element has finished opening/closing.\n   */\n  get transitioning(): boolean {\n    return this.transitioningInternal;\n  }\n\n  /**\n   * Stores the desired size of the collapse body.\n   */\n  protected desiredSize = '';\n\n  constructor() {\n    super();\n    this.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    if (!this.hasAttribute('aria-hidden')) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      this.handleOpenChange();\n    }\n    if (cp.has('horizontal')) {\n      this.handleHorizontalChange();\n    }\n    super.willUpdate(cp);\n  }\n\n  /**\n   * Toggle the opened state.\n   */\n  toggle(): void {\n    this.open = !this.open;\n    this.dispatchEvent(new Event('open'));\n  }\n\n  /**\n   * Updates the size of the element.\n   * @param size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.\n   * @param animated if `true` updates the size with an animation, otherwise without.\n   */\n  protected updateSize(size: string, animated?: boolean): void {\n    // Consider 'auto' as '', to take full size.\n    let sizeValue = size === 'auto' ? '' : size;\n\n    let willAnimate = animated && !this.noAnimation && this.isAttached;\n    this.desiredSize = sizeValue;\n\n    this.updateTransition(false);\n    // If we can animate, must do some prep work.\n    if (willAnimate) {\n      // Animation will start at the current size.\n      const startSize = this.calcSize();\n      // For `auto` we must calculate what is the final size for the animation.\n      // After the transition is done, _transitionEnd will set the size back to\n      // `auto`.\n      if (sizeValue === '') {\n        this.style[this.dimensionMax] = '';\n        sizeValue = this.calcSize();\n      }\n      // Go to startSize without animation.\n      \n      this.style[this.dimensionMax] = startSize;\n      // Force layout to ensure transition will go. Set scrollTop to itself\n      // so that compilers won't remove it.\n      // eslint-disable-next-line no-self-assign\n      this.scrollTop = this.scrollTop;\n      // Enable animation.\n      this.updateTransition(true);\n      // If final size is the same as startSize it will not animate.\n      willAnimate = (sizeValue !== startSize);\n    }\n    // Set the final size.\n    \n    this.style[this.dimensionMax] = sizeValue;\n    // If it won't animate, call transitionEnd to set correct styles.\n    if (!willAnimate) {\n      this.transitionEnd();\n    }\n  }\n\n  protected updateTransition(enabled?: boolean): void {\n    this.style.transitionDuration = (enabled && !this.noAnimation) ? '' : '0s';\n  }\n\n  /**\n   * Calculates the size of the element when opened.\n   */\n  protected calcSize(): string {\n    const value = this.getBoundingClientRect()[this.dimension];\n    return `${value}px`;\n  }\n\n  protected transitionEnd(): void {\n    this.style[this.dimensionMax] = this.desiredSize;\n    this.toggleAttribute('collapse-closed', !this.open);\n    this.toggleAttribute('collapse-opened', this.open);\n    this.updateTransition(false);\n    this.notifyResize();\n    this.transitioningInternal = false;\n    this.notifyTransitioning();\n  }\n\n  protected notifyResize(): void {\n    this.dispatchEvent(new Event('resize', { bubbles: true, composed: true, cancelable: true }));\n  }\n\n  protected notifyTransitioning(): void {\n    this.dispatchEvent(new Event('transitioning', { bubbles: true, composed: true, cancelable: true }));\n  }\n\n  protected handleTransitionEnd(e: Event): void {\n    const target = e.composedPath().find((node) => node === this);\n    if (target) {\n      this.transitionEnd();\n    }\n  }\n\n  protected handleOpenChange(): void {\n    const { open } = this;\n    this.setAttribute('aria-hidden', String(!open));\n    this.transitioningInternal = true;\n    this.notifyTransitioning();\n    this.toggleAttribute('collapse-closed', false);\n    this.toggleAttribute('collapse-opened', false);\n    this.updateSize(open ? 'auto' : '0px', true);\n\n    // Focus the current collapse.\n    if (open) {\n      this.focus();\n    }\n  }\n\n  protected handleHorizontalChange(): void {\n    this.style.transitionProperty = this.dimensionMaxCss;\n    const otherDimension = this.dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth';\n    this.style[otherDimension] = '';\n    this.updateSize(this.open ? 'auto' : '0px', false);\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"UiCollapse.js","sourceRoot":"","sources":["../../../src/ui/collapse/UiCollapse.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * @fires transitioning - When the element is transitioning.\n * @slot - Main slot for the content\n */\nexport default class UiCollapse extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Set noAnimation to true to disable animations.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true }) noAnimation?: boolean;\n\n  /**\n   * Renders the collapse horizontally when true and vertically otherwise\n   * @attribute\n   */\n  @property({ type: Boolean }) horizontal = false;\n\n  /**\n   * Set opened to true to show the collapse element and to false to hide it.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  get dimension(): 'width' | 'height' {\n    return this.horizontal ? 'width' : 'height';\n  }\n\n  /**\n   * `maxWidth` or `maxHeight`.\n   * @private\n   */\n  get dimensionMax(): 'maxWidth' | 'maxHeight' {\n    return this.horizontal ? 'maxWidth' : 'maxHeight';\n  }\n\n  /**\n   * `max-width` or `max-height`.\n   * @private\n   */\n  get dimensionMaxCss(): 'max-width' | 'max-height' {\n    return this.horizontal ? 'max-width' : 'max-height';\n  }\n\n  get isAttached(): boolean {\n    return !!this.parentNode;\n  }\n\n  protected transitioningInternal = false;\n\n  /**\n   * @return When true, the element is transitioning its open state. When false,\n   * the element has finished opening/closing.\n   */\n  get transitioning(): boolean {\n    return this.transitioningInternal;\n  }\n\n  /**\n   * Stores the desired size of the collapse body.\n   */\n  protected desiredSize = '';\n\n  constructor() {\n    super();\n    this.addEventListener('transitionend', this.handleTransitionEnd.bind(this));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    if (!this.hasAttribute('aria-hidden')) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      this.handleOpenChange();\n    }\n    if (cp.has('horizontal')) {\n      this.handleHorizontalChange();\n    }\n    super.willUpdate(cp);\n  }\n\n  /**\n   * Toggle the opened state.\n   */\n  toggle(): void {\n    this.open = !this.open;\n    this.dispatchEvent(new Event('open'));\n  }\n\n  /**\n   * Updates the size of the element.\n   * @param size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.\n   * @param animated if `true` updates the size with an animation, otherwise without.\n   */\n  protected updateSize(size: string, animated?: boolean): void {\n    // Consider 'auto' as '', to take full size.\n    let sizeValue = size === 'auto' ? '' : size;\n\n    let willAnimate = animated && !this.noAnimation && this.isAttached;\n    this.desiredSize = sizeValue;\n\n    this.updateTransition(false);\n    // If we can animate, must do some prep work.\n    if (willAnimate) {\n      // Animation will start at the current size.\n      const startSize = this.calcSize();\n      // For `auto` we must calculate what is the final size for the animation.\n      // After the transition is done, _transitionEnd will set the size back to\n      // `auto`.\n      if (sizeValue === '') {\n        this.style[this.dimensionMax] = '';\n        sizeValue = this.calcSize();\n      }\n      // Go to startSize without animation.\n      \n      this.style[this.dimensionMax] = startSize;\n      // Force layout to ensure transition will go. Set scrollTop to itself\n      // so that compilers won't remove it.\n      // eslint-disable-next-line no-self-assign\n      this.scrollTop = this.scrollTop;\n      // Enable animation.\n      this.updateTransition(true);\n      // If final size is the same as startSize it will not animate.\n      willAnimate = (sizeValue !== startSize);\n    }\n    // Set the final size.\n    \n    this.style[this.dimensionMax] = sizeValue;\n    // If it won't animate, call transitionEnd to set correct styles.\n    if (!willAnimate) {\n      this.transitionEnd();\n    }\n  }\n\n  protected updateTransition(enabled?: boolean): void {\n    this.style.transitionDuration = (enabled && !this.noAnimation) ? '' : '0s';\n  }\n\n  /**\n   * Calculates the size of the element when opened.\n   */\n  protected calcSize(): string {\n    const value = this.getBoundingClientRect()[this.dimension];\n    return `${value}px`;\n  }\n\n  protected transitionEnd(): void {\n    this.style[this.dimensionMax] = this.desiredSize;\n    this.toggleAttribute('collapse-closed', !this.open);\n    this.toggleAttribute('collapse-opened', this.open);\n    this.updateTransition(false);\n    this.notifyResize();\n    this.transitioningInternal = false;\n    this.notifyTransitioning();\n  }\n\n  protected notifyResize(): void {\n    this.dispatchEvent(new Event('resize', { bubbles: true, composed: true, cancelable: true }));\n  }\n\n  protected notifyTransitioning(): void {\n    this.dispatchEvent(new Event('transitioning', { bubbles: true, composed: true, cancelable: true }));\n  }\n\n  protected handleTransitionEnd(e: Event): void {\n    const target = e.composedPath().find((node) => node === this);\n    if (target) {\n      this.transitionEnd();\n    }\n  }\n\n  protected handleOpenChange(): void {\n    const { open } = this;\n    this.setAttribute('aria-hidden', String(!open));\n    this.transitioningInternal = true;\n    this.notifyTransitioning();\n    this.toggleAttribute('collapse-closed', false);\n    this.toggleAttribute('collapse-opened', false);\n    this.updateSize(open ? 'auto' : '0px', true);\n\n    // Focus the current collapse.\n    if (open) {\n      this.focus();\n    }\n  }\n\n  protected handleHorizontalChange(): void {\n    this.style.transitionProperty = this.dimensionMaxCss;\n    const otherDimension = this.dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth';\n    this.style[otherDimension] = '';\n    this.updateSize(this.open ? 'auto' : '0px', false);\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n"]}