@universal-material/web 3.0.20 → 3.0.22

package/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './menu.styles';\n\nimport '../elevation/elevation';\n\ninterface MenuRect {\n  x?: number;\n  y?: number;\n  width: number;\n  height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n\n  static override styles = [baseStyles, styles];\n\n  #open = false;\n  #justShow = false;\n\n  /**\n   * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods\n   */\n  @property({type: Boolean, reflect: true})\n  get open(): boolean { return this.#open }\n  set open(open: boolean) {\n    if (open) {\n      this.calcDropdownPositioning();\n    }\n\n    this.#open = open;\n  }\n\n  /**\n   * The corner of the anchor which to align the menu in the standard logical\n   * property style of <block>-<inline> e.g. `'end-start'`.\n   */\n  @property({attribute: 'anchor-corner', reflect: true}) anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n  /**\n   * The direction of the menu. e.g. `'end'`.\n   *\n   * NOTE: This value may not be respected by the menu positioning algorithm\n   * if the menu would render outside the viewport.\n   */\n  @property({reflect: true}) direction: 'start' | 'end' = 'end';\n\n  /**\n   * Limit the height of the menu to not overflow the viewport\n   */\n  @property({type: Boolean, attribute: 'auto-scroll-block', reflect: true}) autoScrollBlock = true;\n\n  /**\n   * Set a selector to auto attach to a toggle element\n   */\n  @property({attribute: 'toggle-selector', reflect: true})\n  get toggleSelector(): string | undefined {\n    return this.attributes.getNamedItem('toggle-selector')?.value;\n  }\n  set toggleSelector(selector: string) {\n    this.toggleElement?.removeEventListener('click', this.toggle);\n\n    if (!selector) {\n      return;\n    }\n\n    this.toggleElement = document.querySelector(selector);\n    this.toggleElement?.addEventListener('click', this.toggle);\n  }\n\n  @query('.menu') menu!: HTMLElement;\n\n  get anchorElement(): HTMLElement {\n    return this.parentElement!;\n  }\n\n  private toggleElement: HTMLElement | null = null;\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"menu\">\n        <u-elevation></u-elevation>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this.close);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this.close);\n  }\n\n  toggle = () => {\n    if (this.open) {\n      this.close();\n      return;\n    }\n\n    this.show();\n  };\n\n  show(): void {\n    if (this.open) {\n      return;\n    }\n\n    this.#justShow = true;\n    this.open = true;\n  }\n\n  close = () => {\n    if (this.open && !this.#justShow) {\n      this.open = false;\n      return;\n    }\n\n    this.#justShow = false;\n  }\n\n  private calcDropdownPositioning() {\n    const anchorRect = this.getAnchorRect();\n    const menuRect = this.getMenuRect()\n\n    this.resetMenu();\n    this.setToOpenUpOrDown(anchorRect, menuRect);\n    this.setToOpenToStartOrEnd(anchorRect, menuRect);\n  }\n\n  private resetMenu() {\n    this.menu.className = 'menu';\n    this.menu.style.maxHeight = '';\n  }\n\n  private setToOpenUpOrDown(anchorRect: MenuRect, menuRect: MenuRect): void {\n    const viewPortHeight = window.innerHeight;\n\n    if (viewPortHeight - (anchorRect.y! + menuRect.height) >= 0) {\n      return;\n    }\n\n    if (anchorRect.y! <= viewPortHeight / 2) {\n      this.menu.style.maxHeight = this.autoScrollBlock\n        ? `${viewPortHeight - anchorRect.y!}px`\n        : '';\n      return;\n    }\n\n    this.menu.classList.add('up');\n    this.menu.style.maxHeight = this.autoScrollBlock\n      ? `${anchorRect.y!}px`\n      : '';\n  }\n\n  private setToOpenToStartOrEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n    if (this.direction === 'start') {\n      this.ensureMenuCanOpenToStart(anchorRect, menuRect);\n      return;\n    }\n\n    this.ensureMenuCanOpenToEnd(anchorRect, menuRect);\n  }\n\n  private ensureMenuCanOpenToStart(anchorRect: MenuRect, menuRect: MenuRect): void {\n    const viewPortWidth = window.innerWidth;\n\n    if (viewPortWidth - (anchorRect.x! - menuRect.width) >= 0) {\n      this.menu.classList.add('start');\n    }\n  }\n\n  private ensureMenuCanOpenToEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n    const viewPortWidth = window.innerWidth;\n\n    if (viewPortWidth - (anchorRect.x! + menuRect.width) >= 0) {\n      return;\n    }\n\n    this.menu.classList.add('start');\n  }\n\n  private getAnchorRect(): MenuRect {\n    const anchorElement = this.anchorElement;\n    const rect = anchorElement.getBoundingClientRect() as DOMRect\n    const styles = getComputedStyle(anchorElement);\n    const width = parseInt(styles.width, 10);\n    const height = parseInt(styles.height, 10);\n    const xOffset = this.anchorCorner.endsWith('-end')\n      ? width\n      : 0;\n\n    const yOffset = this.anchorCorner.startsWith('end-')\n      ? height\n      : 0;\n\n    return {\n      y: rect.y + yOffset,\n      x: rect.x + xOffset,\n      width: width,\n      height: height\n    };\n  }\n\n  private getMenuRect(): MenuRect {\n    const menu = this.menu;\n    const styles = getComputedStyle(menu);\n    const width = parseInt(styles.width, 10);\n    const height = parseInt(styles.height, 10);\n\n    return {\n      width: width,\n      height: height\n    };\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-menu': UmMenu;\n  }\n}\n"]}

package/{table/table.styles.d.ts → menu/menu.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=table.styles.d.ts.map
+//# sourceMappingURL=menu.styles.d.ts.map

package/menu/menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4FlB,CAAC"}

package/menu/menu.styles.js

@@ -0,0 +1,95 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --u-elevation-level: var(--u-menu-elevation-level, 2);
+  }
+
+  .menu {
+    position: absolute;
+    display: flex;
+    min-width: var(--u-menu-min-width, 112px);
+    max-width: var(--u-menu-max-width, 280px);
+    background: var(--u-menu-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));
+    border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));
+    opacity: 0;
+    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;
+    transform: scale3d(0, 0, 1);
+    transform-origin: top;
+    z-index: var(--u-menu-z-index, 1020);
+  }
+  .menu.up {
+    transform: scale3d(1, 0, 0);
+    transform-origin: bottom;
+  }
+
+  .content {
+    width: 100%;
+    padding-block: var(--u-menu-padding, 8px);
+    opacity: 0;
+    transition: opacity 1ms 400ms;
+    overflow: auto;
+  }
+
+  :host([open]) .menu {
+    opacity: 1;
+    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;
+    transform: scale3d(1, 1, 1);
+  }
+  :host([open]) .content {
+    opacity: 1;
+    transition: opacity 300ms 150ms;
+  }
+
+  :host([anchor-corner=start-start]) .menu {
+    inset-inline-start: 0;
+    inset-block-start: 0;
+  }
+  :host([anchor-corner=start-start]) .menu.up {
+    inset-block-start: auto;
+    inset-block-end: 100%;
+  }
+  :host([anchor-corner=start-start]) .menu.start {
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
+  }
+
+  :host([anchor-corner=start-end]) .menu {
+    inset-inline-start: 100%;
+    inset-block-start: 0;
+  }
+  :host([anchor-corner=start-end]) .menu.up {
+    inset-block-start: auto;
+    inset-block-end: 100%;
+  }
+  :host([anchor-corner=start-end]) .menu.start {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  :host([anchor-corner=end-start]) .menu {
+    inset-inline-start: 0;
+    inset-block-start: 100%;
+  }
+  :host([anchor-corner=end-start]) .menu.up {
+    inset-block-start: auto;
+    inset-block-end: 0;
+  }
+  :host([anchor-corner=end-start]) .menu.start {
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
+  }
+
+  :host([anchor-corner=end-end]) .menu {
+    inset-inline-start: 100%;
+    inset-block-start: 100%;
+  }
+  :host([anchor-corner=end-end]) .menu.up {
+    inset-block-start: auto;
+    inset-block-end: 0;
+  }
+  :host([anchor-corner=end-end]) .menu.start {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+`;
+//# sourceMappingURL=menu.styles.js.map

package/menu/menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-elevation-level: var(--u-menu-elevation-level, 2);\n  }\n\n  .menu {\n    position: absolute;\n    display: flex;\n    min-width: var(--u-menu-min-width, 112px);\n    max-width: var(--u-menu-max-width, 280px);\n    background: var(--u-menu-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));\n    opacity: 0;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;\n    transform: scale3d(0, 0, 1);\n    transform-origin: top;\n    z-index: var(--u-menu-z-index, 1020);\n  }\n  .menu.up {\n    transform: scale3d(1, 0, 0);\n    transform-origin: bottom;\n  }\n\n  .content {\n    width: 100%;\n    padding-block: var(--u-menu-padding, 8px);\n    opacity: 0;\n    transition: opacity 1ms 400ms;\n    overflow: auto;\n  }\n\n  :host([open]) .menu {\n    opacity: 1;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;\n    transform: scale3d(1, 1, 1);\n  }\n  :host([open]) .content {\n    opacity: 1;\n    transition: opacity 300ms 150ms;\n  }\n\n  :host([anchor-corner=start-start]) .menu {\n    inset-inline-start: 0;\n    inset-block-start: 0;\n  }\n  :host([anchor-corner=start-start]) .menu.up {\n    inset-block-start: auto;\n    inset-block-end: 100%;\n  }\n  :host([anchor-corner=start-start]) .menu.start {\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n  }\n\n  :host([anchor-corner=start-end]) .menu {\n    inset-inline-start: 100%;\n    inset-block-start: 0;\n  }\n  :host([anchor-corner=start-end]) .menu.up {\n    inset-block-start: auto;\n    inset-block-end: 100%;\n  }\n  :host([anchor-corner=start-end]) .menu.start {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n\n  :host([anchor-corner=end-start]) .menu {\n    inset-inline-start: 0;\n    inset-block-start: 100%;\n  }\n  :host([anchor-corner=end-start]) .menu.up {\n    inset-block-start: auto;\n    inset-block-end: 0;\n  }\n  :host([anchor-corner=end-start]) .menu.start {\n    inset-inline-start: auto;\n    inset-inline-end: 100%;\n  }\n\n  :host([anchor-corner=end-end]) .menu {\n    inset-inline-start: 100%;\n    inset-block-start: 100%;\n  }\n  :host([anchor-corner=end-end]) .menu.up {\n    inset-block-start: auto;\n    inset-block-end: 0;\n  }\n  :host([anchor-corner=end-end]) .menu.start {\n    inset-inline-start: auto;\n    inset-inline-end: 0;\n  }\n`;\n"]}

package/navigation/drawer-item.d.ts

@@ -0,0 +1,39 @@
+import { HTMLTemplateResult } from 'lit';
+import { UmButtonWrapper } from '../shared/button-wrapper';
+export declare class UmDrawerItem extends UmButtonWrapper {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the drawer item has icon or not
+     *
+     * _Note:_ Readonly
+     */
+    hasIcon: boolean;
+    /**
+     * Whether the drawer item has badge or not
+     *
+     * _Note:_ Readonly
+     */
+    hasBadge: boolean;
+    /**
+     * Whether the drawer item is active or not
+     *
+     * _Note:_ Readonly
+     */
+    active: boolean;
+    /**
+     * If true, it will not attempt to close de navigation drawer on click
+     */
+    keepDrawerOpen: boolean;
+    private readonly assignedIcons;
+    private readonly assignedBadges;
+    protected renderContent(): HTMLTemplateResult;
+    private handleIconSlotChange;
+    private handleBadgeSlotChange;
+    handleClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-drawer-item': UmDrawerItem;
+    }
+}
+//# sourceMappingURL=drawer-item.d.ts.map

package/navigation/drawer-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,qBACa,YAAa,SAAQ,eAAe;IAE/C,OAAgB,MAAM,4BAIpB;IAEF;;;;OAIG;IAC8D,OAAO,UAAS;IAEjF;;;;OAIG;IAC+D,QAAQ,UAAS;IAEnF;;;;OAIG;IACuC,MAAM,UAAS;IAEzD;;OAEG;IACsE,cAAc,UAAS;IAGhG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAG/C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;cAE7B,aAAa,IAAI,kBAAkB;IAiBtD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAIpB,WAAW,IAAI,IAAI;CAW7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/navigation/drawer-item.js

@@ -0,0 +1,98 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles';
+import { UmButtonWrapper } from '../shared/button-wrapper';
+import { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles';
+import { styles } from './drawer-item.styles';
+let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the drawer item has icon or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasIcon = false;
+        /**
+         * Whether the drawer item has badge or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasBadge = false;
+        /**
+         * Whether the drawer item is active or not
+         *
+         * _Note:_ Readonly
+         */
+        this.active = false;
+        /**
+         * If true, it will not attempt to close de navigation drawer on click
+         */
+        this.keepDrawerOpen = false;
+    }
+    renderContent() {
+        return html `
+      <div class="icon">
+        <slot
+          name="icon"
+          aria-hidden="true"
+          @slotchange="${this.handleIconSlotChange}"></slot>
+      </div>
+      <span class="label"><slot></slot></span>
+      <span class="badge">
+        <slot
+          name="badge"
+          @slotchange="${this.handleBadgeSlotChange}"></slot>
+      </span>
+    `;
+    }
+    handleIconSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
+    handleBadgeSlotChange() {
+        this.hasBadge = this.assignedBadges.length > 0;
+    }
+    handleClick() {
+        if (this.keepDrawerOpen) {
+            return;
+        }
+        const sideNavigation = this.closest('u-side-navigation');
+        if (sideNavigation) {
+            sideNavigation.toggleDrawer = false;
+        }
+    }
+};
+UmDrawerItem.styles = [
+    baseStyles,
+    buttonWrapperStyles,
+    styles
+];
+__decorate([
+    property({ type: Boolean, attribute: 'has-icon', reflect: true })
+], UmDrawerItem.prototype, "hasIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-badge', reflect: true })
+], UmDrawerItem.prototype, "hasBadge", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmDrawerItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'keep-drawer-open', reflect: true })
+], UmDrawerItem.prototype, "keepDrawerOpen", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], UmDrawerItem.prototype, "assignedIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'badge', flatten: true })
+], UmDrawerItem.prototype, "assignedBadges", void 0);
+UmDrawerItem = __decorate([
+    customElement('u-drawer-item')
+], UmDrawerItem);
+export { UmDrawerItem };
+//# sourceMappingURL=drawer-item.js.map

