{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "vaadin-master-detail-layout.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "module": "src/vaadin-master-detail-layout.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-master-detail-layout-helpers.js", "declarations": [ { "kind": "function", "name": "getCurrentAnimation", "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ], "description": "Returns the currently running master-detail-layout animation on the\nelement, if any. Matches by the shared animation ID and `'running'`\nplay state.", "return": { "type": { "text": "Animation | undefined" } } }, { "kind": "function", "name": "getCurrentAnimationProgress", "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ], "description": "Returns the overall progress (0–1) of the current animation on the\nelement, computed as `currentTime / duration`. Returns 0 when no\nanimation is running.", "return": { "type": { "text": "number" } } }, { "kind": "function", "name": "animateIn", "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } }, { "name": "effects", "type": { "text": "Array<'fade' | 'slide'>" } }, { "name": "progress", "description": "starting progress (0–1) for interrupted resumption", "type": { "text": "number" } } ], "description": "Runs an enter animation on the element.", "return": { "type": { "text": "Promise" } } }, { "kind": "function", "name": "animateOut", "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } }, { "name": "effects", "type": { "text": "Array<'fade' | 'slide'>" } }, { "name": "progress", "description": "starting progress (0–1) for interrupted resumption", "type": { "text": "number" } } ], "description": "Runs an exit animation on the element.", "return": { "type": { "text": "Promise" } } }, { "kind": "function", "name": "cancelAnimations", "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ], "description": "Cancels all running animations on the element that match the shared animation ID." }, { "kind": "function", "name": "parseTrackSizes", "parameters": [ { "name": "gridTemplate", "description": "computed grid template string (e.g. `\"200px [gap] 10px 400px\"`)", "type": { "text": "string" } } ], "description": "Parses a computed `gridTemplateColumns` / `gridTemplateRows` value\ninto an array of track sizes in pixels. Line names (e.g. `[name]`)\nare stripped before parsing.", "return": { "type": { "text": "number[]" } } }, { "kind": "function", "name": "detectOverflow", "parameters": [ { "name": "hostSize", "description": "the host element's width or height in pixels", "type": { "text": "number" } }, { "name": "trackSizes", "description": "[masterSize, masterExtra, detailSize] in pixels", "type": { "text": "number[]" } } ], "description": "Determines whether the detail area overflows the host element,\nmeaning it should be shown as an overlay instead of side-by-side.\n\nReturns `false` when all tracks fit within the host, or when the\nmaster's extra space (flexible portion) is large enough to absorb\nthe detail column.", "return": { "type": { "text": "boolean" } } } ], "exports": [ { "kind": "js", "name": "getCurrentAnimation", "declaration": { "name": "getCurrentAnimation", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "getCurrentAnimationProgress", "declaration": { "name": "getCurrentAnimationProgress", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "animateIn", "declaration": { "name": "animateIn", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "animateOut", "declaration": { "name": "animateOut", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "cancelAnimations", "declaration": { "name": "cancelAnimations", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "parseTrackSizes", "declaration": { "name": "parseTrackSizes", "module": "src/vaadin-master-detail-layout-helpers.js" } }, { "kind": "js", "name": "detectOverflow", "declaration": { "name": "detectOverflow", "module": "src/vaadin-master-detail-layout-helpers.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-master-detail-layout.js", "declarations": [ { "kind": "class", "description": "`` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n\n
Master content
\n
Detail content
\n\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n\n
Master content
\n
Select an item
\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", "name": "MasterDetailLayout", "members": [ { "kind": "field", "name": "detailSize", "privacy": "public", "type": { "text": "string" }, "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n

\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.", "attribute": "detail-size" }, { "kind": "field", "name": "expandDetail", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.", "attribute": "expand-detail" }, { "kind": "field", "name": "expandMaster", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.", "attribute": "expand-master" }, { "kind": "field", "name": "forceOverlay", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.", "attribute": "force-overlay" }, { "kind": "field", "name": "masterSize", "privacy": "public", "type": { "text": "string" }, "description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.", "attribute": "master-size" }, { "kind": "field", "name": "noAnimation", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the layout does not use animated transitions for the detail area.", "attribute": "no-animation" }, { "kind": "field", "name": "orientation", "privacy": "public", "type": { "text": "string" }, "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.", "attribute": "orientation" }, { "kind": "field", "name": "overlayContainment", "privacy": "public", "type": { "text": "string" }, "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.", "attribute": "overlay-containment" }, { "kind": "field", "name": "overlaySize", "privacy": "public", "type": { "text": "string" }, "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.", "attribute": "overlay-size" }, { "kind": "method", "name": "recalculateLayout", "description": "When `detailSize` is not explicitly set, re-measures the cached intrinsic size of\nthe detail content by placing it in a min-content CSS grid column, then repeats\nthis process for ancestor master-detail layouts without an explicit `detailSize`,\nif any, so that their detail areas also adapt.\n\nCall this method after changing the detail content in a way that affects its intrinsic\nsize — for example, when opening a detail in a nested master-detail layout that was\nnot previously visible.\n\nNOTE: This method can be expensive in large layouts as it triggers consecutive\nsynchronous DOM reads and writes." } ], "events": [ { "name": "backdrop-click", "type": { "text": "CustomEvent" }, "description": "Fired when the user clicks the backdrop in the overlay mode." }, { "name": "detail-escape-press", "type": { "text": "CustomEvent" }, "description": "Fired when the user presses Escape in the detail area." } ], "attributes": [ { "name": "detail-size", "type": { "text": "string" }, "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n

\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.", "fieldName": "detailSize" }, { "name": "expand-detail", "type": { "text": "boolean" }, "description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.", "fieldName": "expandDetail" }, { "name": "expand-master", "type": { "text": "boolean" }, "description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.", "fieldName": "expandMaster" }, { "name": "force-overlay", "type": { "text": "boolean" }, "description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.", "fieldName": "forceOverlay" }, { "name": "master-size", "type": { "text": "string" }, "description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.", "fieldName": "masterSize" }, { "name": "no-animation", "type": { "text": "boolean" }, "description": "When true, the layout does not use animated transitions for the detail area.", "fieldName": "noAnimation" }, { "name": "orientation", "type": { "text": "string" }, "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.", "fieldName": "orientation" }, { "name": "overlay-containment", "type": { "text": "string" }, "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.", "fieldName": "overlayContainment" }, { "name": "overlay-size", "type": { "text": "string" }, "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.", "fieldName": "overlaySize" } ], "mixins": [ { "name": "ElementMixin", "package": "@vaadin/component-base/src/element-mixin.js" }, { "name": "ThemableMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js" }, { "name": "PolylitMixin", "package": "@vaadin/component-base/src/polylit-mixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "vaadin-master-detail-layout", "customElement": true } ], "exports": [ { "kind": "js", "name": "MasterDetailLayout", "declaration": { "name": "MasterDetailLayout", "module": "src/vaadin-master-detail-layout.js" } } ] } ] }