New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-app-layout

Package Overview
Dependencies
Maintainers
18
Versions
256
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 3.0.0-alpha2 to 3.0.0-alpha3

src/detect-ios-navbar.js

105

package.json
{
"name": "@vaadin/vaadin-app-layout",
"version": "3.0.0-alpha2",
"version": "3.0.0-alpha3",
"description": "vaadin-app-layout",

@@ -13,3 +13,3 @@ "main": "vaadin-app-layout.js",

"web-component",
"lit-element"
"polymer"
],

@@ -23,10 +23,25 @@ "author": "Vaadin Ltd",

"files": [
"/vaadin-*.ts",
"/vaadin-*.d.ts",
"/vaadin-*.d.ts.map",
"/vaadin-*.js",
"/vaadin-*.js.map",
"/src/",
"/theme/"
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {

@@ -38,3 +53,3 @@ "hooks": {

"lint-staged": {
"*.ts": [
"*.js": [
"eslint --fix",

@@ -44,44 +59,40 @@ "prettier --write"

},
"scripts": {
"analyze": "wca analyze src/vaadin-app-layout.ts --format json --outFile custom-elements.json",
"build": "tsc && replace-in-file \"/(import|from)( '[.]+/)(.*)(?<!.js)(';)/g\" \"\\$1\\$2\\$3.js\\$4\" vaadin-*.{js,d.ts},src/*.{js,d.ts},theme/**/*.{js,d.ts} --isRegex --verbose",
"dist": "rimraf dist && npm run analyze && npm run build && rollup -c rollup.config.js && cp custom-elements.json dist",
"check:version": "magi check-version",
"gemini": "gemini update test/visual",
"lint": "npm-run-all --parallel lint:*",
"lint:css": "stylelint src/*.ts theme/**/*.ts test/*.ts",
"lint:js": "eslint src theme test --ext .ts --ignore-path .gitignore",
"lint:lit": "lit-analyzer src --strict",
"prepublishOnly": "npm run build",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"serve:dist": "es-dev-server --app-index dist/index.html --open",
"start": "es-dev-server --file-extensions .ts --node-resolve --babel --watch --port 3000 --open",
"test": "karma start",
"test:debug": "karma start --single-run false --browsers Chrome",
"test:sauce": "cross-env TEST_PLATFORM=sauce karma start",
"test:visual": "npm run build && gemini test test/visual"
},
"dependencies": {
"@vaadin/active-state-mixin": "^0.1.6",
"@vaadin/browser-utils": "^0.1.0",
"@vaadin/control-state-mixin": "^0.1.6",
"@vaadin/disabled-state-mixin": "^0.1.1",
"@vaadin/focus-visible-mixin": "^0.1.4",
"@vaadin/element-base": "^0.3.0",
"@vaadin/media-query-mixin": "^0.1.3",
"@vaadin/mixin-utils": "^0.1.0",
"@vaadin/resizable-mixin": "^0.1.1",
"@vaadin/themable-element": "^0.2.0",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-button": "^3.0.0-alpha1",
"@vaadin/vaadin-element-mixin": "^2.4.1",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-themable-mixin": "^1.5.2",
"lit-element": "^2.3.0",
"lit-html": "^1.0.0",
"tslib": "^1.10.0"
"@vaadin/vaadin-themable-mixin": "^1.6.1"
},
"devDependencies": {
"@vaadin/vaadin-tabs": "^4.0.0-alpha3",
"@vaadin/vaadin-component-dev-dependencies": "^4.9.0"
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.1",
"@vaadin/vaadin-icons": "^4.2.0",
"@vaadin/vaadin-tabs": "^4.0.0-alpha4",
"@web/dev-server": "^0.1.5",
"@web/test-runner": "^0.12.7",
"@web/test-runner-saucelabs": "^0.4.1",
"eslint": "^7.18.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.10",
"typescript": "^4.1.3"
}
}

37

README.md
# &lt;vaadin-app-layout&gt;
[&lt;vaadin-app-layout&gt;](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
[Live Demo ↗](https://vaadin.com/components/vaadin-app-layout/html-examples)

@@ -9,16 +7,11 @@ |

[&lt;vaadin-app-layout&gt;](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout)
[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-app-layout)
[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/stars/vaadinvaadin-app-layout.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-app-layout-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
> ⚠️ This is a pre-release version built with [`LitElement`](https://github.com/Polymer/lit-element), part of the [next generation of Vaadin web components](https://vaadin.com/blog/next-generation-vaadin-components).
>
> Looking for Vaadin 14 compatible version? Please see the following branches:
> - [2.0 branch](https://github.com/vaadin/vaadin-app-layout/tree/2.0) (latest stable)
> - [2.1 branch](https://github.com/vaadin/vaadin-app-layout/tree/2.1) (next minor version with incremental improvements)
```html

@@ -89,6 +82,8 @@ <vaadin-app-layout>

## Running demos and API docs in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-app-layout` repository and clone it locally.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. Make sure you have [npm](https://www.npmjs.com/) installed.

@@ -100,17 +95,18 @@

## Running tests from the command line
1. You can also open visual tests, for example:
- When in the `vaadin-app-layout` directory, run `npm test`
- http://localhost:8000/test/visual/drawer.html
- To debug tests in the browser, run `npm run test:debug`
## Running tests from the command line
## Following the coding style
1. When in the `vaadin-app-layout` directory, run `npm test`
We are using [ESLint](http://eslint.org/) for linting TypeScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.ts` files.
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Big Thanks
## Following the coding style
Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -122,3 +118,2 @@

## License

@@ -125,0 +120,0 @@

41

src/safe-area-inset.js

@@ -1,25 +0,24 @@

"use strict";
/**
* CSS environment variables https://caniuse.com/#search=env
*
* Only use "safe-area-inset-bottom" on portrait orientation.
* When set on landscape orientation, it will prevent bottom
* navbar (touch-optimized) from fully hiding on body scroll.
*/
const safeAreaStyle = document.createElement('style');
safeAreaStyle.textContent = `
html {
--safe-area-inset-top: env(safe-area-inset-top, 0px);
--safe-area-inset-right: env(safe-area-inset-right, 0px);
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: env(safe-area-inset-left, 0px);
}
const $_documentContainer = document.createElement('template');
@media screen and (orientation: portrait) {
$_documentContainer.innerHTML = `
<style>
/* Use units so that the values can be used in calc() */
html {
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-inset-top: constant(safe-area-inset-top, 0px);
--safe-area-inset-right: constant(safe-area-inset-right, 0px);
--safe-area-inset-bottom: constant(safe-area-inset-bottom, 0px);
--safe-area-inset-left: constant(safe-area-inset-left, 0px);
}
}
@supports (padding-left: env(safe-area-inset-left)) {
html {
--safe-area-inset-top: env(safe-area-inset-top, 0px);
--safe-area-inset-right: env(safe-area-inset-right, 0px);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-inset-left: env(safe-area-inset-left, 0px);
}
}
</style>
`;
document.head.appendChild(safeAreaStyle);
//# sourceMappingURL=safe-area-inset.js.map
document.head.appendChild($_documentContainer.content);

193

src/vaadin-app-layout.d.ts

@@ -1,59 +0,166 @@

import { AppLayoutBase } from './vaadin-app-layout-base.js';
import './safe-area-inset.js';
declare const VaadinAppLayout_base: typeof AppLayoutBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-app-layout-mixin").AppLayoutInterface & import("@vaadin/resizable-mixin/resizable-class").ResizableClass>;
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
/**
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common
* application layout structure done. For best results, please take the following recommendations
* into account:
* Fired when the `drawerOpened` property changes.
*/
export type AppLayoutDrawerOpenedChanged = CustomEvent<{ value: boolean }>;
/**
* Fired when the `overlay` property changes.
*/
export type AppLayoutOverlayChanged = CustomEvent<{ value: boolean }>;
/**
* Fired when the `primarySection` property changes.
*/
export type AppLayoutPrimarySectionChanged = CustomEvent<{ value: 'navbar' | 'drawer' }>;
export interface AppLayoutElementEventMap {
'drawer-opened-changed': AppLayoutDrawerOpenedChanged;
'overlay-changed': AppLayoutOverlayChanged;
'primary-section-changed': AppLayoutPrimarySectionChanged;
}
export type AppLayoutEventMap = HTMLElementEventMap & AppLayoutElementEventMap;
/**
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
*
* 1. add the component to the root level of your application (as a direct child of `<body>`),
* 2. include a viewport meta tag which contains `viewport-fit=cover` to the page as follows:
* ```
* <vaadin-app-layout primary-section="navbar|drawer">
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
* <vaadin-tabs orientation="vertical" slot="drawer">
* <vaadin-tab>Menu item 1</vaadin-tab>
* </vaadin-tabs>
* <!-- Everything else will be the page content -->
* <div>
* <h3>Page title</h3>
* <p>Page content</p>
* </div>
* </vaadin-app-layout>
* ```
*
* For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
*
* The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
* ```
* <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
* ```
* This causes the viewport to be scaled to fill the device display.
* To ensure that important content is displayed, use the provided css variables.
* ```
* --safe-area-inset-top
* --safe-area-inset-right
* --safe-area-inset-bottom
* --safe-area-inset-left
* ```
*
* #### Scrolling areas
* ### Styling
*
* By default, the height of layout is defined by its content, and the component acts with the
* "body scrolling" so on mobile (iOS Safari and Android Chrome) the toolbars will collapse
* when a scroll happens.
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
*
* To use the "content scrolling" instead, set `height: 100%` on `html` and `body` to expand the
* layout to full document height. That will make the `content` wrapper scrollable. In this case,
* the toolbars on mobile device won't collapse.
* Part name | Description
* --------------|---------------------------------------------------------|
* `navbar` | Container for the navigation bar
* `drawer` | Container for the drawer area
* `content` | Container for page content.
*
* @attr {boolean} overlay - Attribute set when layout has drawer overlay on mobile devices.
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @csspart backdrop - Overlay displayed when opening drawer on mobile devices
* @csspart drawer - Container for the drawer area
* @csspart navbar - Container for the navigation bar (top and bottom)
* @csspart navbar-bottom - Container for the bottom navigation bar
* @csspart content - Container for the page content
* ### Component's slots
*
* @slot - Default slot for the page content
* @slot navbar - Slot for the top navbar area
* @slot drawer - Slot for an application menu
* @slot touch-optimized - Slot for the bottom navbar area (only visible on mobile devices)
* The following slots are available to be set
*
* @event close-overlay-drawer - Event that can be used to close drawer programmatically.
* @event drawer-opened-changed - Fired when the `drawerOpened` property changes.
* @event overlay-changed - Fired when the `overlay` property changes.
* @event primary-section-changed - Fired when the `primarySection` property changes.
* @event touch-optimized-changed - Fired when the `touchOptimized` property changes.
* @event resize - Fired when the element is resized. Non-bubbling.
* Slot name | Description
* -------------------|---------------------------------------------------|
* no name | Default container for the page content
* `navbar ` | Container for the top navbar area
* `drawer` | Container for an application menu
* `touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)
*
* #### Touch optimized
*
* App Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of
* elements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a
* touchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move
* them to the bottom of the page.
*
* ### Navigation
*
* As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
*
* In order to do so, there are two options:
* - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
* - If not, a custom event `close-overlay-drawer` can be dispatched either by calling
* `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling
* `AppLayoutElement.dispatchCloseOverlayDrawerEvent()`
*
* ### Scrolling areas
*
* By default, the component will act with the "body scrolling", so on mobile (iOS Safari and Android Chrome),
* the toolbars will collapse when a scroll happens.
*
* To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
* it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
* That will make the `[content]` element of app layout scrollable.
* On this case, the toolbars on mobile device won't collapse.
*
* @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
* @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
* @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
*/
export declare class VaadinAppLayout extends VaadinAppLayout_base {
static is: string;
static get version(): string;
/**
* Helper method that dispatches a `close-overlay-drawer` event.
*/
static dispatchCloseOverlayDrawerEvent(): void;
declare class AppLayoutElement extends ElementMixin(ThemableMixin(HTMLElement)) {
/**
* 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: 'navbar' | 'drawer';
/**
* 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;
/**
* Helper static method that dispatches a `close-overlay-drawer` event
*/
static dispatchCloseOverlayDrawerEvent(): void;
addEventListener<K extends keyof AppLayoutEventMap>(
type: K,
listener: (this: AppLayoutElement, ev: AppLayoutEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof AppLayoutEventMap>(
type: K,
listener: (this: AppLayoutElement, ev: AppLayoutEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-app-layout': VaadinAppLayout;
}
interface HTMLElementTagNameMap {
'vaadin-app-layout': AppLayoutElement;
}
}
export {};
//# sourceMappingURL=vaadin-app-layout.d.ts.map
export { AppLayoutElement };

628

src/vaadin-app-layout.js

@@ -1,65 +0,595 @@

import { __decorate } from "tslib";
import { customElement } from 'lit-element';
import { observeIosNavbar } from '@vaadin/browser-utils';
import { AppLayoutBase } from './vaadin-app-layout-base.js';
import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
/**
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { beforeNextRender, afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import './safe-area-inset.js';
observeIosNavbar();
import './detect-ios-navbar.js';
/**
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common
* application layout structure done. For best results, please take the following recommendations
* into account:
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
*
* 1. add the component to the root level of your application (as a direct child of `<body>`),
* 2. include a viewport meta tag which contains `viewport-fit=cover` to the page as follows:
* ```
* <vaadin-app-layout primary-section="navbar|drawer">
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
* <vaadin-tabs orientation="vertical" slot="drawer">
* <vaadin-tab>Menu item 1</vaadin-tab>
* </vaadin-tabs>
* <!-- Everything else will be the page content -->
* <div>
* <h3>Page title</h3>
* <p>Page content</p>
* </div>
* </vaadin-app-layout>
* ```
*
* For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
*
* The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
* ```
* <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
* ```
* This causes the viewport to be scaled to fill the device display.
* To ensure that important content is displayed, use the provided css variables.
* ```
* --safe-area-inset-top
* --safe-area-inset-right
* --safe-area-inset-bottom
* --safe-area-inset-left
* ```
*
* #### Scrolling areas
* ### Styling
*
* By default, the height of layout is defined by its content, and the component acts with the
* "body scrolling" so on mobile (iOS Safari and Android Chrome) the toolbars will collapse
* when a scroll happens.
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
*
* To use the "content scrolling" instead, set `height: 100%` on `html` and `body` to expand the
* layout to full document height. That will make the `content` wrapper scrollable. In this case,
* the toolbars on mobile device won't collapse.
* Part name | Description
* --------------|---------------------------------------------------------|
* `navbar` | Container for the navigation bar
* `drawer` | Container for the drawer area
* `content` | Container for page content.
*
* @attr {boolean} overlay - Attribute set when layout has drawer overlay on mobile devices.
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @csspart backdrop - Overlay displayed when opening drawer on mobile devices
* @csspart drawer - Container for the drawer area
* @csspart navbar - Container for the navigation bar (top and bottom)
* @csspart navbar-bottom - Container for the bottom navigation bar
* @csspart content - Container for the page content
* ### Component's slots
*
* @slot - Default slot for the page content
* @slot navbar - Slot for the top navbar area
* @slot drawer - Slot for an application menu
* @slot touch-optimized - Slot for the bottom navbar area (only visible on mobile devices)
* The following slots are available to be set
*
* @event close-overlay-drawer - Event that can be used to close drawer programmatically.
* @event drawer-opened-changed - Fired when the `drawerOpened` property changes.
* @event overlay-changed - Fired when the `overlay` property changes.
* @event primary-section-changed - Fired when the `primarySection` property changes.
* @event touch-optimized-changed - Fired when the `touchOptimized` property changes.
* @event resize - Fired when the element is resized. Non-bubbling.
* Slot name | Description
* -------------------|---------------------------------------------------|
* no name | Default container for the page content
* `navbar ` | Container for the top navbar area
* `drawer` | Container for an application menu
* `touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)
*
* #### Touch optimized
*
* App Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of
* elements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a
* touchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move
* them to the bottom of the page.
*
* ### Navigation
*
* As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.
*
* In order to do so, there are two options:
* - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`
* - If not, a custom event `close-overlay-drawer` can be dispatched either by calling
* `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling
* `AppLayoutElement.dispatchCloseOverlayDrawerEvent()`
*
* ### Scrolling areas
*
* By default, the component will act with the "body scrolling", so on mobile (iOS Safari and Android Chrome),
* the toolbars will collapse when a scroll happens.
*
* To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
* it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
* That will make the `[content]` element of app layout scrollable.
* On this case, the toolbars on mobile device won't collapse.
*
* @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
* @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
* @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
*/
let VaadinAppLayout = class VaadinAppLayout extends AppLayoutMixin(AppLayoutBase) {
static get version() {
return '3.0.0-alpha2';
class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
static get template() {
return html`
<style>
:host {
display: block;
box-sizing: border-box;
height: 100%;
--vaadin-app-layout-transition: 200ms;
transition: padding var(--vaadin-app-layout-transition);
--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-top: var(--vaadin-app-layout-navbar-offset-top);
padding-bottom: var(--vaadin-app-layout-navbar-offset-bottom);
padding-left: var(--vaadin-app-layout-navbar-offset-left);
}
:host([dir='rtl']) {
padding-left: 0;
padding-right: 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;
-webkit-overflow-scrolling: touch;
}
[content] {
height: 100%;
}
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
:host {
--vaadin-app-layout-touch-optimized: true;
}
}
[part='navbar'],
[part='navbar']::before {
position: fixed;
display: flex;
align-items: center;
top: 0;
right: 0;
left: 0;
transition: left 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(:not([dir='rtl'])[primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
left: var(--vaadin-app-layout-drawer-offset-left, 0);
}
:host([dir='rtl'][primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
right: 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);
right: auto;
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
left: var(--vaadin-app-layout-navbar-offset-left, 0);
transition: transform var(--vaadin-app-layout-transition);
transform: translateX(-100%);
max-width: 90%;
width: 16em;
box-sizing: border-box;
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
outline: none;
}
:host([drawer-opened]) [part='drawer'] {
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;
top: 0;
right: 0;
bottom: 0;
left: 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'] {
left: auto;
right: var(--vaadin-app-layout-navbar-offset-start, 0);
transform: translateX(100%);
}
:host([dir='rtl']) [part='navbar'],
:host([dir='rtl']) [part='navbar']::before {
transition: right var(--vaadin-app-layout-transition);
}
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
transform: translateX(0%);
}
:host(:not([dir='rtl'])[drawer-opened]:not([overlay])) {
padding-left: var(--vaadin-app-layout-drawer-offset-left);
}
:host([dir='rtl'][drawer-opened]:not([overlay])) {
padding-right: var(--vaadin-app-layout-drawer-offset-left);
}
@media (max-width: 800px), (max-height: 600px) {
:host {
--vaadin-app-layout-drawer-overlay: true;
}
[part='drawer'] {
width: 20em;
}
}
</style>
<div part="navbar" id="navbarTop">
<slot name="navbar"></slot>
</div>
<div part="backdrop" on-click="_close" on-touchstart="_close"></div>
<div part="drawer" id="drawer">
<slot name="drawer" id="drawerSlot"></slot>
</div>
<div content>
<slot></slot>
</div>
<div part="navbar" id="navbarBottom" bottom hidden>
<slot name="navbar-bottom"></slot>
</div>
<div hidden><slot id="touchSlot" name="navbar touch-optimized"></slot></div>
`;
}
static get is() {
return 'vaadin-app-layout';
}
static get version() {
return '3.0.0-alpha3';
}
static get properties() {
return {
/**
* 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
* @type {!PrimarySection}
*/
primarySection: {
type: String,
value: 'navbar',
notify: true,
reflectToAttribute: true,
observer: '_primarySectionObserver'
},
/**
* 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
* @type {boolean}
*/
drawerOpened: {
type: Boolean,
notify: true,
value: true,
reflectToAttribute: true,
observer: '_drawerOpenedObserver'
},
/**
* Drawer is an overlay on top of the content
* Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`;
* @type {boolean}
*/
overlay: {
type: Boolean,
notify: true,
readOnly: true,
value: false,
reflectToAttribute: true
}
};
}
constructor() {
super();
// TODO(jouni): might want to debounce
this.__boundResizeListener = this._resize.bind(this);
this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this._blockAnimationUntilAfterNextRender();
window.addEventListener('resize', this.__boundResizeListener);
this.addEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
beforeNextRender(this, this._afterFirstRender);
this._updateTouchOptimizedMode();
const navbarSlot = this.$.navbarTop.firstElementChild;
this._navbarChildObserver = new FlattenedNodesObserver(navbarSlot, () => {
this._updateTouchOptimizedMode();
});
this._touchChildObserver = new FlattenedNodesObserver(this.$.touchSlot, () => {
this._updateTouchOptimizedMode();
});
this._drawerChildObserver = new FlattenedNodesObserver(this.$.drawerSlot, () => {
this._updateDrawerSize();
});
this._updateDrawerSize();
this._updateOverlayMode();
window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
}
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
this._navbarChildObserver && this._navbarChildObserver.disconnect();
this._drawerChildObserver && this._drawerChildObserver.disconnect();
this._touchChildObserver && this._touchChildObserver.disconnect();
window.removeEventListener('resize', this.__boundResizeListener);
this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
this.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
}
/**
* Helper static method that dispatches a `close-overlay-drawer` event
*/
static dispatchCloseOverlayDrawerEvent() {
window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
}
/** @private */
_primarySectionObserver(value) {
const isValid = ['navbar', 'drawer'].indexOf(value) !== -1;
if (!isValid) {
this.set('primarySection', 'navbar');
}
/**
* Helper method that dispatches a `close-overlay-drawer` event.
*/
static dispatchCloseOverlayDrawerEvent() {
window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
}
/** @private */
_drawerOpenedObserver() {
const drawer = this.$.drawer;
drawer.removeAttribute('tabindex');
if (this.overlay) {
if (this.drawerOpened) {
drawer.setAttribute('tabindex', 0);
drawer.focus();
this._updateDrawerHeight();
}
}
};
VaadinAppLayout.is = 'vaadin-app-layout';
VaadinAppLayout = __decorate([
customElement('vaadin-app-layout')
], VaadinAppLayout);
export { VaadinAppLayout };
//# sourceMappingURL=vaadin-app-layout.js.map
}
/** @protected */
_afterFirstRender() {
this._blockAnimationUntilAfterNextRender();
this._updateOffsetSize();
}
/** @private */
_drawerToggleClick(e) {
e.stopPropagation();
this.drawerOpened = !this.drawerOpened;
}
/** @private */
__closeOverlayDrawer() {
if (this.overlay) {
this.drawerOpened = false;
}
}
/** @protected */
_updateDrawerSize() {
const childCount = this.querySelectorAll('[slot=drawer]').length;
const drawer = this.$.drawer;
if (childCount === 0) {
drawer.setAttribute('hidden', '');
} else {
drawer.removeAttribute('hidden');
}
this._updateOffsetSize();
}
/** @private */
_resize() {
this._blockAnimationUntilAfterNextRender();
this._updateTouchOptimizedMode();
this._updateOverlayMode();
}
/** @protected */
_updateOffsetSize() {
const navbar = this.$.navbarTop;
const navbarRect = navbar.getBoundingClientRect();
const navbarBottom = this.$.navbarBottom;
const navbarBottomRect = navbarBottom.getBoundingClientRect();
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', navbarRect.height + 'px');
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', navbarBottomRect.height + 'px');
const drawer = this.$.drawer;
const drawerRect = drawer.getBoundingClientRect();
this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', drawerRect.width + 'px');
}
/** @protected */
_updateDrawerHeight() {
const { scrollHeight, offsetHeight } = this.$.drawer;
const height = scrollHeight > offsetHeight ? `${scrollHeight}px` : '100%';
this.style.setProperty('--_vaadin-app-layout-drawer-scroll-size', height);
}
/** @protected */
_updateOverlayMode() {
const overlay = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
const drawer = this.$.drawer;
if (!this.overlay && overlay) {
// Changed from not overlay to overlay
this._drawerStateSaved = this.drawerOpened;
this.drawerOpened = false;
}
this._setOverlay(overlay);
if (this.overlay) {
drawer.setAttribute('role', 'dialog');
drawer.setAttribute('aria-modal', 'true');
drawer.setAttribute('aria-label', 'drawer');
} else {
if (this._drawerStateSaved) {
this.drawerOpened = this._drawerStateSaved;
this._drawerStateSaved = null;
}
drawer.removeAttribute('role');
drawer.removeAttribute('aria-modal');
drawer.removeAttribute('aria-label');
}
this._updateDrawerHeight();
// TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
}
/** @protected */
_close() {
this.drawerOpened = false;
}
/** @protected */
_updateTouchOptimizedMode() {
const touchOptimized = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
const navbarItems = this.querySelectorAll('[slot*="navbar"]');
if (navbarItems.length > 0) {
Array.from(navbarItems).forEach((navbar) => {
if (navbar.getAttribute('slot').indexOf('touch-optimized') > -1) {
navbar.__touchOptimized = true;
}
if (touchOptimized && navbar.__touchOptimized) {
navbar.setAttribute('slot', 'navbar-bottom');
} else {
navbar.setAttribute('slot', 'navbar');
}
});
}
if (this.$.navbarTop.querySelector('[name=navbar]').assignedNodes().length === 0) {
this.$.navbarTop.setAttribute('hidden', '');
} else {
this.$.navbarTop.removeAttribute('hidden');
}
if (touchOptimized) {
this.$.navbarBottom.removeAttribute('hidden');
} else {
this.$.navbarBottom.setAttribute('hidden', '');
}
this._updateOffsetSize();
}
/** @protected */
_blockAnimationUntilAfterNextRender() {
this.setAttribute('no-anim', '');
afterNextRender(this, () => {
this.removeAttribute('no-anim');
});
}
/**
* App Layout listens to `close-overlay-drawer` on the window level.
* A custom event can be dispatched and the App Layout will close the drawer in overlay.
*
* That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
*
* See `dispatchCloseOverlayDrawerEvent()` helper method.
*
* @event close-overlay-drawer
*/
}
customElements.define(AppLayoutElement.is, AppLayoutElement);
export { AppLayoutElement };

27

src/vaadin-drawer-toggle.d.ts

@@ -1,15 +0,22 @@

import { DrawerToggleBase } from './vaadin-drawer-toggle-base.js';
declare const VaadinDrawerToggle_base: typeof DrawerToggleBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-drawer-toggle-mixin").DrawerToggle>;
import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
/**
* `<vaadin-drawer-toggle>` is a Web Component that toggles the layout drawer.
* The Drawer Toggle component controls the drawer in App Layout component.
*
* ```
* <vaadin-app-layout>
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
* </vaadin-app-layout>
* ```
*/
export declare class VaadinDrawerToggle extends VaadinDrawerToggle_base {
static is: string;
declare class DrawerToggleElement extends ButtonElement {
ariaLabel: string | null | undefined;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-drawer-toggle': VaadinDrawerToggle;
}
interface HTMLElementTagNameMap {
'vaadin-drawer-toggle': DrawerToggleElement;
}
}
export {};
//# sourceMappingURL=vaadin-drawer-toggle.d.ts.map
export { DrawerToggleElement };

121

src/vaadin-drawer-toggle.js

@@ -1,15 +0,110 @@

import { __decorate } from "tslib";
import { customElement } from 'lit-element';
import { DrawerToggleBase } from './vaadin-drawer-toggle-base.js';
import { DrawerToggleMixin } from './vaadin-drawer-toggle-mixin.js';
/**
* `<vaadin-drawer-toggle>` is a Web Component that toggles the layout drawer.
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
let VaadinDrawerToggle = class VaadinDrawerToggle extends DrawerToggleMixin(DrawerToggleBase) {
};
VaadinDrawerToggle.is = 'vaadin-drawer-toggle';
VaadinDrawerToggle = __decorate([
customElement('vaadin-drawer-toggle')
], VaadinDrawerToggle);
export { VaadinDrawerToggle };
//# sourceMappingURL=vaadin-drawer-toggle.js.map
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
/**
* The Drawer Toggle component controls the drawer in App Layout component.
*
* ```
* <vaadin-app-layout>
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
* </vaadin-app-layout>
* ```
*/
class DrawerToggleElement extends ButtonElement {
static get template() {
return html`
<style>
:host {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: default;
position: relative;
outline: none;
height: 24px;
width: 24px;
padding: 4px;
}
#button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: inherit;
}
[part='icon'],
[part='icon']::after,
[part='icon']::before {
position: absolute;
top: 8px;
height: 3px;
width: 24px;
background-color: #000;
}
[part='icon']::after,
[part='icon']::before {
content: '';
}
[part='icon']::after {
top: 6px;
}
[part='icon']::before {
top: 12px;
}
</style>
<slot>
<div part="icon"></div>
</slot>
<button id="button" type="button" aria-label$="[[ariaLabel]]"></button>
`;
}
static get is() {
return 'vaadin-drawer-toggle';
}
static get properties() {
return {
ariaLabel: {
type: String,
value: 'Toggle'
}
};
}
constructor() {
super();
this.addEventListener('click', () => {
if (!this.disabled) {
this._fireClick();
}
});
this.addEventListener('keyup', (event) => {
if (/^( |SpaceBar|Enter)$/.test(event.key) && !this.disabled) {
this._fireClick();
}
});
}
_fireClick() {
this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
}
}
customElements.define(DrawerToggleElement.is, DrawerToggleElement);
export { DrawerToggleElement };

76

theme/lumo/vaadin-app-layout-styles.js

@@ -1,4 +0,72 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { appLayoutStyles } from './vaadin-app-layout-css.js';
registerStyles('vaadin-app-layout', appLayoutStyles, { moduleId: 'lumo-app-layout' });
//# sourceMappingURL=vaadin-app-layout-styles.js.map
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
registerStyles(
'vaadin-app-layout',
css`
[part='navbar']::before {
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
}
:host(:not([dir='rtl']):not([overlay])) [part='drawer'] {
border-right: 1px solid var(--lumo-contrast-10pct);
}
:host([dir='rtl']:not([overlay])) [part='drawer'] {
border-left: 1px solid var(--lumo-contrast-10pct);
}
:host([overlay]) [part='drawer']::before {
background: var(--lumo-base-color);
}
[part='navbar']::before,
:host([overlay]) [part='drawer']::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
z-index: -1;
}
:host([overlay]) [part='drawer']::before {
background: var(--lumo-base-color);
height: var(--_vaadin-app-layout-drawer-scroll-size, 100%);
}
[part='backdrop'] {
background-color: var(--lumo-shade-20pct);
opacity: 1;
}
[part] ::slotted(h2),
[part] ::slotted(h3),
[part] ::slotted(h4) {
margin-top: var(--lumo-space-xs) !important;
margin-bottom: var(--lumo-space-xs) !important;
}
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
[part='navbar']::before {
opacity: 0.8;
}
[part='navbar'] {
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
:host([overlay]) [part='drawer']::before {
opacity: 0.9;
}
:host([overlay]) [part='drawer'] {
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
}
`,
{ moduleId: 'lumo-app-layout' }
);

1

theme/lumo/vaadin-app-layout.js
import './vaadin-app-layout-styles.js';
import '../../src/vaadin-app-layout.js';
//# sourceMappingURL=vaadin-app-layout.js.map

38

theme/lumo/vaadin-drawer-toggle-styles.js

@@ -1,4 +0,34 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { drawerToggleStyles } from './vaadin-drawer-toggle-css.js';
registerStyles('vaadin-drawer-toggle', drawerToggleStyles, { moduleId: 'lumo-drawer-toggle' });
//# sourceMappingURL=vaadin-drawer-toggle-styles.js.map
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
import '@vaadin/vaadin-lumo-styles/font-icons.js';
registerStyles(
'vaadin-drawer-toggle',
css`
:host {
width: var(--lumo-size-l);
height: var(--lumo-size-l);
min-width: auto;
margin: 0 var(--lumo-space-s);
padding: 0;
background: transparent;
}
[part='icon'],
[part='icon']::after,
[part='icon']::before {
position: inherit;
height: auto;
width: auto;
background: transparent;
top: auto;
}
[part='icon']::before {
font-family: lumo-icons;
font-size: var(--lumo-icon-size-m);
content: var(--lumo-icons-menu);
}
`,
{ include: ['lumo-button'], moduleId: 'lumo-drawer-toggle' }
);

1

theme/lumo/vaadin-drawer-toggle.js
import './vaadin-drawer-toggle-styles.js';
import '../../src/vaadin-drawer-toggle.js';
//# sourceMappingURL=vaadin-drawer-toggle.js.map

64

theme/material/vaadin-app-layout-styles.js

@@ -1,4 +0,60 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { appLayoutStyles } from './vaadin-app-layout-css.js';
registerStyles('vaadin-app-layout', appLayoutStyles, { moduleId: 'material-app-layout' });
//# sourceMappingURL=vaadin-app-layout-styles.js.map
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/shadow.js';
import '@vaadin/vaadin-material-styles/typography.js';
registerStyles(
'vaadin-app-layout',
css`
:host {
background-color: var(--material-background-color);
}
[part='navbar'] {
padding: 0.25em 0.5em;
background: var(--vaadin-app-layout-navbar-background, var(--material-secondary-background-color));
box-shadow: var(--material-shadow-elevation-8dp);
}
[part='drawer'] {
background: var(--material-background-color);
}
:host(:not([dir='rtl'])) [part='drawer'] {
border-right: 1px solid var(--material-secondary-background-color);
}
:host([dir='rtl']) [part='drawer'] {
border-left: 1px solid var(--material-secondary-background-color);
}
:host([primary-section='drawer']) [part='drawer'] {
z-index: 1;
}
:host([primary-section='navbar']:not([overlay])) [part='navbar'] {
z-index: 1;
}
[part] ::slotted(h2),
[part] ::slotted(h3),
[part] ::slotted(h4) {
line-height: 2.5rem;
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
[part='navbar'][bottom] {
padding: 0 1em;
box-shadow: var(--material-shadow-elevation-4dp);
}
@media (min-width: 700px) {
[part='navbar'] {
padding: 0.5em 0.75em;
box-shadow: var(--material-shadow-elevation-4dp);
}
}
`,
{ moduleId: 'material-app-layout' }
);

1

theme/material/vaadin-app-layout.js
import './vaadin-app-layout-styles.js';
import '../../src/vaadin-app-layout.js';
//# sourceMappingURL=vaadin-app-layout.js.map

55

theme/material/vaadin-drawer-toggle-styles.js

@@ -1,4 +0,51 @@

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { drawerToggleStyles } from './vaadin-drawer-toggle-css.js';
registerStyles('vaadin-drawer-toggle', drawerToggleStyles, { moduleId: 'material-drawer-toggle' });
//# sourceMappingURL=vaadin-drawer-toggle-styles.js.map
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-button/theme/material/vaadin-button-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
registerStyles(
'vaadin-drawer-toggle',
css`
:host {
min-width: 0 !important;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
}
:host(:not([dir='rtl'])) {
margin-right: 1em;
}
:host([dir='rtl']) {
margin-left: 1em;
}
[part='icon'],
[part='icon']::after,
[part='icon']::before {
background-color: currentColor;
}
[part='icon'] {
top: 18px;
left: 15px;
}
[part='icon'],
[part='icon']::after,
[part='icon']::before {
height: 2px;
width: 18px;
}
[part='icon']::after {
top: 5px;
}
[part='icon']::before {
top: 10px;
}
`,
{ include: ['material-button'], moduleId: 'material-drawer-toggle' }
);

1

theme/material/vaadin-drawer-toggle.js
import './vaadin-drawer-toggle-styles.js';
import '../../src/vaadin-drawer-toggle.js';
//# sourceMappingURL=vaadin-drawer-toggle.js.map

5

vaadin-app-layout.d.ts

@@ -1,3 +0,2 @@

import './theme/lumo/vaadin-app-layout.js';
export { VaadinAppLayout } from './src/vaadin-app-layout.js';
//# sourceMappingURL=vaadin-app-layout.d.ts.map
export * from './src/vaadin-app-layout.js';
export * from './@types/interfaces';

3

vaadin-app-layout.js
import './theme/lumo/vaadin-app-layout.js';
export { VaadinAppLayout } from './src/vaadin-app-layout.js';
//# sourceMappingURL=vaadin-app-layout.js.map
export * from './src/vaadin-app-layout.js';

4

vaadin-drawer-toggle.d.ts

@@ -1,3 +0,1 @@

import './theme/lumo/vaadin-drawer-toggle.js';
export { VaadinDrawerToggle } from './src/vaadin-drawer-toggle.js';
//# sourceMappingURL=vaadin-drawer-toggle.d.ts.map
export * from './src/vaadin-drawer-toggle.js';

3

vaadin-drawer-toggle.js
import './theme/lumo/vaadin-drawer-toggle.js';
export { VaadinDrawerToggle } from './src/vaadin-drawer-toggle.js';
//# sourceMappingURL=vaadin-drawer-toggle.js.map
export * from './src/vaadin-drawer-toggle.js';
src/safe-area-inset.d.ts
src/safe-area-inset.d.ts.map
src/safe-area-inset.js.map
src/safe-area-inset.ts
src/vaadin-app-layout-base.d.ts
src/vaadin-app-layout-base.d.ts.map
src/vaadin-app-layout-base.js
src/vaadin-app-layout-base.js.map
src/vaadin-app-layout-base.ts
src/vaadin-app-layout-css.d.ts
src/vaadin-app-layout-css.d.ts.map
src/vaadin-app-layout-css.js
src/vaadin-app-layout-css.js.map
src/vaadin-app-layout-css.ts
src/vaadin-app-layout-mixin.d.ts
src/vaadin-app-layout-mixin.d.ts.map
src/vaadin-app-layout-mixin.js
src/vaadin-app-layout-mixin.js.map
src/vaadin-app-layout-mixin.ts
src/vaadin-app-layout.d.ts.map
src/vaadin-app-layout.js.map
src/vaadin-app-layout.ts
src/vaadin-drawer-toggle-base.d.ts
src/vaadin-drawer-toggle-base.d.ts.map
src/vaadin-drawer-toggle-base.js
src/vaadin-drawer-toggle-base.js.map
src/vaadin-drawer-toggle-base.ts
src/vaadin-drawer-toggle-css.d.ts
src/vaadin-drawer-toggle-css.d.ts.map
src/vaadin-drawer-toggle-css.js
src/vaadin-drawer-toggle-css.js.map
src/vaadin-drawer-toggle-css.ts
src/vaadin-drawer-toggle-mixin.d.ts
src/vaadin-drawer-toggle-mixin.d.ts.map
src/vaadin-drawer-toggle-mixin.js
src/vaadin-drawer-toggle-mixin.js.map
src/vaadin-drawer-toggle-mixin.ts
src/vaadin-drawer-toggle.d.ts.map
src/vaadin-drawer-toggle.js.map
src/vaadin-drawer-toggle.ts
theme/lumo/vaadin-app-layout-css.d.ts
theme/lumo/vaadin-app-layout-css.d.ts.map
theme/lumo/vaadin-app-layout-css.js
theme/lumo/vaadin-app-layout-css.js.map
theme/lumo/vaadin-app-layout-css.ts
theme/lumo/vaadin-app-layout-styles.d.ts
theme/lumo/vaadin-app-layout-styles.d.ts.map
theme/lumo/vaadin-app-layout-styles.js.map
theme/lumo/vaadin-app-layout-styles.ts
theme/lumo/vaadin-app-layout.d.ts
theme/lumo/vaadin-app-layout.d.ts.map
theme/lumo/vaadin-app-layout.js.map
theme/lumo/vaadin-app-layout.ts
theme/lumo/vaadin-drawer-toggle-css.d.ts
theme/lumo/vaadin-drawer-toggle-css.d.ts.map
theme/lumo/vaadin-drawer-toggle-css.js
theme/lumo/vaadin-drawer-toggle-css.js.map
theme/lumo/vaadin-drawer-toggle-css.ts
theme/lumo/vaadin-drawer-toggle-styles.d.ts
theme/lumo/vaadin-drawer-toggle-styles.d.ts.map
theme/lumo/vaadin-drawer-toggle-styles.js.map
theme/lumo/vaadin-drawer-toggle-styles.ts
theme/lumo/vaadin-drawer-toggle.d.ts
theme/lumo/vaadin-drawer-toggle.d.ts.map
theme/lumo/vaadin-drawer-toggle.js.map
theme/lumo/vaadin-drawer-toggle.ts
theme/material/vaadin-app-layout-css.d.ts
theme/material/vaadin-app-layout-css.d.ts.map
theme/material/vaadin-app-layout-css.js
theme/material/vaadin-app-layout-css.js.map
theme/material/vaadin-app-layout-css.ts
theme/material/vaadin-app-layout-styles.d.ts
theme/material/vaadin-app-layout-styles.d.ts.map
theme/material/vaadin-app-layout-styles.js.map
theme/material/vaadin-app-layout-styles.ts
theme/material/vaadin-app-layout.d.ts
theme/material/vaadin-app-layout.d.ts.map
theme/material/vaadin-app-layout.js.map
theme/material/vaadin-app-layout.ts
theme/material/vaadin-drawer-toggle-css.d.ts
theme/material/vaadin-drawer-toggle-css.d.ts.map
theme/material/vaadin-drawer-toggle-css.js
theme/material/vaadin-drawer-toggle-css.js.map
theme/material/vaadin-drawer-toggle-css.ts
theme/material/vaadin-drawer-toggle-styles.d.ts
theme/material/vaadin-drawer-toggle-styles.d.ts.map
theme/material/vaadin-drawer-toggle-styles.js.map
theme/material/vaadin-drawer-toggle-styles.ts
theme/material/vaadin-drawer-toggle.d.ts
theme/material/vaadin-drawer-toggle.d.ts.map
theme/material/vaadin-drawer-toggle.js.map
theme/material/vaadin-drawer-toggle.ts
vaadin-app-layout.d.ts.map
vaadin-app-layout.js.map
vaadin-app-layout.ts
vaadin-drawer-toggle.d.ts.map
vaadin-drawer-toggle.js.map
vaadin-drawer-toggle.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc