@siemens/ix 0.0.0-pr-2297-20251211061723 → 0.0.0-pr-2300-20260107140403
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.
- package/components/index.js +1 -1
- package/components/index.js.map +1 -1
- package/components/ix-action-card.js +8 -3
- package/components/ix-action-card.js.map +1 -1
- package/components/ix-application.js +1 -1
- package/components/ix-card-list.js +1 -1
- package/components/ix-card.js +1 -1
- package/components/ix-menu.js +1 -1
- package/components/ix-message-bar.js +1 -1
- package/components/ix-message-bar.js.map +1 -1
- package/components/ix-pane-layout.js +2 -1
- package/components/ix-pane-layout.js.map +1 -1
- package/components/ix-push-card.js +8 -3
- package/components/ix-push-card.js.map +1 -1
- package/components/ix-toast-container.js +5 -4
- package/components/ix-toast-container.js.map +1 -1
- package/components/ix-toast.js +1 -1
- package/components/{p-CsHYWHE6.js → p-G5i1Siog.js} +15 -5
- package/components/p-G5i1Siog.js.map +1 -0
- package/components/{p-hwPzPVf8.js → p-rFxiFp44.js} +12 -6
- package/components/p-rFxiFp44.js.map +1 -0
- package/components/{p-DlVaL0Yi.js → p-tpxSImkl.js} +9 -4
- package/components/p-tpxSImkl.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/ix-action-card.cjs.entry.js +5 -1
- package/dist/cjs/ix-action-card.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-application.cjs.entry.js +1 -1
- package/dist/cjs/ix-card.ix-card-content.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-card_2.cjs.entry.js +8 -3
- package/dist/cjs/ix-menu.cjs.entry.js +1 -1
- package/dist/cjs/ix-message-bar.cjs.entry.js +1 -1
- package/dist/cjs/ix-message-bar.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-pane-layout.cjs.entry.js +2 -1
- package/dist/cjs/ix-pane-layout.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-push-card.cjs.entry.js +5 -1
- package/dist/cjs/ix-push-card.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-toast-container.cjs.entry.js +4 -3
- package/dist/cjs/ix-toast-container.entry.cjs.js.map +1 -1
- package/dist/cjs/ix-toast.cjs.entry.js +6 -2
- package/dist/cjs/ix-toast.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/cjs/{theme-switcher-76Td30il.js → theme-switcher-BCyZa6wG.js} +15 -5
- package/dist/cjs/theme-switcher-BCyZa6wG.js.map +1 -0
- package/dist/collection/components/action-card/action-card.js +25 -1
- package/dist/collection/components/action-card/action-card.js.map +1 -1
- package/dist/collection/components/card/card.css +49 -0
- package/dist/collection/components/card/card.js +27 -2
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/message-bar/message-bar.css +0 -11
- package/dist/collection/components/pane-layout/pane-layout.js +2 -1
- package/dist/collection/components/pane-layout/pane-layout.js.map +1 -1
- package/dist/collection/components/push-card/push-card.js +25 -1
- package/dist/collection/components/push-card/push-card.js.map +1 -1
- package/dist/collection/components/toast/toast-container.js +4 -3
- package/dist/collection/components/toast/toast-container.js.map +1 -1
- package/dist/collection/components/toast/toast-utils.js.map +1 -1
- package/dist/collection/components/toast/toast.js +26 -2
- package/dist/collection/components/toast/toast.js.map +1 -1
- package/dist/collection/components/utils/theme-switcher.js +13 -3
- package/dist/collection/components/utils/theme-switcher.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/ix-action-card.entry.js +5 -1
- package/dist/esm/ix-action-card.entry.js.map +1 -1
- package/dist/esm/ix-application.entry.js +1 -1
- package/dist/esm/ix-card.ix-card-content.entry.js.map +1 -1
- package/dist/esm/ix-card_2.entry.js +8 -3
- package/dist/esm/ix-menu.entry.js +1 -1
- package/dist/esm/ix-message-bar.entry.js +1 -1
- package/dist/esm/ix-message-bar.entry.js.map +1 -1
- package/dist/esm/ix-pane-layout.entry.js +2 -1
- package/dist/esm/ix-pane-layout.entry.js.map +1 -1
- package/dist/esm/ix-push-card.entry.js +5 -1
- package/dist/esm/ix-push-card.entry.js.map +1 -1
- package/dist/esm/ix-toast-container.entry.js +4 -3
- package/dist/esm/ix-toast-container.entry.js.map +1 -1
- package/dist/esm/ix-toast.entry.js +6 -2
- package/dist/esm/ix-toast.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/esm/{theme-switcher-DRqJGlG2.js → theme-switcher-EbjilqRl.js} +15 -5
- package/dist/esm/theme-switcher-EbjilqRl.js.map +1 -0
- package/dist/siemens-ix/index.esm.js +1 -1
- package/dist/siemens-ix/index.esm.js.map +1 -1
- package/dist/siemens-ix/ix-action-card.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-card.ix-card-content.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-message-bar.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-pane-layout.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-push-card.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-toast-container.entry.esm.js.map +1 -1
- package/dist/siemens-ix/ix-toast.entry.esm.js.map +1 -1
- package/dist/siemens-ix/{p-6dc6eb63.entry.js → p-01e16377.entry.js} +2 -2
- package/dist/siemens-ix/{p-6dc6eb63.entry.js.map → p-01e16377.entry.js.map} +1 -1
- package/dist/siemens-ix/p-2e1bb4bf.entry.js +2 -0
- package/dist/siemens-ix/p-2e1bb4bf.entry.js.map +1 -0
- package/dist/siemens-ix/p-3c297dc0.entry.js +2 -0
- package/dist/siemens-ix/p-3c297dc0.entry.js.map +1 -0
- package/dist/siemens-ix/{p-367df024.entry.js → p-84178b22.entry.js} +2 -2
- package/dist/siemens-ix/p-84178b22.entry.js.map +1 -0
- package/dist/siemens-ix/p-944a39a6.entry.js +2 -0
- package/dist/siemens-ix/p-944a39a6.entry.js.map +1 -0
- package/dist/siemens-ix/{p-b76df1c7.entry.js → p-9f7d9525.entry.js} +2 -2
- package/dist/siemens-ix/p-9f7d9525.entry.js.map +1 -0
- package/dist/siemens-ix/p-G5i1Siog.js +2 -0
- package/dist/siemens-ix/p-G5i1Siog.js.map +1 -0
- package/dist/siemens-ix/{p-8f17f6ec.entry.js → p-ec9dc8d8.entry.js} +2 -2
- package/dist/siemens-ix/p-ec9dc8d8.entry.js.map +1 -0
- package/dist/siemens-ix/{p-35d6b656.entry.js → p-f5dd421a.entry.js} +2 -2
- package/dist/siemens-ix/{p-f27c0a6c.entry.js → p-f5f9940c.entry.js} +2 -2
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/types/components/action-card/action-card.d.ts +4 -0
- package/dist/types/components/card/card.d.ts +4 -0
- package/dist/types/components/push-card/push-card.d.ts +4 -0
- package/dist/types/components/toast/toast-utils.d.ts +4 -0
- package/dist/types/components/toast/toast.d.ts +4 -0
- package/dist/types/components.d.ts +40 -0
- package/hydrate/index.js +51 -18
- package/hydrate/index.mjs +51 -18
- package/package.json +1 -1
- package/components/p-CsHYWHE6.js.map +0 -1
- package/components/p-DlVaL0Yi.js.map +0 -1
- package/components/p-hwPzPVf8.js.map +0 -1
- package/dist/cjs/theme-switcher-76Td30il.js.map +0 -1
- package/dist/esm/theme-switcher-DRqJGlG2.js.map +0 -1
- package/dist/siemens-ix/p-2597a988.entry.js +0 -2
- package/dist/siemens-ix/p-2597a988.entry.js.map +0 -1
- package/dist/siemens-ix/p-33fcea65.entry.js +0 -2
- package/dist/siemens-ix/p-33fcea65.entry.js.map +0 -1
- package/dist/siemens-ix/p-367df024.entry.js.map +0 -1
- package/dist/siemens-ix/p-8f17f6ec.entry.js.map +0 -1
- package/dist/siemens-ix/p-CsHYWHE6.js +0 -2
- package/dist/siemens-ix/p-CsHYWHE6.js.map +0 -1
- package/dist/siemens-ix/p-b76df1c7.entry.js.map +0 -1
- package/dist/siemens-ix/p-c1160cf8.entry.js +0 -2
- package/dist/siemens-ix/p-c1160cf8.entry.js.map +0 -1
- /package/dist/siemens-ix/{p-35d6b656.entry.js.map → p-f5dd421a.entry.js.map} +0 -0
- /package/dist/siemens-ix/{p-f27c0a6c.entry.js.map → p-f5f9940c.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-switcher-BCyZa6wG.js","sources":["src/components/utils/theme-switcher.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { type LiteralStringUnion } from './type-helper';\nimport { TypedEvent } from './typed-event';\n\nexport type ThemeVariant = 'light' | 'dark';\n\nconst dataIxTheme = 'data-ix-theme';\nconst dataIxColorSchema = 'data-ix-color-schema';\n\nclass ThemeSwitcher {\n readonly prefixTheme = 'theme-';\n readonly suffixLight = '-light';\n readonly suffixDark = '-dark';\n readonly defaultTheme = 'theme-classic-dark';\n\n mutationObserver?: MutationObserver;\n _themeChanged = new TypedEvent<string>();\n _schemaChanged = new TypedEvent<string>();\n\n public get themeChanged() {\n return this._themeChanged;\n }\n\n public get schemaChanged() {\n return this._schemaChanged;\n }\n\n public hasVariantSuffix(className: string) {\n return (\n className.endsWith(this.suffixDark) ||\n className.endsWith(this.suffixLight)\n );\n }\n\n private isThemeClass(className: string) {\n return (\n className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n );\n }\n\n public setTheme(themeName: string, systemAppearance = false) {\n if (this.isThemeClass(themeName)) {\n this.replaceThemeClass(themeName);\n } else {\n document.documentElement.setAttribute(dataIxTheme, themeName);\n }\n\n if (systemAppearance) {\n const currentSystemAppearance = getCurrentSystemAppearance();\n this.setVariant(currentSystemAppearance);\n }\n }\n\n private replaceThemeClass(themeName: string) {\n const oldThemes: string[] = [];\n Array.from(document.documentElement.classList)\n .filter((className) => className && this.isThemeClass(className))\n .forEach((className) => {\n oldThemes.push(className);\n });\n\n document.documentElement.classList.remove(...oldThemes);\n document.documentElement.classList.add(themeName);\n }\n\n public toggleMode() {\n if (document.documentElement.hasAttribute(dataIxColorSchema)) {\n const currentSchema = this.getDataColorSchema(document.documentElement)!;\n document.documentElement.setAttribute(\n dataIxColorSchema,\n currentSchema === 'dark' ? 'light' : 'dark'\n );\n return;\n }\n\n const oldThemes: string[] = [];\n Array.from(document.documentElement.classList)\n .filter((className) => className && this.isThemeClass(className))\n .forEach((className) => {\n oldThemes.push(className);\n });\n\n if (oldThemes.length === 0) {\n document.documentElement.classList.add(\n this.getOppositeMode(this.defaultTheme)\n );\n return;\n }\n\n oldThemes.forEach((themeName) => {\n document.documentElement.classList.replace(\n themeName,\n this.getOppositeMode(themeName)\n );\n });\n }\n\n private getDataColorSchema(target: HTMLElement) {\n return target.getAttribute(dataIxColorSchema);\n }\n\n public getCurrentTheme() {\n const themeClass = Array.from(document.documentElement.classList).find(\n (className) => this.isThemeClass(className)\n );\n\n if (themeClass) {\n return themeClass;\n }\n\n const dataTheme = document.documentElement.getAttribute(dataIxTheme);\n const dataColorSchema =\n document.documentElement.getAttribute(dataIxColorSchema);\n\n const theme = dataTheme || 'classic';\n const variant = dataColorSchema || getCurrentSystemAppearance();\n\n return `theme-${theme}-${variant}`;\n }\n\n public setVariant(variant: ThemeVariant = getCurrentSystemAppearance()) {\n if (this.getDataColorSchema(document.documentElement)) {\n document.documentElement.setAttribute(dataIxColorSchema, variant);\n return;\n }\n\n const currentTheme = this.getCurrentTheme();\n if (!currentTheme) {\n document.documentElement.setAttribute(dataIxColorSchema, variant);\n return;\n }\n\n document.documentElement.classList.remove(currentTheme);\n\n if (currentTheme.endsWith(this.suffixDark)) {\n document.documentElement.classList.add(\n currentTheme.replace(/-dark$/g, `-${variant}`)\n );\n }\n\n if (currentTheme.endsWith(this.suffixLight)) {\n document.documentElement.classList.add(\n currentTheme.replace(/-light$/g, `-${variant}`)\n );\n }\n\n document.documentElement.setAttribute(dataIxColorSchema, variant);\n }\n\n private getOppositeMode(themeName: string) {\n if (themeName.endsWith(this.suffixDark)) {\n return themeName.replace(/-dark$/g, this.suffixLight);\n }\n\n if (themeName.endsWith(this.suffixLight)) {\n return themeName.replace(/-light$/g, this.suffixDark);\n }\n\n return '';\n }\n\n private splitMutations(mutations: MutationRecord[]) {\n const classMutations = mutations.filter(\n (mutation) => mutation.attributeName === 'class'\n );\n\n const dataMutations = mutations.filter(\n (mutation) =>\n mutation.attributeName === dataIxTheme ||\n mutation.attributeName === dataIxColorSchema\n );\n\n return { classMutations, dataMutations };\n }\n\n private handleClassMutations(mutations: MutationRecord[]) {\n return mutations.forEach((mutation) => {\n const { target } = mutation;\n (target as HTMLElement).classList.forEach((className) => {\n if (\n this.isThemeClass(className) &&\n !mutation.oldValue?.includes(className)\n ) {\n this._themeChanged.emit(className);\n }\n });\n });\n }\n\n private handleDataMutations(mutations: MutationRecord[]) {\n return mutations.forEach((mutation) => {\n const { target } = mutation;\n const theme = (target as Element).attributes.getNamedItem(dataIxTheme);\n if (theme?.value && mutation.oldValue !== theme.value) {\n this._themeChanged.emit(theme.value);\n }\n\n const colorSchema = (target as Element).attributes.getNamedItem(\n dataIxColorSchema\n );\n if (colorSchema?.value && mutation.oldValue !== colorSchema.value) {\n this._schemaChanged.emit(colorSchema.value);\n }\n });\n }\n\n private registerMutationObservers() {\n if (typeof (window as any) === 'undefined') {\n return;\n }\n\n if (!('MutationObserver' in window)) {\n console.warn(\n 'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n );\n return;\n }\n\n const mutationObserverConfig = {\n attributeFilter: ['class', dataIxTheme, dataIxColorSchema],\n attributeOldValue: true,\n };\n\n const handleMutations = (mutations: MutationRecord[]) => {\n const { classMutations, dataMutations } = this.splitMutations(mutations);\n\n this.handleClassMutations(classMutations);\n this.handleDataMutations(dataMutations);\n };\n\n this.mutationObserver = new MutationObserver(handleMutations);\n this.mutationObserver.observe(\n document.documentElement,\n mutationObserverConfig\n );\n }\n\n public constructor() {\n this.registerMutationObservers();\n }\n}\n\nexport type IxTheme = LiteralStringUnion<\n 'classic' | 'classic-dark' | 'classic-light'\n>;\n\nexport const getCurrentSystemAppearance = (): ThemeVariant => {\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\n if (matchMedia.matches) {\n return 'dark';\n }\n\n return 'light';\n};\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"names":["TypedEvent"],"mappings":"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"}
|
|
@@ -22,6 +22,10 @@ export class IxActionCard {
|
|
|
22
22
|
* Card selection
|
|
23
23
|
*/
|
|
24
24
|
this.selected = false;
|
|
25
|
+
/**
|
|
26
|
+
* If true, disables hover and active styles and changes cursor to default
|
|
27
|
+
*/
|
|
28
|
+
this.passive = false;
|
|
25
29
|
}
|
|
26
30
|
getSubheadingTextColor() {
|
|
27
31
|
return this.variant === 'outline' || this.variant === 'filled'
|
|
@@ -32,7 +36,7 @@ export class IxActionCard {
|
|
|
32
36
|
const ariaLabelledBy = !this.ariaLabelCard && this.heading
|
|
33
37
|
? 'ix-action-card-heading'
|
|
34
38
|
: undefined;
|
|
35
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '600ad1913e671fb47ec9da8f66e984bbde498fae' }, h("ix-card", { key: '1a8168a17a643908126f841e9cdd6d0055a62399', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, h("ix-card-content", { key: 'c138b94b131af478fee65244f32b91cdf78b31df' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'eb0252c628c75709fddae387a3b4a7abbf7c3df0' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'f47fd515fc5b8f22344dc83b808e527116238618' }))))));
|
|
36
40
|
}
|
|
37
41
|
static get is() { return "ix-action-card"; }
|
|
38
42
|
static get encapsulation() { return "shadow"; }
|
|
@@ -195,6 +199,26 @@ export class IxActionCard {
|
|
|
195
199
|
"getter": false,
|
|
196
200
|
"setter": false,
|
|
197
201
|
"reflect": false
|
|
202
|
+
},
|
|
203
|
+
"passive": {
|
|
204
|
+
"type": "boolean",
|
|
205
|
+
"attribute": "passive",
|
|
206
|
+
"mutable": false,
|
|
207
|
+
"complexType": {
|
|
208
|
+
"original": "boolean",
|
|
209
|
+
"resolved": "boolean",
|
|
210
|
+
"references": {}
|
|
211
|
+
},
|
|
212
|
+
"required": false,
|
|
213
|
+
"optional": false,
|
|
214
|
+
"docs": {
|
|
215
|
+
"tags": [],
|
|
216
|
+
"text": "If true, disables hover and active styles and changes cursor to default"
|
|
217
|
+
},
|
|
218
|
+
"getter": false,
|
|
219
|
+
"setter": false,
|
|
220
|
+
"reflect": false,
|
|
221
|
+
"defaultValue": "false"
|
|
198
222
|
}
|
|
199
223
|
};
|
|
200
224
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../../src/components/action-card/action-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAC;AAO1E,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAsB,SAAS,CAAC;QAE/C;;WAEG;QACK,SAAI,GAAuB,SAAS,CAAC;QAmB7C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"action-card.js","sourceRoot":"","sources":["../../../src/components/action-card/action-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAC;AAO1E,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAsB,SAAS,CAAC;QAE/C;;WAEG;QACK,SAAI,GAAuB,SAAS,CAAC;QAmB7C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QASzB;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;KA6DlC;IA3DS,sBAAsB;QAC5B,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC5D,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO;YACjC,CAAC,CAAC,wBAAwB;YAC1B,CAAC,CAAC,SAAS,CAAC;QAEhB,OAAO,CACL,EAAC,IAAI;YACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,gBACJ,IAAI,CAAC,aAAa,qBACb,cAAc,EAC/B,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;gBAE1C;oBACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eACE,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,gBAEP,IAAI,CAAC,aAAa,IAAI,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,GAEtD,CACZ,CAAC,CAAC,CAAC,IAAI;oBACR;wBACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,qBACE,EAAE,EAAC,wBAAwB,iBACd,WAAW,CAAC,CAAC,cAAc,CAAC,EACzC,MAAM,EAAC,IAAI,IAEV,IAAI,CAAC,OAAO,CACC,CACjB,CAAC,CAAC,CAAC,IAAI;wBACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,qBACE,MAAM,EAAC,IAAI,gBACC,IAAI,CAAC,sBAAsB,EAAE,IAExC,IAAI,CAAC,UAAU,CACF,CACjB,CAAC,CAAC,CAAC,IAAI;wBACR,8DAAa,CACT,CACU,CACV,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { ActionCardVariant } from './action-card.types';\nimport { a11yBoolean, getFallbackLabelFromIconName } from '../utils/a11y';\n\n@Component({\n tag: 'ix-action-card',\n styleUrl: 'action-card.scss',\n shadow: true,\n})\nexport class IxActionCard {\n /**\n * Card variant\n */\n @Prop() variant: ActionCardVariant = 'outline';\n\n /**\n * Card icon\n */\n @Prop() icon: string | undefined = undefined;\n\n /**\n * ARIA label for the icon\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelIcon?: string;\n\n /**\n * Card heading\n */\n @Prop() heading?: string;\n\n /**\n * Card subheading\n */\n @Prop() subheading?: string;\n\n /**\n * Card selection\n */\n @Prop() selected = false;\n\n /**\n * ARIA label for the card\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelCard?: string;\n\n /**\n * If true, disables hover and active styles and changes cursor to default\n */\n @Prop() passive: boolean = false;\n\n private getSubheadingTextColor() {\n return this.variant === 'outline' || this.variant === 'filled'\n ? 'soft'\n : undefined;\n }\n\n render() {\n const ariaLabelledBy =\n !this.ariaLabelCard && this.heading\n ? 'ix-action-card-heading'\n : undefined;\n\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n passive={this.passive}\n class={'pointer'}\n aria-label={this.ariaLabelCard}\n aria-labelledby={ariaLabelledBy}\n role={ariaLabelledBy ? 'group' : undefined}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon\n class={'icon'}\n name={this.icon}\n size=\"32\"\n aria-label={\n this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon)\n }\n ></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography\n id=\"ix-action-card-heading\"\n aria-hidden={a11yBoolean(!ariaLabelledBy)}\n format=\"h4\"\n >\n {this.heading}\n </ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography\n format=\"h5\"\n text-color={this.getSubheadingTextColor()}\n >\n {this.subheading}\n </ix-typography>\n ) : null}\n <slot></slot>\n </div>\n </ix-card-content>\n </ix-card>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -327,4 +327,53 @@
|
|
|
327
327
|
--theme-card-primary--border-color--selected
|
|
328
328
|
);
|
|
329
329
|
--ix-card-background: var(--theme-card-primary--background--selected);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
:host(.passive) {
|
|
333
|
+
cursor: default;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
:host(.passive.card-outline) {
|
|
337
|
+
--ix-card-background: var(--theme-card-outline--background);
|
|
338
|
+
--ix-card-border-color: var(--theme-card-outline--border-color);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
:host(.passive.card-filled) {
|
|
342
|
+
--ix-card-background: var(--theme-card-filled--background);
|
|
343
|
+
--ix-card-border-color: var(--theme-card-filled--border-color);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
:host(.passive.card-alarm) {
|
|
347
|
+
--ix-card-background: var(--theme-card-alarm--background);
|
|
348
|
+
--ix-card-border-color: var(--theme-card-alarm--border-color);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
:host(.passive.card-critical) {
|
|
352
|
+
--ix-card-background: var(--theme-card-critical--background);
|
|
353
|
+
--ix-card-border-color: var(--theme-card-critical--border-color);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
:host(.passive.card-warning) {
|
|
357
|
+
--ix-card-background: var(--theme-card-warning--background);
|
|
358
|
+
--ix-card-border-color: var(--theme-card-warning--border-color);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
:host(.passive.card-success) {
|
|
362
|
+
--ix-card-background: var(--theme-card-success--background);
|
|
363
|
+
--ix-card-border-color: var(--theme-card-success--border-color);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
:host(.passive.card-info) {
|
|
367
|
+
--ix-card-background: var(--theme-card-info--background);
|
|
368
|
+
--ix-card-border-color: var(--theme-card-info--border-color);
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
:host(.passive.card-neutral) {
|
|
372
|
+
--ix-card-background: var(--theme-card-neutral--background);
|
|
373
|
+
--ix-card-border-color: var(--theme-card-neutral--border-color);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
:host(.passive.card-primary) {
|
|
377
|
+
--ix-card-background: var(--theme-card-primary--background);
|
|
378
|
+
--ix-card-border-color: var(--theme-card-primary--border-color);
|
|
330
379
|
}
|
|
@@ -9,12 +9,17 @@ export class Card {
|
|
|
9
9
|
* Show card in selected state
|
|
10
10
|
*/
|
|
11
11
|
this.selected = false;
|
|
12
|
+
/**
|
|
13
|
+
* If true, disables hover and active styles and changes cursor to default
|
|
14
|
+
*/
|
|
15
|
+
this.passive = false;
|
|
12
16
|
}
|
|
13
17
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '3eed87586aed1916f7c1e3c2323a46c794d046d9', class: {
|
|
15
19
|
selected: this.selected,
|
|
16
20
|
[`card-${this.variant}`]: true,
|
|
17
|
-
|
|
21
|
+
passive: this.passive,
|
|
22
|
+
} }, h("div", { key: '7ae77cffe48272d0acc8cbd0dc7286d0fc835d8d', class: "card-content" }, h("slot", { key: 'ba07f9804dd1af6256ceb0cc972b2cc03a18f558' })), h("div", { key: '72bc9064c1d09188d60e1b9516811a91435f53b4', class: "card-footer" }, h("slot", { key: '7fbacfea4d8308e88b4db025567654a0a4ef0d96', name: "card-accordion" }))));
|
|
18
23
|
}
|
|
19
24
|
static get is() { return "ix-card"; }
|
|
20
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -75,6 +80,26 @@ export class Card {
|
|
|
75
80
|
"setter": false,
|
|
76
81
|
"reflect": false,
|
|
77
82
|
"defaultValue": "false"
|
|
83
|
+
},
|
|
84
|
+
"passive": {
|
|
85
|
+
"type": "boolean",
|
|
86
|
+
"attribute": "passive",
|
|
87
|
+
"mutable": false,
|
|
88
|
+
"complexType": {
|
|
89
|
+
"original": "boolean",
|
|
90
|
+
"resolved": "boolean",
|
|
91
|
+
"references": {}
|
|
92
|
+
},
|
|
93
|
+
"required": false,
|
|
94
|
+
"optional": false,
|
|
95
|
+
"docs": {
|
|
96
|
+
"tags": [],
|
|
97
|
+
"text": "If true, disables hover and active styles and changes cursor to default"
|
|
98
|
+
},
|
|
99
|
+
"getter": false,
|
|
100
|
+
"setter": false,
|
|
101
|
+
"reflect": false,
|
|
102
|
+
"defaultValue": "false"
|
|
78
103
|
}
|
|
79
104
|
};
|
|
80
105
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,YAAO,GAAgB,SAAS,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,YAAO,GAAgB,SAAS,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;KAoBlC;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAC9B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { CardVariant } from './card.types';\n\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement!: HTMLIxCardElement;\n\n /**\n * Card variant\n */\n @Prop() variant: CardVariant = 'outline';\n\n /**\n * Show card in selected state\n */\n @Prop() selected: boolean = false;\n\n /**\n * If true, disables hover and active styles and changes cursor to default\n */\n @Prop() passive: boolean = false;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n passive: this.passive,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -33,14 +33,6 @@
|
|
|
33
33
|
* This source code is licensed under the MIT license found in the
|
|
34
34
|
* LICENSE file in the root directory of this source tree.
|
|
35
35
|
*/
|
|
36
|
-
/*
|
|
37
|
-
* SPDX-FileCopyrightText: 2024 Siemens AG
|
|
38
|
-
*
|
|
39
|
-
* SPDX-License-Identifier: MIT
|
|
40
|
-
*
|
|
41
|
-
* This source code is licensed under the MIT license found in the
|
|
42
|
-
* LICENSE file in the root directory of this source tree.
|
|
43
|
-
*/
|
|
44
36
|
:host {
|
|
45
37
|
margin: 0.5rem 0.5rem 0rem 0.5rem;
|
|
46
38
|
}
|
|
@@ -133,9 +125,6 @@
|
|
|
133
125
|
padding: 0 1rem;
|
|
134
126
|
font-weight: normal;
|
|
135
127
|
white-space: normal;
|
|
136
|
-
overflow: hidden;
|
|
137
|
-
text-overflow: ellipsis;
|
|
138
|
-
white-space: nowrap;
|
|
139
128
|
}
|
|
140
129
|
:host ix-icon {
|
|
141
130
|
margin-top: 0.25rem;
|
|
@@ -49,6 +49,7 @@ export class Panes {
|
|
|
49
49
|
this.isMobile = matchBreakpoint('sm');
|
|
50
50
|
applicationLayoutService.onChange.on(() => {
|
|
51
51
|
this.isMobile = matchBreakpoint('sm');
|
|
52
|
+
this.configurePanes();
|
|
52
53
|
});
|
|
53
54
|
}
|
|
54
55
|
componentDidLoad() {
|
|
@@ -238,7 +239,7 @@ export class Panes {
|
|
|
238
239
|
return pane ? pane.floating : false;
|
|
239
240
|
}
|
|
240
241
|
render() {
|
|
241
|
-
return (h(Host, { key: '
|
|
242
|
+
return (h(Host, { key: 'e325d469cf08970e85af16e34df3e25ea6fadacc' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
|
|
242
243
|
row: true,
|
|
243
244
|
'padding-left': this.hasPadding('left'),
|
|
244
245
|
'padding-right': this.hasPadding('right'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pane-layout.js","sourceRoot":"","sources":["../../../src/components/pane-layout/pane-layout.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n forceUpdate,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { Composition } from '../pane/pane.types';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\n@Component({\n tag: 'ix-pane-layout',\n styleUrl: 'pane-layout.scss',\n shadow: true,\n})\nexport class Panes {\n @Element() hostElement!: HTMLIxPaneLayoutElement;\n\n /**\n * Choose the layout of the panes.\n * When set to 'full-vertical' the vertical panes (left, right) will get the full height.\n * When set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.\n */\n @Prop() layout: 'full-vertical' | 'full-horizontal' = 'full-vertical';\n\n /**\n * Set the default variant for all panes in the layout\n */\n @Prop() variant: 'floating' | 'inline' = 'inline';\n\n /**\n * Set the default border state for all panes in the layout\n */\n @Prop() borderless: boolean = false;\n\n @State() private isMobile = false;\n @State() private paneElements = 0;\n\n private panes: Array<{\n slot: string;\n hideOnCollapse: boolean;\n floating: boolean;\n }> = [];\n\n private observer?: MutationObserver;\n\n get currentPanes() {\n return this.hostElement.querySelectorAll('ix-pane');\n }\n\n componentWillLoad() {\n this.paneElements = this.currentPanes.length;\n\n this.observer = new MutationObserver((mutations) => {\n if (mutations[0].addedNodes.item(0)?.nodeName === 'IX-PANE') {\n this.paneElements += 1;\n } else if (mutations[0].removedNodes.item(0)?.nodeName === 'IX-PANE') {\n this.paneElements -= 1;\n }\n });\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n }\n\n componentDidLoad() {\n this.setPanes(this.currentPanes);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n private setPaneVariant(pane: HTMLIxPaneElement) {\n if (!pane.ignoreLayoutSettings) {\n pane.variant = this.variant;\n }\n }\n\n private setPaneBorder(pane: HTMLIxPaneElement) {\n if (!pane.ignoreLayoutSettings) {\n if (this.borderless) {\n pane.borderless = true;\n } else {\n const hasVisibleLeftPane = !!this.panes.find(\n (pane) => pane.slot === 'left' && !pane.hideOnCollapse\n );\n if (\n pane.variant === 'floating' &&\n this.layout === 'full-vertical' &&\n hasVisibleLeftPane &&\n (pane.composition === 'top' || pane.composition === 'bottom')\n ) {\n pane.borderless = true;\n } else {\n pane.borderless = false;\n }\n }\n }\n }\n\n private setPaneZIndex(pane: HTMLIxPaneElement) {\n const isTop = pane.slot === 'top';\n const isBottom = pane.slot === 'bottom';\n const isLeft = pane.slot === 'left';\n const isRight = pane.slot === 'right';\n\n let zIndex = 1;\n if (this.isMobile) {\n if (isBottom || isTop) {\n zIndex = 3;\n }\n } else {\n if (this.layout === 'full-vertical') {\n if (isLeft || isRight) {\n zIndex = 3;\n }\n } else {\n if (isBottom || isTop) {\n zIndex = 3;\n }\n }\n }\n pane.style.zIndex = zIndex.toString();\n }\n\n private setPanes(panes: NodeListOf<HTMLIxPaneElement>) {\n this.panes = [];\n panes.forEach((pane) => {\n this.panes.push({\n slot: pane.slot,\n hideOnCollapse: pane.hideOnCollapse,\n floating: pane.variant === 'floating',\n });\n });\n }\n\n private closeFloatingPanes() {\n this.currentPanes.forEach((pane) => {\n if (pane.expanded && pane.variant === 'floating') {\n pane.expanded = false;\n }\n });\n }\n\n private configurePanes() {\n let topCount = 0;\n let bottomCount = 0;\n let leftCount = 0;\n let rightCount = 0;\n\n this.currentPanes.forEach((pane) => {\n const isTop = pane.slot === 'top';\n const isBottom = pane.slot === 'bottom';\n const isLeft = pane.slot === 'left';\n const isRight = pane.slot === 'right';\n\n if (isLeft) {\n if (leftCount) {\n pane.slot = '';\n return;\n }\n leftCount++;\n } else if (isRight) {\n if (rightCount) {\n pane.slot = '';\n return;\n }\n rightCount++;\n } else if (isTop) {\n if (topCount) {\n pane.slot = '';\n return;\n }\n topCount++;\n } else if (isBottom) {\n if (bottomCount) {\n pane.slot = '';\n return;\n }\n bottomCount++;\n } else {\n pane.slot = '';\n return;\n }\n\n this.setPaneVariant(pane);\n this.setPaneBorder(pane);\n this.setPaneZIndex(pane);\n });\n\n this.setPanes(this.currentPanes);\n forceUpdate(this.hostElement);\n }\n\n @Listen('slotChanged')\n onSlotChanged() {\n this.configurePanes();\n }\n\n @Listen('hideOnCollapseChanged')\n onCollapsibleChanged(event: CustomEvent) {\n const { slot, hideOnCollapse } = event.detail;\n\n this.panes.forEach((currentSlot) => {\n if (currentSlot.slot === slot) {\n currentSlot.hideOnCollapse = hideOnCollapse;\n }\n });\n\n forceUpdate(this.hostElement);\n }\n\n @Listen('variantChanged')\n onVariantChanged(event: CustomEvent) {\n const { slot, variant } = event.detail;\n\n this.panes.forEach((currentSlot) => {\n if (currentSlot.slot === slot) {\n currentSlot.floating = variant === 'floating';\n }\n });\n\n forceUpdate(this.hostElement);\n }\n\n @Watch('paneElements')\n onPaneElementsChange() {\n this.configurePanes();\n }\n\n @Watch('variant')\n onVariableChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneVariant(pane);\n this.setPaneBorder(pane);\n });\n\n this.setPanes(this.currentPanes);\n forceUpdate(this.hostElement);\n }\n\n @Watch('borderless')\n onBorderChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneBorder(pane);\n });\n }\n\n @Watch('layout')\n onLayoutChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneBorder(pane);\n this.setPaneZIndex(pane);\n });\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneZIndex(pane);\n });\n }\n\n private hasPadding(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane ? !pane.hideOnCollapse && pane.floating : false;\n }\n\n private hasPaddingMobile(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane && !pane.hideOnCollapse;\n }\n\n private slotExists(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return !!pane;\n }\n\n private isFloating(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane ? pane.floating : false;\n }\n\n render() {\n return (\n <Host>\n {!this.isMobile ? (\n this.layout == 'full-vertical' ? (\n <div class=\"side-panes-wrapper\">\n <div\n class={{\n row: true,\n 'padding-left': this.hasPadding('left'),\n 'padding-right': this.hasPadding('right'),\n }}\n >\n <div\n key=\"left\"\n class={{ 'absolute-left': this.isFloating('left') }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n class={{\n col: true,\n 'padding-top': this.hasPadding('top'),\n 'padding-bottom': this.hasPadding('bottom'),\n }}\n >\n <div\n key=\"top\"\n class={{ 'absolute-top': this.isFloating('top') }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"bottom\"\n class={{ 'absolute-bottom': this.isFloating('bottom') }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n <div\n key=\"right\"\n class={{ 'absolute-right': this.isFloating('right') }}\n >\n <slot name=\"right\"></slot>\n </div>\n </div>\n </div>\n ) : (\n <div class=\"side-panes-wrapper\">\n <div\n class={{\n col: true,\n 'padding-top': this.hasPadding('top'),\n 'padding-bottom': this.hasPadding('bottom'),\n }}\n >\n <div\n key=\"top\"\n class={{ 'absolute-top': this.isFloating('top') }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n class={{\n row: true,\n 'padding-left': this.hasPadding('left'),\n 'padding-right': this.hasPadding('right'),\n }}\n >\n <div\n key=\"left\"\n class={{ 'absolute-left': this.isFloating('left') }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"right\"\n class={{ 'absolute-right': this.isFloating('right') }}\n >\n <slot name=\"right\"></slot>\n </div>\n </div>\n <div\n key=\"bottom\"\n class={{ 'absolute-bottom': this.isFloating('bottom') }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </div>\n )\n ) : (\n <div class=\"col\">\n <div\n key=\"top\"\n style={{\n minHeight: this.hasPaddingMobile('top') ? '48px' : '0',\n display: this.slotExists('top') ? 'block' : 'none',\n }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n key=\"left\"\n style={{\n minHeight: this.hasPaddingMobile('left') ? '48px' : '0',\n display: this.slotExists('left') ? 'block' : 'none',\n }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"right\"\n style={{\n minHeight: this.hasPaddingMobile('right') ? '48px' : '0',\n display: this.slotExists('right') ? 'block' : 'none',\n }}\n >\n <slot name=\"right\"></slot>\n </div>\n <div\n key=\"bottom\"\n style={{\n minHeight: this.hasPaddingMobile('bottom') ? '48px' : '0',\n display: this.slotExists('bottom') ? 'block' : 'none',\n }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"pane-layout.js","sourceRoot":"","sources":["../../../src/components/pane-layout/pane-layout.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,WAAW,EACX,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,OAAO,KAAK;IALlB;QAQE;;;;WAIG;QACK,WAAM,GAAwC,eAAe,CAAC;QAEtE;;WAEG;QACK,YAAO,GAA0B,QAAQ,CAAC;QAElD;;WAEG;QACK,eAAU,GAAY,KAAK,CAAC;QAEnB,aAAQ,GAAG,KAAK,CAAC;QACjB,iBAAY,GAAG,CAAC,CAAC;QAE1B,UAAK,GAIR,EAAE,CAAC;KAsZT;IAlZC,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAE7C,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;;YACjD,IAAI,CAAA,MAAA,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,QAAQ,MAAK,SAAS,EAAE,CAAC;gBAC5D,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAA,MAAA,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,0CAAE,QAAQ,MAAK,SAAS,EAAE,CAAC;gBACrE,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QACtC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;YACtC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,EAAE,CAAC;IAC9B,CAAC;IAEO,cAAc,CAAC,IAAuB;QAC5C,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,IAAuB;QAC3C,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAC1C,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CACvD,CAAC;gBACF,IACE,IAAI,CAAC,OAAO,KAAK,UAAU;oBAC3B,IAAI,CAAC,MAAM,KAAK,eAAe;oBAC/B,kBAAkB;oBAClB,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,EAC7D,CAAC;oBACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC1B,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,IAAuB;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACpC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;QAEtC,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;gBACtB,MAAM,GAAG,CAAC,CAAC;YACb,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,MAAM,KAAK,eAAe,EAAE,CAAC;gBACpC,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;oBACtB,MAAM,GAAG,CAAC,CAAC;gBACb,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;oBACtB,MAAM,GAAG,CAAC,CAAC;gBACb,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IACxC,CAAC;IAEO,QAAQ,CAAC,KAAoC;QACnD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBACd,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;aACtC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;gBACjD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;YAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACxC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;YAEtC,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,SAAS,EAAE,CAAC;oBACd,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;oBACf,OAAO;gBACT,CAAC;gBACD,SAAS,EAAE,CAAC;YACd,CAAC;iBAAM,IAAI,OAAO,EAAE,CAAC;gBACnB,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;oBACf,OAAO;gBACT,CAAC;gBACD,UAAU,EAAE,CAAC;YACf,CAAC;iBAAM,IAAI,KAAK,EAAE,CAAC;gBACjB,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;oBACf,OAAO;gBACT,CAAC;gBACD,QAAQ,EAAE,CAAC;YACb,CAAC;iBAAM,IAAI,QAAQ,EAAE,CAAC;gBACpB,IAAI,WAAW,EAAE,CAAC;oBAChB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;oBACf,OAAO;gBACT,CAAC;gBACD,WAAW,EAAE,CAAC;YAChB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,oBAAoB,CAAC,KAAkB;QACrC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACjC,IAAI,WAAW,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;gBAC9B,WAAW,CAAC,cAAc,GAAG,cAAc,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC;IAGD,gBAAgB,CAAC,KAAkB;QACjC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACjC,IAAI,WAAW,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;gBAC9B,WAAW,CAAC,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,WAAwB;QACzC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAClE,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9D,CAAC;IAEO,gBAAgB,CAAC,WAAwB;QAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAClE,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;IACtC,CAAC;IAEO,UAAU,CAAC,WAAwB;QACzC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAClE,OAAO,CAAC,CAAC,IAAI,CAAC;IAChB,CAAC;IAEO,UAAU,CAAC,WAAwB;QACzC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;QAClE,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACtC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WACE,KAAK,EAAE;oBACL,GAAG,EAAE,IAAI;oBACT,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;oBACvC,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;iBAC1C;gBAED,WACE,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;oBAEnD,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;gBACN,WACE,KAAK,EAAE;wBACL,GAAG,EAAE,IAAI;wBACT,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;wBACrC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;qBAC5C;oBAED,WACE,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;wBAEjD,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;oBACN,WACE,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;wBAExC,YAAM,IAAI,EAAC,SAAS,GAAQ;wBAC5B,eAAa,CACT;oBACN,WACE,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;wBAEvD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF;gBACN,WACE,GAAG,EAAC,OAAO,EACX,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;oBAErD,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,oBAAoB;YAC7B,WACE,KAAK,EAAE;oBACL,GAAG,EAAE,IAAI;oBACT,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;oBACrC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;iBAC5C;gBAED,WACE,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;oBAEjD,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBACN,WACE,KAAK,EAAE;wBACL,GAAG,EAAE,IAAI;wBACT,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;wBACvC,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;qBAC1C;oBAED,WACE,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;wBAEnD,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;oBACN,WACE,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;wBAExC,YAAM,IAAI,EAAC,SAAS,GAAQ;wBAC5B,eAAa,CACT;oBACN,WACE,GAAG,EAAC,OAAO,EACX,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;wBAErD,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;gBACN,WACE,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;oBAEvD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACP,CACF,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,KAAK;YACd,WACE,GAAG,EAAC,KAAK,EACT,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;oBACtD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;iBACnD;gBAED,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;YACN,WACE,GAAG,EAAC,MAAM,EACV,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;oBACvD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;iBACpD;gBAED,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;YACN,WACE,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAExC,YAAM,IAAI,EAAC,SAAS,GAAQ;gBAC5B,eAAa,CACT;YACN,WACE,GAAG,EAAC,OAAO,EACX,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;oBACxD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;iBACrD;gBAED,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;YACN,WACE,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE;oBACL,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;oBACzD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;iBACtD;gBAED,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n forceUpdate,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport type { Composition } from '../pane/pane.types';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\n@Component({\n tag: 'ix-pane-layout',\n styleUrl: 'pane-layout.scss',\n shadow: true,\n})\nexport class Panes {\n @Element() hostElement!: HTMLIxPaneLayoutElement;\n\n /**\n * Choose the layout of the panes.\n * When set to 'full-vertical' the vertical panes (left, right) will get the full height.\n * When set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.\n */\n @Prop() layout: 'full-vertical' | 'full-horizontal' = 'full-vertical';\n\n /**\n * Set the default variant for all panes in the layout\n */\n @Prop() variant: 'floating' | 'inline' = 'inline';\n\n /**\n * Set the default border state for all panes in the layout\n */\n @Prop() borderless: boolean = false;\n\n @State() private isMobile = false;\n @State() private paneElements = 0;\n\n private panes: Array<{\n slot: string;\n hideOnCollapse: boolean;\n floating: boolean;\n }> = [];\n\n private observer?: MutationObserver;\n\n get currentPanes() {\n return this.hostElement.querySelectorAll('ix-pane');\n }\n\n componentWillLoad() {\n this.paneElements = this.currentPanes.length;\n\n this.observer = new MutationObserver((mutations) => {\n if (mutations[0].addedNodes.item(0)?.nodeName === 'IX-PANE') {\n this.paneElements += 1;\n } else if (mutations[0].removedNodes.item(0)?.nodeName === 'IX-PANE') {\n this.paneElements -= 1;\n }\n });\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n this.configurePanes();\n });\n }\n\n componentDidLoad() {\n this.setPanes(this.currentPanes);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n }\n\n private setPaneVariant(pane: HTMLIxPaneElement) {\n if (!pane.ignoreLayoutSettings) {\n pane.variant = this.variant;\n }\n }\n\n private setPaneBorder(pane: HTMLIxPaneElement) {\n if (!pane.ignoreLayoutSettings) {\n if (this.borderless) {\n pane.borderless = true;\n } else {\n const hasVisibleLeftPane = !!this.panes.find(\n (pane) => pane.slot === 'left' && !pane.hideOnCollapse\n );\n if (\n pane.variant === 'floating' &&\n this.layout === 'full-vertical' &&\n hasVisibleLeftPane &&\n (pane.composition === 'top' || pane.composition === 'bottom')\n ) {\n pane.borderless = true;\n } else {\n pane.borderless = false;\n }\n }\n }\n }\n\n private setPaneZIndex(pane: HTMLIxPaneElement) {\n const isTop = pane.slot === 'top';\n const isBottom = pane.slot === 'bottom';\n const isLeft = pane.slot === 'left';\n const isRight = pane.slot === 'right';\n\n let zIndex = 1;\n if (this.isMobile) {\n if (isBottom || isTop) {\n zIndex = 3;\n }\n } else {\n if (this.layout === 'full-vertical') {\n if (isLeft || isRight) {\n zIndex = 3;\n }\n } else {\n if (isBottom || isTop) {\n zIndex = 3;\n }\n }\n }\n pane.style.zIndex = zIndex.toString();\n }\n\n private setPanes(panes: NodeListOf<HTMLIxPaneElement>) {\n this.panes = [];\n panes.forEach((pane) => {\n this.panes.push({\n slot: pane.slot,\n hideOnCollapse: pane.hideOnCollapse,\n floating: pane.variant === 'floating',\n });\n });\n }\n\n private closeFloatingPanes() {\n this.currentPanes.forEach((pane) => {\n if (pane.expanded && pane.variant === 'floating') {\n pane.expanded = false;\n }\n });\n }\n\n private configurePanes() {\n let topCount = 0;\n let bottomCount = 0;\n let leftCount = 0;\n let rightCount = 0;\n\n this.currentPanes.forEach((pane) => {\n const isTop = pane.slot === 'top';\n const isBottom = pane.slot === 'bottom';\n const isLeft = pane.slot === 'left';\n const isRight = pane.slot === 'right';\n\n if (isLeft) {\n if (leftCount) {\n pane.slot = '';\n return;\n }\n leftCount++;\n } else if (isRight) {\n if (rightCount) {\n pane.slot = '';\n return;\n }\n rightCount++;\n } else if (isTop) {\n if (topCount) {\n pane.slot = '';\n return;\n }\n topCount++;\n } else if (isBottom) {\n if (bottomCount) {\n pane.slot = '';\n return;\n }\n bottomCount++;\n } else {\n pane.slot = '';\n return;\n }\n\n this.setPaneVariant(pane);\n this.setPaneBorder(pane);\n this.setPaneZIndex(pane);\n });\n\n this.setPanes(this.currentPanes);\n forceUpdate(this.hostElement);\n }\n\n @Listen('slotChanged')\n onSlotChanged() {\n this.configurePanes();\n }\n\n @Listen('hideOnCollapseChanged')\n onCollapsibleChanged(event: CustomEvent) {\n const { slot, hideOnCollapse } = event.detail;\n\n this.panes.forEach((currentSlot) => {\n if (currentSlot.slot === slot) {\n currentSlot.hideOnCollapse = hideOnCollapse;\n }\n });\n\n forceUpdate(this.hostElement);\n }\n\n @Listen('variantChanged')\n onVariantChanged(event: CustomEvent) {\n const { slot, variant } = event.detail;\n\n this.panes.forEach((currentSlot) => {\n if (currentSlot.slot === slot) {\n currentSlot.floating = variant === 'floating';\n }\n });\n\n forceUpdate(this.hostElement);\n }\n\n @Watch('paneElements')\n onPaneElementsChange() {\n this.configurePanes();\n }\n\n @Watch('variant')\n onVariableChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneVariant(pane);\n this.setPaneBorder(pane);\n });\n\n this.setPanes(this.currentPanes);\n forceUpdate(this.hostElement);\n }\n\n @Watch('borderless')\n onBorderChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneBorder(pane);\n });\n }\n\n @Watch('layout')\n onLayoutChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneBorder(pane);\n this.setPaneZIndex(pane);\n });\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.currentPanes.forEach((pane) => {\n this.setPaneZIndex(pane);\n });\n }\n\n private hasPadding(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane ? !pane.hideOnCollapse && pane.floating : false;\n }\n\n private hasPaddingMobile(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane && !pane.hideOnCollapse;\n }\n\n private slotExists(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return !!pane;\n }\n\n private isFloating(composition: Composition) {\n const pane = this.panes.find((pane) => pane.slot === composition);\n return pane ? pane.floating : false;\n }\n\n render() {\n return (\n <Host>\n {!this.isMobile ? (\n this.layout == 'full-vertical' ? (\n <div class=\"side-panes-wrapper\">\n <div\n class={{\n row: true,\n 'padding-left': this.hasPadding('left'),\n 'padding-right': this.hasPadding('right'),\n }}\n >\n <div\n key=\"left\"\n class={{ 'absolute-left': this.isFloating('left') }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n class={{\n col: true,\n 'padding-top': this.hasPadding('top'),\n 'padding-bottom': this.hasPadding('bottom'),\n }}\n >\n <div\n key=\"top\"\n class={{ 'absolute-top': this.isFloating('top') }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"bottom\"\n class={{ 'absolute-bottom': this.isFloating('bottom') }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n <div\n key=\"right\"\n class={{ 'absolute-right': this.isFloating('right') }}\n >\n <slot name=\"right\"></slot>\n </div>\n </div>\n </div>\n ) : (\n <div class=\"side-panes-wrapper\">\n <div\n class={{\n col: true,\n 'padding-top': this.hasPadding('top'),\n 'padding-bottom': this.hasPadding('bottom'),\n }}\n >\n <div\n key=\"top\"\n class={{ 'absolute-top': this.isFloating('top') }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n class={{\n row: true,\n 'padding-left': this.hasPadding('left'),\n 'padding-right': this.hasPadding('right'),\n }}\n >\n <div\n key=\"left\"\n class={{ 'absolute-left': this.isFloating('left') }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"right\"\n class={{ 'absolute-right': this.isFloating('right') }}\n >\n <slot name=\"right\"></slot>\n </div>\n </div>\n <div\n key=\"bottom\"\n class={{ 'absolute-bottom': this.isFloating('bottom') }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </div>\n )\n ) : (\n <div class=\"col\">\n <div\n key=\"top\"\n style={{\n minHeight: this.hasPaddingMobile('top') ? '48px' : '0',\n display: this.slotExists('top') ? 'block' : 'none',\n }}\n >\n <slot name=\"top\"></slot>\n </div>\n <div\n key=\"left\"\n style={{\n minHeight: this.hasPaddingMobile('left') ? '48px' : '0',\n display: this.slotExists('left') ? 'block' : 'none',\n }}\n >\n <slot name=\"left\"></slot>\n </div>\n <div\n key=\"content\"\n class=\"content\"\n onClick={() => this.closeFloatingPanes()}\n >\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div\n key=\"right\"\n style={{\n minHeight: this.hasPaddingMobile('right') ? '48px' : '0',\n display: this.slotExists('right') ? 'block' : 'none',\n }}\n >\n <slot name=\"right\"></slot>\n </div>\n <div\n key=\"bottom\"\n style={{\n minHeight: this.hasPaddingMobile('bottom') ? '48px' : '0',\n display: this.slotExists('bottom') ? 'block' : 'none',\n }}\n >\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -17,10 +17,14 @@ export class PushCard {
|
|
|
17
17
|
* Expand the card
|
|
18
18
|
*/
|
|
19
19
|
this.expanded = false;
|
|
20
|
+
/**
|
|
21
|
+
* If true, disables hover and active styles and changes cursor to default
|
|
22
|
+
*/
|
|
23
|
+
this.passive = false;
|
|
20
24
|
}
|
|
21
25
|
render() {
|
|
22
26
|
var _a;
|
|
23
|
-
return (h(Host, { key: '
|
|
27
|
+
return (h(Host, { key: 'f91d2bc149d2358afb29d82de24a0fd4d36ff8da', class: `card-${this.variant}` }, h("ix-card", { key: '22520048301a654e61139c8d6bd50788328861d9', variant: this.variant, passive: this.passive }, h("ix-card-content", { key: 'ff4cdaa22e092861c98cf9af6554626c5d8b067f' }, h("ix-card-title", { key: '63deacdf7535977fd8c7a4f42e45127231ee6475' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '3a86dc49d3cf32c426c231865b1a2336ccad48bf', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '19fa42ddfbb9e1dce31842f5eab9ca9652b86701', name: "title-action" })), h("ix-typography", { key: '28a8dd2f112f679f5352fd17bccb0e9996208d80', format: "h4" }, this.heading), h("ix-typography", { key: '6b46c08124d639b71d8c11b8b3fb07c91950b5ed' }, this.subheading)), h("ix-card-accordion", { key: '0812bbb4d460cd89d095aa1eff55e5c37ef52e36', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '2ac082345c8179a97520407d6bc91aac7a3b0a9b' })))));
|
|
24
28
|
}
|
|
25
29
|
static get is() { return "ix-push-card"; }
|
|
26
30
|
static get encapsulation() { return "shadow"; }
|
|
@@ -179,6 +183,26 @@ export class PushCard {
|
|
|
179
183
|
"setter": false,
|
|
180
184
|
"reflect": false,
|
|
181
185
|
"defaultValue": "false"
|
|
186
|
+
},
|
|
187
|
+
"passive": {
|
|
188
|
+
"type": "boolean",
|
|
189
|
+
"attribute": "passive",
|
|
190
|
+
"mutable": false,
|
|
191
|
+
"complexType": {
|
|
192
|
+
"original": "boolean",
|
|
193
|
+
"resolved": "boolean",
|
|
194
|
+
"references": {}
|
|
195
|
+
},
|
|
196
|
+
"required": false,
|
|
197
|
+
"optional": false,
|
|
198
|
+
"docs": {
|
|
199
|
+
"tags": [],
|
|
200
|
+
"text": "If true, disables hover and active styles and changes cursor to default"
|
|
201
|
+
},
|
|
202
|
+
"getter": false,
|
|
203
|
+
"setter": false,
|
|
204
|
+
"reflect": false,
|
|
205
|
+
"defaultValue": "false"
|
|
182
206
|
}
|
|
183
207
|
};
|
|
184
208
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,QAAQ;IALrB;QAiCE;;WAEG;QACK,YAAO,GAAoB,SAAS,CAAC;QAE7C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;KA+
|
|
1
|
+
{"version":3,"file":"push-card.js","sourceRoot":"","sources":["../../../src/components/push-card/push-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,QAAQ;IALrB;QAiCE;;WAEG;QACK,YAAO,GAAoB,SAAS,CAAC;QAE7C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;KA+BlC;IA7BC,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE;YACjC,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;gBACnD;oBACE;wBACG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eACE,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,gBACG,IAAI,CAAC,aAAa,GACrB,CACZ,CAAC,CAAC,CAAC,IAAI;wBACR,sEAAe,MAAM,EAAC,aAAa,IAChC,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CACT;wBAChB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CACnB;oBAChB,sEAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB;oBACzD,wEAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC;gBAClB,0EAAmB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;oBAChE,8DAAa,CACK,CACZ,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { PushCardVariant } from './push-card.types';\n\n@Component({\n tag: 'ix-push-card',\n styleUrl: 'push-card.scss',\n shadow: true,\n})\nexport class PushCard {\n /**\n * Card icon\n */\n @Prop() icon?: string;\n\n /**\n * ARIA label for the icon\n *\n * @since 3.2.0\n */\n @Prop() ariaLabelIcon?: string;\n\n /**\n * Card KPI value\n */\n @Prop() notification?: string;\n\n /**\n * Card heading\n */\n @Prop() heading?: string;\n\n /**\n * Card subheading\n */\n @Prop() subheading?: string;\n\n /**\n * Card variant\n */\n @Prop() variant: PushCardVariant = 'outline';\n\n /**\n * Expand the card\n */\n @Prop() expanded: boolean = false;\n\n /**\n * If true, disables hover and active styles and changes cursor to default\n */\n @Prop() passive: boolean = false;\n\n render() {\n return (\n <Host class={`card-${this.variant}`}>\n <ix-card variant={this.variant} passive={this.passive}>\n <ix-card-content>\n <ix-card-title>\n {this.icon ? (\n <ix-icon\n class={'icon'}\n name={this.icon}\n size=\"32\"\n aria-label={this.ariaLabelIcon}\n ></ix-icon>\n ) : null}\n <ix-typography format=\"display-xxl\">\n {this.notification ?? 0}\n </ix-typography>\n <slot name=\"title-action\"></slot>\n </ix-card-title>\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n <ix-typography>{this.subheading}</ix-typography>\n </ix-card-content>\n <ix-card-accordion collapse={!this.expanded} variant={this.variant}>\n <slot></slot>\n </ix-card-accordion>\n </ix-card>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -55,7 +55,7 @@ export class ToastContainer {
|
|
|
55
55
|
* @param config
|
|
56
56
|
*/
|
|
57
57
|
async showToast(config) {
|
|
58
|
-
var _a, _b;
|
|
58
|
+
var _a, _b, _c;
|
|
59
59
|
const toast = document.createElement('ix-toast');
|
|
60
60
|
const onClose = new TypedEvent();
|
|
61
61
|
function removeToast(result) {
|
|
@@ -68,6 +68,7 @@ export class ToastContainer {
|
|
|
68
68
|
toast.autoCloseDelay = (_b = config.autoCloseDelay) !== null && _b !== void 0 ? _b : 5000;
|
|
69
69
|
toast.icon = config.icon;
|
|
70
70
|
toast.iconColor = config.iconColor;
|
|
71
|
+
toast.hideIcon = (_c = config.hideIcon) !== null && _c !== void 0 ? _c : false;
|
|
71
72
|
toast.addEventListener('closeToast', (event) => {
|
|
72
73
|
const { detail } = event;
|
|
73
74
|
removeToast(detail);
|
|
@@ -102,10 +103,10 @@ export class ToastContainer {
|
|
|
102
103
|
};
|
|
103
104
|
}
|
|
104
105
|
render() {
|
|
105
|
-
return (h(Host, { key: '
|
|
106
|
+
return (h(Host, { key: '11d339600495a1d923de9ee92abdb2b6248ed8b5', class: {
|
|
106
107
|
'toast-container--bottom-right': this.position === 'bottom-right',
|
|
107
108
|
'toast-container--top-right': this.position === 'top-right',
|
|
108
|
-
} }, h("slot", { key: '
|
|
109
|
+
} }, h("slot", { key: 'b942eb55489de1a132d4b7c481fa9b91ddb9657d' })));
|
|
109
110
|
}
|
|
110
111
|
static get is() { return "ix-toast-container"; }
|
|
111
112
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASlD,MAAM,OAAO,cAAc;IAL3B;QAME;WACG;QACK,gBAAW,GAAG,iBAAiB,CAAC;QAExC;WACG;QACK,mBAAc,GAAG,iBAAiB,CAAC;QAE3C;WACG;QACK,aAAQ,GAAiC,cAAc,CAAC;QAE/C,0BAAqB,GAAG,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AASlD,MAAM,OAAO,cAAc;IAL3B;QAME;WACG;QACK,gBAAW,GAAG,iBAAiB,CAAC;QAExC;WACG;QACK,mBAAc,GAAG,iBAAiB,CAAC;QAE3C;WACG;QACK,aAAQ,GAAiC,cAAc,CAAC;QAE/C,0BAAqB,GAAG,mBAAmB,CAAC;KAgH9D;IA9GC,IAAI,aAAa;QACf,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,EAAE,EAAE;YAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;gBAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACnE,IAAI,gBAAgB,EAAE,CAAC;oBACrB,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACxB,OAAO,CAAC,gBAAgB,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAC/C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACrD,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;YACrC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAClD,cAAc,CAAC,SAAS,CAAC,GAAG,CAC1B,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAChD,CAAC;YACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAGD,gBAAgB,CAAC,WAAmB,EAAE,WAAmB;QACvD,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACjE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QACD,cAAc,CAAC,SAAS,CAAC,MAAM,CAC7B,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAC9C,CAAC;QACF,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAAC,CAAC;IAC9E,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,SAAS,CAAC,MAAmB;;QACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,UAAU,EAAmB,CAAC;QAElD,SAAS,WAAW,CAAC,MAAY;YAC/B,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;QAED,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAChC,KAAK,CAAC,IAAI,GAAG,MAAA,MAAM,CAAC,IAAI,mCAAI,MAAM,CAAC;QACnC,KAAK,CAAC,gBAAgB,GAAG,MAAM,CAAC,SAAS,KAAK,KAAK,CAAC;QACpD,KAAK,CAAC,cAAc,GAAG,MAAA,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QACrD,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QACnC,KAAK,CAAC,QAAQ,GAAG,MAAA,MAAM,CAAC,QAAQ,mCAAI,KAAK,CAAC;QAC1C,KAAK,CAAC,gBAAgB,CACpB,YAAY,EACZ,CAAC,KAAmC,EAAE,EAAE;YACtC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;YACzB,WAAW,CAAC,MAAM,CAAC,CAAC;QACtB,CAAC,CACF,CAAC;QAEF,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;gBACvC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;QAED,IAAI,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,YAAY,WAAW,EAAE,CAAC;YAC1D,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC9B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC;QAED,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAE9C,OAAO;YACL,OAAO;YACP,KAAK,EAAE,CAAC,MAAY,EAAE,EAAE;gBACtB,WAAW,CAAC,MAAM,CAAC,CAAC;YACtB,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,KAAK,CAAC,KAAK,EAAE,CAAC;YAChB,CAAC;YACD,MAAM,EAAE,GAAG,EAAE;gBACX,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC1B,CAAC;SACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,+BAA+B,EAAE,IAAI,CAAC,QAAQ,KAAK,cAAc;gBACjE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW;aAC5D;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\nimport type { ShowToastResult } from './toast-container.types';\n\n@Component({\n tag: 'ix-toast-container',\n styleUrl: './styles/toast-container.scss',\n shadow: true,\n})\nexport class ToastContainer {\n /**\n */\n @Prop() containerId = 'toast-container';\n\n /**\n */\n @Prop() containerClass = 'toast-container';\n\n /**\n */\n @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return new Promise<HTMLElement>((resolve) => {\n const interval = setInterval(() => {\n const containerElement = document.getElementById(this.containerId);\n if (containerElement) {\n clearInterval(interval);\n resolve(containerElement);\n }\n });\n });\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n if (!toastContainer) {\n console.warn('No toast container found, cannot configure toast position');\n return;\n }\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /**\n * Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig): Promise<ShowToastResult> {\n const toast = document.createElement('ix-toast');\n const onClose = new TypedEvent<any | undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type ?? 'info';\n toast.preventAutoClose = config.autoClose === false;\n toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.hideIcon = config.hideIcon ?? false;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any | undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (config.message) {\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n }\n\n if (config.action && config.action instanceof HTMLElement) {\n config.action.slot = 'action';\n toast.appendChild(config.action);\n }\n\n (await this.hostContainer).appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n pause: () => {\n toast.pause();\n },\n resume: () => {\n toast.resume();\n },\n isPaused: () => {\n return toast.isPaused();\n },\n };\n }\n\n render() {\n return (\n <Host\n class={{\n 'toast-container--bottom-right': this.position === 'bottom-right',\n 'toast-container--top-right': this.position === 'top-right',\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast-utils.js","sourceRoot":"","sources":["../../../src/components/toast/toast-utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toast-utils.js","sourceRoot":"","sources":["../../../src/components/toast/toast-utils.ts"],"names":[],"mappings":"AAmDA,MAAM,UAAU,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB,EAAE,EAAE;IACnC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB,EAAE,EAAE;IACpC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport type { ShowToastResult } from './toast-container.types';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n /**\n * Title of the toast\n */\n title?: string;\n /**\n * Message of the toast\n */\n message?: string | HTMLElement;\n /**\n * Action element that is displayed below the toast message/title\n */\n action?: HTMLElement;\n /**\n * Type of the toast\n */\n type?: ToastType;\n /**\n * Controls whether the toast closes automatically after a delay\n */\n autoClose?: boolean;\n /**\n * Sets the delay for autoClose in milliseconds\n */\n autoCloseDelay?: number;\n /**\n * Icon that is displayed with the toast\n */\n icon?: string;\n /**\n * Color of the icon\n */\n iconColor?: string;\n /**\n * Allows to hide the icon in the toast\n */\n hideIcon?: boolean;\n}\n\nexport function getToastContainer() {\n const containerList = Array.from(\n document.querySelectorAll('ix-toast-container')\n );\n const [container] = containerList;\n if (containerList.length > 1) {\n console.warn(\n 'Multiple toast containers were found. Only the first one will be used.'\n );\n return container;\n }\n if (!container) {\n const toastContainer = document.createElement('ix-toast-container');\n document.body.appendChild(toastContainer);\n\n return toastContainer;\n }\n return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n const container = getToastContainer();\n container.setAttribute('position', position);\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n const container = getToastContainer();\n return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'info',\n });\n};\n\ntoast.error = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'error',\n });\n};\n\ntoast.success = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'success',\n });\n};\n\ntoast.warning = (config: ToastConfig) => {\n return toast({\n ...config,\n type: 'warning',\n });\n};\n\nexport { toast };\n"]}
|
|
@@ -22,6 +22,10 @@ export class Toast {
|
|
|
22
22
|
* Autoclose behavior
|
|
23
23
|
*/
|
|
24
24
|
this.preventAutoClose = false;
|
|
25
|
+
/**
|
|
26
|
+
* Allows to hide the icon in the toast.
|
|
27
|
+
*/
|
|
28
|
+
this.hideIcon = false;
|
|
25
29
|
this.progress = 0;
|
|
26
30
|
this.touched = false;
|
|
27
31
|
this.paused = false;
|
|
@@ -78,11 +82,11 @@ export class Toast {
|
|
|
78
82
|
animationPlayState: this.touched || this.paused ? 'paused' : 'running',
|
|
79
83
|
};
|
|
80
84
|
progressBarClass.push('toast-progress-bar--animated');
|
|
81
|
-
return (h(Host, { key: '
|
|
85
|
+
return (h(Host, { key: 'f2f95d77b28639b78e3fb0f82f471d8fba9b3a3d', class: "animate__animated animate__fadeIn" }, h("div", { key: 'c32a7a677f5d7ca00c209355e5af9679ad28fc28', class: "toast-body", onPointerLeave: () => {
|
|
82
86
|
this.touched = false;
|
|
83
87
|
}, onPointerEnter: () => {
|
|
84
88
|
this.touched = true;
|
|
85
|
-
} }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '
|
|
89
|
+
} }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '853a02c2cedea5b66aabc754699e6aeab69dbb9a', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: '35d881b3af41b2400a873ea2e45a0634eb81831f', class: "toast-message" }, h("slot", { key: '9030ed64837f7ee0b4ffc8b9aa36d8553e3a97ae' })), h("div", { key: 'fee8e7ca8620d01f8de665ad80293f44b71879ca', class: "toast-action" }, h("slot", { key: '0b81d513c974da48e77cebc35806ab19f7bc9e6f', name: "action" }))), h("div", { key: '59f3cf1722fc9203cb9602387115019258014c55', class: "toast-close" }, h("ix-icon-button", { key: 'd6dceea9274e9266f9ac36c51546635e954ef963', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '3530a6781c5f32d787ef1a1b38eb39f98ca26062', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
|
|
86
90
|
this.close();
|
|
87
91
|
}, onTransitionEnd: () => {
|
|
88
92
|
if (this.progress === 0) {
|
|
@@ -227,6 +231,26 @@ export class Toast {
|
|
|
227
231
|
"setter": false,
|
|
228
232
|
"reflect": false
|
|
229
233
|
},
|
|
234
|
+
"hideIcon": {
|
|
235
|
+
"type": "boolean",
|
|
236
|
+
"attribute": "hide-icon",
|
|
237
|
+
"mutable": false,
|
|
238
|
+
"complexType": {
|
|
239
|
+
"original": "boolean",
|
|
240
|
+
"resolved": "boolean",
|
|
241
|
+
"references": {}
|
|
242
|
+
},
|
|
243
|
+
"required": false,
|
|
244
|
+
"optional": false,
|
|
245
|
+
"docs": {
|
|
246
|
+
"tags": [],
|
|
247
|
+
"text": "Allows to hide the icon in the toast."
|
|
248
|
+
},
|
|
249
|
+
"getter": false,
|
|
250
|
+
"setter": false,
|
|
251
|
+
"reflect": false,
|
|
252
|
+
"defaultValue": "false"
|
|
253
|
+
},
|
|
230
254
|
"ariaLabelCloseIconButton": {
|
|
231
255
|
"type": "string",
|
|
232
256
|
"attribute": "aria-label-close-icon-button",
|