package/navigation/drawer-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,eAAe;IAA1C;;QAQL;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QAC+D,aAAQ,GAAG,KAAK,CAAC;QAEnF;;;;WAIG;QACuC,WAAM,GAAG,KAAK,CAAC;QAEzD;;WAEG;QACsE,mBAAc,GAAG,KAAK,CAAC;IA4ClG,CAAC;IApCoB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;;;;yBAMzB,IAAI,CAAC,qBAAqB;;KAE9C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IACjD,CAAC;IAEQ,WAAW;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAEzD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,YAAY,GAAG,KAAK,CAAC;QACtC,CAAC;IACH,CAAC;;AAzEe,mBAAM,GAAG;IACvB,UAAU;IACV,mBAAmB;IACnB,MAAM;CACP,AAJqB,CAIpB;AAO+D;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAiB;AAOf;IAAjE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAkB;AAOzC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAgB;AAKgB;IAAxE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAwB;AAG/E;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDACN;AAG9B;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDACN;AAtCrC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA4ExB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { UmButtonWrapper } from '../shared/button-wrapper';\nimport { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles';\nimport { styles } from './drawer-item.styles';\n\n@customElement('u-drawer-item')\nexport class UmDrawerItem extends UmButtonWrapper {\n\n  static override styles = [\n    baseStyles,\n    buttonWrapperStyles,\n    styles\n  ];\n\n  /**\n   * Whether the drawer item has icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n  /**\n   * Whether the drawer item has badge or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-badge', reflect: true}) hasBadge = false;\n\n  /**\n   * Whether the drawer item is active or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * If true, it will not attempt to close de navigation drawer on click\n   */\n  @property({type: Boolean, attribute: 'keep-drawer-open', reflect: true}) keepDrawerOpen = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'badge', flatten: true})\n  private readonly assignedBadges!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n    return html`\n      <div class=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=\"${this.handleIconSlotChange}\"></slot>\n      </div>\n      <span class=\"label\"><slot></slot></span>\n      <span class=\"badge\">\n        <slot\n          name=\"badge\"\n          @slotchange=\"${this.handleBadgeSlotChange}\"></slot>\n      </span>\n    `;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  private handleBadgeSlotChange() {\n    this.hasBadge = this.assignedBadges.length > 0;\n  }\n\n  override handleClick(): void {\n    if (this.keepDrawerOpen) {\n      return;\n    }\n\n    const sideNavigation = this.closest('u-side-navigation');\n\n    if (sideNavigation) {\n      sideNavigation.toggleDrawer = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer-item': UmDrawerItem;\n  }\n}\n"]}

package/{table/table-body.styles.d.ts → navigation/drawer-item.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=table-body.styles.d.ts.map
+//# sourceMappingURL=drawer-item.styles.d.ts.map

package/navigation/drawer-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwClB,CAAC"}

package/navigation/drawer-item.styles.js

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);
+    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));
+    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));
+    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
+    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
+    height: var(--u-drawer-item-height, 56px);
+    padding-inline: var(--_drawer-item-padding);
+    margin-inline: calc(var(--_drawer-item-padding) * -1);
+    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));
+    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  :host([active]) {
+    color: var(--u-drawer-item-label-active-color, var(--_color-primary));
+  }
+
+  :host(:not([has-icon])) .icon,
+  :host(:not([has-badge])) .badge {
+    display: none;
+  }
+
+  .icon {
+    font-size: var(--_drawer-item-icon-size);
+    line-height: var(--_drawer-item-icon-size);
+    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);
+  }
+
+  .badge {
+    margin-inline-start: auto;
+    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);
+  }
+
+  .content {
+    justify-content: flex-start;
+  }
+`;
+//# sourceMappingURL=drawer-item.styles.js.map

package/navigation/drawer-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item.styles.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([active]) {\n    color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_drawer-item-icon-size);\n    line-height: var(--_drawer-item-icon-size);\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`;\n"]}

