@universal-material/web 3.0.38 → 3.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.38",
3
+ "version": "3.0.39",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -7,6 +7,7 @@ export declare abstract class UmButtonWrapper extends LitElement {
7
7
  * Whether the button is disabled or not.
8
8
  */
9
9
  disabled: boolean;
10
+ get clickable(): boolean;
10
11
  /**
11
12
  * The URL that the link button points to.
12
13
  */
@@ -1 +1 @@
1
- {"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IAC9C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAiBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAIvC,OAAO,CAAC,iBAAiB;IA8BzB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
1
+ {"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D,IAAa,SAAS,YAAkB;IAExC;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IAC9C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAiBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAIvC,OAAO,CAAC,iBAAiB;IA8BzB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
11
11
  };
12
12
  var _UmButtonWrapper_instances, _UmButtonWrapper_innerClickHandler;
13
13
  import { html, LitElement, nothing } from 'lit';
14
- import { property, query } from 'lit/decorators.js';
14
+ import { property, query, state } from 'lit/decorators.js';
15
15
  import { redispatchEvent } from './redispatch-event.js';
16
16
  import '../elevation/elevation.js';
17
17
  import '../ripple/ripple.js';
@@ -25,6 +25,7 @@ export class UmButtonWrapper extends LitElement {
25
25
  this.disabled = false;
26
26
  this.innerRole = null;
27
27
  }
28
+ get clickable() { return true; }
28
29
  get pathname() {
29
30
  return this.buttonElement?.pathname;
30
31
  }
@@ -44,7 +45,7 @@ export class UmButtonWrapper extends LitElement {
44
45
  .role=${this.innerRole}
45
46
  type="button"
46
47
  @click=${__classPrivateFieldGet(this, _UmButtonWrapper_instances, "m", _UmButtonWrapper_innerClickHandler)}>
47
- <u-ripple ?disabled=${this.disabled}></u-ripple>
48
+ <u-ripple ?disabled=${this.disabled || !this.clickable}></u-ripple>
48
49
  <u-elevation></u-elevation>
49
50
  </button>
50
51
  <div class="content">${this.renderContent()}</div>`;
@@ -61,7 +62,7 @@ export class UmButtonWrapper extends LitElement {
61
62
  target=${this.target || nothing}
62
63
  @click=${__classPrivateFieldGet(this, _UmButtonWrapper_instances, "m", _UmButtonWrapper_innerClickHandler)}>
63
64
  <u-elevation></u-elevation>
64
- <u-ripple ?disabled=${this.disabled}></u-ripple>
65
+ <u-ripple ?disabled=${this.disabled || !this.clickable}></u-ripple>
65
66
  </a>
66
67
  <div class="content">${this.renderContent()}</div>`;
67
68
  }
@@ -109,6 +110,9 @@ _UmButtonWrapper_instances = new WeakSet(), _UmButtonWrapper_innerClickHandler =
109
110
  __decorate([
110
111
  property({ type: Boolean, reflect: true })
111
112
  ], UmButtonWrapper.prototype, "disabled", void 0);
113
+ __decorate([
114
+ state()
115
+ ], UmButtonWrapper.prototype, "clickable", null);
112
116
  __decorate([
113
117
  property()
114
118
  ], UmButtonWrapper.prototype, "href", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { redispatchEvent } from './redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') protected readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button focus-ring\"\n ?disabled=${this.disabled}\n aria-label=${this.getAriaLabel() || nothing}\n aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\"\n @click=${this.#innerClickHandler}>\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}\n @click=${this.#innerClickHandler}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null {\n return this.ariaLabel;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n #innerClickHandler(event: MouseEvent): void {\n \n if (this.disabled) {\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n\n if (preventDefault) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}
1
+ {"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { redispatchEvent } from './redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @state() get clickable() { return true }\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') protected readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button focus-ring\"\n ?disabled=${this.disabled}\n aria-label=${this.getAriaLabel() || nothing}\n aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\"\n @click=${this.#innerClickHandler}>\n <u-ripple ?disabled=${this.disabled || !this.clickable}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}\n @click=${this.#innerClickHandler}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled || !this.clickable}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null {\n return this.ariaLabel;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n #innerClickHandler(event: MouseEvent): void {\n \n if (this.disabled) {\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n\n if (preventDefault) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}