@infineon/infineon-design-system-stencil 20.34.0 → 20.34.1

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 (16) hide show
  1. package/dist/cjs/ifx-card.cjs.entry.js +25 -9
  2. package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/card/card.css +9 -4
  4. package/dist/collection/components/card/card.js +24 -8
  5. package/dist/collection/components/card/card.js.map +1 -1
  6. package/dist/components/ifx-card.js +25 -9
  7. package/dist/components/ifx-card.js.map +1 -1
  8. package/dist/esm/ifx-card.entry.js +25 -9
  9. package/dist/esm/ifx-card.entry.js.map +1 -1
  10. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  11. package/dist/infineon-design-system-stencil/p-f2a060b0.entry.js +2 -0
  12. package/dist/infineon-design-system-stencil/p-f2a060b0.entry.js.map +1 -0
  13. package/dist/types/components/card/card.d.ts +1 -0
  14. package/package.json +1 -1
  15. package/dist/infineon-design-system-stencil/p-c5e3b34f.entry.js +0 -2
  16. package/dist/infineon-design-system-stencil/p-c5e3b34f.entry.js.map +0 -1
package/dist/cjs/ifx-card.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-e8b51424.js');
6
6
 
7
- const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #ebe9e9;border-radius:1px;width:350px;height:auto}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer;border-color:#0A8276}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#ebe9e9}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
7
+ const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto}.card.linkHovered{border-color:#EEEDED}.card.cardHovered{border-color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
8
8
 
9
9
  const Card = class {
10
10
  constructor(hostRef) {
@@ -20,6 +20,7 @@ const Card = class {
20
20
  this.alignment = event.detail;
21
21
  }
22
22
  handleComponentAdjustment() {
23
+ var _a;
23
24
  const image = this.el.querySelector('ifx-card-image');
24
25
  const links = this.el.querySelector('ifx-card-links');
25
26
  if (!image) {
@@ -32,24 +33,39 @@ const Card = class {
32
33
  }
33
34
  else
34
35
  this.noBtns = false;
35
- if (this.href.trim() === "") {
36
+ if (this.href && ((_a = this.href) === null || _a === void 0 ? void 0 : _a.trim()) === "") {
36
37
  this.href = undefined;
37
38
  }
38
39
  }
40
+ handleClassList(el, type, className) {
41
+ el.classList[type](className);
42
+ }
39
43
  handleHovering() {
40
44
  const card = this.el.shadowRoot.querySelector('.card');
45
+ let cardHeadline = this.el.querySelector('ifx-card-headline');
41
46
  card.addEventListener('mouseover', (ev) => {
42
- this.el.querySelector('ifx-card-headline').isHovered = true;
47
+ // const target = ev.target;
48
+ // const relatedTarget = ev.relatedTarget;
49
+ // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
50
+ // this.handleClassList(card, 'add', 'borderHovered')
51
+ // }
43
52
  if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
44
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
45
- this.el.querySelector('ifx-card-headline').isHovered = false;
53
+ this.handleClassList(card, 'add', 'linkHovered');
54
+ }
55
+ else {
56
+ this.handleClassList(card, 'add', 'cardHovered');
57
+ if (cardHeadline) {
58
+ cardHeadline.isHovered = true;
59
+ }
46
60
  }
47
- else
48
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';
49
61
  });
50
62
  card.addEventListener('mouseout', () => {
51
- this.el.querySelector('ifx-card-headline').isHovered = false;
52
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
63
+ if (cardHeadline) {
64
+ cardHeadline.isHovered = false;
65
+ }
66
+ //this.handleClassList(card, 'remove', 'borderHovered')
67
+ this.handleClassList(card, 'remove', 'cardHovered');
68
+ this.handleClassList(card, 'add', 'linkHovered');
53
69
  });
54
70
  }
55
71
  componentWillLoad() {
package/dist/cjs/ifx-card.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 1px solid #ebe9e9;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n border-color: #0A8276;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: #ebe9e9;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: #0A8276 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if(this.href.trim() === \"\") { \n this.href = undefined;\n }\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n card.addEventListener('mouseover', (ev) => {\n this.el.querySelector('ifx-card-headline').isHovered = true;\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n this.el.querySelector('ifx-card-headline').isHovered = false;\n } else this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';\n })\n\n\n card.addEventListener('mouseout', () => {\n this.el.querySelector('ifx-card-headline').isHovered = false;\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ifx-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.linkHovered {\n border-color: tokens.$ifxColorEngineering200;\n }\n\n &.cardHovered {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: tokens.$ifxColorOcean500 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href && this.href?.trim() === \"\") {\n this.href = undefined;\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n let cardHeadline = this.el.querySelector('ifx-card-headline');\n\n card.addEventListener('mouseover', (ev) => {\n\n // const target = ev.target;\n // const relatedTarget = ev.relatedTarget;\n\n // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {\n // this.handleClassList(card, 'add', 'borderHovered')\n // }\n\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.handleClassList(card, 'add', 'linkHovered')\n } else {\n this.handleClassList(card, 'add', 'cardHovered')\n if (cardHeadline) {\n cardHeadline.isHovered = true;\n }\n }\n })\n\n\n card.addEventListener('mouseout', () => {\n if (cardHeadline) {\n cardHeadline.isHovered = false;\n }\n //this.handleClassList(card, 'remove', 'borderHovered')\n this.handleClassList(card, 'remove', 'cardHovered')\n this.handleClassList(card, 'add', 'linkHovered')\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/collection/components/card/card.css CHANGED
@@ -11,13 +11,19 @@
11
11
  display: inline-flex;
12
12
  flex-direction: column;
13
13
  word-wrap: break-word;
14
- background-color: #fff;
14
+ background-color: #FFFFFF;
15
15
  background-clip: border-box;
16
- border: 1px solid #ebe9e9;
16
+ border: 1px solid #EEEDED;
17
17
  border-radius: 1px;
18
18
  width: 350px;
19
19
  height: auto;
20
20
  }
21
+ .card.linkHovered {
22
+ border-color: #EEEDED;
23
+ }
24
+ .card.cardHovered {
25
+ border-color: #0A8276;
26
+ }
21
27
  .card.noBtns .vertical .lower__body-wrapper {
22
28
  padding-bottom: 24px;
23
29
  }
@@ -26,7 +32,6 @@
26
32
  }
27
33
  .card:hover {
28
34
  cursor: pointer;
29
- border-color: #0A8276;
30
35
  }
31
36
  .card .horizontal {
32
37
  display: flex;
@@ -70,7 +75,7 @@
70
75
  padding: 24px 24px 0px 24px;
71
76
  }
72
77
  .card .vertical .lower__body-wrapper:hover {
73
- border-color: #ebe9e9;
78
+ border-color: #EEEDED;
74
79
  }
75
80
  .card.horizontal {
76
81
  flex-direction: row;
package/dist/collection/components/card/card.js CHANGED
@@ -12,6 +12,7 @@ export class Card {
12
12
  this.alignment = event.detail;
13
13
  }
14
14
  handleComponentAdjustment() {
15
+ var _a;
15
16
  const image = this.el.querySelector('ifx-card-image');
16
17
  const links = this.el.querySelector('ifx-card-links');
17
18
  if (!image) {
@@ -24,24 +25,39 @@ export class Card {
24
25
  }
25
26
  else
26
27
  this.noBtns = false;
27
- if (this.href.trim() === "") {
28
+ if (this.href && ((_a = this.href) === null || _a === void 0 ? void 0 : _a.trim()) === "") {
28
29
  this.href = undefined;
29
30
  }
30
31
  }
32
+ handleClassList(el, type, className) {
33
+ el.classList[type](className);
34
+ }
31
35
  handleHovering() {
32
36
  const card = this.el.shadowRoot.querySelector('.card');
37
+ let cardHeadline = this.el.querySelector('ifx-card-headline');
33
38
  card.addEventListener('mouseover', (ev) => {
34
- this.el.querySelector('ifx-card-headline').isHovered = true;
39
+ // const target = ev.target;
40
+ // const relatedTarget = ev.relatedTarget;
41
+ // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
42
+ // this.handleClassList(card, 'add', 'borderHovered')
43
+ // }
35
44
  if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
36
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
37
- this.el.querySelector('ifx-card-headline').isHovered = false;
45
+ this.handleClassList(card, 'add', 'linkHovered');
46
+ }
47
+ else {
48
+ this.handleClassList(card, 'add', 'cardHovered');
49
+ if (cardHeadline) {
50
+ cardHeadline.isHovered = true;
51
+ }
38
52
  }
39
- else
40
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';
41
53
  });
42
54
  card.addEventListener('mouseout', () => {
43
- this.el.querySelector('ifx-card-headline').isHovered = false;
44
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
55
+ if (cardHeadline) {
56
+ cardHeadline.isHovered = false;
57
+ }
58
+ //this.handleClassList(card, 'remove', 'borderHovered')
59
+ this.handleClassList(card, 'remove', 'cardHovered');
60
+ this.handleClassList(card, 'add', 'linkHovered');
45
61
  });
46
62
  }
47
63
  componentWillLoad() {
package/dist/collection/components/card/card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,IAAI;;;qBAGgC,UAAU;;;gBAGlC,EAAE;kBACA,OAAO;;EAGhC,cAAc,CAAC,KAAK;IAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;EAC/B,CAAC;EAED,yBAAyB;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;IACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;IAErD,IAAI,CAAC,KAAK,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;;MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IAE1B,IAAI,CAAC,KAAK,EAAE;MACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;MAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IAE3B,IAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACvB;EACH,CAAC;EAED,cAAc;IACZ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE;MACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC;MAC5D,IAAI,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,gBAAgB,IAAI,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,YAAY,EAAE;QAClF,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;QACxE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;OAC9D;;QAAM,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IACjF,CAAC,CAAC,CAAA;IAGF,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;MACrC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;MAC7D,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1E,CAAC,CAAC,CAAA;EACJ,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;EAClC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,yCAAyC,EAAE,CAAC;EAEnD,CAAC;EAGO,yCAAyC;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;IACnC,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;MACnC,OAAO;KACR;IACD,MAAM,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACvE,IAAI,CAAC,gBAAgB,EAAE;MACrB,OAAO,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;MAC9C,OAAO;KACR;IAED,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACtB,gBAAgB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;EAEjC,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,yBAAyB,EAAE,CAAA;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,8BAAqB,OAAO,EAAC,KAAK,EAChC;YACE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,SAAS,EAAE;QAGjB,IAAI,CAAC,SAAS,KAAK,YAAY;UAC9B,WAAK,KAAK,EAAC,YAAY;YACrB,SAAG,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;cAClE,YAAM,IAAI,EAAC,KAAK,GAAG,CACjB;YAEJ,WAAK,KAAK,EAAC,qBAAqB;cAC9B,SAAG,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;gBACnC,eAAQ,CACN;cACJ;gBACE,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF;QAEP,IAAI,CAAC,SAAS,KAAK,UAAU;UAC5B,WAAK,KAAK,EAAC,UAAU;YACnB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;cACjE,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;gBACnD,YAAM,IAAI,EAAC,KAAK,GAAG,CACf;cAEN,WAAK,KAAK,EAAC,YAAY;gBACrB,eAAQ,CACJ,CACJ;YAEJ,WAAK,KAAK,EAAC,qBAAqB;cAC9B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if(this.href.trim() === \"\") { \n this.href = undefined;\n }\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n card.addEventListener('mouseover', (ev) => {\n this.el.querySelector('ifx-card-headline').isHovered = true;\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n this.el.querySelector('ifx-card-headline').isHovered = false;\n } else this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';\n })\n\n\n card.addEventListener('mouseout', () => {\n this.el.querySelector('ifx-card-headline').isHovered = false;\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href && this.href?.trim() === \"\") {\n this.href = undefined;\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n let cardHeadline = this.el.querySelector('ifx-card-headline');\n\n card.addEventListener('mouseover', (ev) => {\n\n // const target = ev.target;\n // const relatedTarget = ev.relatedTarget;\n\n // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {\n // this.handleClassList(card, 'add', 'borderHovered')\n // }\n\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.handleClassList(card, 'add', 'linkHovered')\n } else {\n this.handleClassList(card, 'add', 'cardHovered')\n if (cardHeadline) {\n cardHeadline.isHovered = true;\n }\n }\n })\n\n\n card.addEventListener('mouseout', () => {\n if (cardHeadline) {\n cardHeadline.isHovered = false;\n }\n //this.handleClassList(card, 'remove', 'borderHovered')\n this.handleClassList(card, 'remove', 'cardHovered')\n this.handleClassList(card, 'add', 'linkHovered')\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"]}
package/dist/components/ifx-card.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #ebe9e9;border-radius:1px;width:350px;height:auto}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer;border-color:#0A8276}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#ebe9e9}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
3
+ const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto}.card.linkHovered{border-color:#EEEDED}.card.cardHovered{border-color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
4
4
 
5
5
  const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
6
6
  constructor() {
@@ -18,6 +18,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
18
18
  this.alignment = event.detail;
19
19
  }
20
20
  handleComponentAdjustment() {
21
+ var _a;
21
22
  const image = this.el.querySelector('ifx-card-image');
22
23
  const links = this.el.querySelector('ifx-card-links');
23
24
  if (!image) {
@@ -30,24 +31,39 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
30
31
  }
31
32
  else
32
33
  this.noBtns = false;
33
- if (this.href.trim() === "") {
34
+ if (this.href && ((_a = this.href) === null || _a === void 0 ? void 0 : _a.trim()) === "") {
34
35
  this.href = undefined;
35
36
  }
36
37
  }
38
+ handleClassList(el, type, className) {
39
+ el.classList[type](className);
40
+ }
37
41
  handleHovering() {
38
42
  const card = this.el.shadowRoot.querySelector('.card');
43
+ let cardHeadline = this.el.querySelector('ifx-card-headline');
39
44
  card.addEventListener('mouseover', (ev) => {
40
- this.el.querySelector('ifx-card-headline').isHovered = true;
45
+ // const target = ev.target;
46
+ // const relatedTarget = ev.relatedTarget;
47
+ // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
48
+ // this.handleClassList(card, 'add', 'borderHovered')
49
+ // }
41
50
  if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
42
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
43
- this.el.querySelector('ifx-card-headline').isHovered = false;
51
+ this.handleClassList(card, 'add', 'linkHovered');
52
+ }
53
+ else {
54
+ this.handleClassList(card, 'add', 'cardHovered');
55
+ if (cardHeadline) {
56
+ cardHeadline.isHovered = true;
57
+ }
44
58
  }
45
- else
46
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';
47
59
  });
48
60
  card.addEventListener('mouseout', () => {
49
- this.el.querySelector('ifx-card-headline').isHovered = false;
50
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
61
+ if (cardHeadline) {
62
+ cardHeadline.isHovered = false;
63
+ }
64
+ //this.handleClassList(card, 'remove', 'borderHovered')
65
+ this.handleClassList(card, 'remove', 'cardHovered');
66
+ this.handleClassList(card, 'add', 'linkHovered');
51
67
  });
52
68
  }
53
69
  componentWillLoad() {
package/dist/components/ifx-card.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,uoDAAuoD;;MCQ1oD,IAAI;;;;;;qBAGgC,UAAU;;;gBAGlC,EAAE;kBACA,OAAO;;EAGhC,cAAc,CAAC,KAAK;IAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAA;GAC9B;EAED,yBAAyB;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;IACrD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;IAErD,IAAI,CAAC,KAAK,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;;MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IAE1B,IAAI,CAAC,KAAK,EAAE;MACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;MAAM,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IAE3B,IAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACvB;GACF;EAED,cAAc;IACZ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAE;MACpC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC;MAC5D,IAAI,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,gBAAgB,IAAI,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,YAAY,EAAE;QAClF,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;QACxE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;OAC9D;;QAAM,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;KAChF,CAAC,CAAA;IAGF,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;MAChC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;MAC7D,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;KACzE,CAAC,CAAA;GACH;EAED,iBAAiB;IACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,yCAAyC,EAAE,CAAC;GAElD;EAGO,yCAAyC;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;IACnC,IAAI,CAAC,OAAO,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;MACnC,OAAO;KACR;IACD,MAAM,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACvE,IAAI,CAAC,gBAAgB,EAAE;MACrB,OAAO,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;MAC9C,OAAO;KACR;IAED,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACtB,gBAAgB,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;GAEhC;EAGD,mBAAmB;IACjB,IAAI,CAAC,yBAAyB,EAAE,CAAA;GACjC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,8BAAqB,OAAO,EAAC,KAAK,EAChC;YACE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,SAAS,EAAE,IAGjB,IAAI,CAAC,SAAS,KAAK,YAAY;MAC9B,WAAK,KAAK,EAAC,YAAY,IACrB,SAAG,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAClE,YAAM,IAAI,EAAC,KAAK,GAAG,CACjB,EAEJ,WAAK,KAAK,EAAC,qBAAqB,IAC9B,SAAG,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACnC,eAAQ,CACN,EACJ,eACE,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACF,EAEP,IAAI,CAAC,SAAS,KAAK,UAAU;MAC5B,WAAK,KAAK,EAAC,UAAU,IACnB,SAAG,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACjE,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,EAAE,EAAE,IACnD,YAAM,IAAI,EAAC,KAAK,GAAG,CACf,EAEN,WAAK,KAAK,EAAC,YAAY,IACrB,eAAQ,CACJ,CACJ,EAEJ,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 1px solid #ebe9e9;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n border-color: #0A8276;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: #ebe9e9;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: #0A8276 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if(this.href.trim() === \"\") { \n this.href = undefined;\n }\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n card.addEventListener('mouseover', (ev) => {\n this.el.querySelector('ifx-card-headline').isHovered = true;\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n this.el.querySelector('ifx-card-headline').isHovered = false;\n } else this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';\n })\n\n\n card.addEventListener('mouseout', () => {\n this.el.querySelector('ifx-card-headline').isHovered = false;\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ifx-card.js","mappings":"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","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.linkHovered {\n border-color: tokens.$ifxColorEngineering200;\n }\n\n &.cardHovered {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: tokens.$ifxColorOcean500 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href && this.href?.trim() === \"\") {\n this.href = undefined;\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n let cardHeadline = this.el.querySelector('ifx-card-headline');\n\n card.addEventListener('mouseover', (ev) => {\n\n // const target = ev.target;\n // const relatedTarget = ev.relatedTarget;\n\n // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {\n // this.handleClassList(card, 'add', 'borderHovered')\n // }\n\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.handleClassList(card, 'add', 'linkHovered')\n } else {\n this.handleClassList(card, 'add', 'cardHovered')\n if (cardHeadline) {\n cardHeadline.isHovered = true;\n }\n }\n })\n\n\n card.addEventListener('mouseout', () => {\n if (cardHeadline) {\n cardHeadline.isHovered = false;\n }\n //this.handleClassList(card, 'remove', 'borderHovered')\n this.handleClassList(card, 'remove', 'cardHovered')\n this.handleClassList(card, 'add', 'linkHovered')\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/esm/ifx-card.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, a as Host, g as getElement } from './index-34963df7.js';
2
2
 
3
- const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #ebe9e9;border-radius:1px;width:350px;height:auto}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer;border-color:#0A8276}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#ebe9e9}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
3
+ const cardCss = "*{font-family:\"Source Sans 3\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto}.card.linkHovered{border-color:#EEEDED}.card.cardHovered{border-color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}";
4
4
 
5
5
  const Card = class {
6
6
  constructor(hostRef) {
@@ -16,6 +16,7 @@ const Card = class {
16
16
  this.alignment = event.detail;
17
17
  }
18
18
  handleComponentAdjustment() {
19
+ var _a;
19
20
  const image = this.el.querySelector('ifx-card-image');
20
21
  const links = this.el.querySelector('ifx-card-links');
21
22
  if (!image) {
@@ -28,24 +29,39 @@ const Card = class {
28
29
  }
29
30
  else
30
31
  this.noBtns = false;
31
- if (this.href.trim() === "") {
32
+ if (this.href && ((_a = this.href) === null || _a === void 0 ? void 0 : _a.trim()) === "") {
32
33
  this.href = undefined;
33
34
  }
34
35
  }
36
+ handleClassList(el, type, className) {
37
+ el.classList[type](className);
38
+ }
35
39
  handleHovering() {
36
40
  const card = this.el.shadowRoot.querySelector('.card');
41
+ let cardHeadline = this.el.querySelector('ifx-card-headline');
37
42
  card.addEventListener('mouseover', (ev) => {
38
- this.el.querySelector('ifx-card-headline').isHovered = true;
43
+ // const target = ev.target;
44
+ // const relatedTarget = ev.relatedTarget;
45
+ // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {
46
+ // this.handleClassList(card, 'add', 'borderHovered')
47
+ // }
39
48
  if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {
40
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
41
- this.el.querySelector('ifx-card-headline').isHovered = false;
49
+ this.handleClassList(card, 'add', 'linkHovered');
50
+ }
51
+ else {
52
+ this.handleClassList(card, 'add', 'cardHovered');
53
+ if (cardHeadline) {
54
+ cardHeadline.isHovered = true;
55
+ }
42
56
  }
43
- else
44
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';
45
57
  });
46
58
  card.addEventListener('mouseout', () => {
47
- this.el.querySelector('ifx-card-headline').isHovered = false;
48
- this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';
59
+ if (cardHeadline) {
60
+ cardHeadline.isHovered = false;
61
+ }
62
+ //this.handleClassList(card, 'remove', 'borderHovered')
63
+ this.handleClassList(card, 'remove', 'cardHovered');
64
+ this.handleClassList(card, 'add', 'linkHovered');
49
65
  });
50
66
  }
51
67
  componentWillLoad() {
package/dist/esm/ifx-card.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 1px solid #ebe9e9;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n border-color: #0A8276;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: #ebe9e9;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: #0A8276 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if(this.href.trim() === \"\") { \n this.href = undefined;\n }\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n card.addEventListener('mouseover', (ev) => {\n this.el.querySelector('ifx-card-headline').isHovered = true;\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n this.el.querySelector('ifx-card-headline').isHovered = false;\n } else this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';\n })\n\n\n card.addEventListener('mouseout', () => {\n this.el.querySelector('ifx-card-headline').isHovered = false;\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ifx-card.entry.js","mappings":"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","names":[],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.linkHovered {\n border-color: tokens.$ifxColorEngineering200;\n }\n\n &.cardHovered {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: tokens.$ifxColorOcean500 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href && this.href?.trim() === \"\") {\n this.href = undefined;\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n let cardHeadline = this.el.querySelector('ifx-card-headline');\n\n card.addEventListener('mouseover', (ev) => {\n\n // const target = ev.target;\n // const relatedTarget = ev.relatedTarget;\n\n // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {\n // this.handleClassList(card, 'add', 'borderHovered')\n // }\n\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.handleClassList(card, 'add', 'linkHovered')\n } else {\n this.handleClassList(card, 'add', 'cardHovered')\n if (cardHeadline) {\n cardHeadline.isHovered = true;\n }\n }\n })\n\n\n card.addEventListener('mouseout', () => {\n if (cardHeadline) {\n cardHeadline.isHovered = false;\n }\n //this.handleClassList(card, 'remove', 'borderHovered')\n this.handleClassList(card, 'remove', 'cardHovered')\n this.handleClassList(card, 'add', 'linkHovered')\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"version":3}
package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-9189c4de",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-d93ed708",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ab2b8d08",[[1,"ifx-multiselect",{"options":[1],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32]},null,{"options":["handleOptionsChange"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-648a6ef3",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-c5e3b34f",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-2e74ead0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-85c8ba9a",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-38c8d322",[[4,"ifx-tab"]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8a6a1364",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"]],{"orientation":["onOrientationChange"]}]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f91dfae0",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-a17d2a55",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-faa6c5c3",[[1,"ifx-accordion-item",{"caption":[1],"initialCollapse":[4,"initial-collapse"],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-97820d62",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-a1234a6c",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},null,{"href":["setInternalHref"]}]]]]'),e)));
1
+ import{p as e,H as i,b as a}from"./p-8faa5e95.js";export{s as setNonce}from"./p-8faa5e95.js";const t=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};t().then((e=>a(JSON.parse('[["p-1556fa15",[[1,"ifx-faq"]]],["p-9189c4de",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-d93ed708",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-9a18e7e5",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-ab2b8d08",[[1,"ifx-multiselect",{"options":[1],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32]},null,{"options":["handleOptionsChange"]}]]],["p-b00de336",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-cdce82f2",[[1,"ifx-alert",{"variant":[1],"icon":[1]}]]],["p-dc5db97f",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-8da56a38",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-3ebe1789",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-7c52cb4d",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-a3d60d08",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-648a6ef3",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogo":[4,"show-logo"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-8c900670",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-2ace3cd4",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-a4dc9d69",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-e8efbe5d",[[1,"ifx-tag",{"icon":[1]}]]],["p-fff21b9b",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-5bf4e6a8",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-d2d626a8",[[1,"ifx-badge"]]],["p-88ec12f3",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-57fbac9f",[[1,"ifx-breadcrumb"]]],["p-9c052f90",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-f2a060b0",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-41096b8a",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-3ec87d76",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-f9511c3f",[[1,"ifx-card-links"]]],["p-cb46b29f",[[1,"ifx-card-overline"]]],["p-c976b0fa",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-26545c0a",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c65373ba",[[1,"ifx-dropdown-header"]]],["p-99a1e9b4",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7cc637e8",[[1,"ifx-dropdown-separator"]]],["p-7675a429",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-b932636d",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-0a8ce360",[[1,"ifx-footer-column"]]],["p-cbb04874",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["p-c9956712",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-31f457fc",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-768d60dc",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-99a30312",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-63ea6580",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-2e74ead0",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-8dca64d7",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["p-c6fdedf4",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["p-85c8ba9a",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-f9058c07",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-38c8d322",[[4,"ifx-tab"]]],["p-3c15a6a5",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-8a6a1364",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"]],{"orientation":["onOrientationChange"]}]]],["p-8227f4d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f91dfae0",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-9939a3a3",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-a17d2a55",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-c035e79c",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["p-faa6c5c3",[[1,"ifx-accordion-item",{"caption":[1],"initialCollapse":[4,"initial-collapse"],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-97820d62",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-a1234a6c",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"internalHref":[32],"setFocus":[64]},null,{"href":["setInternalHref"]}]]]]'),e)));
2
2
  //# sourceMappingURL=infineon-design-system-stencil.esm.js.map
package/dist/infineon-design-system-stencil/p-f2a060b0.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r,h as o,a as e,g as i}from"./p-8faa5e95.js";const t='*{font-family:"Source Sans 3"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto}.card.linkHovered{border-color:#EEEDED}.card.cardHovered{border-color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}';const a=class{constructor(o){r(this,o);this.noBtns=undefined;this.direction="vertical";this.alignment=undefined;this.noImg=undefined;this.href="";this.target="_self"}setImgPosition(r){this.alignment=r.detail}handleComponentAdjustment(){var r;const o=this.el.querySelector("ifx-card-image");const e=this.el.querySelector("ifx-card-links");if(!o){this.noImg=true}else this.noImg=false;if(!e){this.noBtns=true}else this.noBtns=false;if(this.href&&((r=this.href)===null||r===void 0?void 0:r.trim())===""){this.href=undefined}}handleClassList(r,o,e){r.classList[o](e)}handleHovering(){const r=this.el.shadowRoot.querySelector(".card");let o=this.el.querySelector("ifx-card-headline");r.addEventListener("mouseover",(e=>{if(e.target.nodeName==="IFX-CARD-LINKS"||e.target.nodeName==="IFX-BUTTON"){this.handleClassList(r,"add","linkHovered")}else{this.handleClassList(r,"add","cardHovered");if(o){o.isHovered=true}}}));r.addEventListener("mouseout",(()=>{if(o){o.isHovered=false}this.handleClassList(r,"remove","cardHovered");this.handleClassList(r,"add","linkHovered")}))}componentWillLoad(){this.handleComponentAdjustment()}componentDidLoad(){this.handleHovering();this.addEventListenersToHandleCustomFocusState()}addEventListenersToHandleCustomFocusState(){const r=this.el.shadowRoot;if(!r){console.error("element not found");return}const o=r.querySelector(".upper__body-wrapper");if(!o){console.error("upper body wrapper not found");return}r.tabIndex=-1;o.tabIndex=-1}componentWillUpdate(){this.handleComponentAdjustment()}render(){return o(e,null,o("div",{"aria-labelledby":"label",class:`card \n ${this.noBtns?"noBtns":""}\n ${this.direction} \n ${this.alignment}`},this.direction==="horizontal"&&o("div",{class:"horizontal"},o("a",{class:`card-img ${this.noImg?"noImage":""}`,href:this.href},o("slot",{name:"img"})),o("div",{class:"lower__body-wrapper"},o("a",{class:"upper-body",href:this.href},o("slot",null)),o("div",null,o("slot",{name:"buttons"})))),this.direction==="vertical"&&o("div",{class:"vertical"},o("a",{class:"upper__body-wrapper",href:this.href,target:this.target},o("div",{class:`card-img ${this.noImg?"noImage":""}`},o("slot",{name:"img"})),o("div",{class:"upper-body"},o("slot",null))),o("div",{class:"lower__body-wrapper"},o("slot",{name:"buttons"})))))}get el(){return i(this)}};a.style=t;export{a as ifx_card};
2
+ //# sourceMappingURL=p-f2a060b0.entry.js.map
package/dist/infineon-design-system-stencil/p-f2a060b0.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["cardCss","Card","setImgPosition","event","this","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","href","_a","trim","undefined","handleClassList","type","className","classList","handleHovering","card","shadowRoot","cardHeadline","addEventListener","ev","target","nodeName","isHovered","componentWillLoad","componentDidLoad","addEventListenersToHandleCustomFocusState","element","console","error","upperBodyWrapper","tabIndex","componentWillUpdate","render","h","Host","class","direction","name"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.linkHovered {\n border-color: tokens.$ifxColorEngineering200;\n }\n\n &.cardHovered {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: tokens.$ifxColorOcean500 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href && this.href?.trim() === \"\") {\n this.href = undefined;\n }\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n let cardHeadline = this.el.querySelector('ifx-card-headline');\n\n card.addEventListener('mouseover', (ev) => {\n\n // const target = ev.target;\n // const relatedTarget = ev.relatedTarget;\n\n // if (relatedTarget && relatedTarget !== target && !target.contains(relatedTarget)) {\n // this.handleClassList(card, 'add', 'borderHovered')\n // }\n\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.handleClassList(card, 'add', 'linkHovered')\n } else {\n this.handleClassList(card, 'add', 'cardHovered')\n if (cardHeadline) {\n cardHeadline.isHovered = true;\n }\n }\n })\n\n\n card.addEventListener('mouseout', () => {\n if (cardHeadline) {\n cardHeadline.isHovered = false;\n }\n //this.handleClassList(card, 'remove', 'borderHovered')\n this.handleClassList(card, 'remove', 'cardHovered')\n this.handleClassList(card, 'add', 'linkHovered')\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"mappings":"oDAAA,MAAMA,EAAU,ksD,MCQHC,EAAI,M,8DAGgC,W,wDAGxB,G,YACE,O,CAGzB,cAAAC,CAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzB,yBAAAC,G,MACE,MAAMC,EAAQJ,KAAKK,GAAGC,cAAc,kBACpC,MAAMC,EAAQP,KAAKK,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVJ,KAAKQ,MAAQ,I,MACRR,KAAKQ,MAAQ,MAEpB,IAAKD,EAAO,CACVP,KAAKS,OAAS,I,MACTT,KAAKS,OAAS,MAErB,GAAIT,KAAKU,QAAQC,EAAAX,KAAKU,QAAI,MAAAC,SAAA,SAAAA,EAAEC,UAAW,GAAI,CACzCZ,KAAKU,KAAOG,S,EAIhB,eAAAC,CAAgBT,EAAIU,EAAMC,GACxBX,EAAGY,UAAUF,GAAMC,E,CAGrB,cAAAE,GACE,MAAMC,EAAOnB,KAAKK,GAAGe,WAAWd,cAAc,SAC9C,IAAIe,EAAerB,KAAKK,GAAGC,cAAc,qBAEzCa,EAAKG,iBAAiB,aAAcC,IASlC,GAAIA,EAAGC,OAAOC,WAAa,kBAAoBF,EAAGC,OAAOC,WAAa,aAAc,CAClFzB,KAAKc,gBAAgBK,EAAM,MAAO,c,KAC7B,CACLnB,KAAKc,gBAAgBK,EAAM,MAAO,eAClC,GAAIE,EAAc,CAChBA,EAAaK,UAAY,I,MAM/BP,EAAKG,iBAAiB,YAAY,KAChC,GAAID,EAAc,CAChBA,EAAaK,UAAY,K,CAG3B1B,KAAKc,gBAAgBK,EAAM,SAAU,eACrCnB,KAAKc,gBAAgBK,EAAM,MAAO,cAAc,G,CAIpD,iBAAAQ,GACE3B,KAAKG,2B,CAGP,gBAAAyB,GACE5B,KAAKkB,iBACLlB,KAAK6B,2C,CAKC,yCAAAA,GACN,MAAMC,EAAU9B,KAAKK,GAAGe,WACxB,IAAKU,EAAS,CACZC,QAAQC,MAAM,qBACd,M,CAEF,MAAMC,EAAmBH,EAAQxB,cAAc,wBAC/C,IAAK2B,EAAkB,CACrBF,QAAQC,MAAM,gCACd,M,CAGFF,EAAQI,UAAY,EACpBD,EAAiBC,UAAY,C,CAK/B,mBAAAC,GACEnC,KAAKG,2B,CAGP,MAAAiC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,yBAAqB,QAAQE,MAC3B,oBACEvC,KAAKS,OAAS,SAAW,iBACzBT,KAAKwC,yBACLxC,KAAKC,aAGND,KAAKwC,YAAc,cAClBH,EAAA,OAAKE,MAAM,cACTF,EAAA,KAAGE,MAAO,YAAYvC,KAAKQ,MAAQ,UAAY,KAAME,KAAMV,KAAKU,MAC9D2B,EAAA,QAAMI,KAAK,SAGbJ,EAAA,OAAKE,MAAM,uBACTF,EAAA,KAAGE,MAAM,aAAa7B,KAAMV,KAAKU,MAC/B2B,EAAA,cAEFA,EAAA,WACEA,EAAA,QAAMI,KAAK,eAKlBzC,KAAKwC,YAAc,YAClBH,EAAA,OAAKE,MAAM,YACTF,EAAA,KAAGE,MAAM,sBAAsB7B,KAAMV,KAAKU,KAAMc,OAAQxB,KAAKwB,QAC3Da,EAAA,OAAKE,MAAO,YAAYvC,KAAKQ,MAAQ,UAAY,MAC/C6B,EAAA,QAAMI,KAAK,SAGbJ,EAAA,OAAKE,MAAM,cACTF,EAAA,eAIJA,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMI,KAAK,e"}
package/dist/types/components/card/card.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare class Card {
8
8
  target: string;
9
9
  setImgPosition(event: any): void;
10
10
  handleComponentAdjustment(): void;
11
+ handleClassList(el: any, type: any, className: any): void;
11
12
  handleHovering(): void;
12
13
  componentWillLoad(): void;
13
14
  componentDidLoad(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "20.34.0",
3
+ "version": "20.34.1",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
package/dist/infineon-design-system-stencil/p-c5e3b34f.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r,h as e,a as o,g as i}from"./p-8faa5e95.js";const t='*{font-family:"Source Sans 3"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #ebe9e9;border-radius:1px;width:350px;height:auto}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card:hover{cursor:pointer;border-color:#0A8276}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#ebe9e9}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card:focus,.card:focus-visible,.focus{outline:none;border-color:#0A8276 !important}';const a=class{constructor(e){r(this,e);this.noBtns=undefined;this.direction="vertical";this.alignment=undefined;this.noImg=undefined;this.href="";this.target="_self"}setImgPosition(r){this.alignment=r.detail}handleComponentAdjustment(){const r=this.el.querySelector("ifx-card-image");const e=this.el.querySelector("ifx-card-links");if(!r){this.noImg=true}else this.noImg=false;if(!e){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.href=undefined}}handleHovering(){const r=this.el.shadowRoot.querySelector(".card");r.addEventListener("mouseover",(r=>{this.el.querySelector("ifx-card-headline").isHovered=true;if(r.target.nodeName==="IFX-CARD-LINKS"||r.target.nodeName==="IFX-BUTTON"){this.el.shadowRoot.querySelector(".card").style.borderColor="#ebe9e9";this.el.querySelector("ifx-card-headline").isHovered=false}else this.el.shadowRoot.querySelector(".card").style.borderColor="#0A8276"}));r.addEventListener("mouseout",(()=>{this.el.querySelector("ifx-card-headline").isHovered=false;this.el.shadowRoot.querySelector(".card").style.borderColor="#ebe9e9"}))}componentWillLoad(){this.handleComponentAdjustment()}componentDidLoad(){this.handleHovering();this.addEventListenersToHandleCustomFocusState()}addEventListenersToHandleCustomFocusState(){const r=this.el.shadowRoot;if(!r){console.error("element not found");return}const e=r.querySelector(".upper__body-wrapper");if(!e){console.error("upper body wrapper not found");return}r.tabIndex=-1;e.tabIndex=-1}componentWillUpdate(){this.handleComponentAdjustment()}render(){return e(o,null,e("div",{"aria-labelledby":"label",class:`card \n ${this.noBtns?"noBtns":""}\n ${this.direction} \n ${this.alignment}`},this.direction==="horizontal"&&e("div",{class:"horizontal"},e("a",{class:`card-img ${this.noImg?"noImage":""}`,href:this.href},e("slot",{name:"img"})),e("div",{class:"lower__body-wrapper"},e("a",{class:"upper-body",href:this.href},e("slot",null)),e("div",null,e("slot",{name:"buttons"})))),this.direction==="vertical"&&e("div",{class:"vertical"},e("a",{class:"upper__body-wrapper",href:this.href,target:this.target},e("div",{class:`card-img ${this.noImg?"noImage":""}`},e("slot",{name:"img"})),e("div",{class:"upper-body"},e("slot",null))),e("div",{class:"lower__body-wrapper"},e("slot",{name:"buttons"})))))}get el(){return i(this)}};a.style=t;export{a as ifx_card};
2
- //# sourceMappingURL=p-c5e3b34f.entry.js.map
package/dist/infineon-design-system-stencil/p-c5e3b34f.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["cardCss","Card","setImgPosition","event","this","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","href","trim","undefined","handleHovering","card","shadowRoot","addEventListener","ev","isHovered","target","nodeName","style","borderColor","componentWillLoad","componentDidLoad","addEventListenersToHandleCustomFocusState","element","console","error","upperBodyWrapper","tabIndex","componentWillUpdate","render","h","Host","class","direction","name"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host { \n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: #fff;\n background-clip: border-box;\n border: 1px solid #ebe9e9;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n &:hover {\n cursor: pointer;\n border-color: #0A8276;\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: #ebe9e9;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n}\n\n.card:focus,\n.card:focus-visible,\n.focus {\n outline: none;\n border-color: #0A8276 !important;\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @Prop() target: string = \"_self\";\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if(this.href.trim() === \"\") { \n this.href = undefined;\n }\n }\n\n handleHovering() {\n const card = this.el.shadowRoot.querySelector('.card')\n card.addEventListener('mouseover', (ev) => {\n this.el.querySelector('ifx-card-headline').isHovered = true;\n if (ev.target.nodeName === 'IFX-CARD-LINKS' || ev.target.nodeName === 'IFX-BUTTON') {\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n this.el.querySelector('ifx-card-headline').isHovered = false;\n } else this.el.shadowRoot.querySelector('.card').style.borderColor = '#0A8276';\n })\n\n\n card.addEventListener('mouseout', () => {\n this.el.querySelector('ifx-card-headline').isHovered = false;\n this.el.shadowRoot.querySelector('.card').style.borderColor = '#ebe9e9';\n })\n }\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentDidLoad() {\n this.handleHovering();\n this.addEventListenersToHandleCustomFocusState();\n\n }\n\n\n private addEventListenersToHandleCustomFocusState() {\n const element = this.el.shadowRoot;\n if (!element) {\n console.error('element not found');\n return;\n }\n const upperBodyWrapper = element.querySelector('.upper__body-wrapper');\n if (!upperBodyWrapper) {\n console.error('upper body wrapper not found');\n return;\n }\n\n element.tabIndex = -1;\n upperBodyWrapper.tabIndex = -1;\n\n }\n\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }>\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"}`} href={this.href}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class='upper-body' href={this.href}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class='upper__body-wrapper' href={this.href} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oDAAA,MAAMA,EAAU,soD,MCQHC,EAAI,M,8DAGgC,W,wDAGxB,G,YACE,O,CAGzB,cAAAC,CAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQJ,KAAKK,GAAGC,cAAc,kBACpC,MAAMC,EAAQP,KAAKK,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVJ,KAAKQ,MAAQ,I,MACRR,KAAKQ,MAAQ,MAEpB,IAAKD,EAAO,CACVP,KAAKS,OAAS,I,MACTT,KAAKS,OAAS,MAErB,GAAGT,KAAKU,KAAKC,SAAW,GAAI,CAC1BX,KAAKU,KAAOE,S,EAIhB,cAAAC,GACE,MAAMC,EAAOd,KAAKK,GAAGU,WAAWT,cAAc,SAC9CQ,EAAKE,iBAAiB,aAAcC,IAClCjB,KAAKK,GAAGC,cAAc,qBAAqBY,UAAY,KACvD,GAAID,EAAGE,OAAOC,WAAa,kBAAoBH,EAAGE,OAAOC,WAAa,aAAc,CAClFpB,KAAKK,GAAGU,WAAWT,cAAc,SAASe,MAAMC,YAAc,UAC9DtB,KAAKK,GAAGC,cAAc,qBAAqBY,UAAY,K,MAClDlB,KAAKK,GAAGU,WAAWT,cAAc,SAASe,MAAMC,YAAc,SAAS,IAIhFR,EAAKE,iBAAiB,YAAY,KAChChB,KAAKK,GAAGC,cAAc,qBAAqBY,UAAY,MACvDlB,KAAKK,GAAGU,WAAWT,cAAc,SAASe,MAAMC,YAAc,SAAS,G,CAI3E,iBAAAC,GACEvB,KAAKG,2B,CAGP,gBAAAqB,GACExB,KAAKa,iBACLb,KAAKyB,2C,CAKC,yCAAAA,GACN,MAAMC,EAAU1B,KAAKK,GAAGU,WACxB,IAAKW,EAAS,CACZC,QAAQC,MAAM,qBACd,M,CAEF,MAAMC,EAAmBH,EAAQpB,cAAc,wBAC/C,IAAKuB,EAAkB,CACrBF,QAAQC,MAAM,gCACd,M,CAGFF,EAAQI,UAAY,EACpBD,EAAiBC,UAAY,C,CAK/B,mBAAAC,GACE/B,KAAKG,2B,CAGP,MAAA6B,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,yBAAqB,QAAQE,MAC3B,oBACEnC,KAAKS,OAAS,SAAW,iBACzBT,KAAKoC,yBACLpC,KAAKC,aAGND,KAAKoC,YAAc,cAClBH,EAAA,OAAKE,MAAM,cACTF,EAAA,KAAGE,MAAO,YAAYnC,KAAKQ,MAAQ,UAAY,KAAME,KAAMV,KAAKU,MAC9DuB,EAAA,QAAMI,KAAK,SAGbJ,EAAA,OAAKE,MAAM,uBACTF,EAAA,KAAGE,MAAM,aAAazB,KAAMV,KAAKU,MAC/BuB,EAAA,cAEFA,EAAA,WACEA,EAAA,QAAMI,KAAK,eAKlBrC,KAAKoC,YAAc,YAClBH,EAAA,OAAKE,MAAM,YACTF,EAAA,KAAGE,MAAM,sBAAsBzB,KAAMV,KAAKU,KAAMS,OAAQnB,KAAKmB,QAC3Dc,EAAA,OAAKE,MAAO,YAAYnC,KAAKQ,MAAQ,UAAY,MAC/CyB,EAAA,QAAMI,KAAK,SAGbJ,EAAA,OAAKE,MAAM,cACTF,EAAA,eAIJA,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMI,KAAK,e"}