Delete self contained Thunder Tests

Back to .net8.0
api/v4/InfinityQS
ApiExplorerSettings
Wafer Counter
Color Sorting

Server/wwwroot/package/dist/collection/components/alert/alert.css

@@ -0,0 +1,124 @@
+: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;
+  /* wraps text at spaces and within words */
+  word-wrap: break-word;
+  /* breaks text within a word if necessary */
+  overflow-wrap: anywhere;
+  /* breaks text at arbitrary points when needed */
+}
+.alert.primary {
+  border: 1px solid #0A8276;
+}
+.alert.primary .icon-wrapper {
+  background-color: #0A8276;
+  color: #FFFFFF;
+}
+.alert.secondary {
+  border: 1px solid #9C216E;
+}
+.alert.secondary .icon-wrapper {
+  background-color: #9C216E;
+  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;
+}

Server/wwwroot/package/dist/collection/components/alert/alert.e2e.js

@@ -0,0 +1,31 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('ifx-alert', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert></ifx-alert>');
+    const element = await page.find('ifx-alert');
+    expect(element).toHaveClass('hydrated');
+  });
+  it('should set the correct variant', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert variant="primary"></ifx-alert>');
+    const element = await page.find('ifx-alert');
+    const variant = await element.getProperty('variant');
+    expect(variant).toBe('primary');
+  });
+  it('should set the correct icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
+    const element = await page.find('ifx-alert');
+    const icon = await element.getProperty('icon');
+    expect(icon).toBe('cinfo24');
+  });
+  it('should display the correct icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-alert icon="cinfo24"></ifx-alert>');
+    const iconElement = await page.find('ifx-alert >>> .icon-wrapper > ifx-icon');
+    const iconProp = await iconElement.getProperty('icon');
+    expect(iconProp).toBe('cinfo24');
+  });
+});
+//# sourceMappingURL=alert.e2e.js.map

Server/wwwroot/package/dist/collection/components/alert/alert.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.e2e.js","sourceRoot":"","sources":["../../../src/components/alert/alert.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAEzB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2CAA2C,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAClC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wCAAwC,CAAC,CAAC;IAEhE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC/B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;IAC/C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wCAAwC,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;IAC9E,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEvD,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnC,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-alert', () => {\n\n  it('should render', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-alert></ifx-alert>');\n\n    const element = await page.find('ifx-alert');\n    expect(element).toHaveClass('hydrated');\n  });\n\n  it('should set the correct variant', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-alert variant=\"primary\"></ifx-alert>');\n\n    const element = await page.find('ifx-alert');\n    const variant = await element.getProperty('variant');\n\n    expect(variant).toBe('primary');\n  });\n\n  it('should set the correct icon', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-alert icon=\"cinfo24\"></ifx-alert>');\n\n    const element = await page.find('ifx-alert');\n    const icon = await element.getProperty('icon');\n\n    expect(icon).toBe('cinfo24');\n  });\n\n  it('should display the correct icon', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-alert icon=\"cinfo24\"></ifx-alert>');\n\n    const iconElement = await page.find('ifx-alert >>> .icon-wrapper > ifx-icon');\n    const iconProp = await iconElement.getProperty('icon');\n\n    expect(iconProp).toBe('cinfo24');\n  });\n\n});\n"]}

Server/wwwroot/package/dist/collection/components/alert/alert.js

