@universal-material/web/app-bar/top-app-bar.js

Material web components

var _a;
var UmTopAppBar_1;
import { __decorate } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
import { styles as baseStyles } from '../shared/base.styles';
import { styles } from './top-app-bar.styles.js';
let UmTopAppBar = class UmTopAppBar extends LitElement {
    constructor() {
        super(...arguments);
        /**
         * Whether the app bar has leading icon or not
         *
         * _Note:_ Readonly
         */
        this.hasLeadingIcon = false;
        /**
         * Whether the app bar has trailing icon or not
         *
         * _Note:_ Readonly
         */
        this.hasTrailingIcon = false;
        this.position = 'fixed';
        this.size = 'small';
        this.headline = '';
        this.containerScrolled = false;
        this.containerSizeObserver = null;
        this.scrollContainerElement = null;
        this.#updateScroll = () => {
            const container = this.scrollContainerElement ?? window;
            const extendedContentHeight = Math.max(this._extendedContent?.offsetHeight ?? 0, 0);
            const scrollTop = UmTopAppBar_1.getScrollTop(container);
            this.containerScrolled = scrollTop > extendedContentHeight;
            this._headlineElement.style.opacity = scrollTop >= extendedContentHeight ? '1' : '0';
            if (extendedContentHeight === 0) {
                return;
            }
            const scrollOffset = this._extendedContent.offsetHeight * 0.7;
            if (scrollTop > scrollOffset) {
                this._extendedContent.style.opacity = '0';
                return;
            }
            this._extendedContent.style.opacity = 1 - scrollTop / scrollOffset + '';
        };
    }
    static { UmTopAppBar_1 = this; }
    static { this.styles = [baseStyles, styles]; }
    get scrollContainer() {
        return this.attributes.getNamedItem('scrollContainer')?.value;
    }
    set scrollContainer(idOrElement) {
        this.scrollContainerElement?.removeEventListener('scroll', this.#updateScroll);
        if (idOrElement === 'none') {
            return;
        }
        this.scrollContainerElement = this.getScrollContainer(idOrElement);
        this.scrollContainerElement?.addEventListener('scroll', this.#updateScroll);
    }
    getScrollContainer(idOrElement) {
        if (idOrElement instanceof HTMLElement) {
            return idOrElement;
        }
        if (idOrElement === 'window') {
            return window;
        }
        return document.getElementById(idOrElement);
    }
    handleLeadingIconSlotChange() {
        this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
    }
    handleTrailingIconSlotChange() {
        this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
    }
    render() {
        const extendedContent = html `
      <div class="extended-content" part="extended-content">
        <slot name="extended-content">${this.headline}</slot>
      </div>
    `;
        return html `
      <div class="container" part="container">
        <div class="content" part="content">
          <div class="icon leading-icon" part="icon leading">
            <slot name="leading-icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot>
          </div>
          <div class="headline" part="headline">
            <slot>
              <span>${this.headline}</span>
            </slot>
          </div>

          <div class="icon trailing-icon" part="icon trailing">
            <slot name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}"></slot>
          </div>
        </div>
        <slot name="additional-content"></slot>
      </div>
      ${this.size !== 'small' ? extendedContent : nothing}
    `;
    }
    updated(_changedProperties) {
        super.updated(_changedProperties);
        this.#updateScroll();
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.containerSizeObserver = new ResizeObserver(() => this.setContentHeightProperty());
        this.containerSizeObserver.observe(this._container);
        this.setContentHeightProperty();
    }
    connectedCallback() {
        super.connectedCallback();
        this.scrollContainer = this.scrollContainer || 'window';
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.containerSizeObserver.disconnect();
        this.containerSizeObserver = null;
    }
    #updateScroll;
    static getScrollTop(container) {
        if (typeof container.scrollY === 'number') {
            return container.scrollY;
        }
        if (typeof container.scrollTop === 'number') {
            return container.scrollTop;
        }
        return document.body.scrollTop;
    }
    setContentHeightProperty() {
        this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);
    }
};
__decorate([
    property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
], UmTopAppBar.prototype, "hasLeadingIcon", void 0);
__decorate([
    property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
], UmTopAppBar.prototype, "hasTrailingIcon", void 0);
__decorate([
    property({ reflect: true })
], UmTopAppBar.prototype, "position", void 0);
__decorate([
    property({ reflect: true })
], UmTopAppBar.prototype, "size", void 0);
__decorate([
    property()
], UmTopAppBar.prototype, "headline", void 0);
__decorate([
    property({ reflect: true })
], UmTopAppBar.prototype, "scrollContainer", null);
__decorate([
    property({ type: Boolean, attribute: 'container-scrolled', reflect: true })
], UmTopAppBar.prototype, "containerScrolled", void 0);
__decorate([
    queryAssignedElements({ slot: 'leading-icon', flatten: true })
], UmTopAppBar.prototype, "assignedLeadingIcons", void 0);
__decorate([
    queryAssignedElements({ slot: 'trailing-icon', flatten: true })
], UmTopAppBar.prototype, "assignedTrailingIcons", void 0);
__decorate([
    query('.container', true)
], UmTopAppBar.prototype, "_container", void 0);
__decorate([
    query('.extended-content')
], UmTopAppBar.prototype, "_extendedContent", void 0);
__decorate([
    query('.headline')
], UmTopAppBar.prototype, "_headlineElement", void 0);
UmTopAppBar = UmTopAppBar_1 = __decorate([
    customElement('u-top-app-bar')
], UmTopAppBar);
export { UmTopAppBar };
//# sourceMappingURL=top-app-bar.js.map