Delete self contained Thunder Tests

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

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

@@ -0,0 +1,168 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+:host {
+  display: block;
+}
+
+.modal-container {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1060;
+  overflow-y: auto;
+  font-family: var(--ifx-font-family);
+}
+
+.modal-container.open {
+  display: block;
+}
+
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #1D1D1D;
+  opacity: 0.5;
+  z-index: 0;
+}
+
+.modal-content-container {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  min-height: 218px;
+  background-color: #fff;
+  border-radius: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  box-sizing: border-box;
+  align-items: stretch;
+}
+
+/* Add desktop size here */
+@media screen and (min-width: 768px) {
+  .modal-content-container {
+    width: 540px;
+    min-height: 132px;
+  }
+}
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  background-color: #0A8276;
+  align-self: stretch;
+}
+.modal-icon-container.danger {
+  background-color: #CD002F;
+}
+.modal-icon-container ifx-icon {
+  color: #FFFFFF;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  height: 76px;
+  box-sizing: border-box;
+  border-radius: 1px 1px 0px 0px;
+  border-bottom: 1px solid #EEEDED;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 28px;
+}
+
+.modal-header button {
+  background: none;
+  border: none;
+  font-size: 1.5em;
+  padding: 0;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 16px 24px;
+  min-height: 56px;
+  box-sizing: border-box;
+  flex: 1;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.modal-footer.buttons-present ::slotted(*) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 16px 24px 32px 16px;
+}
+
+.modal-border {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 1.5em;
+  flex-grow: 1;
+}
+.modal-border.primary {
+  background-color: #0A8276;
+}
+.modal-border.secondary {
+  background-color: #575352;
+}
+.modal-border.danger {
+  background-color: #CD002F;
+}
+.modal-border.success {
+  background-color: #4CA460;
+}
+.modal-border.warning {
+  background-color: #E16B25;
+}
+.modal-border.orange {
+  background-color: #E16B25;
+}
+.modal-border.ocean {
+  background-color: #0A8276;
+}
+.modal-border.grey {
+  background-color: #575352;
+}
+.modal-border.grey-200 {
+  background-color: #EEEDED;
+}
+.modal-border.red {
+  background-color: #CD002F;
+}
+.modal-border.green {
+  background-color: #4CA460;
+}
+.modal-border.berry {
+  background-color: #9C216E;
+}

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

@@ -0,0 +1,26 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('ifx-modal', () => {
+  it('opens and closes the modal', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-modal></ifx-modal>');
+    const modal = await page.find('ifx-modal');
+    let modalContainer = await page.find('ifx-modal >>> .modal-container');
+    await page.waitForChanges();
+    expect(modalContainer).not.toHaveClass('open');
+    // Open the modal
+    await modal.setProperty('opened', true);
+    await page.waitForChanges();
+    expect(await modal.getProperty('opened')).toBe(true);
+    let modalContainerOpen = await page.find('ifx-modal >>> .modal-container');
+    await page.waitForChanges();
+    expect(modalContainerOpen).toHaveClass('open');
+    // Close the modal
+    await modal.setProperty('opened', false);
+    await page.waitForChanges();
+    expect(await modal.getProperty('opened')).toBe(false);
+    let modalContainerClosed = await page.find('ifx-modal >>> .modal-container');
+    await page.waitForChanges();
+    expect(modalContainerClosed).not.toHaveClass('open');
+  });
+});
+//# sourceMappingURL=modal.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.e2e.js","sourceRoot":"","sources":["../../../src/components/modal/modal.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;IAEjD,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,cAAc,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;IACvE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,iBAAiB;IACjB,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACxC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,kBAAkB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;IAC3E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,kBAAkB;IAClB,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtD,IAAI,oBAAoB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;IAC7E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;EACvD,CAAC,CAAC,CAAC;AAIL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-modal', () => {\n  it('opens and closes the modal', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-modal></ifx-modal>');\n\n    const modal = await page.find('ifx-modal');\n    let modalContainer = await page.find('ifx-modal >>> .modal-container');\n    await page.waitForChanges();\n    expect(modalContainer).not.toHaveClass('open');\n\n    // Open the modal\n    await modal.setProperty('opened', true);\n    await page.waitForChanges();\n    expect(await modal.getProperty('opened')).toBe(true);\n    let modalContainerOpen = await page.find('ifx-modal >>> .modal-container');\n    await page.waitForChanges();\n    expect(modalContainerOpen).toHaveClass('open');\n\n    // Close the modal\n    await modal.setProperty('opened', false);\n    await page.waitForChanges();\n    expect(await modal.getProperty('opened')).toBe(false);\n\n    let modalContainerClosed = await page.find('ifx-modal >>> .modal-container');\n    await page.waitForChanges();\n    expect(modalContainerClosed).not.toHaveClass('open');\n  });\n\n\n\n});"]}

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

