@infineon/infineon-design-system-stencil 20.56.0 → 20.56.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-alert.cjs.entry.js +1 -1
- package/dist/cjs/ifx-alert.cjs.entry.js.map +1 -1
- package/dist/collection/components/alert/alert.css +4 -4
- package/dist/collection/components/alert/alert.js +2 -2
- package/dist/collection/components/alert/alert.js.map +1 -1
- package/dist/collection/components/alert/alert.stories.js +1 -1
- package/dist/collection/components/alert/alert.stories.js.map +1 -1
- package/dist/esm/ifx-alert.entry.js +1 -1
- package/dist/esm/ifx-alert.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-75354038.entry.js → p-eeea75dd.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-eeea75dd.entry.js.map +1 -0
- package/dist/types/components/alert/alert.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-75354038.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-624a7e36.js');
|
|
6
6
|
|
|
7
|
-
const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.
|
|
7
|
+
const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
|
|
8
8
|
const IfxAlertStyle0 = alertCss;
|
|
9
9
|
|
|
10
10
|
const Alert = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"ifx-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mpEAAmpE,CAAC;AACrqE,uBAAe,QAAQ;;MCOV,KAAK;;;;uBACyD,SAAS;;wBAGtD,IAAI;;IAEhC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;KACrB;IAED,MAAM;QACJ,QACC,IAAI,CAAC,OAAO,KAAK,MAAM;cACrBA,iBAAK,KAAK,EAAC,qBAAqB,IAC/BA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACNA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACJ,IAAI,CAAC,QAAQ,IAAIA,iBAAK,KAAK,EAAC,oBAAoB,IAChDA,eAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtDA,sBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACF;cACLA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,IACjC,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,cAAc,IACvBA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EAEDA,iBAAK,KAAK,EAAC,YAAY,IACrBA,qBAAQ,CACJ,EACJ,IAAI,CAAC,QAAQ,IAAIA,iBAAK,KAAK,EAAC,oBAAoB,IAChDA,eAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtDA,sBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACD,EACP;KACH;;;;;;","names":["h"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"],"version":3}
|
|
@@ -97,11 +97,11 @@
|
|
|
97
97
|
background-color: #0A8276;
|
|
98
98
|
color: #FFFFFF;
|
|
99
99
|
}
|
|
100
|
-
.alert.
|
|
101
|
-
border: 1px solid #
|
|
100
|
+
.alert.success {
|
|
101
|
+
border: 1px solid #4CA460;
|
|
102
102
|
}
|
|
103
|
-
.alert.
|
|
104
|
-
background-color: #
|
|
103
|
+
.alert.success .icon-wrapper {
|
|
104
|
+
background-color: #4CA460;
|
|
105
105
|
color: #FFFFFF;
|
|
106
106
|
}
|
|
107
107
|
.alert.danger {
|
|
@@ -31,8 +31,8 @@ export class Alert {
|
|
|
31
31
|
"type": "string",
|
|
32
32
|
"mutable": false,
|
|
33
33
|
"complexType": {
|
|
34
|
-
"original": "'primary' | '
|
|
35
|
-
"resolved": "\"danger\" | \"info\" | \"primary\" | \"
|
|
34
|
+
"original": "'primary' | 'success' | 'danger' | 'warning' | 'info'",
|
|
35
|
+
"resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
|
|
36
36
|
"references": {}
|
|
37
37
|
},
|
|
38
38
|
"required": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,KAAK;;
|
|
1
|
+
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,KAAK;;uBACyD,SAAS;;wBAGtD,IAAI;;IAEhC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACN,IAAI,CAAC,OAAO,KAAK,MAAM;YACvB,CAAC,CAAC,WAAK,KAAK,EAAC,qBAAqB;gBAC/B,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,WAAK,KAAK,EAAC,wBAAwB;wBACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;oBACN,WAAK,KAAK,EAAC,2BAA2B;wBACpC,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF;gBACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;oBAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;wBACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACF;YACP,CAAC,CAAC,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE;gBACjC,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,cAAc;oBACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP;gBAED,WAAK,KAAK,EAAC,YAAY;oBACrB,eAAQ,CACJ;gBACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;oBAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;wBACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,IAAI;SACd;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE,6KAA6K;iBACtL;aACF;SACF;KACF;CACF,CAAC;AAIF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,uBAAuB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAG5I,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE,CAC5B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAC;YACJ,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAC;YACJ,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAC;YACJ,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAA","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: \"Components/Alert\",\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: \"primary\",\n showIcon: true,\n closable: true,\n iconName: 'c-info-24',\n },\n\n argTypes: {\n variant: {\n options: ['primary', 'success', 'danger', 'warning'],\n control: { type: 'radio' },\n },\n\n iconName: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' }\n },\n\n closable: {\n control: 'boolean',\n default: true\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n }\n }\n};\n\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-alert variant=\"${args.variant}\" icon=\"${args.showIcon ? args.iconName : \"\"}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = (args) =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table:{\n disable: true\n }\n },\n iconName: {\n table:{\n disable: true\n }\n },\n showIcon: {\n table:{\n disable: true\n }\n }\n}"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-f0ed321b.js';
|
|
2
2
|
|
|
3
|
-
const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.
|
|
3
|
+
const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
|
|
4
4
|
const IfxAlertStyle0 = alertCss;
|
|
5
5
|
|
|
6
6
|
const Alert = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-alert.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"file":"ifx-alert.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mpEAAmpE,CAAC;AACrqE,uBAAe,QAAQ;;MCOV,KAAK;;;;uBACyD,SAAS;;wBAGtD,IAAI;;IAEhC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;KACrB;IAED,MAAM;QACJ,QACC,IAAI,CAAC,OAAO,KAAK,MAAM;cACrB,WAAK,KAAK,EAAC,qBAAqB,IAC/B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,KAAK,EAAC,2BAA2B,IACpC,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB,IAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACF;cACL,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,IACjC,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EAED,WAAK,KAAK,EAAC,YAAY,IACrB,eAAQ,CACJ,EACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB,IAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as t}from"./p-d4e6544e.js";export{s as setNonce}from"./p-d4e6544e.js";import{g as a}from"./p-e1255160.js";const n=()=>{{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}};n().then((async e=>{await a();return t(JSON.parse('[["p-d2f5931f",[[1,"ifx-faq"]]],["p-96d5fafe",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-0b6b25dc",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-23832321",[[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"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-b71790cc",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-7cd2e60b",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-32b0f107",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-75354038",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-f34fd667",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-7a63cf14",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-1590af43",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-ba3fdc1d",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-6cc8c8fb",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-48a66966",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-86b9988d",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-b3cc73e3",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-b093f2aa",[[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-5f4d79cf",[[1,"ifx-tag",{"icon":[1]}]]],["p-4b4e42e8",[[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-f664ab5a",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-43522468",[[1,"ifx-badge"]]],["p-e3b2fc9f",[[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-8eb0a010",[[1,"ifx-breadcrumb"]]],["p-c93e7caf",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d8237636",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-8e245718",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-bb5ae504",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-39d59589",[[1,"ifx-card-links"]]],["p-7c5c6cdf",[[1,"ifx-card-overline"]]],["p-b5d82c25",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-a1047de8",[[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-334cb889",[[1,"ifx-dropdown-header"]]],["p-07fba2d8",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-43f388f0",[[1,"ifx-dropdown-separator"]]],["p-34fc10be",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-fcf3f23b",[[1,"ifx-footer-column"]]],["p-9fcfbf0b",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-fd03aefa",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-f2210329",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-a2bcd4e7",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-10e6426f",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-bdde91a4",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-c4f2eb1a",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-29e01164",[[1,"ifx-sidebar-title"]]],["p-7852a844",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-1a857070",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-c329357c",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-97a875a6",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-77fb606a",[[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-051ee2b9",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-18f85974",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f341e76b",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-b2e0cc5b",[[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-79bd3b94",[[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-6ee4c343",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-417ef96b",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-17ca90d9",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-b3b36581",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-f6d7b47c",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as i,b as t}from"./p-d4e6544e.js";export{s as setNonce}from"./p-d4e6544e.js";import{g as a}from"./p-e1255160.js";const n=()=>{{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}};n().then((async e=>{await a();return t(JSON.parse('[["p-d2f5931f",[[1,"ifx-faq"]]],["p-96d5fafe",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-0b6b25dc",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-23832321",[[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"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-b71790cc",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-7cd2e60b",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-32b0f107",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-eeea75dd",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-f34fd667",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-7a63cf14",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-1590af43",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-ba3fdc1d",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-6cc8c8fb",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-48a66966",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-86b9988d",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-b3cc73e3",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-b093f2aa",[[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-5f4d79cf",[[1,"ifx-tag",{"icon":[1]}]]],["p-4b4e42e8",[[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-f664ab5a",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-43522468",[[1,"ifx-badge"]]],["p-e3b2fc9f",[[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-8eb0a010",[[1,"ifx-breadcrumb"]]],["p-c93e7caf",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d8237636",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-8e245718",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-bb5ae504",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-39d59589",[[1,"ifx-card-links"]]],["p-7c5c6cdf",[[1,"ifx-card-overline"]]],["p-b5d82c25",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-a1047de8",[[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-334cb889",[[1,"ifx-dropdown-header"]]],["p-07fba2d8",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-43f388f0",[[1,"ifx-dropdown-separator"]]],["p-34fc10be",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-fcf3f23b",[[1,"ifx-footer-column"]]],["p-9fcfbf0b",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-fd03aefa",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-f2210329",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-a2bcd4e7",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-10e6426f",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-bdde91a4",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-c4f2eb1a",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-29e01164",[[1,"ifx-sidebar-title"]]],["p-7852a844",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-1a857070",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-c329357c",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-97a875a6",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-77fb606a",[[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-051ee2b9",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-18f85974",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f341e76b",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-b2e0cc5b",[[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-79bd3b94",[[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-6ee4c343",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-417ef96b",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-17ca90d9",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-b3b36581",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-f6d7b47c",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,c as e,h as i}from"./p-d4e6544e.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r,c as e,h as i}from"./p-d4e6544e.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1D1D1D}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const a=o;const t=class{constructor(i){r(this,i);this.ifxClose=e(this,"ifxClose",7);this.variant="primary";this.icon=undefined;this.closable=true}handleClose(){this.ifxClose.emit()}render(){return this.variant==="info"?i("div",{class:"alert__info-wrapper"},i("div",{class:"info__text-wrapper"},i("div",{class:"info__headline-wrapper"},i("slot",{name:"headline"})),i("div",{class:"info__description-wrapper"},i("slot",{name:"desc"}))),this.closable&&i("div",{class:"close-icon-wrapper"},i("a",{href:undefined,onClick:this.handleClose.bind(this)},i("ifx-icon",{icon:"cross-16"})))):i("div",{class:`alert ${this.variant}`},this.icon&&i("div",{class:"icon-wrapper"},i("ifx-icon",{icon:this.icon})),i("div",{class:"alert-text"},i("slot",null)),this.closable&&i("div",{class:"close-icon-wrapper"},i("a",{href:undefined,onClick:this.handleClose.bind(this)},i("ifx-icon",{icon:"cross-16"}))))}};t.style=a;export{t as ifx_alert};
|
|
2
|
+
//# sourceMappingURL=p-eeea75dd.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","handleClose","this","ifxClose","emit","render","variant","h","class","name","closable","href","undefined","onClick","bind","icon"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAW,kpEACjB,MAAAC,EAAeD,E,MCOFE,EAAK,M,yEACyD,U,kCAG7C,I,CAE5B,WAAAC,GACEC,KAAKC,SAASC,M,CAGhB,MAAAC,GACE,OACCH,KAAKI,UAAY,OACfC,EAAA,OAAKC,MAAM,uBACVD,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAM,0BACTD,EAAA,QAAME,KAAK,cAEbF,EAAA,OAAKC,MAAM,6BACTD,EAAA,QAAME,KAAK,WAGbP,KAAKQ,UAAYH,EAAA,OAAKC,MAAM,sBAC5BD,EAAA,KAAGI,KAAMC,UAAWC,QAASX,KAAKD,YAAYa,KAAKZ,OACjDK,EAAA,YAAUQ,KAAK,gBAIpBR,EAAA,OAAKC,MAAO,SAASN,KAAKI,WACxBJ,KAAKa,MACJR,EAAA,OAAKC,MAAM,gBACTD,EAAA,YAAUQ,KAAMb,KAAKa,QAIzBR,EAAA,OAAKC,MAAM,cACTD,EAAA,cAEAL,KAAKQ,UAAYH,EAAA,OAAKC,MAAM,sBAC5BD,EAAA,KAAGI,KAAMC,UAAWC,QAASX,KAAKD,YAAYa,KAAKZ,OACjDK,EAAA,YAAUQ,KAAK,e"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
export declare class Alert {
|
|
3
|
-
variant: 'primary' | '
|
|
3
|
+
variant: 'primary' | 'success' | 'danger' | 'warning' | 'info';
|
|
4
4
|
icon: string;
|
|
5
5
|
ifxClose: EventEmitter;
|
|
6
6
|
closable: boolean;
|
|
@@ -23,7 +23,7 @@ export namespace Components {
|
|
|
23
23
|
interface IfxAlert {
|
|
24
24
|
"closable": boolean;
|
|
25
25
|
"icon": string;
|
|
26
|
-
"variant": 'primary' | '
|
|
26
|
+
"variant": 'primary' | 'success' | 'danger' | 'warning' | 'info';
|
|
27
27
|
}
|
|
28
28
|
interface IfxBadge {
|
|
29
29
|
}
|
|
@@ -1200,7 +1200,7 @@ declare namespace LocalJSX {
|
|
|
1200
1200
|
"closable"?: boolean;
|
|
1201
1201
|
"icon"?: string;
|
|
1202
1202
|
"onIfxClose"?: (event: IfxAlertCustomEvent<any>) => void;
|
|
1203
|
-
"variant"?: 'primary' | '
|
|
1203
|
+
"variant"?: 'primary' | 'success' | 'danger' | 'warning' | 'info';
|
|
1204
1204
|
}
|
|
1205
1205
|
interface IfxBadge {
|
|
1206
1206
|
}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","handleClose","this","ifxClose","emit","render","variant","h","class","name","closable","href","undefined","onClick","bind","icon"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & a {\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\n white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.secondary {\n border: 1px solid tokens.$ifxColorBerry500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorBerry500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\n\nexport class Alert {\n @Prop() variant: 'primary' | 'secondary' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n\n handleClose() { \n this.ifxClose.emit()\n }\n\n render() {\n return (\n this.variant === 'info' \n ? <div class='alert__info-wrapper'>\n <div class='info__text-wrapper'>\n <div class=\"info__headline-wrapper\">\n <slot name='headline' />\n </div>\n <div class=\"info__description-wrapper\">\n <slot name='desc' />\n </div>\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div>\n : <div class={`alert ${this.variant}`}>\n {this.icon && (\n <div class='icon-wrapper'>\n <ifx-icon icon={this.icon} />\n </div>\n )\n }\n <div class=\"alert-text\">\n <slot />\n </div>\n { this.closable && <div class=\"close-icon-wrapper\">\n <a href={undefined} onClick={this.handleClose.bind(this)}>\n <ifx-icon icon='cross-16' />\n </a>\n </div> }\n </div >\n );\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAW,spEACjB,MAAAC,EAAeD,E,MCOFE,EAAK,M,yEAC2D,U,kCAG/C,I,CAE5B,WAAAC,GACEC,KAAKC,SAASC,M,CAGhB,MAAAC,GACE,OACCH,KAAKI,UAAY,OACfC,EAAA,OAAKC,MAAM,uBACVD,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAM,0BACTD,EAAA,QAAME,KAAK,cAEbF,EAAA,OAAKC,MAAM,6BACTD,EAAA,QAAME,KAAK,WAGbP,KAAKQ,UAAYH,EAAA,OAAKC,MAAM,sBAC5BD,EAAA,KAAGI,KAAMC,UAAWC,QAASX,KAAKD,YAAYa,KAAKZ,OACjDK,EAAA,YAAUQ,KAAK,gBAIpBR,EAAA,OAAKC,MAAO,SAASN,KAAKI,WACxBJ,KAAKa,MACJR,EAAA,OAAKC,MAAM,gBACTD,EAAA,YAAUQ,KAAMb,KAAKa,QAIzBR,EAAA,OAAKC,MAAM,cACTD,EAAA,cAEAL,KAAKQ,UAAYH,EAAA,OAAKC,MAAM,sBAC5BD,EAAA,KAAGI,KAAMC,UAAWC,QAASX,KAAKD,YAAYa,KAAKZ,OACjDK,EAAA,YAAUQ,KAAK,e"}
|