@universal-material/web 3.6.11 → 3.6.12

package/app-bar/top-app-bar.js

@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles as baseStyles } from '../shared/base.styles';
+import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './top-app-bar.styles.js';
 let UmTopAppBar = class UmTopAppBar extends LitElement {
     constructor() {

package/app-bar/top-app-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  @state() private _hasLeadingIcon = false;\n  @state() private _hasTrailingIcon = false;\n\n  @property({ reflect: true })\n  position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n  @property({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  @property() headline = '';\n\n  @property({ reflect: true })\n  get scrollContainer(): 'none' | 'window' | string | undefined {\n    return this.attributes.getNamedItem('scrollContainer')?.value;\n  }\n\n  set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n    this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n    if (idOrElement === 'none') {\n      return;\n    }\n\n    this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n    this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n  }\n\n  @state() containerScrolled = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @query('.container', true) private readonly _container!: HTMLElement;\n  @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n  @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n  private containerSizeObserver: ResizeObserver | null = null;\n\n  private scrollContainerElement: {\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | null = null;\n\n  private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n    | {\n      addEventListener: typeof window.addEventListener;\n      removeEventListener: typeof window.removeEventListener;\n    }\n    | undefined {\n    if (idOrElement instanceof HTMLElement) {\n      return idOrElement;\n    }\n\n    if (idOrElement === 'window') {\n      return window;\n    }\n\n    return document.getElementById(idOrElement!)!;\n  }\n\n  #handleLeadingIconSlotChange() {\n    this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n  }\n\n  #handleTrailingIconSlotChange() {\n    this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  override render(): HTMLTemplateResult {\n    const extendedContent = html`\n      <div class=\"extended-content\" part=\"extended-content\">\n        <slot name=\"extended-content\">${this.headline}</slot>\n      </div>\n    `;\n\n    const containerClasses = classMap({\n      [this.position]: true,\n      [this.size]: true,\n      scrolled: this.containerScrolled,\n      'has-leading-icon': this._hasLeadingIcon,\n      'has-trailing-icon': this._hasTrailingIcon,\n    });\n\n    const appBarSpacing = this.position !== 'static'\n      ? html`<div class=\"spacing\"></div>`\n      : nothing;\n\n    return html`\n      ${appBarSpacing}\n      <div class=\"container ${containerClasses}\" part=\"container\">\n        <div class=\"content\" part=\"content\">\n          <div class=\"icon leading-icon\" part=\"icon leading\">\n            <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot>\n              <span>${this.headline}</span>\n            </slot>\n          </div>\n\n          <div class=\"icon trailing-icon\" part=\"icon trailing\">\n            <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n          </div>\n        </div>\n        <slot name=\"additional-content\"></slot>\n      </div>\n      ${this.size !== 'small' ? extendedContent : nothing}\n    `;\n  }\n\n  protected override updated(_changedProperties: PropertyValues) {\n    super.updated(_changedProperties);\n    this.#updateScroll();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n    this.containerSizeObserver.observe(this._container);\n    this.#setContentHeightProperty();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.scrollContainer = this.scrollContainer || 'window';\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.containerSizeObserver!.disconnect();\n    this.containerSizeObserver = null;\n  }\n\n  readonly #updateScroll = () => {\n    const container = this.scrollContainerElement ?? window;\n\n    const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n    const scrollTop = UmTopAppBar._getScrollTop(container as any);\n\n    this.containerScrolled = scrollTop > extendedContentHeight;\n\n    this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n    if (extendedContentHeight === 0) {\n      return;\n    }\n\n    const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n    if (scrollTop > scrollOffset) {\n      this._extendedContent.style.opacity = '0';\n      return;\n    }\n\n    this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n  };\n\n  private static _getScrollTop(container: HTMLElement & Window): number {\n    if (typeof container.scrollY === 'number') {\n      return container.scrollY;\n    }\n\n    if (typeof container.scrollTop === 'number') {\n      return container.scrollTop;\n    }\n\n    return document.body.scrollTop;\n  }\n\n  #setContentHeightProperty() {\n    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-top-app-bar': UmTopAppBar;\n  }\n}\n"]}
+{"version":3,"file":"top-app-bar.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './top-app-bar.styles.js';\n\n@customElement('u-top-app-bar')\nexport class UmTopAppBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  @state() private _hasLeadingIcon = false;\n  @state() private _hasTrailingIcon = false;\n\n  @property({ reflect: true })\n  position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n  @property({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'small';\n\n  @property() headline = '';\n\n  @property({ reflect: true })\n  get scrollContainer(): 'none' | 'window' | string | undefined {\n    return this.attributes.getNamedItem('scrollContainer')?.value;\n  }\n\n  set scrollContainer(idOrElement: string | HTMLElement | undefined) {\n    this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);\n\n    if (idOrElement === 'none') {\n      return;\n    }\n\n    this.scrollContainerElement = this.getScrollContainer(idOrElement)!;\n    this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);\n  }\n\n  @state() containerScrolled = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @query('.container', true) private readonly _container!: HTMLElement;\n  @query('.extended-content') private readonly _extendedContent!: HTMLElement;\n  @query('.headline') private readonly _headlineElement!: HTMLElement;\n\n  private containerSizeObserver: ResizeObserver | null = null;\n\n  private scrollContainerElement: {\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | null = null;\n\n  private getScrollContainer(idOrElement: string | HTMLElement | undefined):\n    | {\n      addEventListener: typeof window.addEventListener;\n      removeEventListener: typeof window.removeEventListener;\n    }\n    | undefined {\n    if (idOrElement instanceof HTMLElement) {\n      return idOrElement;\n    }\n\n    if (idOrElement === 'window') {\n      return window;\n    }\n\n    return document.getElementById(idOrElement!)!;\n  }\n\n  #handleLeadingIconSlotChange() {\n    this._hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n  }\n\n  #handleTrailingIconSlotChange() {\n    this._hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  override render(): HTMLTemplateResult {\n    const extendedContent = html`\n      <div class=\"extended-content\" part=\"extended-content\">\n        <slot name=\"extended-content\">${this.headline}</slot>\n      </div>\n    `;\n\n    const containerClasses = classMap({\n      [this.position]: true,\n      [this.size]: true,\n      scrolled: this.containerScrolled,\n      'has-leading-icon': this._hasLeadingIcon,\n      'has-trailing-icon': this._hasTrailingIcon,\n    });\n\n    const appBarSpacing = this.position !== 'static'\n      ? html`<div class=\"spacing\"></div>`\n      : nothing;\n\n    return html`\n      ${appBarSpacing}\n      <div class=\"container ${containerClasses}\" part=\"container\">\n        <div class=\"content\" part=\"content\">\n          <div class=\"icon leading-icon\" part=\"icon leading\">\n            <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <slot>\n              <span>${this.headline}</span>\n            </slot>\n          </div>\n\n          <div class=\"icon trailing-icon\" part=\"icon trailing\">\n            <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n          </div>\n        </div>\n        <slot name=\"additional-content\"></slot>\n      </div>\n      ${this.size !== 'small' ? extendedContent : nothing}\n    `;\n  }\n\n  protected override updated(_changedProperties: PropertyValues) {\n    super.updated(_changedProperties);\n    this.#updateScroll();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n    this.containerSizeObserver.observe(this._container);\n    this.#setContentHeightProperty();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.scrollContainer = this.scrollContainer || 'window';\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.containerSizeObserver!.disconnect();\n    this.containerSizeObserver = null;\n  }\n\n  readonly #updateScroll = () => {\n    const container = this.scrollContainerElement ?? window;\n\n    const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);\n\n    const scrollTop = UmTopAppBar._getScrollTop(container as any);\n\n    this.containerScrolled = scrollTop > extendedContentHeight;\n\n    this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';\n\n    if (extendedContentHeight === 0) {\n      return;\n    }\n\n    const scrollOffset = this._extendedContent.offsetHeight * 0.7;\n\n    if (scrollTop > scrollOffset) {\n      this._extendedContent.style.opacity = '0';\n      return;\n    }\n\n    this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';\n  };\n\n  private static _getScrollTop(container: HTMLElement & Window): number {\n    if (typeof container.scrollY === 'number') {\n      return container.scrollY;\n    }\n\n    if (typeof container.scrollTop === 'number') {\n      return container.scrollTop;\n    }\n\n    return document.body.scrollTop;\n  }\n\n  #setContentHeightProperty() {\n    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-top-app-bar': UmTopAppBar;\n  }\n}\n"]}

package/button-field/button-field.js

@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
-import { styles } from './button-field.styles';
+import { styles } from './button-field.styles.js';
 let UmButtonField = class UmButtonField extends UmTextFieldBase {
     constructor() {
         super(...arguments);

package/button-field/button-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-field.js","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAA3C;;QAGK,WAAM,GAAG,EAAE,CAAC;IAmCxB,CAAC;aArCiB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAI1D,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAKkB,aAAa;QAC9B,OAAO,UAAU,CAAA;;;;;qBAKA,IAAI,CAAC,QAAQ;;gBAElB,IAAI,CAAC,KAAK;;4BAEE,IAAI,CAAC,QAAQ,cAAc,CAAC;IACtD,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhCD;IADC,QAAQ,EAAE;0CAGV;AAQuB;IAAvB,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;8CAA6B;AAC7B;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;6CAAsB;AAhBjC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsCzB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './button-field.styles';\n\n@customElement('u-button-field')\nexport class UmButtonField extends UmTextFieldBase {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  protected _value = '';\n  @property()\n  get value() {\n    return this._value;\n  }\n\n  set value(value: string) {\n    this._value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\">\n        <slot>${this.value}</slot>\n      </div>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu>\n        <slot></slot>\n      </u-menu>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-field': UmButtonField;\n  }\n}\n"]}
+{"version":3,"file":"button-field.js","sourceRoot":"","sources":["../../src/button-field/button-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,eAAe;IAA3C;;QAGK,WAAM,GAAG,EAAE,CAAC;IAmCxB,CAAC;aArCiB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAI1D,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAKkB,aAAa;QAC9B,OAAO,UAAU,CAAA;;;;;qBAKA,IAAI,CAAC,QAAQ;;gBAElB,IAAI,CAAC,KAAK;;4BAEE,IAAI,CAAC,QAAQ,cAAc,CAAC;IACtD,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhCD;IADC,QAAQ,EAAE;0CAGV;AAQuB;IAAvB,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;8CAA6B;AAC7B;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;6CAAsB;AAhBjC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAsCzB","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './button-field.styles.js';\n\n@customElement('u-button-field')\nexport class UmButtonField extends UmTextFieldBase {\n  static override styles = [UmTextFieldBase.styles, styles];\n\n  protected _value = '';\n  @property()\n  get value() {\n    return this._value;\n  }\n\n  set value(value: string) {\n    this._value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @query('.button', true) _button!: HTMLButtonElement;\n  @query('.input', true) _input!: HTMLElement;\n\n  protected override renderControl(): TemplateResult {\n    return staticHtml`\n      <button \n         class=\"button\"\n         aria-expanded=\"false\"\n         aria-owns=\"select\"\n         ?disabled=${this.disabled}></button>\n      <div class=\"input\">\n        <slot>${this.value}</slot>\n      </div>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>`;\n  }\n\n  protected override renderAfterContent(): TemplateResult {\n    return html`\n      <u-menu>\n        <slot></slot>\n      </u-menu>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-field': UmButtonField;\n  }\n}\n"]}