@@ -0,0 +1,310 @@
+import { Host, h } from "@stencil/core";
+import { queryShadowRoot, isHidden, isFocusable } from "../../global/utils/focus-trap";
+import { animationTo, KEYFRAMES } from "../../global/utils/animation";
+export class IfxModal {
+  constructor() {
+    this.focusableElements = [];
+    this.handleTopFocus = () => {
+      this.attemptFocus(this.getLastFocusableElement());
+    };
+    this.handleBottomFocus = () => {
+      this.attemptFocus(this.getFirstFocusableElement());
+    };
+    this.handleKeypress = (event) => {
+      if (!this.showModal) {
+        return;
+      }
+      if (event.key === 'Escape') {
+        this.doBeforeClose('ESCAPE_KEY');
+      }
+    };
+    this.opened = false;
+    this.showModal = this.opened || false;
+    this.caption = 'Modal Title';
+    this.closeOnOverlayClick = true;
+    this.variant = 'default';
+    this.alertIcon = '';
+    this.okButtonLabel = 'OK';
+    this.cancelButtonLabel = 'Cancel';
+    this.slotButtonsPresent = false;
+  }
+  componentDidLoad() {
+    // Query all focusable elements and store them in `focusableElements`.
+    // Needed for the "focus trap" functionality.
+    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+  }
+  getFirstFocusableElement() {
+    return this.focusableElements[0];
+  }
+  getLastFocusableElement() {
+    return this.focusableElements[this.focusableElements.length - 1];
+  }
+  attemptFocus(element) {
+    if (element == null) {
+      setTimeout(() => {
+        this.closeButton.focus();
+      });
+      return;
+    }
+    setTimeout(() => {
+      element.focus();
+    }, 0);
+  }
+  open() {
+    this.showModal = true;
+    try {
+      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {
+        duration: 200,
+      });
+      anim.addEventListener('finish', () => {
+        this.attemptFocus(this.getFirstFocusableElement());
+        this.ifxModalOpen.emit();
+      });
+      // this.attemptFocus(this.getFirstFocusableElement());
+      // this.ifxModalOpen.emit();
+      this.hostElement.addEventListener('keydown', this.handleKeypress);
+    }
+    catch (err) {
+      this.ifxModalOpen.emit();
+    }
+  }
+  close() {
+    try {
+      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
+        duration: 200,
+      });
+      anim.addEventListener('finish', () => {
+        this.showModal = false;
+        this.ifxModalClose.emit();
+      });
+      this.hostElement.removeEventListener('keydown', this.handleKeypress);
+    }
+    catch (err) {
+      this.showModal = false;
+      this.ifxModalClose.emit();
+    }
+  }
+  doBeforeClose(trigger) {
+    const triggers = [];
+    triggers.push(trigger);
+    const prevented = triggers.some((event) => event.defaultPrevented);
+    if (!prevented) {
+      this.opened = false;
+    }
+  }
+  openedChanged(newValue) {
+    if (newValue === true) {
+      this.open();
+    }
+    else {
+      this.close();
+    }
+  }
+  handleOverlayClick() {
+    if (this.closeOnOverlayClick) {
+      this.doBeforeClose('BACKDROP');
+    }
+  }
+  handleButtonsSlotChange(e) {
+    var _a;
+    if (((_a = e.currentTarget.assignedElements()[0]) === null || _a === void 0 ? void 0 : _a.childElementCount) > 0) {
+      this.slotButtonsPresent = true;
+    }
+    else {
+      this.slotButtonsPresent = false;
+    }
+  }
+  render() {
+    const isAlertVariant = this.variant !== 'default';
+    return (h(Host, null, h("div", { ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { class: `modal-content-container`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { class: "modal-content" }, h("div", { class: "modal-header" }, h("h2", null, this.caption), h("ifx-icon-button", { ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { class: "modal-body" }, h("slot", { name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+  }
+  static get is() { return "ifx-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false,
+        "defaultValue": "'Modal Title'"
+      },
+      "closeOnOverlayClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-on-overlay-click",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'alert-brand' | 'alert-danger'",
+          "resolved": "\"alert-brand\" | \"alert-danger\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "alertIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alert-icon",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "okButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ok-button-label",
+        "reflect": false,
+        "defaultValue": "'OK'"
+      },
+      "cancelButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cancel-button-label",
+        "reflect": false,
+        "defaultValue": "'Cancel'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showModal": {},
+      "slotButtonsPresent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxModalOpen",
+        "name": "ifxModalOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ifxModalClose",
+        "name": "ifxModalClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "opened",
+        "methodName": "openedChanged"
+      }];
+  }
+}
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1,123 @@
+import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
+export default {
+  title: 'Components/Modal',
+  component: 'ifx-modal',
+  // tags: ['autodocs'],
+  args: {
+    opened: false
+  },
+  argTypes: {
+    caption: {
+      control: 'text',
+      description: 'Title for the modal',
+    },
+    opened: {
+      control: {
+        disable: true,
+      },
+      table: {
+        type: {
+          summary: 'Example (in VanillaJs)',
+          detail: 'const modal = document.getElementById(\'modal\'); \nconst openButton = document.getElementById(\'open\'); \n//add DOM event listeners (e.g. click and/or keypress)\n\nfunction openModal() { \nmodal.opened=true;\n\nfunction closeModal() { \nmodal.opened = false; \n}',
+        },
+      },
+      description: 'Defaults to false - Can be set by referring to the component and setting it to false/true',
+    },
+    closeOnOverlayClick: {
+      control: 'boolean',
+      description: 'Close the modal when clicking outside the window',
+    },
+    alertIcon: {
+      options: Object.keys(icons),
+      control: { type: 'select' },
+      description: 'When specified together with alertIcon then an border to the right is shown',
+    },
+    variant: {
+      options: ['default', 'alert-brand', 'alert-danger'],
+      control: { type: 'radio' },
+    },
+    ifxModalOpen: {
+      action: 'ifxModalOpen',
+      description: 'Custom event emitted when modal opens',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxModalOpen={handleChange}\nVue:@ifxModalOpen="handleChange"\nAngular:(ifxModalOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxModalOpen", (event) => {//handle change});',
+        },
+      },
+    },
+    ifxModalClose: {
+      action: 'ifxModalClose',
+      description: 'Custom event emitted when modal closes',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxModalClose={handleChange}\nVue:@ifxModalClose="handleChange"\nAngular:(ifxModalClose)="handleChange()"\nVanillaJs:.addEventListener("ifxModalClose", (event) => {//handle change});',
+        },
+      },
+    },
+  },
+};
+const Template = ({ caption, closeOnOverlayClick, variant, alertIcon }) => {
+  const modal = document.createElement('ifx-modal');
+  modal.setAttribute('caption', caption);
+  modal.setAttribute('variant', variant);
+  if (alertIcon) {
+    modal.setAttribute('alert-icon', alertIcon);
+  }
+  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);
+  modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));
+  modal.addEventListener('ifxModalClose', action('ifxModalClose'));
+  const content = document.createElement('div');
+  content.setAttribute('slot', 'content');
+  content.innerHTML = `
+    <span>Modal content</span>
+  `;
+  modal.appendChild(content);
+  const buttons = document.createElement('div');
+  buttons.setAttribute('slot', 'buttons');
+  const cancelButton = document.createElement('ifx-button');
+  cancelButton.setAttribute('variant', 'secondary');
+  cancelButton.textContent = 'Button 1';
+  cancelButton.addEventListener('click', () => {
+    console.log("Button 1 clicked");
+  });
+  const primaryButton = document.createElement('ifx-button');
+  primaryButton.textContent = 'Button 2';
+  primaryButton.addEventListener('click', () => {
+    console.log("Button 2 clicked");
+  });
+  buttons.appendChild(cancelButton);
+  buttons.appendChild(primaryButton);
+  modal.appendChild(buttons);
+  const openButton = document.createElement('ifx-button');
+  openButton.id = "open";
+  openButton.textContent = 'Open Modal';
+  openButton.addEventListener('click', () => {
+    modal.opened = true;
+  });
+  openButton.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      modal.opened = true;
+    }
+  });
+  const storyElement = document.createElement('div');
+  storyElement.appendChild(modal);
+  storyElement.appendChild(openButton);
+  return storyElement;
+};
+export const Default = Template.bind({});
+Default.args = {
+  caption: 'Modal Title',
+  closeOnOverlayClick: false,
+  variant: 'default',
+};
+export const Alert = Template.bind({});
+Alert.args = {
+  caption: 'Alert-Brand Modal Title',
+  closeOnOverlayClick: true,
+  alertIcon: 'arrowdoen24',
+  variant: 'alert-brand',
+};
+//# sourceMappingURL=modal.stories.js.map