@api-client/ui 0.0.4 → 0.0.7

package/dist/ui/icons/UiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiIcon.js","sourceRoot":"","sources":["../../../src/ui/icons/UiIcon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IACpC,YAAY,CAAuB;IAEnC,eAAe,GAAG,KAAK,CAAC;IAExB,SAAS,CAAgC;IAEjD;;;;OAIG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,IAAI,CAAC,KAA2B;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,4BAA4B;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,IAA0B;QAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAC;QACjF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;OAEG;IACM,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAChD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAA,eAAe,CAAC;SAC5B;QACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF;AA3CC;IADC,QAAQ,EAAE;kCAGV","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from './Icons.js';\nimport { IconType } from './Icons.js';\n\nexport default class UiIcon extends LitElement {\n  private iconInternal: IconType | undefined;\n\n  private hasIconInternal = false;\n\n  private iconValue: SVGTemplateResult | undefined;\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property()\n  get icon(): IconType | undefined {\n    return this.iconInternal;\n  }\n\n  set icon(value: IconType | undefined) {\n    const old = this.iconInternal;\n    if (old === value) {\n      return;\n    }\n    this.iconInternal = value;\n    this.updateIcon(value);\n    // don't request update here\n  }\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal;\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined;\n    this.hasIconInternal = !!icon;\n    this.iconValue = icon;\n    this.requestUpdate();\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this;\n    if (!hasIcon) {\n      return html`<slot></slot>`;\n    }\n    return html`${_iconValue}`;\n  }\n}\n"]}
+{"version":3,"file":"UiIcon.js","sourceRoot":"","sources":["../../../src/ui/icons/UiIcon.ts"],"names":[],"mappings":";AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,EAAkB,UAAU,EAAqB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AAGpC,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAA9C;;QAGU,oBAAe,GAAG,KAAK,CAAC;IAqDlC,CAAC;IAjDC;;;;OAIG;IAEH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,IAAI,CAAC,KAA2B;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,IAAI,GAAG,KAAK,KAAK,EAAE;YACjB,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACvB,4BAA4B;IAC9B,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,UAAU,CAAC,IAA0B;QAC7C,MAAM,IAAI,GAAI,KAAe,CAAC,IAAgB,CAAkC,CAAC;QACjF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;OAEG;IACM,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAChD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,IAAI,CAAA,eAAe,CAAC;SAC5B;QACD,OAAO,IAAI,CAAA,GAAG,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF;AA3CC;IADC,QAAQ,EAAE;kCAGV","sourcesContent":["/*\nCopyright 2022 Pawel Psztyc\nLicensed under the CC-BY 2.0\n*/\nimport { html, TemplateResult, LitElement, SVGTemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from './Icons.js';\nimport { IconType } from './Icons.js';\n\nexport default class UiIcon extends LitElement {\n  private iconInternal: IconType | undefined;\n\n  private hasIconInternal = false;\n\n  private iconValue: SVGTemplateResult | undefined;\n\n  /**\n   * An icon to be rendered from the ApiIcons library.\n   * When incorrect icon is referenced nothing is rendered.\n   * @attribute\n   */\n  @property()\n  get icon(): IconType | undefined {\n    return this.iconInternal;\n  }\n\n  set icon(value: IconType | undefined) {\n    const old = this.iconInternal;\n    if (old === value) {\n      return;\n    }\n    this.iconInternal = value;\n    this.updateIcon(value);\n    // don't request update here\n  }\n\n  /**\n   * @returns True when the icon was found and is rendered.\n   */\n  get hasIcon(): boolean {\n    return this.hasIconInternal;\n  }\n\n  /**\n   * Maps icon name to it's definition and sets `hasIcon` value.\n   *\n   * @param name Icon name\n   */\n  protected updateIcon(name: IconType | undefined): void {\n    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined;\n    this.hasIconInternal = !!icon;\n    this.iconValue = icon;\n    this.requestUpdate();\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { hasIcon, iconValue: _iconValue } = this;\n    if (!hasIcon) {\n      return html`<slot></slot>`;\n    }\n    return html`${_iconValue}`;\n  }\n}\n"]}

package/dist/ui/input/CheckboxElement.js

@@ -9,6 +9,18 @@ import { check, checkIndeterminate } from '../icons/Icons.js';
 import { ripple } from "../effects/rippleDirective.js";
 import '../../define/ui/ui-ripple.js';
 export default class CheckboxElement extends CheckedElement {
+    constructor() {
+        super(...arguments);
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            const { disabled } = this;
+            return html `<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`;
+        };
+    }
     static get styles() {
         return elementStyles;
     }
@@ -22,12 +34,6 @@ export default class CheckboxElement extends CheckedElement {
         }
         return nothing;
     }
-    ripple;
-    showRipple = false;
-    getRipple = () => {
-        this.showRipple = true;
-        return this.ripple;
-    };
     async handleFocus() {
         const _ripple = await this.getRipple();
         _ripple?.beginFocus();
@@ -65,10 +71,6 @@ export default class CheckboxElement extends CheckedElement {
     </div>
     `;
     }
-    renderRipple = () => {
-        const { disabled } = this;
-        return html `<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`;
-    };
 }
 __decorate([
     queryAsync('ui-ripple')

package/dist/ui/input/CheckboxElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResult, html, SVGTemplateResult, TemplateResult, nothing } from \"lit\";\nimport { queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport elementStyles from './Checkbox.styles.js';\nimport CheckedElement from \"./CheckedElement.js\";\nimport { check, checkIndeterminate } from '../icons/Icons.js';\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport UiRipple from \"../effects/ripple.js\";\n\nexport default class CheckboxElement extends CheckedElement {\n  static override get styles(): CSSResult | CSSResult[] {\n    return elementStyles;\n  }\n\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this;\n    if (indeterminate) {\n      return checkIndeterminate;\n    }\n    if (checked) {\n      return check;\n    }\n    return nothing;\n  }\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  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.beginFocus();\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.endFocus();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.beginPress();\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.endPress();\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=\"icon\">${this._icon}</div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" unbounded ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}
+{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResult, html, SVGTemplateResult, TemplateResult, nothing } from \"lit\";\nimport { queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { when } from 'lit/directives/when.js';\nimport elementStyles from './Checkbox.styles.js';\nimport CheckedElement from \"./CheckedElement.js\";\nimport { check, checkIndeterminate } from '../icons/Icons.js';\nimport { ripple } from \"../effects/rippleDirective.js\";\nimport '../../define/ui/ui-ripple.js';\nimport UiRipple from \"../effects/ripple.js\";\n\nexport default class CheckboxElement extends CheckedElement {\n  static override get styles(): CSSResult | CSSResult[] {\n    return elementStyles;\n  }\n\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this;\n    if (indeterminate) {\n      return checkIndeterminate;\n    }\n    if (checked) {\n      return check;\n    }\n    return nothing;\n  }\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  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.beginFocus();\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple();\n    _ripple?.endFocus();\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.beginPress();\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e);\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple();\n      _ripple?.endPress();\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=\"icon\">${this._icon}</div>\n    </div>\n    `;\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this;\n    return html`<ui-ripple class=\"ripple\" unbounded ?disabled=\"${disabled}\"></ui-ripple>`;\n  };\n}\n"]}

package/dist/ui/input/CheckedElement.d.ts

@@ -84,7 +84,7 @@ export default class CheckedElement extends UiElement {
     protected handleBlur(): void;
     protected _setChecked(value?: boolean): void;
     protected _updateFormValue(): void;
-    protected _notifyChange(): void;
+    notifyChange(): void;
     protected _invalidHandler(): void;
     toggle(): void;
     protected _postCheckedChange(): void;

package/dist/ui/input/CheckedElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckedElement.d.ts","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;IAGnD,MAAM,KAAK,cAAc,IAAI,OAAO,CAEnC;IAID,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,IAAI,IAAI,MAAM,CAA2B;IAE7C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED;;;OAGG;IACyB,IAAI,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;OAKG;IACH,IACI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMlC;IAID;;;;;;;OAOG;IACH,IACI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAQzB;IAID;;;;;;;OAOG;IACH,IACI,aAAa,IAAI,OAAO,CAE3B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAM/B;IAID;;;OAGG;IACH,IACI,QAAQ,IAAI,OAAO,GAAG,SAAS,CAElC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAatC;IAED;;;;;OAKG;IACyC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE9D,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;;IAuBQ,iBAAiB,IAAI,IAAI;IAWlC;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAOzC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAKhC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B,SAAS,CAAC,WAAW,CAAC,KAAK,UAAQ,GAAG,IAAI;IAO1C,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAiBlC,SAAS,CAAC,aAAa,IAAI,IAAI;IAM/B,SAAS,CAAC,eAAe,IAAI,IAAI;IAOjC,MAAM,IAAI,IAAI;IAWd,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAKpC;;;OAGG;IACH,aAAa,IAAI,OAAO;IAKxB;;;;OAIG;IACH,cAAc,IAAI,OAAO;CAI1B"}
+{"version":3,"file":"CheckedElement.d.ts","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;IAGnD,MAAM,KAAK,cAAc,IAAI,OAAO,CAEnC;IAID,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,IAAI,IAAI,MAAM,CAA2B;IAE7C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED;;;OAGG;IACyB,IAAI,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;OAKG;IACH,IACI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAMlC;IAID;;;;;;;OAOG;IACH,IACI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAQzB;IAID;;;;;;;OAOG;IACH,IACI,aAAa,IAAI,OAAO,CAE3B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAM/B;IAID;;;OAGG;IACH,IACI,QAAQ,IAAI,OAAO,GAAG,SAAS,CAElC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,EAatC;IAED;;;;;OAKG;IACyC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE9D,SAAS,KAAK,gBAAgB,IAAI,MAAM,CAEvC;;IAuBQ,iBAAiB,IAAI,IAAI;IAWlC;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAOzC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAKhC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B,SAAS,CAAC,WAAW,CAAC,KAAK,UAAQ,GAAG,IAAI;IAO1C,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAiBzB,YAAY,IAAI,IAAI;IAM7B,SAAS,CAAC,eAAe,IAAI,IAAI;IAOjC,MAAM,IAAI,IAAI;IAWd,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAKpC;;;OAGG;IACH,aAAa,IAAI,OAAO;IAKxB;;;;OAIG;IACH,cAAc,IAAI,OAAO;CAI1B"}

package/dist/ui/input/CheckedElement.js

@@ -13,7 +13,7 @@ export default class CheckedElement extends UiElement {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
@@ -31,11 +31,6 @@ export default class CheckedElement extends UiElement {
         this.requestUpdate('disabled', old);
         this._updateFormValue();
     }
-    /**
-     * The name of the form control, submitted as a pair with the control's value as part of the form data.
-     * @attribute
-     */
-    name;
     #_value;
     /**
      * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
@@ -116,18 +111,12 @@ export default class CheckedElement extends UiElement {
         }
         this._updateFormValue();
     }
-    /**
-     * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes
-     * it also exposes an attribute to style the element as invalid. This attribute changes
-     * when the element validation is performed.
-     * @attribute
-     */
-    invalid;
     get _validationError() {
         return 'Please check this box if you want to proceed.';
     }
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
         // The default value for the `<input type="checkbox"/>
         this.value = 'on';
         this.#_checked = false;
@@ -219,10 +208,10 @@ export default class CheckedElement extends UiElement {
             this.#_internals.setValidity({});
         }
     }
-    _notifyChange() {
+    notifyChange() {
         // The <input type="checkbox"/> dispatches both events.
         this.dispatchEvent(new Event('input'));
-        this.dispatchEvent(new Event('change'));
+        super.notifyChange();
     }
     _invalidHandler() {
         if (!this.#_userInteracted) {
@@ -241,7 +230,7 @@ export default class CheckedElement extends UiElement {
         this._postCheckedChange();
     }
     _postCheckedChange() {
-        this._notifyChange();
+        this.notifyChange();
         this.#_internals.checkValidity();
     }
     /**

package/dist/ui/input/CheckedElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckedElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * A base class for UI elements that can be checked (as in a form: checkbox, switch, radio).\n * \n * @fires change - when the checked element changes it's checked state\n * @fires input - when the checked element changes it's checked state\n */\nexport default class CheckedElement extends UiElement {\n  #_userInteracted: boolean;\n\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  get type(): string { return this.localName; }\n\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n    this._updateFormValue();\n  }\n\n  /**\n   * The name of the form control, submitted as a pair with the control's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string; \n\n  /**\n   * When a form is submitted, only checkboxes which are currently checked are submitted to the server, \n   * and the reported value is the `value` of the value attribute. \n   * If the `value` is not otherwise specified, it is the string `on` by default. \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._updateFormValue();\n  }\n\n  #_checked: boolean;\n\n  /**\n   * A Boolean attribute indicating whether this checkbox is checked.\n   * \n   * A checkbox's value is only included in the submitted data \n   * if the checkbox is currently `checked`. If it is, then the value \n   * of the checkbox's `value` attribute is reported as the input's value.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get checked(): boolean {\n    return this.#_checked;\n  }\n\n  set checked(value: boolean) {\n    const old = this.#_checked;\n    if (old === value) {\n      return;\n    }\n    this.#_checked = value;\n    this._setChecked(value);\n    this.requestUpdate('checked', old);\n  }\n\n  #_indeterminate: boolean;\n\n  /**\n   * In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. \n   * This is a state in which it's impossible to say whether the item is toggled on or off.\n   * \n   * If you submit a form with an indeterminate checkbox, the same thing happens as \n   * if the checkbox were unchecked — no data is submitted to represent the checkbox.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get indeterminate(): boolean {\n    return this.#_indeterminate;\n  }\n\n  set indeterminate(value: boolean) {\n    if (this.#_indeterminate === value) {\n      return;\n    }\n    this.#_indeterminate = value;\n    this._updateFormValue();\n  }\n\n  #_required?: boolean;\n\n  /**\n   * Set to true to mark the checked element as required. \n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  get required(): boolean | undefined {\n    return this.#_required;\n  }\n\n  set required(value: boolean | undefined) {\n    const old = this.#_required;\n    if (old === value) {\n      return;\n    }\n    this.#_required = value;\n    this.requestUpdate('required', 'old');\n    if (value) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n    this._updateFormValue();\n  }\n\n  /**\n   * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes\n   * it also exposes an attribute to style the element as invalid. This attribute changes \n   * when the element validation is performed.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean;\n\n  protected get _validationError(): string {\n    return 'Please check this box if you want to proceed.';\n  }\n\n  constructor() {\n    super();\n    // The default value for the `<input type=\"checkbox\"/>\n    this.value = 'on';\n    this.#_checked = false;\n    this.#_indeterminate = false;\n    this.#_userInteracted = false;\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('invalid', this._invalidHandler.bind(this));\n    this.addEventListener('click', this.handleClick.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('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.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', 'checkbox');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n    this._setChecked(this.checked);\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form has been reset\n   */\n  formResetCallback(): void {\n    this.checked = false;\n    this._postCheckedChange();\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form state has been restored\n   *\n   * @param formState Restored value\n   */\n  formStateRestoreCallback(formState?: string): void {\n    if (this.value === formState) {\n      this.checked = true;\n      this._postCheckedChange();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    this.toggle();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.toggle();\n    }\n  }\n\n  protected handleFocus(): void { \n    // \n  }\n\n  protected handleBlur(): void { \n    // \n  }\n\n  protected _setChecked(value = false): void {\n    const { indeterminate } = this;\n    const attrValue = indeterminate ? 'mixed' : String(value);\n    this.setAttribute('aria-checked', attrValue);\n    this._updateFormValue();\n  }\n\n  protected _updateFormValue(): void {\n    const { value = null, checked, indeterminate, disabled, required } = this;\n    if (!checked || indeterminate || disabled) {\n      this.#_internals.setFormValue(null);\n    } else {\n      this.#_internals.setFormValue(value);\n    }\n\n    if (required && !checked) {\n      this.#_internals.setValidity({\n        valueMissing: true,\n      }, this._validationError);\n    } else if (this.#_internals.validity.valueMissing) {\n      this.#_internals.setValidity({});\n    }\n  }\n\n  protected _notifyChange(): void {\n    // The <input type=\"checkbox\"/> dispatches both events.\n    this.dispatchEvent(new Event('input'));\n    this.dispatchEvent(new Event('change'));\n  }\n\n  protected _invalidHandler(): void {\n    if (!this.#_userInteracted) {\n      return;\n    }\n    this.invalid = true;\n  }\n\n  toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.#_userInteracted = true;\n    this.invalid = false;\n    this.checked = !this.checked;\n    this._updateFormValue();\n    this._postCheckedChange();\n  }\n\n  protected _postCheckedChange(): void {\n    this._notifyChange();\n    this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns true if the element's value has no validity problems; false otherwise. \n   * Fires an invalid event at the element in the latter case.\n   */\n  checkValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if internals's target element has no validity problems; otherwise, returns false, \n   * fires an invalid event at the element, and (if the event isn't canceled) reports \n   * the problem to the user.\n   */\n  reportValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.reportValidity();\n  }\n}\n"]}
+{"version":3,"file":"CheckedElement.js","sourceRoot":"","sources":["../../../src/ui/input/CheckedElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { EndPressConfig } from \"../controllers/ActionController.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\n\n/**\n * A base class for UI elements that can be checked (as in a form: checkbox, switch, radio).\n * \n * @fires change - when the checked element changes it's checked state\n * @fires input - when the checked element changes it's checked state\n */\nexport default class CheckedElement extends UiElement {\n  #_userInteracted: boolean;\n\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  get type(): string { return this.localName; }\n\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n    this._updateFormValue();\n  }\n\n  /**\n   * The name of the form control, submitted as a pair with the control's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) name?: string;\n\n  #_value?: string; \n\n  /**\n   * When a form is submitted, only checkboxes which are currently checked are submitted to the server, \n   * and the reported value is the `value` of the value attribute. \n   * If the `value` is not otherwise specified, it is the string `on` by default. \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._updateFormValue();\n  }\n\n  #_checked: boolean;\n\n  /**\n   * A Boolean attribute indicating whether this checkbox is checked.\n   * \n   * A checkbox's value is only included in the submitted data \n   * if the checkbox is currently `checked`. If it is, then the value \n   * of the checkbox's `value` attribute is reported as the input's value.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get checked(): boolean {\n    return this.#_checked;\n  }\n\n  set checked(value: boolean) {\n    const old = this.#_checked;\n    if (old === value) {\n      return;\n    }\n    this.#_checked = value;\n    this._setChecked(value);\n    this.requestUpdate('checked', old);\n  }\n\n  #_indeterminate: boolean;\n\n  /**\n   * In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. \n   * This is a state in which it's impossible to say whether the item is toggled on or off.\n   * \n   * If you submit a form with an indeterminate checkbox, the same thing happens as \n   * if the checkbox were unchecked — no data is submitted to represent the checkbox.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true })\n  get indeterminate(): boolean {\n    return this.#_indeterminate;\n  }\n\n  set indeterminate(value: boolean) {\n    if (this.#_indeterminate === value) {\n      return;\n    }\n    this.#_indeterminate = value;\n    this._updateFormValue();\n  }\n\n  #_required?: boolean;\n\n  /**\n   * Set to true to mark the checked element as required. \n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) \n  get required(): boolean | undefined {\n    return this.#_required;\n  }\n\n  set required(value: boolean | undefined) {\n    const old = this.#_required;\n    if (old === value) {\n      return;\n    }\n    this.#_required = value;\n    this.requestUpdate('required', 'old');\n    if (value) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n    this._updateFormValue();\n  }\n\n  /**\n   * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes\n   * it also exposes an attribute to style the element as invalid. This attribute changes \n   * when the element validation is performed.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) invalid?: boolean;\n\n  protected get _validationError(): string {\n    return 'Please check this box if you want to proceed.';\n  }\n\n  constructor() {\n    super();\n    // The default value for the `<input type=\"checkbox\"/>\n    this.value = 'on';\n    this.#_checked = false;\n    this.#_indeterminate = false;\n    this.#_userInteracted = false;\n    this.actionController.cancelKeyboardEvents = true;\n    this.addEventListener('invalid', this._invalidHandler.bind(this));\n    this.addEventListener('click', this.handleClick.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('keydown', this.handleKeyDown.bind(this));\n    this.addEventListener('keyup', this.handleKeyUp.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', 'checkbox');\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0');\n    }\n    this._setChecked(this.checked);\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form has been reset\n   */\n  formResetCallback(): void {\n    this.checked = false;\n    this._postCheckedChange();\n  }\n\n  /**\n   * When form-associated custom elements are supported in the browser it\n   * is called when the form state has been restored\n   *\n   * @param formState Restored value\n   */\n  formStateRestoreCallback(formState?: string): void {\n    if (this.value === formState) {\n      this.checked = true;\n      this._postCheckedChange();\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    this.toggle();\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config);\n    const { cancelled, reason } = config;\n    if (cancelled) {\n      return;\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.toggle();\n    }\n  }\n\n  protected handleFocus(): void { \n    // \n  }\n\n  protected handleBlur(): void { \n    // \n  }\n\n  protected _setChecked(value = false): void {\n    const { indeterminate } = this;\n    const attrValue = indeterminate ? 'mixed' : String(value);\n    this.setAttribute('aria-checked', attrValue);\n    this._updateFormValue();\n  }\n\n  protected _updateFormValue(): void {\n    const { value = null, checked, indeterminate, disabled, required } = this;\n    if (!checked || indeterminate || disabled) {\n      this.#_internals.setFormValue(null);\n    } else {\n      this.#_internals.setFormValue(value);\n    }\n\n    if (required && !checked) {\n      this.#_internals.setValidity({\n        valueMissing: true,\n      }, this._validationError);\n    } else if (this.#_internals.validity.valueMissing) {\n      this.#_internals.setValidity({});\n    }\n  }\n\n  override notifyChange(): void {\n    // The <input type=\"checkbox\"/> dispatches both events.\n    this.dispatchEvent(new Event('input'));\n    super.notifyChange();\n  }\n\n  protected _invalidHandler(): void {\n    if (!this.#_userInteracted) {\n      return;\n    }\n    this.invalid = true;\n  }\n\n  toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.#_userInteracted = true;\n    this.invalid = false;\n    this.checked = !this.checked;\n    this._updateFormValue();\n    this._postCheckedChange();\n  }\n\n  protected _postCheckedChange(): void {\n    this.notifyChange();\n    this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns true if the element's value has no validity problems; false otherwise. \n   * Fires an invalid event at the element in the latter case.\n   */\n  checkValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if internals's target element has no validity problems; otherwise, returns false, \n   * fires an invalid event at the element, and (if the event isn't canceled) reports \n   * the problem to the user.\n   */\n  reportValidity(): boolean {\n    this.#_userInteracted = true;\n    return this.#_internals.reportValidity();\n  }\n}\n"]}