@siemens/ix 2.1.0-beta.1 → 2.1.0-beta.2

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 (66) hide show
  1. package/components/card.js +8 -3
  2. package/components/card.js.map +1 -1
  3. package/components/dropdown.js +54 -46
  4. package/components/dropdown.js.map +1 -1
  5. package/components/ix-action-card.js +2 -4
  6. package/components/ix-action-card.js.map +1 -1
  7. package/components/ix-push-card.js +1 -1
  8. package/components/ix-push-card.js.map +1 -1
  9. package/dist/cjs/ix-action-card.cjs.entry.js +2 -4
  10. package/dist/cjs/ix-action-card.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ix-card_2.cjs.entry.js +6 -2
  12. package/dist/cjs/ix-card_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ix-dropdown.cjs.entry.js +54 -46
  14. package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ix-push-card.cjs.entry.js +1 -1
  16. package/dist/cjs/ix-push-card.cjs.entry.js.map +1 -1
  17. package/dist/cjs/loader.cjs.js +1 -1
  18. package/dist/cjs/siemens-ix.cjs.js +1 -1
  19. package/dist/collection/components/action-card/action-card.css +0 -141
  20. package/dist/collection/components/action-card/action-card.js +1 -3
  21. package/dist/collection/components/action-card/action-card.js.map +1 -1
  22. package/dist/collection/components/card/card.css +103 -0
  23. package/dist/collection/components/card/card.js +25 -1
  24. package/dist/collection/components/card/card.js.map +1 -1
  25. package/dist/collection/components/dropdown/dropdown-controller.js +38 -21
  26. package/dist/collection/components/dropdown/dropdown-controller.js.map +1 -1
  27. package/dist/collection/components/dropdown/dropdown.js +20 -29
  28. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  29. package/dist/collection/components/dropdown/test/dropdown.ct.js +30 -2
  30. package/dist/collection/components/dropdown/test/dropdown.ct.js.map +1 -1
  31. package/dist/collection/components/push-card/push-card.css +0 -56
  32. package/dist/collection/tests/card/card.e2e.js +23 -0
  33. package/dist/collection/tests/card/card.e2e.js.map +1 -0
  34. package/dist/esm/ix-action-card.entry.js +2 -4
  35. package/dist/esm/ix-action-card.entry.js.map +1 -1
  36. package/dist/esm/ix-card_2.entry.js +6 -2
  37. package/dist/esm/ix-card_2.entry.js.map +1 -1
  38. package/dist/esm/ix-dropdown.entry.js +54 -46
  39. package/dist/esm/ix-dropdown.entry.js.map +1 -1
  40. package/dist/esm/ix-push-card.entry.js +1 -1
  41. package/dist/esm/ix-push-card.entry.js.map +1 -1
  42. package/dist/esm/loader.js +1 -1
  43. package/dist/esm/siemens-ix.js +1 -1
  44. package/dist/siemens-ix/p-3e5ce409.entry.js +2 -0
  45. package/dist/siemens-ix/p-3e5ce409.entry.js.map +1 -0
  46. package/dist/siemens-ix/p-731a81c6.entry.js +2 -0
  47. package/dist/siemens-ix/p-731a81c6.entry.js.map +1 -0
  48. package/dist/siemens-ix/p-9f03e475.entry.js +2 -0
  49. package/dist/siemens-ix/p-9f03e475.entry.js.map +1 -0
  50. package/dist/siemens-ix/p-ba379675.entry.js +2 -0
  51. package/dist/siemens-ix/p-ba379675.entry.js.map +1 -0
  52. package/dist/siemens-ix/siemens-ix.esm.js +1 -1
  53. package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
  54. package/dist/types/components/card/card.d.ts +4 -0
  55. package/dist/types/components/dropdown/dropdown-controller.d.ts +8 -5
  56. package/dist/types/components/dropdown/dropdown.d.ts +4 -2
  57. package/dist/types/components.d.ts +14 -6
  58. package/package.json +1 -1
  59. package/dist/siemens-ix/p-0872fe61.entry.js +0 -2
  60. package/dist/siemens-ix/p-0872fe61.entry.js.map +0 -1
  61. package/dist/siemens-ix/p-a38ec9e8.entry.js +0 -2
  62. package/dist/siemens-ix/p-a38ec9e8.entry.js.map +0 -1
  63. package/dist/siemens-ix/p-e12d4a6f.entry.js +0 -2
  64. package/dist/siemens-ix/p-e12d4a6f.entry.js.map +0 -1
  65. package/dist/siemens-ix/p-e359d3c5.entry.js +0 -2
  66. package/dist/siemens-ix/p-e359d3c5.entry.js.map +0 -1
@@ -18,60 +18,4 @@
18
18
  }