package/{table/table-row.d.ts → navigation/drawer.d.ts}

@@ -1,11 +1,11 @@
 import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class UmTableRow extends LitElement {
+export declare class UmDrawer extends LitElement {
     static styles: import("lit").CSSResult[];
     protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-tr': UmTableRow;
+        'u-drawer': UmDrawer;
     }
 }
-//# sourceMappingURL=table-row.d.ts.map
+//# sourceMappingURL=drawer.d.ts.map

package/navigation/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAGpB;cAEiB,MAAM,IAAI,kBAAkB;CAGhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/{table/table-row.js → navigation/drawer.js}

@@ -7,15 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-row.styles';
-let UmTableRow = class UmTableRow extends LitElement {
+import { styles } from './drawer.styles';
+let UmDrawer = class UmDrawer extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 };
-UmTableRow.styles = [baseStyles, styles];
-UmTableRow = __decorate([
-    customElement('u-tr')
-], UmTableRow);
-export { UmTableRow };
-//# sourceMappingURL=table-row.js.map
+UmDrawer.styles = [
+    baseStyles,
+    styles
+];
+UmDrawer = __decorate([
+    customElement('u-drawer')
+], UmDrawer);
+export { UmDrawer };
+//# sourceMappingURL=drawer.js.map

package/navigation/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/navigation/drawer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGlC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAMnB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;;AAPe,eAAM,GAAG;IACvB,UAAU;IACV,MAAM;CACP,AAHqB,CAGpB;AAJS,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CASpB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { styles } from './drawer.styles';\n\n@customElement('u-drawer')\nexport class UmDrawer extends LitElement {\n  static override styles = [\n    baseStyles,\n    styles\n  ];\n\n  protected override render(): HTMLTemplateResult {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer': UmDrawer;\n  }\n}\n"]}

package/{table/table-cell.styles.d.ts → navigation/drawer.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=table-cell.styles.d.ts.map
+//# sourceMappingURL=drawer.styles.d.ts.map

package/navigation/drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAclB,CAAC"}

package/navigation/drawer.styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    background-color: var(--u-modal-drawer-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
+    color: var(--u-drawer-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+    height: 100%;
+    padding-inline: var(--u-drawer-padding, 28px);
+  }
+
+  @media (min-width: 1200px) {
+    :host {
+      background-color: var(--u-standard-drawer-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));
+    }
+  }
+`;
+//# sourceMappingURL=drawer.styles.js.map

package/navigation/drawer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../src/navigation/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;CAczB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    background-color: var(--u-modal-drawer-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-drawer-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    height: 100%;\n    padding-inline: var(--u-drawer-padding, 28px);\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      background-color: var(--u-standard-drawer-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));\n    }\n  }\n`;\n"]}

package/navigation/side-navigation-swiper.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=side-navigation-swiper.styles.d.ts.map

package/navigation/side-navigation-swiper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation-swiper.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation-swiper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgIlB,CAAC"}

package/navigation/side-navigation-swiper.styles.js

@@ -0,0 +1,131 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_navigation-width: 0;
+    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);
+    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);
+    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));
+    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);
+    display: block;
+    width: 100%;
+    height: 100%;
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  :host(.disable-transition) * {
+    transition: none !important;
+  }
+  :host(.disable-transition) * ::slotted(u-top-app-bar) {
+    transition: none !important;
+  }
+
+  .drawer {
+    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .drawer,
+  .drawer u-elevation,
+  .drawer .drawer-container {
+    border-start-end-radius: var(--_navigation-drawer-corner-shape);
+    border-end-end-radius: var(--_navigation-drawer-corner-shape);
+  }
+  .drawer.toggle u-elevation {
+    --u-elevation-level: 1;
+  }
+
+  .drawer-container {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .scrim {
+    --_modal-drawer-open-progress: 0;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100vw;
+    height: 100vh;
+    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));
+    pointer-events: none;
+    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));
+    transition: opacity 375ms linear;
+  }
+  .scrim.moving {
+    transition: none;
+  }
+  .scrim.toggle {
+    --_modal-drawer-open-progress: 1;
+    pointer-events: auto;
+  }
+
+  @media (min-width: 840px) {
+    .content slot {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+  }
+  @media (min-width: 1200px) {
+    .container {
+      --_navigation-width: var(--_navigation-drawer-width);
+    }
+    .container:has(.drawer.toggle) {
+      --_navigation-width: 0;
+    }
+    .drawer {
+      border-radius: 0;
+      inset-inline-start: 0;
+    }
+    .drawer.toggle {
+      inset-inline-start: var(--_navigation-drawer-width-negative);
+    }
+    u-elevation,
+    .scrim {
+      display: none;
+    }
+  }
+  .content {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    overflow: auto;
+  }
+
+  .drawer {
+    position: relative;
+    width: var(--_navigation-drawer-width);
+    z-index: var(--u-side-navigation-z-index, 1030);
+    pointer-events: auto;
+  }
+
+  .scrim {
+    z-index: 1;
+  }
+
+  swiper-container {
+    height: 100%;
+    --u-app-bar-offset: var(--_navigation-width);
+  }
+
+  swiper-container::part(wrapper) {
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  @media (min-width: 1200px) {
+    :host {
+      --_navigation-width: var(--_navigation-drawer-width);
+    }
+    .content {
+      position: static;
+    }
+    swiper-container::part(container) {
+      display: grid;
+      grid-template-columns: var(--_navigation-width) minmax(0, 1fr);
+      transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+    .dummy-slide {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=side-navigation-swiper.styles.js.map

package/navigation/side-navigation-swiper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation-swiper.styles.js","sourceRoot":"","sources":["../../src/navigation/side-navigation-swiper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .content {\n    position: fixed;\n    inset: 0;\n    z-index: 1;\n    overflow: auto;\n  }\n\n  .drawer {\n    position: relative;\n    width: var(--_navigation-drawer-width);\n    z-index: var(--u-side-navigation-z-index, 1030);\n    pointer-events: auto;\n  }\n\n  .scrim {\n    z-index: 1;\n  }\n\n  swiper-container {\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  swiper-container::part(wrapper) {\n    pointer-events: none;\n    z-index: 2;\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .content {\n      position: static;\n    }\n    swiper-container::part(container) {\n      display: grid;\n      grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n      transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    }\n    .dummy-slide {\n      display: none;\n    }\n  }\n`;\n"]}

package/navigation/side-navigation.d.ts

@@ -0,0 +1,32 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class UmSideNavigation extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private disableSlideAnimation;
+    /**
+     * Toggle the navigation drawer visibility
+     *
+     * _Modal drawer_: Open if `true`, closed if `false`
+     * _Standard drawer_: Collapsed if `true`, visible if `false`
+     */
+    get toggleDrawer(): boolean;
+    set toggleDrawer(toggleDrawer: boolean);
+    swiperContainer: any;
+    scrim: HTMLElement;
+    scrollContainer: HTMLElement | undefined;
+    render(): HTMLTemplateResult;
+    private renderDefault;
+    private renderWithSwipe;
+    private swiperActiveIndexChange;
+    private swiperTransitionStart;
+    private slidesGridLengthChange;
+    private swiperTransitionEnd;
+    private swiperSliderMove;
+    private scrimClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-side-navigation': UmSideNavigation;
+    }
+}
+//# sourceMappingURL=side-navigation.d.ts.map

package/navigation/side-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,OAAgB,MAAM,4BAGlB;IAGJ,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IACe,OAAO,CADW;IACjD,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAG0B,eAAe,EAAG,GAAG,CAAC;IAChC,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAMrC,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}