@infineon/infineon-design-system-stencil 20.24.0 → 20.24.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.
- package/dist/cjs/ifx-card.cjs.entry.js +4 -1
- package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
- package/dist/collection/components/card/card.js +4 -1
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/card/card.stories.js +4 -6
- package/dist/collection/components/card/card.stories.js.map +1 -1
- package/dist/components/ifx-card.js +4 -1
- package/dist/components/ifx-card.js.map +1 -1
- package/dist/esm/ifx-card.entry.js +4 -1
- package/dist/esm/ifx-card.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-b0dd9a03.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b0dd9a03.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-d4397d3b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-d4397d3b.entry.js.map +0 -1
|
@@ -32,6 +32,9 @@ const Card = class {
|
|
|
32
32
|
}
|
|
33
33
|
else
|
|
34
34
|
this.noBtns = false;
|
|
35
|
+
if (this.href.trim() === "") {
|
|
36
|
+
this.href = undefined;
|
|
37
|
+
}
|
|
35
38
|
}
|
|
36
39
|
handleHovering() {
|
|
37
40
|
const card = this.el.shadowRoot.querySelector('.card');
|
|
@@ -57,7 +60,7 @@ const Card = class {
|
|
|
57
60
|
this.addEventListenersToHandleCustomFocusState();
|
|
58
61
|
}
|
|
59
62
|
addEventListenersToHandleCustomFocusState() {
|
|
60
|
-
const element = this.el.shadowRoot
|
|
63
|
+
const element = this.el.shadowRoot;
|
|
61
64
|
if (!element) {
|
|
62
65
|
console.error('element not found');
|
|
63
66
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-card.entry.cjs.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;
|
|
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 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}
|
|
@@ -24,6 +24,9 @@ export class Card {
|
|
|
24
24
|
}
|
|
25
25
|
else
|
|
26
26
|
this.noBtns = false;
|
|
27
|
+
if (this.href.trim() === "") {
|
|
28
|
+
this.href = undefined;
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
31
|
handleHovering() {
|
|
29
32
|
const card = this.el.shadowRoot.querySelector('.card');
|
|
@@ -49,7 +52,7 @@ export class Card {
|
|
|
49
52
|
this.addEventListenersToHandleCustomFocusState();
|
|
50
53
|
}
|
|
51
54
|
addEventListenersToHandleCustomFocusState() {
|
|
52
|
-
const element = this.el.shadowRoot
|
|
55
|
+
const element = this.el.shadowRoot;
|
|
53
56
|
if (!element) {
|
|
54
57
|
console.error('element not found');
|
|
55
58
|
return;
|
|
@@ -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;
|
|
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.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 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"]}
|
|
@@ -48,18 +48,16 @@ const DefaultTemplate = (args) => `<ifx-card direction="${args.direction}" href=
|
|
|
48
48
|
</ifx-card-text>` : ""}
|
|
49
49
|
${args.button === 'button'
|
|
50
50
|
? `<ifx-card-links slot="buttons">
|
|
51
|
-
<ifx-button
|
|
52
|
-
<ifx-button
|
|
53
|
-
<ifx-button color="primary">Button</ifx-button>
|
|
54
|
-
<ifx-button color="secondary">Button</ifx-button>
|
|
51
|
+
<ifx-button variant="primary">Button</ifx-button>
|
|
52
|
+
<ifx-button variant="secondary">Button</ifx-button>
|
|
55
53
|
</ifx-card-links>` : ""}
|
|
56
54
|
${args.button === 'link'
|
|
57
55
|
? `<ifx-card-links slot="buttons">
|
|
58
|
-
<ifx-link
|
|
56
|
+
<ifx-link href="https://google.com" target="_blank">
|
|
59
57
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
60
58
|
Link
|
|
61
59
|
</ifx-link>
|
|
62
|
-
<ifx-link
|
|
60
|
+
<ifx-link href="https://yahoo.com" target="_blank">
|
|
63
61
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
64
62
|
Link
|
|
65
63
|
</ifx-link>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,IAAI,EAAE;IACJ,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,WAAW,EAAE,gGAAgG;IAC7G,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,OAAO;GAClB;EAED,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;MACnC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,SAAS,EAAE;MACT,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;MACnC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,QAAQ,EAAE;MACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,wBAAwB,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM;gCACpD,IAAI,CAAC,QAAQ;MACvC,IAAI,CAAC,QAAQ;EACf,CAAC,CAAC;UACI,IAAI,CAAC,QAAQ;6BACM;EACzB,CAAC,CAAC,EAAE;QACA,IAAI,CAAC,QAAQ;EACjB,CAAC,CAAC;UACI,IAAI,CAAC,QAAQ;6BACM;EACzB,CAAC,CAAC,EAAE;OACD,IAAI,CAAC,WAAW;EACnB,CAAC,CAAC;UACI,IAAI,CAAC,WAAW;yBACD,CAAC,CAAC,CAAC,EAAE;QACtB,IAAI,CAAC,MAAM,KAAK,QAAQ;EAC5B,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["\nexport default {\n title: \"Components/Card\",\n tags: ['autodocs'],\n args: {\n direction: 'vertical',\n overline: \"Overline\",\n headline: \"Headline\",\n description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n button: 'button',\n href: \"\",\n target: '_blank',\n position: 'right'\n },\n\n argTypes: {\n button: {\n options: ['button', 'link', 'none'],\n control: { type: 'radio' }\n },\n direction: {\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' }\n },\n\n position: {\n options: ['left', 'right'],\n control: { type: 'radio' }\n },\n target: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' }\n }\n }\n};\n\nconst DefaultTemplate = (args) =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg\" alt=\"\" slot=\"img\"></ifx-card-image>\n ${args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : \"\"}\n ${args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : \"\"}\n ${args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>` : \"\"}\n ${args.button === 'button'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-button variant=\"primary\">Button</ifx-button>\n <ifx-button variant=\"secondary\">Button</ifx-button>\n </ifx-card-links>` : \"\"}\n ${args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link href=\"https://google.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>` : \"\"}\n </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {\n position: {\n table: {\n disable: true\n }\n }\n}\n\nconst HorizontalTemplate = (args) =>\n `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n <ifx-card-image position=\"${args.position}\" src=\"https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg\" alt=\"\" slot=\"img\"></ifx-card-image>\n ${args.overline\n ? `<ifx-card-overline>\n ${args.overline}\n </ifx-card-overline>`\n : \"\"}\n ${args.headline\n ? `<ifx-card-headline>\n ${args.headline}\n </ifx-card-headline>`\n : \"\"}\n ${args.description\n ? `<ifx-card-text>\n ${args.description}\n </ifx-card-text>`\n : \"\"}\n ${args.button === 'link'\n ? `<ifx-card-links slot=\"buttons\">\n <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n <ifx-icon icon=\"calendar16\"></ifx-icon>\n Link\n </ifx-link>\n </ifx-card-links>` : \"\"}\n </ifx-card>`;\n\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.argTypes = {\n direction: 'horizontal',\n image: {\n table: {\n disable: true\n }\n },\n button: {\n options: ['link', 'none'],\n control: { type: 'radio' },\n },\n}\n\n"]}
|
|
@@ -30,6 +30,9 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
|
|
|
30
30
|
}
|
|
31
31
|
else
|
|
32
32
|
this.noBtns = false;
|
|
33
|
+
if (this.href.trim() === "") {
|
|
34
|
+
this.href = undefined;
|
|
35
|
+
}
|
|
33
36
|
}
|
|
34
37
|
handleHovering() {
|
|
35
38
|
const card = this.el.shadowRoot.querySelector('.card');
|
|
@@ -55,7 +58,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
|
|
|
55
58
|
this.addEventListenersToHandleCustomFocusState();
|
|
56
59
|
}
|
|
57
60
|
addEventListenersToHandleCustomFocusState() {
|
|
58
|
-
const element = this.el.shadowRoot
|
|
61
|
+
const element = this.el.shadowRoot;
|
|
59
62
|
if (!element) {
|
|
60
63
|
console.error('element not found');
|
|
61
64
|
return;
|
|
@@ -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;
|
|
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: #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 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}
|
|
@@ -28,6 +28,9 @@ const Card = class {
|
|
|
28
28
|
}
|
|
29
29
|
else
|
|
30
30
|
this.noBtns = false;
|
|
31
|
+
if (this.href.trim() === "") {
|
|
32
|
+
this.href = undefined;
|
|
33
|
+
}
|
|
31
34
|
}
|
|
32
35
|
handleHovering() {
|
|
33
36
|
const card = this.el.shadowRoot.querySelector('.card');
|
|
@@ -53,7 +56,7 @@ const Card = class {
|
|
|
53
56
|
this.addEventListenersToHandleCustomFocusState();
|
|
54
57
|
}
|
|
55
58
|
addEventListenersToHandleCustomFocusState() {
|
|
56
|
-
const element = this.el.shadowRoot
|
|
59
|
+
const element = this.el.shadowRoot;
|
|
57
60
|
if (!element) {
|
|
58
61
|
console.error('element not found');
|
|
59
62
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-card.entry.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;
|
|
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 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,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as t}from"./p-d7742bc4.js";export{s as setNonce}from"./p-d7742bc4.js";const a=()=>{{o(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t([["p-daa18a02",[[1,"ifx-faq"]]],["p-b948dddd",[[1,"ifx-modal",{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],open:[64],close:[64]}]]],["p-e3555da3",[[1,"ifx-pagination",{currentPage:[2,"current-page"],total:[2],internalPage:[32],itemsPerPage:[32],numberOfPages:[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-b3ddd1b4",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],theme:[1],variant:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-49ba76c2",[[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]}]]],["p-77282ed3",[[1,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5c56e3e3",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-7c11ac38",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-523c4625",[[1,"ifx-chip",{placeholder:[1],selectedValue:[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-33dbbbc5",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-f17e63b9",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-420563e0",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-0aab4f62",[[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-16e36f18",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1],hideComponent:[4,"hide-component"]}]]],["p-3af1f941",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-4fe55791",[[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]}]]],["p-855e4fcd",[[1,"ifx-tag",{icon:[1]}]]],["p-81a06b51",[[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]}]]],["p-bd8a9776",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-3cc3d562",[[1,"ifx-badge"]]],["p-9a69fd75",[[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-70630e5b",[[1,"ifx-breadcrumb"]]],["p-5c6a1278",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-
|
|
1
|
+
import{p as e,H as i,b as t}from"./p-d7742bc4.js";export{s as setNonce}from"./p-d7742bc4.js";const a=()=>{{o(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t([["p-daa18a02",[[1,"ifx-faq"]]],["p-b948dddd",[[1,"ifx-modal",{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],open:[64],close:[64]}]]],["p-e3555da3",[[1,"ifx-pagination",{currentPage:[2,"current-page"],total:[2],internalPage:[32],itemsPerPage:[32],numberOfPages:[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-b3ddd1b4",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],theme:[1],variant:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-49ba76c2",[[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]}]]],["p-77282ed3",[[1,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5c56e3e3",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-7c11ac38",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-523c4625",[[1,"ifx-chip",{placeholder:[1],selectedValue:[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-33dbbbc5",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-f17e63b9",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-420563e0",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-0aab4f62",[[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-16e36f18",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1],hideComponent:[4,"hide-component"]}]]],["p-3af1f941",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-4fe55791",[[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]}]]],["p-855e4fcd",[[1,"ifx-tag",{icon:[1]}]]],["p-81a06b51",[[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]}]]],["p-bd8a9776",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-3cc3d562",[[1,"ifx-badge"]]],["p-9a69fd75",[[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-70630e5b",[[1,"ifx-breadcrumb"]]],["p-5c6a1278",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-b0dd9a03",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-97bff448",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-a80b9817",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-1655ea15",[[1,"ifx-card-links"]]],["p-fb3751b2",[[1,"ifx-card-overline"]]],["p-8bb51eaa",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-c135e109",[[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"]]]]],["p-f30517a0",[[1,"ifx-dropdown-header"]]],["p-f7bd24e6",[[1,"ifx-dropdown-menu",{isOpen:[4,"is-open"],size:[1],hideTopPadding:[32],filteredItems:[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-7a6ed8e4",[[1,"ifx-dropdown-separator"]]],["p-62f7661d",[[1,"ifx-dropdown-trigger",{isOpen:[4,"is-open"]}]]],["p-61fb2138",[[1,"ifx-footer",{variant:[1],large:[32],medium:[32]}]]],["p-effdc0a0",[[1,"ifx-footer-column"]]],["p-ff75825a",[[1,"ifx-link",{href:[1],target:[1],size:[1],variant:[1]}]]],["p-c1775766",[[1,"ifx-list-group",{flush:[4],bulletpoint:[4],notification:[4]}]]],["p-d18c5afc",[[1,"ifx-list-notification",{titleText:[1,"title-text"],isFlush:[4,"is-flush"],creationTime:[8,"creation-time"],postTime:[32],shownTime:[32]}]]],["p-f738af3b",[[1,"ifx-navbar-menu",{menu:[32]}]]],["p-0a848e5d",[[1,"ifx-navbar-menu-item",{href:[1],target:[1],hide:[4]}]]],["p-58792b34",[[1,"ifx-progress-bar",{value:[2],label:[1],size:[1],showLabel:[4,"show-label"],internalValue:[32]}]]],["p-524cc747",[[1,"ifx-radio-button",{disabled:[4],value:[4],error:[4],size:[1],internalValue:[32],hasSlot:[32]}]]],["p-26f94689",[[1,"ifx-sidebar",{applicationName:[1,"application-name"]}]]],["p-289d719f",[[1,"ifx-spinner",{size:[1],variant:[1]}]]],["p-cf80d1c3",[[1,"ifx-status",{label:[1],border:[4],color:[1]}]]],["p-873be016",[[1,"ifx-switch",{value:[4],name:[1],disabled:[4],internalValue:[32]}]]],["p-bfcfd567",[[4,"ifx-tab"]]],["p-4a197bc8",[[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-65047e59",[[1,"ifx-tabs",{tabs:[16],orientation:[1],internalOrientation:[32],activeTabIndex:[32],tabRefs:[32],tabHeaderRefs:[32],tabTitles:[32],disabledTabs:[32],tabObjects:[32]},[[0,"slotchange","onSlotChange"]]]]],["p-cdabd77c",[[0,"ifx-icon",{icon:[1025],ifxIcon:[1032,"ifx-icon"]}]]],["p-57d22122",[[1,"ifx-checkbox",{disabled:[4],value:[4],error:[4],name:[1],size:[1],indeterminate:[4],internalValue:[32]}]]],["p-89f5e38f",[[1,"ifx-search-field",{value:[1025],showDeleteIcon:[4,"show-delete-icon"],disabled:[4],size:[1],insideDropdown:[32],showDeleteIconInternalState:[32],isFocused:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-4f86a6f2",[[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-effe68db",[[1,"ifx-number-indicator",{inverted:[4]}]]],["p-42f58a5f",[[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-a157cc84",[[1,"ifx-icon-button",{variant:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-4c5603f3",[[1,"ifx-button",{variant:[1],theme:[1],size:[1],disabled:[4],href:[1],target:[1],internalHref:[32],setFocus:[64]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r,h as o,a as e,g as i}from"./p-d7742bc4.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(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(){const r=this.el.querySelector("ifx-card-image");const o=this.el.querySelector("ifx-card-links");if(!r){this.noImg=true}else this.noImg=false;if(!o){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 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",{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-b0dd9a03.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 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,CAGzBC,eAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzBC,4BACE,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,EAIhBC,iBACE,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,CAI3EC,oBACEvB,KAAKG,2B,CAGPqB,mBACExB,KAAKa,iBACLb,KAAKyB,2C,CAKCA,4CACN,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/BC,sBACE/B,KAAKG,2B,CAGP6B,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MACH,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "20.24.
|
|
3
|
+
"version": "20.24.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",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r,h as o,a as e,g as t}from"./p-d7742bc4.js";const i='*{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(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(){const r=this.el.querySelector("ifx-card-image");const o=this.el.querySelector("ifx-card-links");if(!r){this.noImg=true}else this.noImg=false;if(!o){this.noBtns=true}else this.noBtns=false}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.firstChild;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",{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 t(this)}};a.style=i;export{a as ifx_card};
|
|
2
|
-
//# sourceMappingURL=p-d4397d3b.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["cardCss","Card","setImgPosition","event","this","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","handleHovering","card","shadowRoot","addEventListener","ev","isHovered","target","nodeName","style","borderColor","componentWillLoad","componentDidLoad","addEventListenersToHandleCustomFocusState","element","firstChild","console","error","upperBodyWrapper","tabIndex","componentWillUpdate","render","h","Host","class","direction","href","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\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.firstChild;\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 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,CAGzBC,eAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzBC,4BACE,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,K,CAGvBC,iBACE,MAAMC,EAAOX,KAAKK,GAAGO,WAAWN,cAAc,SAC9CK,EAAKE,iBAAiB,aAAcC,IAClCd,KAAKK,GAAGC,cAAc,qBAAqBS,UAAY,KACvD,GAAID,EAAGE,OAAOC,WAAa,kBAAoBH,EAAGE,OAAOC,WAAa,aAAc,CAClFjB,KAAKK,GAAGO,WAAWN,cAAc,SAASY,MAAMC,YAAc,UAC9DnB,KAAKK,GAAGC,cAAc,qBAAqBS,UAAY,K,MAClDf,KAAKK,GAAGO,WAAWN,cAAc,SAASY,MAAMC,YAAc,SAAS,IAIhFR,EAAKE,iBAAiB,YAAY,KAChCb,KAAKK,GAAGC,cAAc,qBAAqBS,UAAY,MACvDf,KAAKK,GAAGO,WAAWN,cAAc,SAASY,MAAMC,YAAc,SAAS,G,CAI3EC,oBACEpB,KAAKG,2B,CAGPkB,mBACErB,KAAKU,iBACLV,KAAKsB,2C,CAKCA,4CACN,MAAMC,EAAUvB,KAAKK,GAAGO,WAAWY,WACnC,IAAKD,EAAS,CACZE,QAAQC,MAAM,qBACd,M,CAEF,MAAMC,EAAmBJ,EAAQjB,cAAc,wBAC/C,IAAKqB,EAAkB,CACrBF,QAAQC,MAAM,gCACd,M,CAGFH,EAAQK,UAAY,EACpBD,EAAiBC,UAAY,C,CAK/BC,sBACE7B,KAAKG,2B,CAGP2B,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MACH,oBACEjC,KAAKS,OAAS,SAAW,iBACzBT,KAAKkC,yBACLlC,KAAKC,aAGND,KAAKkC,YAAc,cAClBH,EAAA,OAAKE,MAAM,cACTF,EAAA,KAAGE,MAAO,YAAYjC,KAAKQ,MAAQ,UAAY,KAAM2B,KAAMnC,KAAKmC,MAC9DJ,EAAA,QAAMK,KAAK,SAGbL,EAAA,OAAKE,MAAM,uBACTF,EAAA,KAAGE,MAAM,aAAaE,KAAMnC,KAAKmC,MAC/BJ,EAAA,cAEFA,EAAA,WACEA,EAAA,QAAMK,KAAK,eAKlBpC,KAAKkC,YAAc,YAClBH,EAAA,OAAKE,MAAM,YACTF,EAAA,KAAGE,MAAM,sBAAsBE,KAAMnC,KAAKmC,KAAMnB,OAAQhB,KAAKgB,QAC3De,EAAA,OAAKE,MAAO,YAAYjC,KAAKQ,MAAQ,UAAY,MAC/CuB,EAAA,QAAMK,KAAK,SAGbL,EAAA,OAAKE,MAAM,cACTF,EAAA,eAIJA,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMK,KAAK,e"}
|