19
19
  :host ix-card-content {
20
20
  height: 11rem;
21
- }
22
-
23
- :host(:hover) ix-card.card-insight:hover {
24
- --ix-card-background: var(--theme-color-ghost--hover);
25
- }
26
- :host(:hover) ix-card.card-notification:hover {
27
- --ix-card-background: var(--theme-color-component-1--hover);
28
- }
29
- :host(:hover) ix-card.card-alarm:hover {
30
- --ix-card-background: var(--theme-color-alarm--hover);
31
- }
32
- :host(:hover) ix-card.card-critical:hover {
33
- --ix-card-background: var(--theme-color-critical--hover);
34
- }
35
- :host(:hover) ix-card.card-warning:hover {
36
- --ix-card-background: var(--theme-color-warning--hover);
37
- }
38
- :host(:hover) ix-card.card-success:hover {
39
- --ix-card-background: var(--theme-color-success--hover);
40
- }
41
- :host(:hover) ix-card.card-info:hover {
42
- --ix-card-background: var(--theme-color-info--hover);
43
- }
44
- :host(:hover) ix-card.card-neutral:hover {
45
- --ix-card-background: var(--theme-color-neutral--hover);
46
- }
47
- :host(:hover) ix-card.card-primary:hover {
48
- --ix-card-background: var(--theme-color-primary--hover);
49
- }
50
-
51
- :host(:active) ix-card.card-insight:active {
52
- --ix-card-background: var(--theme-color-ghost--active);
53
- }
54
- :host(:active) ix-card.card-notification:active {
55
- --ix-card-background: var(--theme-color-component-1--active);
56
- }
57
- :host(:active) ix-card.card-alarm:active {
58
- --ix-card-background: var(--theme-color-alarm--active);
59
- }
60
- :host(:active) ix-card.card-critical:active {
61
- --ix-card-background: var(--theme-color-critical--active);
62
- }
63
- :host(:active) ix-card.card-warning:active {
64
- --ix-card-background: var(--theme-color-warning--active);
65
- }
66
- :host(:active) ix-card.card-success:active {
67
- --ix-card-background: var(--theme-color-success--active);
68
- }
69
- :host(:active) ix-card.card-info:active {
70
- --ix-card-background: var(--theme-color-info--active);
71
- }
72
- :host(:active) ix-card.card-neutral:active {
73
- --ix-card-background: var(--theme-color-neutral--active);
74
- }
75
- :host(:active) ix-card.card-primary:active {
76
- --ix-card-background: var(--theme-color-primary--active);
77
21
  }
@@ -0,0 +1,23 @@
1
+ /*
2
+ * SPDX-FileCopyrightText: 2023 Siemens AG
3
+ *
4
+ * SPDX-License-Identifier: MIT
5
+ *
6
+ * This source code is licensed under the MIT license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+ import { expect } from "@playwright/test";
10
+ import { regressionTest } from "../utils/test/index";
11
+ regressionTest.describe('card: basic', () => {
12
+ regressionTest('should not have visual regressions', async ({ page }) => {
13
+ await page.goto('card/basic');
14
+ await page.waitForTimeout(1000);
15
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
16
+ });
17
+ regressionTest('should have selected state', async ({ page }) => {
18
+ await page.goto('card/selected');
19
+ await page.waitForTimeout(1000);
20
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
21
+ });
22
+ });
23
+ //# sourceMappingURL=card.e2e.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"card.e2e.js","sourceRoot":"","sources":["../../../src/tests/card/card.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC1C,cAAc,CAAC,oCAAoC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACtE,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEhC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9D,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('card: basic', () => {\n regressionTest('should not have visual regressions', async ({ page }) => {\n await page.goto('card/basic');\n await page.waitForTimeout(1000);\n\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('should have selected state', async ({ page }) => {\n await page.goto('card/selected');\n await page.waitForTimeout(1000);\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n});\n"]}
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
2
2
 
3
- const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-card{width:100%;height:100%}:host ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host ix-card.card-primary:hover{--ix-card-background:var(--theme-color-primary--hover)}:host ix-card.card-primary:active{--ix-card-background:var(--theme-color-primary--active)}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:hover) ix-card.card-primary:hover{--ix-card-background:var(--theme-color-primary--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:active) ix-card.card-primary:active{--ix-card-background:var(--theme-color-primary--active)}:host(.selected) ix-card{--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected) ix-card.card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected) ix-card.card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected) ix-card.card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected) ix-card.card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected) ix-card.card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected) ix-card.card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected) ix-card.card-neutral{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected) ix-card.card-primary{--ix-card-background:var(--theme-color-primary--active)}";
3
+ const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-card{width:100%;height:100%}";
4
4
  const IxActionCardStyle0 = actionCardCss;
5
5
 
6
6
  const IxActionCard = class {
@@ -13,9 +13,7 @@ const IxActionCard = class {
13
13
  this.selected = false;
14
14
  }
15
15
  render() {
16
- return (h(Host, { key: '3a788ab94d828d99ba24d7cb424d8ea2e06bf389', class: {
17
- selected: this.selected,
18
- } }, h("ix-card", { key: '9662f167e776640a16486a59390541ba7ec5c637', variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '49f97e5dd691c4b2be89767b1e6d8bd74b5daa9a' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : null, h("div", { key: 'f5e947a3c3f2cc4565a0040c0a33da3447099f3b' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", { key: 'ee0460a3e07e6497ccea98a0efcb7d009c5a4d64' }))))));
16
+ return (h(Host, { key: '42f95fd1de84746fcad8094b51909364a10dddb3' }, h("ix-card", { key: '9dfb5ad9782e314dc4751cf2dd1cceebea9f3eca', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '29683fa1a1cc83dea13af3a26232f1b575788d3a' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "24" })) : null, h("div", { key: '125ac2f8b62cc1512b0a7c9d687a3f0a85eca5c3' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.variant === 'insight' ? 'soft' : undefined }, this.subheading)) : null, h("slot", { key: '7b76ddd1c734a4b741022914695bdeb3af2c2988' }))))));
19
17
  }
20
18
  };
21
19
  IxActionCard.style = IxActionCardStyle0;
@@ -1 +1 @@
1
- {"file":"ix-action-card.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,47JAA47J,CAAC;AACn9J,2BAAe,aAAa;;MCqBf,YAAY;;;uBAIc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAED,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,IAC9C,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\n }\n\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n\n ix-card.card-primary:hover {\n --ix-card-background: var(--theme-color-primary--hover);\n }\n\n ix-card.card-primary:active {\n --ix-card-background: var(--theme-color-primary--active);\n }\n}\n\n:host(:hover) {\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n\n ix-card.card-primary:hover {\n --ix-card-background: var(--theme-color-primary--hover);\n }\n}\n\n:host(:active) {\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n\n ix-card.card-primary:active {\n --ix-card-background: var(--theme-color-primary--active);\n }\n}\n\n:host(.selected) {\n ix-card {\n --ix-card-border-color: var(--theme-color-dynamic);\n }\n\n ix-card.card-insight {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-notification {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n ix-card.card-alarm {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n\n ix-card.card-primary {\n --ix-card-background: var(--theme-color-primary--active);\n }\n}\n","/*\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 { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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 = 'insight';\n\n /**\n * Card icon\n */\n @Prop() icon: string | undefined = undefined;\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 render() {\n return (\n <Host\n class={{\n selected: this.selected,\n }}\n >\n <ix-card variant={this.variant} class={'pointer'}>\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography\n format=\"h5\"\n color={this.variant === 'insight' ? 'soft' : undefined}\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"],"version":3}
1
+ {"file":"ix-action-card.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6wBAA6wB,CAAC;AACpyB,2BAAe,aAAa;;MCqBf,YAAY;;;uBAIc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhB,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,IAErD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n position: relative;\n min-width: 13.375rem;\n width: 13.375rem;\n height: 7.5rem;\n min-height: 7.5rem;\n cursor: pointer;\n\n margin: 0.25rem 0;\n\n ix-card {\n width: 100%;\n height: 100%;\n }\n}\n","/*\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 { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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 = 'insight';\n\n /**\n * Card icon\n */\n @Prop() icon: string | undefined = undefined;\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 render() {\n return (\n <Host>\n <ix-card\n selected={this.selected}\n variant={this.variant}\n class={'pointer'}\n >\n <ix-card-content>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"24\"></ix-icon>\n ) : null}\n <div>\n {this.heading ? (\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n ) : null}\n {this.subheading ? (\n <ix-typography\n format=\"h5\"\n color={this.variant === 'insight' ? 'soft' : undefined}\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"],"version":3}
@@ -1,15 +1,19 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-38dea61d.js';
2
2
 
