@vaadin/app-layout 24.7.0-alpha1 → 24.7.0-alpha2

package/src/vaadin-app-layout-styles.js

@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const appLayoutStyles = css`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+    --vaadin-app-layout-transition: 200ms;
+    transition: padding var(--vaadin-app-layout-transition);
+    --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
+    --vaadin-app-layout-touch-optimized: false;
+    --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
+    --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
+    padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
+    padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([no-anim]) {
+    --vaadin-app-layout-transition: none !important;
+  }
+
+  :host([drawer-opened]) {
+    --vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
+  }
+
+  :host([overlay]) {
+    --vaadin-app-layout-drawer-offset-left: 0;
+    --vaadin-app-layout-navbar-offset-left: 0;
+  }
+
+  :host(:not([no-scroll])) [content] {
+    overflow: auto;
+  }
+
+  [content] {
+    height: 100%;
+  }
+
+  @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
+    :host {
+      --vaadin-app-layout-touch-optimized: true;
+    }
+  }
+
+  [part='navbar'] {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    top: 0;
+    inset-inline: 0;
+    transition: inset-inline-start var(--vaadin-app-layout-transition);
+    padding-top: var(--safe-area-inset-top);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
+    z-index: 1;
+  }
+
+  :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
+    inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
+  }
+
+  :host([primary-section='drawer']) [part='drawer'] {
+    top: 0;
+  }
+
+  [part='navbar'][bottom] {
+    top: auto;
+    bottom: 0;
+    padding-bottom: var(--safe-area-inset-bottom);
+  }
+
+  [part='drawer'] {
+    overflow: auto;
+    position: fixed;
+    top: var(--vaadin-app-layout-navbar-offset-top, 0);
+    bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
+    inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
+    transition:
+      transform var(--vaadin-app-layout-transition),
+      visibility var(--vaadin-app-layout-transition);
+    transform: translateX(-100%);
+    max-width: 90%;
+    width: var(--_vaadin-app-layout-drawer-width);
+    box-sizing: border-box;
+    padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+    outline: none;
+    /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
+    visibility: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([drawer-opened]) [part='drawer'] {
+    /* The drawer should be accessible by the tabbing navigation when it is opened. */
+    visibility: visible;
+    transform: translateX(0%);
+    touch-action: manipulation;
+  }
+
+  [part='backdrop'] {
+    background-color: #000;
+    opacity: 0.3;
+  }
+
+  :host(:not([drawer-opened])) [part='backdrop'] {
+    opacity: 0;
+  }
+
+  :host([overlay]) [part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    transition: opacity var(--vaadin-app-layout-transition);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([overlay]) [part='drawer'] {
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([overlay]) [part='drawer'],
+  :host([overlay]) [part='backdrop'] {
+    z-index: 2;
+  }
+
+  :host([drawer-opened][overlay]) [part='backdrop'] {
+    pointer-events: auto;
+    touch-action: manipulation;
+  }
+
+  :host([dir='rtl']) [part='drawer'] {
+    transform: translateX(100%);
+  }
+
+  :host([dir='rtl'][drawer-opened]) [part='drawer'] {
+    transform: translateX(0%);
+  }
+
+  :host([drawer-opened]:not([overlay])) {
+    padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
+  }
+
+  @media (max-width: 800px), (max-height: 600px) {
+    :host {
+      --vaadin-app-layout-drawer-overlay: true;
+      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
+    }
+  }
+
+  /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
+  [part='drawer'] ::slotted(vaadin-scroller) {
+    flex: 1;
+    overscroll-behavior: contain;
+  }
+`;

package/src/vaadin-app-layout.d.ts

@@ -6,10 +6,9 @@
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
 
-export interface AppLayoutI18n {
-  drawer: string;
-}
+export type { AppLayoutI18n } from './vaadin-app-layout-mixin.js';
 
 /**
  * Fired when the `drawerOpened` property changes.
@@ -123,65 +122,12 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
  * @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
  */
-declare class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))) {
+declare class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   /**
    * Helper static method that dispatches a `close-overlay-drawer` event
    */
   static dispatchCloseOverlayDrawerEvent(): void;
 
-  /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
-   *
-   * To update individual properties, extend the existing i18n object as follows:
-   * ```js
-   * appLayout.i18n = {
-   *   ...appLayout.i18n,
-   *   drawer: 'Drawer'
-   * }
-   * ```
-   *
-   * The object has the following structure and default values:
-   * ```
-   * {
-   *   drawer: 'Drawer'
-   * }
-   * ```
-   */
-  i18n: AppLayoutI18n;
-
-  /**
-   * Defines whether navbar or drawer will come first visually.
-   * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
-   * - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height.
-   * @attr {navbar|drawer} primary-section
-   */
-  primarySection: 'drawer' | 'navbar';
-
-  /**
-   * Controls whether the drawer is opened (visible) or not.
-   * Its default value depends on the viewport:
-   * - `true`, for desktop size views
-   * - `false`, for mobile size views
-   * @attr {boolean} drawer-opened
-   */
-  drawerOpened: boolean;
-
-  /**
-   * Drawer is an overlay on top of the content
-   * Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`;
-   */
-  readonly overlay: boolean;
-
-  /**
-   * A global event that causes the drawer to close (be hidden) when it is in overlay mode.
-   * - The default is `vaadin-router-location-changed` dispatched by Vaadin Router
-   *
-   * @attr {string} close-drawer-on
-   */
-  closeDrawerOn: string;
-
   addEventListener<K extends keyof AppLayoutEventMap>(
     type: K,
     listener: (this: AppLayout, ev: AppLayoutEventMap[K]) => void,