Delete self contained Thunder Tests

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

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

@@ -0,0 +1,87 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+:host {
+  display: inline-block;
+}
+
+.left-icon,
+.right-icon,
+.left-text,
+.right-text,
+.percentage-display {
+  font-size: 0.875rem;
+  color: #575352;
+  margin-left: 8px;
+}
+.left-icon.disabled,
+.right-icon.disabled,
+.left-text.disabled,
+.right-text.disabled,
+.percentage-display.disabled {
+  color: #BFBBBB;
+}
+
+.left-icon,
+.left-text {
+  margin-right: 8px;
+}
+
+.right-icon,
+.right-text,
+.percentage-display {
+  margin-left: 8px;
+}
+
+.ifx-slider {
+  display: flex;
+  align-items: center;
+  padding: 2px 16px;
+  border-radius: 9999px;
+}
+.ifx-slider input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 4px;
+  background: linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);
+  outline: none;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.ifx-slider input[type=range]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #0A8276;
+  cursor: pointer;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #0A8276;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover {
+  background: #08665C;
+}
+.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active {
+  background: #06534B;
+}
+.ifx-slider input[type=range]:disabled {
+  background: #BFBBBB;
+  cursor: default;
+}
+.ifx-slider input[type=range]:disabled::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: #BFBBBB;
+  border-radius: 50%;
+  cursor: default;
+}

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

@@ -0,0 +1,57 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('ifx-slider', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider></ifx-slider>');
+    const element = await page.find('ifx-slider');
+    expect(element).toHaveClass('hydrated');
+  });
+  it('renders changes to the value data', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider value="50"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
+    const value = await element.getProperty('value');
+    expect(value).toEqual('50');
+  });
+  it('handles input change', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
+    await element.press('ArrowRight');
+    const value = await element.getProperty('value');
+    expect(value).toEqual('1');
+  });
+  it('disables when the disabled property is set', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider disabled></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
+    expect(element.getAttribute('disabled')).not.toBeNull();
+  });
+  it('renders left text', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider left-text="Left Text"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .left-text');
+    expect(element.textContent).toEqual('Left Text');
+  });
+  it('renders right text', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider right-text="Right Text"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .right-text');
+    expect(element.textContent).toEqual('Right Text');
+  });
+  it('renders percentage if showPercentage is true', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider value="30" show-percentage></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .percentage-display');
+    expect(element.textContent).toEqual('30%');
+  });
+  it('emits the ifxChange event when the input changes', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-slider value="50"></ifx-slider>');
+    const spy = await page.spyOnEvent('ifxChange');
+    const input = await page.find('ifx-slider >>> input');
+    await input.press('ArrowRight');
+    expect(spy).toHaveReceivedEventDetail(51);
+  });
+});
+//# sourceMappingURL=slider.e2e.js.map

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

@@ -0,0 +1,244 @@
+import { h } from "@stencil/core";
+export class IfxSlider {
+  constructor() {
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.disabled = false;
+    this.showPercentage = false;
+    this.leftIcon = undefined;
+    this.rightIcon = undefined;
+    this.leftText = undefined;
+    this.rightText = undefined;
+    this.internalValue = 0;
+  }
+  valueChanged(newValue) {
+    this.internalValue = newValue;
+    this.updateValuePercent();
+  }
+  handleInputChange(event) {
+    const target = event.target;
+    this.internalValue = parseInt(target.value);
+    this.ifxChange.emit(this.internalValue);
+    this.updateValuePercent();
+  }
+  updateValuePercent() {
+    if (this.inputRef) {
+      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;
+      this.inputRef.style.setProperty('--value-percent', `${percent}%`);
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+  }
+  componentDidLoad() {
+    this.updateValuePercent();
+  }
+  render() {
+    return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.internalValue, "%"))));
+  }
+  static get is() { return "ifx-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showPercentage": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-percentage",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "leftIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "left-icon",
+        "reflect": false
+      },
+      "rightIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "right-icon",
+        "reflect": false
+      },
+      "leftText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "left-text",
+        "reflect": false
+      },
+      "rightText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "right-text",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxChange",
+        "name": "ifxChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
+}
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1,83 @@
+import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
+export default {
+  title: 'Components/Slider',
+  component: 'ifx-slider',
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    showPercentage: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    leftIcon: {
+      options: Object.values(icons).map(i => i['name']),
+      control: { type: 'select' },
+    },
+    rightIcon: {
+      options: Object.values(icons).map(i => i['name']),
+      control: { type: 'select' },
+    },
+    leftText: { control: 'text' },
+    rightText: { control: 'text' },
+    ifxChange: {
+      action: 'ifxChange',
+      description: 'Custom event emitted on input change',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
+        },
+      },
+    }
+  },
+};
+const Template = (args) => {
+  const sliderElement = document.createElement('ifx-slider');
+  sliderElement.setAttribute('value', args.value);
+  sliderElement.setAttribute('min', args.min);
+  sliderElement.setAttribute('max', args.max);
+  if (args.showPercentage) {
+    sliderElement.setAttribute('show-percentage', 'true');
+  }
+  if (args.disabled) {
+    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute
+  }
+  if (args.leftIcon) {
+    sliderElement.setAttribute('left-icon', args.leftIcon);
+  }
+  if (args.rightIcon) {
+    sliderElement.setAttribute('right-icon', args.rightIcon);
+  }
+  if (args.leftText) {
+    sliderElement.setAttribute('left-text', args.leftText);
+  }
+  if (args.rightText) {
+    sliderElement.setAttribute('right-text', args.rightText);
+  }
+  sliderElement.addEventListener('ifxChange', action('ifxChange'));
+  return sliderElement;
+};
+export const Default = Template.bind({});
+Default.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  showPercentage: false,
+  disabled: false,
+};
+export const WithPercentageDisplay = Template.bind({});
+WithPercentageDisplay.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  showPercentage: true,
+  disabled: false,
+};
+export const WithIcons = Template.bind({});
+WithIcons.args = Object.assign(Object.assign({}, Default.args), { leftIcon: 'cogwheel-16', rightIcon: 'cogwheel-16' });
+export const WithTexts = Template.bind({});
+WithTexts.args = Object.assign(Object.assign({}, Default.args), { leftText: 'LeftText', rightText: 'RightText' });
+export const Disabled = Template.bind({});
+Disabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
+//# sourceMappingURL=slider.stories.js.map