3
- const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}";
3
+ const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected).card-insight{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected).card-notification{--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected).card-alarm{--ix-card-background:var(--theme-color-alarm--active)}:host(.selected).card-critical{--ix-card-background:var(--theme-color-critical--active)}:host(.selected).card-warning{--ix-card-background:var(--theme-color-warning--active)}:host(.selected).card-success{--ix-card-background:var(--theme-color-success--active)}:host(.selected).card-info{--ix-card-background:var(--theme-color-info--active)}:host(.selected).card-neutral{--ix-card-background:var(--theme-color-neutral--active)}:host(.selected).card-primary{--ix-card-background:var(--theme-color-primary--active)}";
4
4
  const IxCardStyle0 = cardCss;
5
5
 
6
6
  const Card = class {
7
7
  constructor(hostRef) {
8
8
  registerInstance(this, hostRef);
9
9
  this.variant = 'insight';
10
+ this.selected = undefined;
10
11
  }
11
12
  render() {
12
- return (h(Host, { key: '1400295cbd52991dcd9a15240919b8c8a57f8543', class: `card-${this.variant}` }, h("div", { key: '4b98f1a17ea28c12790e88223a583d388576f213', class: "card-content" }, h("slot", { key: '79128897b09ee594e113ed03469f3c6bcf7e6420' })), h("div", { key: 'd0e80d0b216840d12edfb418b52d254f0b200bc7', class: "card-footer" }, h("slot", { key: 'a21cb2fe9942019cb238955fc65644b408e70e40', name: "card-accordion" }))));
13
+ return (h(Host, { key: 'f91df8c114ec01e95ae0eba29c8acf3cacbdec25', class: {
14
+ selected: this.selected,
15
+ [`card-${this.variant}`]: true,
16
+ } }, h("div", { key: '24c775b7ae7b2940df9e101b702b91a17a0f6749', class: "card-content" }, h("slot", { key: '57bfc8eb49985aae6aff8ea277475b2012ac8ba2' })), h("div", { key: '8eac7eefd8020827e0ebf38be231de2c7b934797', class: "card-footer" }, h("slot", { key: '207dc0b0ce6279ecb9dfda76e3d03a145a5ff168', name: "card-accordion" }))));
13
17
  }
14
18
  get hostElement() { return getElement(this); }
15
19
  };
@@ -1 +1 @@
1
- {"file":"ix-card.ix-card-content.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,krEAAkrE,CAAC;AACnsE,qBAAe,OAAO;;MCoBT,IAAI;;;uBAMgB,SAAS;;IAExC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE,IACjC,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;ACxCH,MAAM,cAAc,GAAG,otBAAotB,CAAC;AAC5uB,4BAAe,cAAc;;MCShB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n:host(.card-insight) {\n --ix-card-background: transparent;\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n --ix-card-border-color: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';\n\n/**\n * @since 1.6.0\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 = 'insight';\n\n render() {\n return (\n <Host class={`card-${this.variant}`}>\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","/*\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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 1rem;\n height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-card.ix-card-content.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,48IAA48I,CAAC;AAC79I,qBAAe,OAAO;;MCoBT,IAAI;;;uBAMgB,SAAS;;;IAOxC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,4DAAK,KAAK,EAAC,cAAc,IACvB,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,EACP;KACH;;;;;AClDH,MAAM,cAAc,GAAG,otBAAotB,CAAC;AAC5uB,4BAAe,cAAc;;MCShB,WAAW;;;;IACtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n align-self: flex-start;\n overflow: hidden;\n\n width: 20rem;\n\n border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n border-radius: var(--theme-default-border-radius);\n\n .card-content {\n display: block;\n position: relative;\n flex-shrink: 0;\n flex-grow: 1;\n width: 100%;\n height: calc(100% - 2rem);\n background-color: var(--ix-card-background, transparent);\n border-top-left-radius: var(--theme-default-border-radius);\n border-top-right-radius: var(--theme-default-border-radius);\n }\n\n .card-footer {\n display: flex;\n position: relative;\n width: 100%;\n }\n}\n\n:host(.card-insight) {\n --ix-card-background: transparent;\n --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n --ix-card-background: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n --ix-card-background: var(--theme-color-critical);\n color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n --ix-card-background: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n --ix-card-background: var(--theme-color-success);\n color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n --ix-card-background: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n --ix-card-background: var(--theme-color-neutral);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n --ix-card-background: var(--theme-color-primary);\n color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover) {\n --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover) {\n --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active) {\n --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active) {\n --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n --ix-card-border-color: var(--theme-color-dynamic);\n\n &.card-insight {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n &.card-notification {\n --ix-card-background: var(--theme-color-ghost--selected);\n }\n\n &.card-alarm {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n &.card-critical {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n &.card-warning {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n &.card-success {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n &.card-info {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n &.card-neutral {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n\n &.card-primary {\n --ix-card-background: var(--theme-color-primary--active);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';\n\n/**\n * @since 1.6.0\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 = 'insight';\n\n /**\n * @since 2.1.0\n */\n @Prop() selected: boolean;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\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","/*\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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 1rem;\n height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n tag: 'ix-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -15,21 +15,21 @@ function hasDropdownItemWrapperImplemented(item) {
15
15
  }
