@cas-smartdesign/z-layout 6.0.1 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/docs/doc.css +1 -1
  2. package/dist/docs/doc.mjs +39 -43
  3. package/dist/zlayout-with-externals.js.map +2 -2
  4. package/dist/zlayout.mjs.map +1 -1
  5. package/npm-third-party-licenses.json +51 -46
  6. package/package.json +4 -4
  7. package/readme.md +0 -2
package/dist/zlayout-with-externals.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../element-base/element-base.ts", "../template.html?raw", "../zlayout.ts"],
3
+ "sources": ["../../../element-base/element-base.ts", "../template.html", "../zlayout.ts"],
4
4
  "sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t}\\n\\n\\t.grid-variant {\\n\\t\\tdisplay: grid;\\n\\t\\tgrid-gap: var(--z-layout-spacing, 16px);\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(var(--z-layout-column-width, 400px), 1fr));\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(min(100%, var(--z-layout-column-width, 400px)), 1fr));\\n\\t\\tjustify-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .grid-variant {\\n\\t\\tgrid-template-columns: repeat(auto-fit, var(--z-layout-column-width, 400px));\\n\\t\\tgrid-template-columns: repeat(auto-fit, min(100%, var(--z-layout-column-width, 400px)));\\n\\t\\tjustify-content: flex-start;\\n\\t}\\n\\n\\t.flex-variant {\\n\\t\\tdisplay: flex;\\n\\t\\twidth: calc(100% + var(--z-layout-spacing, 16px));\\n\\t\\tmargin: calc(-0.5 * var(--z-layout-spacing, 16px));\\n\\t\\tbox-sizing: border-box;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tjustify-content: space-around;\\n\\t\\talign-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant {\\n\\t\\tjustify-content: flex-start;\\n\\t\\talign-content: center;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant ::slotted(*) {\\n\\t\\tflex: 0 0 auto;\\n\\t}\\n\\n\\t.flex-variant ::slotted(*) {\\n\\t\\tflex: 1 1 auto;\\n\\t\\tbox-sizing: border-box;\\n\\t\\twidth: calc(var(--z-layout-column-width, 400px) + var(--z-layout-spacing, 16px)) !important;\\n\\t}\\n\\n\\t.grid-variant ::slotted(*) {\\n\\t\\tbox-sizing: border-box;\\n\\t\\tmax-width: 100% !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(:not(.filler)) {\\n\\t\\tborder: calc(var(--z-layout-spacing, 16px) / 2) solid transparent !important;\\n\\t\\tbackground-clip: padding-box !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(.filler) {\\n\\t\\torder: 2147483647;\\n\\t}\\n</style>\\n<div class=\\\"root\\\">\\n\\t<slot></slot>\\n</div>\\n\"", "import { ElementBase } from \"@cas-smartdesign/element-base\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ZLayout.ID]: ZLayout;\n }\n}\n\nimport { default as htmlTemplate } from \"./template.html?raw\";\n\nexport class ZLayout extends ElementBase {\n public is(): string {\n return ZLayout.ID;\n }\n public static readonly ID = \"sd-z-layout\";\n\n private childListObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n private fillers: HTMLElement[] = [];\n private lastKnownWidth = -1;\n\n private rootElement: HTMLElement;\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n }\n\n public get fixedColumns(): boolean {\n return this.hasAttribute(\"fixed-columns\") && this.getAttribute(\"fixed-columns\") !== \"false\";\n }\n\n public set fixedColumns(fixedColumns: boolean) {\n if (fixedColumns) {\n this.setAttribute(\"fixed-columns\", \"\");\n } else {\n this.removeAttribute(\"fixed-columns\");\n }\n }\n\n public get columnWidth(): string {\n if (this.hasAttribute(\"column-width\")) {\n return this.getAttribute(\"column-width\");\n }\n return getComputedStyle(this).getPropertyValue(\"--z-layout-column-width\");\n }\n\n public set columnWidth(columnWidth: string) {\n this.setAttribute(\"column-width\", columnWidth);\n }\n\n static get observedAttributes() {\n return [\"column-width\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.rootElement) {\n this.rootElement = this.shadowRoot.querySelector(\".root\");\n\n if (this.isGridLayoutSupported()) {\n this.rootElement.className = \"root grid-variant\";\n } else {\n this.rootElement.className = \"root flex-variant\";\n\n this.childListObserver = new MutationObserver((mutationsList) => {\n const realChildMutation =\n mutationsList\n .reduce((results, item) => [...results, ...item.addedNodes, ...item.removedNodes], [])\n .filter((node) => ((node as HTMLElement).className || \"\").indexOf(\"filler\") === -1).length >\n 0;\n if (realChildMutation)\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n });\n this.resizeObserver = new ResizeObserver((entries, observer) => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n }\n });\n }\n this.checkMarginUsageOnDirectChildren();\n }\n if (this.childListObserver) {\n this.childListObserver.observe(this, { childList: true });\n }\n if (this.resizeObserver) {\n this.resizeObserver.observe(this);\n }\n }\n\n public attributeChangedCallback() {\n this.onColumnWidthChange();\n }\n\n private isGridLayoutSupported(): boolean {\n const edge = navigator.userAgent.indexOf(\"Edge/\") > -1;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const context: any = window;\n const supportsCSS = context.CSS && context.CSS.supports;\n return !edge && supportsCSS && CSS.supports(\"display\", \"grid\");\n }\n\n private updateFillers() {\n if (this.childElementCount > 0) {\n if (!this.fixedColumns) {\n let prevColumnWidth = Number.POSITIVE_INFINITY;\n let measuringFillerElement = undefined;\n while (this.currentColumnWidth() < prevColumnWidth) {\n prevColumnWidth = this.currentColumnWidth();\n\n measuringFillerElement = this.appendFiller();\n\n this.flushShadyDomChanges();\n }\n\n this.fillers.length = this.fillers.length - 1;\n this.removeChild(measuringFillerElement);\n\n const columnCount = this.offsetWidth / prevColumnWidth;\n if (isFinite(columnCount)) {\n while (columnCount - 1 > this.fillers.length) {\n this.appendFiller();\n }\n }\n } else if (this.fillers.length > 0) {\n this.fillers.forEach((filler) => this.removeChild(filler));\n this.fillers = [];\n }\n }\n }\n\n private appendFiller() {\n const filler = document.createElement(\"div\");\n filler.className = \"filler\";\n this.fillers.push(filler);\n this.appendChild(filler);\n return filler;\n }\n\n private flushShadyDomChanges() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const shadyDom = (window as any).ShadyDOM;\n if (shadyDom && shadyDom.flush) {\n shadyDom.flush();\n }\n }\n\n private checkMarginUsageOnDirectChildren() {\n requestAnimationFrame(() => {\n for (let i = 0; i < this.children.length; i++) {\n const child = this.children[i];\n if (child.className.indexOf(\"filler\") === -1) {\n const computedStyle = getComputedStyle(child);\n if (parseInt(computedStyle.marginLeft, 10) !== 0 || parseInt(computedStyle.marginRight, 10) !== 0) {\n console.warn(\n \"[sd-z-layout] It is not recommended to use horizontal margins on direct children of the sd-z-layout element \" +\n \"because the flex-variant (which is used in browsers without css grid support) \" +\n \"might have layouting problems.\\nPlease consider to apply such margins inside these elements instead.\",\n );\n return;\n }\n }\n }\n });\n }\n\n private currentColumnWidth() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (const child of this.children as any) {\n if (child.offsetWidth) {\n return child.offsetWidth;\n }\n }\n }\n\n private onColumnWidthChange() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const ShadyCSS = (window as any).ShadyCSS;\n if (this.hasAttribute(\"column-width\")) {\n this.style.setProperty(\"--z-layout-column-width\", this.getAttribute(\"column-width\"));\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": this.getAttribute(\"column-width\") });\n }\n } else {\n this.style.removeProperty(\"--z-layout-column-width\");\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": \"\" });\n }\n }\n }\n\n public disconnectedCallback() {\n if (this.childListObserver) {\n this.childListObserver.disconnect();\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) return;\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n}\nif (!customElements.get(ZLayout.ID)) {\n customElements.define(ZLayout.ID, ZLayout);\n}\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["_ElementBase", "is", "template", "actor", "ElementBase", "htmlTemplate", "_ZLayout", "ElementBase", "template", "fixedColumns", "columnWidth", "mutationsList", "results", "item", "node", "entries", "observer", "edge", "context", "supportsCSS", "filler", "prevColumnWidth", "measuringFillerElement", "columnCount", "shadyDom", "i", "child", "computedStyle", "ShadyCSS", "id", "actor", "ZLayout"]
7
7
  }
