@universal-material/web/navigation/side-navigation.js

Material web components

import { __decorate } from "tslib";
import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { config } from '../config.js';
import { styles as baseStyles } from '../shared/base.styles.js';
import { styles as swiperStyles } from './side-navigation-swiper.styles.js';
import { styles } from './side-navigation.styles.js';
import '../elevation/elevation.js';
let UmSideNavigation = class UmSideNavigation extends LitElement {
    constructor() {
        super(...arguments);
        this.#toggleDrawer = false;
        this.disableSlideAnimation = false;
    }
    static { this.styles = [baseStyles, config.navigationDrawer.useSwiperJs ? swiperStyles : styles]; }
    #toggleDrawer;
    /**
     * Toggle the navigation drawer visibility
     *
     * _Modal drawer_: Open if `true`, closed if `false`
     * _Standard drawer_: Collapsed if `true`, visible if `false`
     */
    get toggleDrawer() {
        return this.#toggleDrawer;
    }
    set toggleDrawer(toggleDrawer) {
        this.#toggleDrawer = toggleDrawer;
        if (!this.disableSlideAnimation) {
            this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);
        }
    }
    render() {
        return config.navigationDrawer.useSwiperJs ? this.renderWithSwipe() : this.renderDefault();
    }
    renderDefault() {
        const classes = { toggle: this.toggleDrawer };
        return html `
      <div class="grid container">
        <div>
          <div class="navigation">
            <div class="scrim ${classMap(classes)}" @click="${this.scrimClick}"></div>
            <div class="drawer ${classMap(classes)}">
              <u-elevation></u-elevation>
              <div class="drawer-container">
                <slot name="drawer"></slot>
              </div>
            </div>
            <slot name="rail"></slot>
          </div>
        </div>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    `;
    }
    renderWithSwipe() {
        const classes = { toggle: this.toggleDrawer };
        return html `
      <swiper-container
        class="container"
        initial-slide="1"
        resistance-ratio="0"
        slides-per-view="auto"
        simulate-touch="false"
        @swiperactiveindexchange="${this.swiperActiveIndexChange}"
        @swiperslidermove="${this.swiperSliderMove}"
        @swipertransitionend="${this.swiperTransitionEnd}"
        @swipertransitionstart="${this.swiperTransitionStart}"
        @swiperslidesgridlengthchange="${this.slidesGridLengthChange}">
        <swiper-slide class="drawer ${classMap(classes)}">
          <u-elevation></u-elevation>
          <div class="drawer-container">
            <slot name="drawer"></slot>
          </div>
        </swiper-slide>
        <swiper-slide class="dummy-slide"></swiper-slide>

        <div id="scroll-container" class="content" slot="container-end">
          <slot></slot>
        </div>
        <div class="scrim ${classMap(classes)}" @click="${this.scrimClick}" slot="container-end"></div>
      </swiper-container>
    `;
    }
    swiperActiveIndexChange() {
        if (!this.swiperContainer?.swiper) {
            return;
        }
        this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;
    }
    swiperTransitionStart() {
        this.scrim.classList.add('moving');
    }
    slidesGridLengthChange() {
        if (!this.swiperContainer?.swiper) {
            return;
        }
        this.classList.add('disable-transition');
        const gridLength = this.swiperContainer.swiper.snapGrid.length;
        this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);
        this.disableSlideAnimation = true;
        this.toggleDrawer = true;
        this.toggleDrawer = false;
        this.disableSlideAnimation = false;
        setTimeout(() => this.classList.remove('disable-transition'));
    }
    swiperTransitionEnd() {
        this.scrim.style.removeProperty('--_modal-drawer-open-progress');
        this.scrim.classList.remove('moving');
    }
    swiperSliderMove(e) {
        const swiper = e.detail[0];
        this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);
    }
    scrimClick() {
        this.toggleDrawer = false;
        this.swiperContainer?.swiper?.slideTo(1);
    }
};
__decorate([
    property({ type: Boolean, attribute: 'toggle-drawer' })
], UmSideNavigation.prototype, "toggleDrawer", null);
__decorate([
    query('swiper-container')
], UmSideNavigation.prototype, "swiperContainer", void 0);
__decorate([
    query('.scrim')
], UmSideNavigation.prototype, "scrim", void 0);
__decorate([
    query('#scroll-container')
], UmSideNavigation.prototype, "scrollContainer", void 0);
UmSideNavigation = __decorate([
    customElement('u-side-navigation')
], UmSideNavigation);
export { UmSideNavigation };
//# sourceMappingURL=side-navigation.js.map