16
16
  class DropdownController {
17
17
  constructor() {
18
- this.dropdowns = new Set();
19
- this.dropdownRules = {};
18
+ this.dropdowns = new Map();
19
+ this.submenuIds = {};
20
20
  this.isWindowListenerActive = false;
21
21
  }
22
22
  connected(dropdown) {
23
23
  if (!this.isWindowListenerActive) {
24
24
  this.addOverlayListeners();
25
25
  }
26
- this.dropdowns.add(dropdown);
26
+ this.dropdowns.set(dropdown.getId(), dropdown);
27
27
  if (dropdown.discoverAllSubmenus) {
28
28
  this.discoverSubmenus();
29
29
  }
30
30
  }
31
31
  disconnected(dropdown) {
32
- this.dropdowns.delete(dropdown);
32
+ this.dropdowns.delete(dropdown.getId());
33
33
  }
34
34
  discoverSubmenus() {
35
35
  this.dropdowns.forEach((dropdown) => {
@@ -37,44 +37,57 @@ class DropdownController {
37
37
  });
38
38
  }
39
39
  present(dropdown) {
40
- this.dropdownRules[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
41
40
  if (!dropdown.isPresent() && dropdown.willPresent()) {
41
+ this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
42
42
  dropdown.present();
43
- this.dismissPath(dropdown.getId());
43
+ }
44
+ }
45
+ dismissChildren(uid) {
46
+ const childIds = this.submenuIds[uid] || [];
47
+ for (const id of childIds) {
48
+ this.dismiss(this.dropdowns.get(id));
44
49
  }
45
50
  }
46
51
  dismiss(dropdown) {
47
52
  if (dropdown.isPresent() && dropdown.willDismiss()) {
53
+ this.dismissChildren(dropdown.getId());
48
54
  dropdown.dismiss();
49
- delete this.dropdownRules[dropdown.getId()];
55
+ delete this.submenuIds[dropdown.getId()];
50
56
  }
51
57
  }
52
- dismissAll() {
53
- for (const dropdown of this.dropdowns) {
54
- if (dropdown.closeBehavior === 'inside' ||
55
- dropdown.closeBehavior === false) {
56
- continue;
58
+ dismissAll(includeUids) {
59
+ this.dropdowns.forEach((dropdown) => {
60
+ if (!(includeUids === null || includeUids === void 0 ? void 0 : includeUids.includes(dropdown.getId())) &&
61
+ (dropdown.closeBehavior === 'inside' ||
62
+ dropdown.closeBehavior === false)) {
63
+ return;
57
64
  }
58
65
  this.dismiss(dropdown);
59
- }
66
+ });
60
67
  }
61
- dismissPath(uid) {
68
+ dismissOthers(uid) {
62
69
  let path = this.buildComposedPath(uid, new Set());
63
- for (const dropdown of this.dropdowns) {
70
+ this.dropdowns.forEach((dropdown) => {
64
71
  if (dropdown.isPresent() &&
65
72
  dropdown.closeBehavior !== 'inside' &&
66
73
  dropdown.closeBehavior !== false &&
67
74
  !path.has(dropdown.getId())) {
68
75
  this.dismiss(dropdown);
69
76
  }
70
- }
77
+ });
78
+ }
79
+ pathIncludesTrigger(eventTargets) {
80
+ return !!eventTargets.find((element) => { var _a; return !!((_a = element.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(element, 'data-ix-dropdown-trigger')); });
81
+ }
82
+ pathIncludesDropdown(eventTargets) {
83
+ return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
71
84
  }
72
85
  buildComposedPath(id, path) {
73
- if (this.dropdownRules[id]) {
86
+ if (this.submenuIds[id]) {
74
87
  path.add(id);
75
88
  }
76
- for (const ruleKey of Object.keys(this.dropdownRules)) {
77
- if (this.dropdownRules[ruleKey].includes(id)) {
89
+ for (const ruleKey of Object.keys(this.submenuIds)) {
90
+ if (this.submenuIds[ruleKey].includes(id)) {
78
91
  this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));
79
92
  }
80
93
  }
@@ -82,8 +95,12 @@ class DropdownController {
82
95
  }
83
96
  addOverlayListeners() {
84
97
  this.isWindowListenerActive = true;
85
- window.addEventListener('click', () => {
86
- this.dismissAll();
98
+ window.addEventListener('click', (event) => {
99
+ const hasTrigger = this.pathIncludesTrigger(event.composedPath());
100
+ const hasDropdown = this.pathIncludesDropdown(event.composedPath());
101
+ if (!hasTrigger && !hasDropdown) {
102
+ this.dismissAll();
103
+ }
87
104
  });
88
105
  window.addEventListener('keydown', (event) => {
89
106
  if (event.key === 'Escape') {
@@ -174,25 +191,18 @@ const Dropdown = class {
174
191
  addEventListenersFor() {
175
192
  var _a;
176
193
  (_a = this.disposeListener) === null || _a === void 0 ? void 0 : _a.call(this);
177
- const stopEventDispatching = (event) => {
178
- // Prevent default and stop event bubbling to window, otherwise controller will close all dropdowns
179
- if (this.triggerElement.hasAttribute('data-ix-dropdown-trigger')) {
180
- event.preventDefault();
181
- event.stopPropagation();
182
- }
183
- };
184
194
  const toggleController = () => {
185
195
  if (!this.isPresent()) {
186
196
  dropdownController.present(this);
187
197
  }
188
198
  else {
189
199
  dropdownController.dismiss(this);
190
- dropdownController.dismissPath(this.getId());
191
200
  }
201
+ dropdownController.dismissOthers(this.getId());
192
202
  };
193
203
  this.disposeListener = addDisposableEventListener(this.triggerElement, 'click', (event) => {
194
- stopEventDispatching(event);
195
- toggleController();
204
+ if (!event.defaultPrevented)
205
+ toggleController();
196
206
  });
197
207
  this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);
198
208
  }
@@ -327,15 +337,6 @@ const Dropdown = class {
327
337
  }
328
338
  async componentDidLoad() {
329
339
  this.changedTrigger(this.trigger);
330
- // Event listener to check if a dropdown is inside another dropdown
331
- // Cancellation of the event will prevent the closing of the parent dropdown
332
- this.hostElement.addEventListener('check-nested-dropdown', (event) => {
333
- if (event.detail === this.localUId) {
334
- return;
335
- }
336
- event.preventDefault();
337
- event.stopPropagation();
338
- });
339
340
  }
340
341
  async componentDidRender() {
341
342
  await this.applyDropdownPosition();
@@ -343,13 +344,20 @@ const Dropdown = class {
343
344
  ? this.resolveElement(this.anchor)
344
345
  : this.resolveElement(this.trigger));
345
346
  }
347
+ isTriggerElement(element) {
348
+ const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');
349
+ return trigger;
350
+ }
346
351
  onDropdownClick(event) {
347
- event.preventDefault();
348
- event.stopPropagation();
352
+ if (dropdownController.pathIncludesTrigger(event.composedPath())) {
353
+ event.preventDefault();
354
+ if (this.isTriggerElement(event.target))
355
+ return;
356
+ }
349
357
  if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {
350
- dropdownController.dismiss(this);
351
- dropdownController.dismissAll();
358
+ dropdownController.dismissAll([this.getId()]);
352
359
  }
360
+ dropdownController.dismissOthers(this.getId());
353
361
  }
354
362
  /**
355
363
  * Update position of dropdown
@@ -358,7 +366,7 @@ const Dropdown = class {
358
366
  this.applyDropdownPosition();
359
367
  }
360
368
  render() {
361
- return (h(Host, { key: '8fb927fe57c7b259118d9a89a034313d0c07098d', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
369
+ return (h(Host, { key: '6747db1bc7c303781400a3ede0635fc84a32d61b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
362
370
  'dropdown-menu': true,
363
371
  show: this.show,
364
372
  overflow: true,
@@ -366,7 +374,7 @@ const Dropdown = class {
366
374
  margin: '0',
367
375
  minWidth: '0px',
368
376
  position: this.positioningStrategy,
369
- }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '11d80d65c56162887bb134987b24a054c882e65a', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '3046a97cbf32535f78be7256c1f747e708c1ed9c' }))));
377
+ }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '3407be8208d5fb220b80744afb9a5aa938b4b658', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '48df3c460330d7ef698b1624d93ad548e95902d0' }))));
370
378
  }
371
379
  get hostElement() { return getElement(this); }
372
380
  static get watchers() { return {
@@ -1 +1 @@
1
- {"file":"ix-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"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 { IxComponent } from '../utils/internal';\nexport type CloseBehaviour = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n closeBehavior: CloseBehaviour;\n discoverAllSubmenus: boolean;\n\n getAssignedSubmenuIds(): string[];\n getId(): string;\n\n discoverSubmenu(): void;\n\n isPresent(): boolean;\n\n willPresent?(): boolean;\n willDismiss?(): boolean;\n\n present(): void;\n dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n item: unknown\n): item is DropdownItemWrapper {\n return (\n (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n );\n}\n\nexport interface DropdownItemWrapper {\n getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype DropdownRule = Record<string, string[]>;\n\nclass DropdownController {\n private dropdowns = new Set<DropdownInterface>();\n private dropdownRules: DropdownRule = {};\n\n private isWindowListenerActive = false;\n\n connected(dropdown: DropdownInterface) {\n if (!this.isWindowListenerActive) {\n this.addOverlayListeners();\n }\n this.dropdowns.add(dropdown);\n\n if (dropdown.discoverAllSubmenus) {\n this.discoverSubmenus();\n }\n }\n\n disconnected(dropdown: DropdownInterface) {\n this.dropdowns.delete(dropdown);\n }\n\n discoverSubmenus() {\n this.dropdowns.forEach((dropdown) => {\n dropdown.discoverSubmenu();\n });\n }\n\n present(dropdown: DropdownInterface) {\n this.dropdownRules[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n if (!dropdown.isPresent() && dropdown.willPresent()) {\n dropdown.present();\n this.dismissPath(dropdown.getId());\n }\n }\n\n dismiss(dropdown: DropdownInterface) {\n if (dropdown.isPresent() && dropdown.willDismiss()) {\n dropdown.dismiss();\n delete this.dropdownRules[dropdown.getId()];\n }\n }\n\n dismissAll() {\n for (const dropdown of this.dropdowns) {\n if (\n dropdown.closeBehavior === 'inside' ||\n dropdown.closeBehavior === false\n ) {\n continue;\n }\n\n this.dismiss(dropdown);\n }\n }\n\n dismissPath(uid: string) {\n let path = this.buildComposedPath(uid, new Set<string>());\n\n for (const dropdown of this.dropdowns) {\n if (\n dropdown.isPresent() &&\n dropdown.closeBehavior !== 'inside' &&\n dropdown.closeBehavior !== false &&\n !path.has(dropdown.getId())\n ) {\n this.dismiss(dropdown);\n }\n }\n }\n\n private buildComposedPath(id: string, path: Set<string>): Set<string> {\n if (this.dropdownRules[id]) {\n path.add(id);\n }\n\n for (const ruleKey of Object.keys(this.dropdownRules)) {\n if (this.dropdownRules[ruleKey].includes(id)) {\n this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n }\n }\n\n return path;\n }\n\n private addOverlayListeners() {\n this.isWindowListenerActive = true;\n\n window.addEventListener('click', () => {\n this.dismissAll();\n });\n\n window.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.dismissAll();\n }\n });\n }\n}\n\nexport const addDisposableEventListener = (\n element: Element | Window | Document,\n eventType: string,\n callback: EventListenerOrEventListenerObject\n) => {\n element.addEventListener(eventType, callback);\n\n return () => {\n element.removeEventListener(eventType, callback);\n };\n};\n\nexport const addDisposableEventListenerAsArray = (\n listener: {\n element: Element | Window | Document;\n eventType: string;\n callback: EventListenerOrEventListenerObject;\n }[]\n) => {\n const disposables = listener.map(({ callback, element, eventType }) =>\n addDisposableEventListener(element, eventType, callback)\n );\n\n return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n","/*\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\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n background-color: var(--theme-color-2);\n border-radius: var(--theme-default-border-radius);\n @include ix-component;\n min-width: 0px;\n z-index: var(--theme-z-index-dropdown);\n box-shadow: var(--theme-shadow-4);\n\n padding: 0.25rem 0px;\n\n .dropdown-header {\n display: flex;\n align-items: center;\n height: $large-control-height;\n color: var(--theme-menu-header--color);\n padding: 0 $default-space;\n }\n}\n\n:host(.overflow) {\n max-height: 50vh;\n overflow-y: auto;\n}\n\n:host(:not(.show)) {\n display: none;\n}\n","/*\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 autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehaviour,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /**\n * Suppress the automatic placement of the dropdown.\n *\n * @since 2.0.0\n */\n @Prop() suppressAutomaticPlacement = false;\n\n /**\n * Show dropdown\n */\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /**\n * Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n */\n @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Define an anchor element\n */\n @Prop() anchor: string | HTMLElement;\n\n /**\n * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n */\n @Prop() closeBehavior: CloseBehaviour = 'both';\n\n /**\n * Placement of the dropdown\n */\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /**\n * Position strategy\n */\n @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n /**\n * An optional header shown at the top of the dropdown\n */\n @Prop() header?: string;\n\n /**\n * Move dropdown along main axis of alignment\n *\n * @internal\n */\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /**\n * @internal\n */\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /**\n * @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n */\n @Prop() discoverAllSubmenus = false;\n\n /**\n * Fire event after visibility of dropdown has changed\n */\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const stopEventDispatching = (event: Event) => {\n // Prevent default and stop event bubbling to window, otherwise controller will close all dropdowns\n if (this.triggerElement.hasAttribute('data-ix-dropdown-trigger')) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n dropdownController.dismissPath(this.getId());\n }\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event) => {\n stopEventDispatching(event);\n toggleController();\n }\n );\n this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);\n }\n\n /** @internal */\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n\n return dropdownItem;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n // await this.checkForSubmenuAnchor();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n\n // Event listener to check if a dropdown is inside another dropdown\n // Cancellation of the event will prevent the closing of the parent dropdown\n this.hostElement.addEventListener(\n 'check-nested-dropdown',\n (event: CustomEvent<string>) => {\n if (event.detail === this.localUId) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n }\n );\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private onDropdownClick(event: PointerEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n dropdownController.dismiss(this);\n dropdownController.dismissAll();\n }\n }\n\n /**\n * Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"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 { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n closeBehavior: CloseBehavior;\n discoverAllSubmenus: boolean;\n\n getAssignedSubmenuIds(): string[];\n getId(): string;\n\n discoverSubmenu(): void;\n\n isPresent(): boolean;\n\n willPresent?(): boolean;\n willDismiss?(): boolean;\n\n present(): void;\n dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n item: unknown\n): item is DropdownItemWrapper {\n return (\n (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n );\n}\n\nexport interface DropdownItemWrapper {\n getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n private dropdowns: Map<string, DropdownInterface> = new Map<\n string,\n DropdownInterface\n >();\n private submenuIds: SubmenuIds = {};\n\n private isWindowListenerActive = false;\n\n connected(dropdown: DropdownInterface) {\n if (!this.isWindowListenerActive) {\n this.addOverlayListeners();\n }\n this.dropdowns.set(dropdown.getId(), dropdown);\n\n if (dropdown.discoverAllSubmenus) {\n this.discoverSubmenus();\n }\n }\n\n disconnected(dropdown: DropdownInterface) {\n this.dropdowns.delete(dropdown.getId());\n }\n\n discoverSubmenus() {\n this.dropdowns.forEach((dropdown) => {\n dropdown.discoverSubmenu();\n });\n }\n\n present(dropdown: DropdownInterface) {\n if (!dropdown.isPresent() && dropdown.willPresent()) {\n this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n dropdown.present();\n }\n }\n\n dismissChildren(uid: string) {\n const childIds = this.submenuIds[uid] || [];\n for (const id of childIds) {\n this.dismiss(this.dropdowns.get(id));\n }\n }\n\n dismiss(dropdown: DropdownInterface) {\n if (dropdown.isPresent() && dropdown.willDismiss()) {\n this.dismissChildren(dropdown.getId());\n dropdown.dismiss();\n delete this.submenuIds[dropdown.getId()];\n }\n }\n\n dismissAll(includeUids?: string[]) {\n this.dropdowns.forEach((dropdown) => {\n if (\n !includeUids?.includes(dropdown.getId()) &&\n (dropdown.closeBehavior === 'inside' ||\n dropdown.closeBehavior === false)\n ) {\n return;\n }\n\n this.dismiss(dropdown);\n });\n }\n\n dismissOthers(uid: string) {\n let path = this.buildComposedPath(uid, new Set<string>());\n\n this.dropdowns.forEach((dropdown) => {\n if (\n dropdown.isPresent() &&\n dropdown.closeBehavior !== 'inside' &&\n dropdown.closeBehavior !== false &&\n !path.has(dropdown.getId())\n ) {\n this.dismiss(dropdown);\n }\n });\n }\n\n pathIncludesTrigger(eventTargets: EventTarget[]) {\n return !!eventTargets.find(\n (element: HTMLElement) =>\n !!element.hasAttribute?.('data-ix-dropdown-trigger')\n );\n }\n\n private pathIncludesDropdown(eventTargets: EventTarget[]) {\n return !!eventTargets.find(\n (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n );\n }\n\n private buildComposedPath(id: string, path: Set<string>): Set<string> {\n if (this.submenuIds[id]) {\n path.add(id);\n }\n\n for (const ruleKey of Object.keys(this.submenuIds)) {\n if (this.submenuIds[ruleKey].includes(id)) {\n this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n }\n }\n\n return path;\n }\n\n private addOverlayListeners() {\n this.isWindowListenerActive = true;\n\n window.addEventListener('click', (event: PointerEvent) => {\n const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n if (!hasTrigger && !hasDropdown) {\n this.dismissAll();\n }\n });\n\n window.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.dismissAll();\n }\n });\n }\n}\n\nexport const addDisposableEventListener = (\n element: Element | Window | Document,\n eventType: string,\n callback: EventListenerOrEventListenerObject\n) => {\n element.addEventListener(eventType, callback);\n\n return () => {\n element.removeEventListener(eventType, callback);\n };\n};\n\nexport const addDisposableEventListenerAsArray = (\n listener: {\n element: Element | Window | Document;\n eventType: string;\n callback: EventListenerOrEventListenerObject;\n }[]\n) => {\n const disposables = listener.map(({ callback, element, eventType }) =>\n addDisposableEventListener(element, eventType, callback)\n );\n\n return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n","/*\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\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n background-color: var(--theme-color-2);\n border-radius: var(--theme-default-border-radius);\n @include ix-component;\n min-width: 0px;\n z-index: var(--theme-z-index-dropdown);\n box-shadow: var(--theme-shadow-4);\n\n padding: 0.25rem 0px;\n\n .dropdown-header {\n display: flex;\n align-items: center;\n height: $large-control-height;\n color: var(--theme-menu-header--color);\n padding: 0 $default-space;\n }\n}\n\n:host(.overflow) {\n max-height: 50vh;\n overflow-y: auto;\n}\n\n:host(:not(.show)) {\n display: none;\n}\n","/*\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 autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehavior,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /**\n * Suppress the automatic placement of the dropdown.\n *\n * @since 2.0.0\n */\n @Prop() suppressAutomaticPlacement = false;\n\n /**\n * Show dropdown\n */\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /**\n * Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n */\n @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Define an anchor element\n */\n @Prop() anchor: string | HTMLElement;\n\n /**\n * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n */\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /**\n * Placement of the dropdown\n */\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /**\n * Position strategy\n */\n @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n /**\n * An optional header shown at the top of the dropdown\n */\n @Prop() header?: string;\n\n /**\n * Move dropdown along main axis of alignment\n *\n * @internal\n */\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /**\n * @internal\n */\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /**\n * @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n */\n @Prop() discoverAllSubmenus = false;\n\n /**\n * Fire event after visibility of dropdown has changed\n */\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n }\n\n dropdownController.dismissOthers(this.getId());\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event: PointerEvent) => {\n if (!event.defaultPrevented) toggleController();\n }\n );\n this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);\n }\n\n /** @internal */\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n\n return dropdownItem;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n // await this.checkForSubmenuAnchor();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private isTriggerElement(element: HTMLElement) {\n const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n return trigger;\n }\n\n private onDropdownClick(event: PointerEvent) {\n if (dropdownController.pathIncludesTrigger(event.composedPath())) {\n event.preventDefault();\n\n if (this.isTriggerElement(event.target as HTMLElement)) return;\n }\n\n if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n dropdownController.dismissAll([this.getId()]);\n }\n\n dropdownController.dismissOthers(this.getId());\n }\n\n /**\n * Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-38dea61d.js';
2
2
 
3
- const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:hover) ix-card.card-primary:hover{--ix-card-background:var(--theme-color-primary--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:active) ix-card.card-primary:active{--ix-card-background:var(--theme-color-primary--active)}";
3
+ const pushCardCss = ":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
4
4
  const IxPushCardStyle0 = pushCardCss;
5
5
 
6
6
  const PushCard = class {
@@ -1 +1 @@
1
- {"file":"ix-push-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,y2DAAy2D,CAAC;AAC93D,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;uBAoBT,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACE,EAAC,IAAI,uDACH,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,0EACE,wEACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,6DAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5D,6DAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChB,sEAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChB,sEAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClB,0EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxC,8DAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"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\n:host {\n display: block;\n position: relative;\n\n .icon {\n transform: scale(1.25);\n }\n\n .notification {\n font-size: 40px;\n }\n\n ix-card-content {\n height: 11rem;\n }\n}\n\n:host(:hover) {\n ix-card.card-insight:hover {\n --ix-card-background: var(--theme-color-ghost--hover);\n }\n\n ix-card.card-notification:hover {\n --ix-card-background: var(--theme-color-component-1--hover);\n }\n\n ix-card.card-alarm:hover {\n --ix-card-background: var(--theme-color-alarm--hover);\n }\n\n ix-card.card-critical:hover {\n --ix-card-background: var(--theme-color-critical--hover);\n }\n\n ix-card.card-warning:hover {\n --ix-card-background: var(--theme-color-warning--hover);\n }\n\n ix-card.card-success:hover {\n --ix-card-background: var(--theme-color-success--hover);\n }\n\n ix-card.card-info:hover {\n --ix-card-background: var(--theme-color-info--hover);\n }\n\n ix-card.card-neutral:hover {\n --ix-card-background: var(--theme-color-neutral--hover);\n }\n\n ix-card.card-primary:hover {\n --ix-card-background: var(--theme-color-primary--hover);\n }\n}\n\n:host(:active) {\n ix-card.card-insight:active {\n --ix-card-background: var(--theme-color-ghost--active);\n }\n\n ix-card.card-notification:active {\n --ix-card-background: var(--theme-color-component-1--active);\n }\n\n ix-card.card-alarm:active {\n --ix-card-background: var(--theme-color-alarm--active);\n }\n\n ix-card.card-critical:active {\n --ix-card-background: var(--theme-color-critical--active);\n }\n\n ix-card.card-warning:active {\n --ix-card-background: var(--theme-color-warning--active);\n }\n\n ix-card.card-success:active {\n --ix-card-background: var(--theme-color-success--active);\n }\n\n ix-card.card-info:active {\n --ix-card-background: var(--theme-color-info--active);\n }\n\n ix-card.card-neutral:active {\n --ix-card-background: var(--theme-color-neutral--active);\n }\n\n ix-card.card-primary:active {\n --ix-card-background: var(--theme-color-primary--active);\n }\n}\n","/*\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 { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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 | undefined = undefined;\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 = 'insight';\n\n /**\n * Collapse the card\n * @since 2.1.0\n */\n @Prop() collapse: boolean = true;\n\n render() {\n const color: TypographyColors =\n this.variant === 'insight' || this.variant === 'notification'\n ? 'std'\n : undefined;\n\n return (\n <Host>\n <ix-card variant={this.variant}>\n <ix-card-content>\n <ix-card-title>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <span class={'notification'}>{this.notification ?? 0}</span>\n <slot name=\"title-action\"></slot>\n </ix-card-title>\n <ix-typography color={color} format=\"h4\">\n {this.heading}\n </ix-typography>\n <ix-typography color={color}>{this.subheading}</ix-typography>\n </ix-card-content>\n <ix-card-accordion collapse={this.collapse}>\n <slot></slot>\n </ix-card-accordion>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ix-push-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gJAAgJ,CAAC;AACrK,yBAAe,WAAW;;MCsBb,QAAQ;;;oBAIgB,SAAS;;;;uBAoBT,SAAS;wBAMhB,IAAI;;IAEhC,MAAM;;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,cAAc;cACzD,KAAK;cACL,SAAS,CAAC;QAEhB,QACE,EAAC,IAAI,uDACH,gEAAS,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5B,0EACE,wEACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,6DAAM,KAAK,EAAE,cAAc,IAAG,MAAA,IAAI,CAAC,YAAY,mCAAI,CAAC,CAAQ,EAC5D,6DAAM,IAAI,EAAC,cAAc,GAAQ,CACnB,EAChB,sEAAe,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,IAAI,IACrC,IAAI,CAAC,OAAO,CACC,EAChB,sEAAe,KAAK,EAAE,KAAK,IAAG,IAAI,CAAC,UAAU,CAAiB,CAC9C,EAClB,0EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxC,8DAAa,CACK,CACZ,CACL,EACP;KACH;;;;;;","names":[],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"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\n:host {\n display: block;\n position: relative;\n\n .icon {\n transform: scale(1.25);\n }\n\n .notification {\n font-size: 40px;\n }\n\n ix-card-content {\n height: 11rem;\n }\n}\n","/*\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 { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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 | undefined = undefined;\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 = 'insight';\n\n /**\n * Collapse the card\n * @since 2.1.0\n */\n @Prop() collapse: boolean = true;\n\n render() {\n const color: TypographyColors =\n this.variant === 'insight' || this.variant === 'notification'\n ? 'std'\n : undefined;\n\n return (\n <Host>\n <ix-card variant={this.variant}>\n <ix-card-content>\n <ix-card-title>\n {this.icon ? (\n <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n ) : null}\n <span class={'notification'}>{this.notification ?? 0}</span>\n <slot name=\"title-action\"></slot>\n </ix-card-title>\n <ix-typography color={color} format=\"h4\">\n {this.heading}\n </ix-typography>\n <ix-typography color={color}>{this.subheading}</ix-typography>\n </ix-card-content>\n <ix-card-accordion collapse={this.collapse}>\n <slot></slot>\n </ix-card-accordion>\n </ix-card>\n </Host>\n );\n }\n}\n"],"version":3}