package/dist/zlayout.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"zlayout.mjs","sources":["../template.html?raw","../zlayout.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t}\\n\\n\\t.grid-variant {\\n\\t\\tdisplay: grid;\\n\\t\\tgrid-gap: var(--z-layout-spacing, 16px);\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(var(--z-layout-column-width, 400px), 1fr));\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(min(100%, var(--z-layout-column-width, 400px)), 1fr));\\n\\t\\tjustify-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .grid-variant {\\n\\t\\tgrid-template-columns: repeat(auto-fit, var(--z-layout-column-width, 400px));\\n\\t\\tgrid-template-columns: repeat(auto-fit, min(100%, var(--z-layout-column-width, 400px)));\\n\\t\\tjustify-content: flex-start;\\n\\t}\\n\\n\\t.flex-variant {\\n\\t\\tdisplay: flex;\\n\\t\\twidth: calc(100% + var(--z-layout-spacing, 16px));\\n\\t\\tmargin: calc(-0.5 * var(--z-layout-spacing, 16px));\\n\\t\\tbox-sizing: border-box;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tjustify-content: space-around;\\n\\t\\talign-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant {\\n\\t\\tjustify-content: flex-start;\\n\\t\\talign-content: center;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant ::slotted(*) {\\n\\t\\tflex: 0 0 auto;\\n\\t}\\n\\n\\t.flex-variant ::slotted(*) {\\n\\t\\tflex: 1 1 auto;\\n\\t\\tbox-sizing: border-box;\\n\\t\\twidth: calc(var(--z-layout-column-width, 400px) + var(--z-layout-spacing, 16px)) !important;\\n\\t}\\n\\n\\t.grid-variant ::slotted(*) {\\n\\t\\tbox-sizing: border-box;\\n\\t\\tmax-width: 100% !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(:not(.filler)) {\\n\\t\\tborder: calc(var(--z-layout-spacing, 16px) / 2) solid transparent !important;\\n\\t\\tbackground-clip: padding-box !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(.filler) {\\n\\t\\torder: 2147483647;\\n\\t}\\n</style>\\n<div class=\\\"root\\\">\\n\\t<slot></slot>\\n</div>\\n\"","import { ElementBase } from \"@cas-smartdesign/element-base\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ZLayout.ID]: ZLayout;\n }\n}\n\nimport { default as htmlTemplate } from \"./template.html?raw\";\n\nexport class ZLayout extends ElementBase {\n public is(): string {\n return ZLayout.ID;\n }\n public static readonly ID = \"sd-z-layout\";\n\n private childListObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n private fillers: HTMLElement[] = [];\n private lastKnownWidth = -1;\n\n private rootElement: HTMLElement;\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n }\n\n public get fixedColumns(): boolean {\n return this.hasAttribute(\"fixed-columns\") && this.getAttribute(\"fixed-columns\") !== \"false\";\n }\n\n public set fixedColumns(fixedColumns: boolean) {\n if (fixedColumns) {\n this.setAttribute(\"fixed-columns\", \"\");\n } else {\n this.removeAttribute(\"fixed-columns\");\n }\n }\n\n public get columnWidth(): string {\n if (this.hasAttribute(\"column-width\")) {\n return this.getAttribute(\"column-width\");\n }\n return getComputedStyle(this).getPropertyValue(\"--z-layout-column-width\");\n }\n\n public set columnWidth(columnWidth: string) {\n this.setAttribute(\"column-width\", columnWidth);\n }\n\n static get observedAttributes() {\n return [\"column-width\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.rootElement) {\n this.rootElement = this.shadowRoot.querySelector(\".root\");\n\n if (this.isGridLayoutSupported()) {\n this.rootElement.className = \"root grid-variant\";\n } else {\n this.rootElement.className = \"root flex-variant\";\n\n this.childListObserver = new MutationObserver((mutationsList) => {\n const realChildMutation =\n mutationsList\n .reduce((results, item) => [...results, ...item.addedNodes, ...item.removedNodes], [])\n .filter((node) => ((node as HTMLElement).className || \"\").indexOf(\"filler\") === -1).length >\n 0;\n if (realChildMutation)\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n });\n this.resizeObserver = new ResizeObserver((entries, observer) => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n }\n });\n }\n this.checkMarginUsageOnDirectChildren();\n }\n if (this.childListObserver) {\n this.childListObserver.observe(this, { childList: true });\n }\n if (this.resizeObserver) {\n this.resizeObserver.observe(this);\n }\n }\n\n public attributeChangedCallback() {\n this.onColumnWidthChange();\n }\n\n private isGridLayoutSupported(): boolean {\n const edge = navigator.userAgent.indexOf(\"Edge/\") > -1;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const context: any = window;\n const supportsCSS = context.CSS && context.CSS.supports;\n return !edge && supportsCSS && CSS.supports(\"display\", \"grid\");\n }\n\n private updateFillers() {\n if (this.childElementCount > 0) {\n if (!this.fixedColumns) {\n let prevColumnWidth = Number.POSITIVE_INFINITY;\n let measuringFillerElement = undefined;\n while (this.currentColumnWidth() < prevColumnWidth) {\n prevColumnWidth = this.currentColumnWidth();\n\n measuringFillerElement = this.appendFiller();\n\n this.flushShadyDomChanges();\n }\n\n this.fillers.length = this.fillers.length - 1;\n this.removeChild(measuringFillerElement);\n\n const columnCount = this.offsetWidth / prevColumnWidth;\n if (isFinite(columnCount)) {\n while (columnCount - 1 > this.fillers.length) {\n this.appendFiller();\n }\n }\n } else if (this.fillers.length > 0) {\n this.fillers.forEach((filler) => this.removeChild(filler));\n this.fillers = [];\n }\n }\n }\n\n private appendFiller() {\n const filler = document.createElement(\"div\");\n filler.className = \"filler\";\n this.fillers.push(filler);\n this.appendChild(filler);\n return filler;\n }\n\n private flushShadyDomChanges() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const shadyDom = (window as any).ShadyDOM;\n if (shadyDom && shadyDom.flush) {\n shadyDom.flush();\n }\n }\n\n private checkMarginUsageOnDirectChildren() {\n requestAnimationFrame(() => {\n for (let i = 0; i < this.children.length; i++) {\n const child = this.children[i];\n if (child.className.indexOf(\"filler\") === -1) {\n const computedStyle = getComputedStyle(child);\n if (parseInt(computedStyle.marginLeft, 10) !== 0 || parseInt(computedStyle.marginRight, 10) !== 0) {\n console.warn(\n \"[sd-z-layout] It is not recommended to use horizontal margins on direct children of the sd-z-layout element \" +\n \"because the flex-variant (which is used in browsers without css grid support) \" +\n \"might have layouting problems.\\nPlease consider to apply such margins inside these elements instead.\",\n );\n return;\n }\n }\n }\n });\n }\n\n private currentColumnWidth() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (const child of this.children as any) {\n if (child.offsetWidth) {\n return child.offsetWidth;\n }\n }\n }\n\n private onColumnWidthChange() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const ShadyCSS = (window as any).ShadyCSS;\n if (this.hasAttribute(\"column-width\")) {\n this.style.setProperty(\"--z-layout-column-width\", this.getAttribute(\"column-width\"));\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": this.getAttribute(\"column-width\") });\n }\n } else {\n this.style.removeProperty(\"--z-layout-column-width\");\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": \"\" });\n }\n }\n }\n\n public disconnectedCallback() {\n if (this.childListObserver) {\n this.childListObserver.disconnect();\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) return;\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n}\nif (!customElements.get(ZLayout.ID)) {\n customElements.define(ZLayout.ID, ZLayout);\n}\n"],"names":["htmlTemplate","_ZLayout","ElementBase","template","fixedColumns","columnWidth","mutationsList","results","item","node","entries","observer","edge","context","supportsCSS","filler","prevColumnWidth","measuringFillerElement","columnCount","shadyDom","i","child","computedStyle","ShadyCSS","id","actor","ZLayout"],"mappings":"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"}
1
+ {"version":3,"file":"zlayout.mjs","sources":["../template.html?raw","../zlayout.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t}\\n\\n\\t.grid-variant {\\n\\t\\tdisplay: grid;\\n\\t\\tgrid-gap: var(--z-layout-spacing, 16px);\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(var(--z-layout-column-width, 400px), 1fr));\\n\\t\\tgrid-template-columns: repeat(auto-fill, minmax(min(100%, var(--z-layout-column-width, 400px)), 1fr));\\n\\t\\tjustify-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .grid-variant {\\n\\t\\tgrid-template-columns: repeat(auto-fit, var(--z-layout-column-width, 400px));\\n\\t\\tgrid-template-columns: repeat(auto-fit, min(100%, var(--z-layout-column-width, 400px)));\\n\\t\\tjustify-content: flex-start;\\n\\t}\\n\\n\\t.flex-variant {\\n\\t\\tdisplay: flex;\\n\\t\\twidth: calc(100% + var(--z-layout-spacing, 16px));\\n\\t\\tmargin: calc(-0.5 * var(--z-layout-spacing, 16px));\\n\\t\\tbox-sizing: border-box;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tjustify-content: space-around;\\n\\t\\talign-content: space-around;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant {\\n\\t\\tjustify-content: flex-start;\\n\\t\\talign-content: center;\\n\\t}\\n\\n\\t:host([fixed-columns]) .flex-variant ::slotted(*) {\\n\\t\\tflex: 0 0 auto;\\n\\t}\\n\\n\\t.flex-variant ::slotted(*) {\\n\\t\\tflex: 1 1 auto;\\n\\t\\tbox-sizing: border-box;\\n\\t\\twidth: calc(var(--z-layout-column-width, 400px) + var(--z-layout-spacing, 16px)) !important;\\n\\t}\\n\\n\\t.grid-variant ::slotted(*) {\\n\\t\\tbox-sizing: border-box;\\n\\t\\tmax-width: 100% !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(:not(.filler)) {\\n\\t\\tborder: calc(var(--z-layout-spacing, 16px) / 2) solid transparent !important;\\n\\t\\tbackground-clip: padding-box !important;\\n\\t}\\n\\n\\t.flex-variant ::slotted(.filler) {\\n\\t\\torder: 2147483647;\\n\\t}\\n</style>\\n<div class=\\\"root\\\">\\n\\t<slot></slot>\\n</div>\\n\"","import { ElementBase } from \"@cas-smartdesign/element-base\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ZLayout.ID]: ZLayout;\n }\n}\n\nimport { default as htmlTemplate } from \"./template.html?raw\";\n\nexport class ZLayout extends ElementBase {\n public is(): string {\n return ZLayout.ID;\n }\n public static readonly ID = \"sd-z-layout\";\n\n private childListObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n private fillers: HTMLElement[] = [];\n private lastKnownWidth = -1;\n\n private rootElement: HTMLElement;\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n }\n\n public get fixedColumns(): boolean {\n return this.hasAttribute(\"fixed-columns\") && this.getAttribute(\"fixed-columns\") !== \"false\";\n }\n\n public set fixedColumns(fixedColumns: boolean) {\n if (fixedColumns) {\n this.setAttribute(\"fixed-columns\", \"\");\n } else {\n this.removeAttribute(\"fixed-columns\");\n }\n }\n\n public get columnWidth(): string {\n if (this.hasAttribute(\"column-width\")) {\n return this.getAttribute(\"column-width\");\n }\n return getComputedStyle(this).getPropertyValue(\"--z-layout-column-width\");\n }\n\n public set columnWidth(columnWidth: string) {\n this.setAttribute(\"column-width\", columnWidth);\n }\n\n static get observedAttributes() {\n return [\"column-width\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.rootElement) {\n this.rootElement = this.shadowRoot.querySelector(\".root\");\n\n if (this.isGridLayoutSupported()) {\n this.rootElement.className = \"root grid-variant\";\n } else {\n this.rootElement.className = \"root flex-variant\";\n\n this.childListObserver = new MutationObserver((mutationsList) => {\n const realChildMutation =\n mutationsList\n .reduce((results, item) => [...results, ...item.addedNodes, ...item.removedNodes], [])\n .filter((node) => ((node as HTMLElement).className || \"\").indexOf(\"filler\") === -1).length >\n 0;\n if (realChildMutation)\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n });\n this.resizeObserver = new ResizeObserver((entries, observer) => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n this.debounce(\"update-fillers\", () => {\n this.updateFillers();\n });\n }\n });\n }\n this.checkMarginUsageOnDirectChildren();\n }\n if (this.childListObserver) {\n this.childListObserver.observe(this, { childList: true });\n }\n if (this.resizeObserver) {\n this.resizeObserver.observe(this);\n }\n }\n\n public attributeChangedCallback() {\n this.onColumnWidthChange();\n }\n\n private isGridLayoutSupported(): boolean {\n const edge = navigator.userAgent.indexOf(\"Edge/\") > -1;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const context: any = window;\n const supportsCSS = context.CSS && context.CSS.supports;\n return !edge && supportsCSS && CSS.supports(\"display\", \"grid\");\n }\n\n private updateFillers() {\n if (this.childElementCount > 0) {\n if (!this.fixedColumns) {\n let prevColumnWidth = Number.POSITIVE_INFINITY;\n let measuringFillerElement = undefined;\n while (this.currentColumnWidth() < prevColumnWidth) {\n prevColumnWidth = this.currentColumnWidth();\n\n measuringFillerElement = this.appendFiller();\n\n this.flushShadyDomChanges();\n }\n\n this.fillers.length = this.fillers.length - 1;\n this.removeChild(measuringFillerElement);\n\n const columnCount = this.offsetWidth / prevColumnWidth;\n if (isFinite(columnCount)) {\n while (columnCount - 1 > this.fillers.length) {\n this.appendFiller();\n }\n }\n } else if (this.fillers.length > 0) {\n this.fillers.forEach((filler) => this.removeChild(filler));\n this.fillers = [];\n }\n }\n }\n\n private appendFiller() {\n const filler = document.createElement(\"div\");\n filler.className = \"filler\";\n this.fillers.push(filler);\n this.appendChild(filler);\n return filler;\n }\n\n private flushShadyDomChanges() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const shadyDom = (window as any).ShadyDOM;\n if (shadyDom && shadyDom.flush) {\n shadyDom.flush();\n }\n }\n\n private checkMarginUsageOnDirectChildren() {\n requestAnimationFrame(() => {\n for (let i = 0; i < this.children.length; i++) {\n const child = this.children[i];\n if (child.className.indexOf(\"filler\") === -1) {\n const computedStyle = getComputedStyle(child);\n if (parseInt(computedStyle.marginLeft, 10) !== 0 || parseInt(computedStyle.marginRight, 10) !== 0) {\n console.warn(\n \"[sd-z-layout] It is not recommended to use horizontal margins on direct children of the sd-z-layout element \" +\n \"because the flex-variant (which is used in browsers without css grid support) \" +\n \"might have layouting problems.\\nPlease consider to apply such margins inside these elements instead.\",\n );\n return;\n }\n }\n }\n });\n }\n\n private currentColumnWidth() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n for (const child of this.children as any) {\n if (child.offsetWidth) {\n return child.offsetWidth;\n }\n }\n }\n\n private onColumnWidthChange() {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const ShadyCSS = (window as any).ShadyCSS;\n if (this.hasAttribute(\"column-width\")) {\n this.style.setProperty(\"--z-layout-column-width\", this.getAttribute(\"column-width\"));\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": this.getAttribute(\"column-width\") });\n }\n } else {\n this.style.removeProperty(\"--z-layout-column-width\");\n if (ShadyCSS) {\n ShadyCSS.styleSubtree(this, { \"--z-layout-column-width\": \"\" });\n }\n }\n }\n\n public disconnectedCallback() {\n if (this.childListObserver) {\n this.childListObserver.disconnect();\n }\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) return;\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n}\nif (!customElements.get(ZLayout.ID)) {\n customElements.define(ZLayout.ID, ZLayout);\n}\n"],"names":["htmlTemplate","_ZLayout","ElementBase","template","fixedColumns","columnWidth","mutationsList","results","item","node","entries","observer","edge","context","supportsCSS","filler","prevColumnWidth","measuringFillerElement","columnCount","shadyDom","i","child","computedStyle","ShadyCSS","id","actor","ZLayout"],"mappings":"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"}
package/npm-third-party-licenses.json CHANGED
@@ -1,15 +1,20 @@
1
1
  {
2
- "@cypress/vite-dev-server@5.0.7": {
2
+ "@cypress/vite-dev-server@7.0.0": {
3
3
  "licenses": "MIT",
4
4
  "repository": "https://github.com/cypress-io/cypress",
5
5
  "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
6
6
  },
7
- "@rollup/plugin-node-resolve@15.2.3": {
7
+ "@eslint/js@9.34.0": {
8
+ "licenses": "MIT",
9
+ "repository": "https://github.com/eslint/eslint",
10
+ "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
11
+ },
12
+ "@rollup/plugin-node-resolve@16.0.1": {
8
13
  "licenses": "MIT",
9
14
  "repository": "https://github.com/rollup/plugins",
10
15
  "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
11
16
  },
12
- "@types/node@20.10.6": {
17
+ "@types/node@24.3.0": {
13
18
  "licenses": "MIT",
14
19
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
15
20
  "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
@@ -19,47 +24,42 @@
19
24
  "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
20
25
  "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
21
26
  },
22
- "@typescript-eslint/eslint-plugin@6.17.0": {
27
+ "@typescript-eslint/eslint-plugin@8.41.0": {
23
28
  "licenses": "MIT",
24
29
  "repository": "https://github.com/typescript-eslint/typescript-eslint",
25
30
  "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
26
31
  },
27
- "@typescript-eslint/parser@6.17.0": {
28
- "licenses": "BSD-2-Clause",
32
+ "@typescript-eslint/parser@8.41.0": {
33
+ "licenses": "MIT",
29
34
  "repository": "https://github.com/typescript-eslint/typescript-eslint",
30
35
  "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
31
36
  },
32
- "@vitest/coverage-v8@1.1.1": {
37
+ "@vitest/coverage-v8@3.2.4": {
33
38
  "licenses": "MIT",
34
39
  "repository": "https://github.com/vitest-dev/vitest",
35
40
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
36
41
  },
37
- "@vitest/ui@1.1.1": {
42
+ "@vitest/ui@3.2.4": {
38
43
  "licenses": "MIT",
39
44
  "repository": "https://github.com/vitest-dev/vitest",
40
45
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
41
46
  },
42
- "axe-core@4.8.3": {
47
+ "axe-core@4.10.3": {
43
48
  "licenses": "MPL-2.0",
44
49
  "repository": "https://github.com/dequelabs/axe-core",
45
50
  "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
46
51
  },
47
- "cypress-axe@1.5.0": {
52
+ "cypress-axe@1.7.0": {
48
53
  "licenses": "MIT",
49
54
  "repository": "https://github.com/component-driven/cypress-axe",
50
55
  "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
51
56
  },
52
- "cypress-real-events@1.13.0": {
53
- "licenses": "MIT",
54
- "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
55
- "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
56
- },
57
- "cypress@13.6.2": {
57
+ "cypress@15.0.0": {
58
58
  "licenses": "MIT",
59
59
  "repository": "https://github.com/cypress-io/cypress",
60
60
  "licenseUrl": "https://cypress.io"
61
61
  },
62
- "esbuild@0.19.11": {
62
+ "esbuild@0.25.9": {
63
63
  "licenses": "MIT",
64
64
  "repository": "https://github.com/evanw/esbuild",
65
65
  "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
@@ -69,52 +69,52 @@
69
69
  "repository": "https://github.com/google/eslint-config-google",
70
70
  "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
71
71
  },
72
- "eslint-config-prettier@9.1.0": {
72
+ "eslint-config-prettier@10.1.8": {
73
73
  "licenses": "MIT",
74
74
  "repository": "https://github.com/prettier/eslint-config-prettier",
75
75
  "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
76
76
  },
77
- "eslint@8.56.0": {
77
+ "eslint@9.34.0": {
78
78
  "licenses": "MIT",
79
79
  "repository": "https://github.com/eslint/eslint",
80
80
  "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
81
81
  },
82
- "github-markdown-css@5.5.0": {
82
+ "github-markdown-css@5.8.1": {
83
83
  "licenses": "MIT",
84
84
  "repository": "https://github.com/sindresorhus/github-markdown-css",
85
85
  "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
86
86
  },
87
- "highlight.js@11.9.0": {
87
+ "highlight.js@11.11.1": {
88
88
  "licenses": "BSD-3-Clause",
89
89
  "repository": "https://github.com/highlightjs/highlight.js",
90
90
  "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
91
91
  },
92
- "junit-report-builder@3.1.0": {
92
+ "junit-report-builder@5.1.1": {
93
93
  "licenses": "MIT",
94
94
  "repository": "https://github.com/davidparsson/junit-report-builder",
95
95
  "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
96
96
  },
97
- "lint-staged@15.2.0": {
97
+ "lint-staged@16.1.5": {
98
98
  "licenses": "MIT",
99
- "repository": "https://github.com/okonet/lint-staged",
100
- "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
99
+ "repository": "https://github.com/lint-staged/lint-staged",
100
+ "licenseUrl": "https://github.com/lint-staged/lint-staged/raw/HEAD/LICENSE"
101
101
  },
102
- "marked@11.1.1": {
102
+ "marked@16.2.1": {
103
103
  "licenses": "MIT",
104
104
  "repository": "https://github.com/markedjs/marked",
105
105
  "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
106
106
  },
107
- "postcss-prefix-selector@1.16.0": {
107
+ "postcss-prefix-selector@2.1.1": {
108
108
  "licenses": "MIT",
109
109
  "repository": "https://github.com/RadValentin/postcss-prefix-selector",
110
110
  "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
111
111
  },
112
- "postcss@8.4.32": {
112
+ "postcss@8.5.6": {
113
113
  "licenses": "MIT",
114
114
  "repository": "https://github.com/postcss/postcss",
115
115
  "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
116
116
  },
117
- "prettier@3.1.1": {
117
+ "prettier@3.6.2": {
118
118
  "licenses": "MIT",
119
119
  "repository": "https://github.com/prettier/prettier",
120
120
  "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
@@ -124,62 +124,67 @@
124
124
  "repository": "https://github.com/sindresorhus/resolve-pkg",
125
125
  "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
126
126
  },
127
- "sass@1.69.6": {
127
+ "sass@1.91.0": {
128
128
  "licenses": "MIT",
129
129
  "repository": "https://github.com/sass/dart-sass",
130
130
  "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
131
131
  },
132
- "stylelint-config-recommended-scss@14.0.0": {
132
+ "stylelint-config-recommended-scss@16.0.0": {
133
133
  "licenses": "MIT",
134
134
  "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
135
135
  "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
136
136
  },
137
- "stylelint-config-standard@36.0.0": {
137
+ "stylelint-config-standard@39.0.0": {
138
138
  "licenses": "MIT",
139
139
  "repository": "https://github.com/stylelint/stylelint-config-standard",
140
140
  "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
141
141
  },
142
- "stylelint-scss@6.0.0": {
142
+ "stylelint-scss@6.12.1": {
143
143
  "licenses": "MIT",
144
144
  "repository": "https://github.com/stylelint-scss/stylelint-scss",
145
145
  "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
146
146
  },
147
- "stylelint@16.1.0": {
147
+ "stylelint@16.23.1": {
148
148
  "licenses": "MIT",
149
149
  "repository": "https://github.com/stylelint/stylelint",
150
150
  "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
151
151
  },
152
- "tsup@8.0.1": {
152
+ "tsup@8.5.0": {
153
153
  "licenses": "MIT",
154
154
  "repository": "https://github.com/egoist/tsup",
155
155
  "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
156
156
  },
157
- "turbo@1.11.2": {
158
- "licenses": "MPL-2.0",
159
- "repository": "https://github.com/vercel/turbo",
160
- "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
157
+ "turbo@2.5.6": {
158
+ "licenses": "MIT",
159
+ "repository": "https://github.com/vercel/turborepo",
160
+ "licenseUrl": "https://github.com/vercel/turborepo/raw/HEAD/LICENSE"
161
+ },
162
+ "typescript-eslint@8.41.0": {
163
+ "licenses": "MIT",
164
+ "repository": "https://github.com/typescript-eslint/typescript-eslint",
165
+ "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
161
166
  },
162
- "typescript@5.3.3": {
167
+ "typescript@5.9.2": {
163
168
  "licenses": "Apache-2.0",
164
- "repository": "https://github.com/Microsoft/TypeScript",
165
- "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
169
+ "repository": "https://github.com/microsoft/TypeScript",
170
+ "licenseUrl": "https://github.com/microsoft/TypeScript/raw/HEAD/LICENSE.txt"
166
171
  },
167
- "vite-tsconfig-paths@4.2.3": {
172
+ "vite-tsconfig-paths@5.1.4": {
168
173
  "licenses": "MIT",
169
174
  "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
170
175
  "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
171
176
  },
172
- "vite@5.0.10": {
177
+ "vite@7.1.3": {
173
178
  "licenses": "MIT",
174
179
  "repository": "https://github.com/vitejs/vite",
175
180
  "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
176
181
  },
177
- "vitest@1.1.1": {
182
+ "vitest@3.2.4": {
178
183
  "licenses": "MIT",
179
184
  "repository": "https://github.com/vitest-dev/vitest",
180
185
  "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
181
186
  },
182
- "yargs@17.7.2": {
187
+ "yargs@18.0.0": {
183
188
  "licenses": "MIT",
184
189
  "repository": "https://github.com/yargs/yargs",
185
190
  "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/z-layout",
3
- "version": "6.0.1",
3
+ "version": "6.1.0",
4
4
  "description": "A custom element which positions child elements sequentially (from left to right, top to bottom).",
5
5
  "main": "dist/zlayout-with-externals.js",
6
6
  "module": "dist/zlayout.mjs",
7
7
  "types": "dist/zlayout.d.ts",
8
8
  "license": "SEE LICENSE IN LICENSE",
9
9
  "dependencies": {
10
- "@cas-smartdesign/element-base": "^5.0.1"
10
+ "@cas-smartdesign/element-base": "^5.1.0"
11
11
  },
12
12
  "devDependencies": {
13
- "@cas-smartdesign/element-preview": "^0.2.1",
14
- "@cas-smartdesign/license-generator": "^1.6.1"
13
+ "@cas-smartdesign/license-generator": "^1.7.0",
14
+ "@cas-smartdesign/element-preview": "^0.3.0"
15
15
  },
16
16
  "files": [
17
17
  "dist",
package/readme.md CHANGED
@@ -30,5 +30,3 @@ A custom element which positions child elements sequentially (from left to right
30
30
  - If a browser does not support the display: grid (or supports only the older version of the [specification](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) like IE 11) then the children have to use the border to simulate the spacing. Thus applying another border would brake it.
31
31
  - Note that although Edge supports the new specification of grid but has critical issues with it therefore the flex variant is used there.
32
32
  - The direct children of the z-layout may not use horizontal margin values due to the limitation of the flex variant.
33
-
34
- ## Examples