@@ -0,0 +1,104 @@
+import { h } from "@stencil/core";
+export class Alert {
+  constructor() {
+    this.variant = 'primary';
+    this.icon = undefined;
+    this.closable = true;
+  }
+  handleClose() {
+    this.ifxClose.emit();
+  }
+  render() {
+    return (this.variant === 'info'
+      ? h("div", { class: 'alert__info-wrapper' }, h("div", { class: 'info__text-wrapper' }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: 'headline' })), h("div", { class: "info__description-wrapper" }, h("slot", { name: 'desc' }))), this.closable && h("div", { class: "close-icon-wrapper" }, h("a", { href: undefined, onClick: this.handleClose.bind(this) }, h("ifx-icon", { icon: 'cross-16' }))))
+      : h("div", { class: `alert ${this.variant}` }, this.icon && (h("div", { class: 'icon-wrapper' }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text" }, h("slot", null)), this.closable && h("div", { class: "close-icon-wrapper" }, h("a", { href: undefined, onClick: this.handleClose.bind(this) }, h("ifx-icon", { icon: 'cross-16' })))));
+  }
+  static get is() { return "ifx-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'danger' | 'warning' | 'info'",
+          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "closable",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxClose",
+        "name": "ifxClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=alert.js.map

Server/wwwroot/package/dist/collection/components/alert/alert.js.map

@@ -0,0 +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;;mBAC2D,SAAS;;oBAGxD,IAAI;;EAEhC,WAAW;IACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACJ,OAAO,CACN,IAAI,CAAC,OAAO,KAAK,MAAM;MACvB,CAAC,CAAC,WAAK,KAAK,EAAC,qBAAqB;QAC/B,WAAK,KAAK,EAAC,oBAAoB;UAC7B,WAAK,KAAK,EAAC,wBAAwB;YACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB;UACN,WAAK,KAAK,EAAC,2BAA2B;YACpC,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF;QACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;UAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACF;MACP,CAAC,CAAC,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE;QACjC,IAAI,CAAC,IAAI,IAAI,CACZ,WAAK,KAAK,EAAC,cAAc;UACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP;QAED,WAAK,KAAK,EAAC,YAAY;UACrB,eAAQ,CACJ;QACJ,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,oBAAoB;UAChD,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YACtD,gBAAU,IAAI,EAAC,UAAU,GAAG,CAC1B,CACA,CACD,CACR,CAAC;EACJ,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' | '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"]}

Server/wwwroot/package/dist/collection/components/alert/alert.stories.js

@@ -0,0 +1,63 @@
+import { icons } from "@infineon/infineon-icons";
+export default {
+  title: "Components/Alert",
+  tags: ['autodocs'],
+  args: {
+    label: 'Attention! This is an alert message — check it out!',
+    variant: "primary",
+    showIcon: true,
+    closable: true,
+    iconName: 'c-info-24',
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'danger', 'warning'],
+      control: { type: 'radio' },
+    },
+    iconName: {
+      options: Object.values(icons).map(i => i['name']),
+      control: { type: 'select' }
+    },
+    closable: {
+      control: 'boolean',
+      default: true
+    },
+    ifxClose: {
+      action: 'ifxClose',
+      description: 'Custom event emitted when close button clicked',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
+        },
+      },
+    }
+  }
+};
+const DefaultTemplate = (args) => `<ifx-alert variant="${args.variant}" icon="${args.showIcon ? args.iconName : ""}" closable="${args.closable}">${args.label}</ifx-alert>`;
+export const Default = DefaultTemplate.bind({});
+const InfoTemplate = (args) => `  <ifx-alert variant="info" closable="${args.closable}">
+      <div slot="headline">Headline</div>
+      <div slot="desc">
+        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.
+      </div>
+    </ifx-alert>`;
+export const Info = InfoTemplate.bind({});
+Info.argTypes = {
+  variant: {
+    table: {
+      disable: true
+    }
+  },
+  iconName: {
+    table: {
+      disable: true
+    }
+  },
+  showIcon: {
+    table: {
+      disable: true
+    }
+  }
+};
+//# sourceMappingURL=alert.stories.js.map

Server/wwwroot/package/dist/collection/components/alert/alert.stories.js.map

@@ -0,0 +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;EACb,KAAK,EAAE,kBAAkB;EACzB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,qDAAqD;IAC5D,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,WAAW;GACtB;EAED,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC;MACtD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,QAAQ,EAAE;MACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IAED,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,IAAI;KACd;IAED,QAAQ,EAAE;MACR,MAAM,EAAE,UAAU;MAClB,WAAW,EAAE,gDAAgD;MAC7D,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,6KAA6K;SACtL;OACF;KACF;GACF;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;EACd,OAAO,EAAE;IACP,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAC;MACJ,OAAO,EAAE,IAAI;KACd;GACF;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', 'secondary', '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}"]}