phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Static Site

Browse Source
This commit is contained in:
Mike Phares
2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Static/package/dist/collection/components/switch/switch.css vendored Normal file
View File

@ -0,0 +1,84 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
/* switch.css */
:host {
display: inline-block;
user-select: none;
}
.container {
padding: 4px;
display: flex;
align-items: center;
position: relative;
width: 32px;
height: 16px;
background-color: #FFFFFF;
border: 1px solid #575352;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
outline: none;
}
.container:focus {
outline: 4px solid #0A8276;
outline-offset: 2px;
}
.container:focus:not(:focus-visible) {
outline: none;
}
.container:focus-visible {
outline: 2px solid #0A8276;
outline-offset: 2px;
}
.container.disabled {
cursor: default;
border-color: #BFBBBB;
}
.switch_label-wrapper {
margin-left: 46px;
}
.switch_label-wrapper label:hover {
cursor: pointer;
}
.switch_label-wrapper.disabled {
color: #BFBBBB;
}
.switch_checkbox-wrapper .switch {
width: 16px;
height: 16px;
background-color: #575352;
border-radius: 50%;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.switch_checkbox-wrapper .switch.disabled {
background-color: #BFBBBB;
border-color: #BFBBBB;
cursor: default;
}
.switch_checkbox-wrapper .switch.checked {
transform: translateX(16px);
background-color: #FFFFFF;
}
.switch_checkbox-wrapper .switch.checked.disabled {
cursor: default;
}
.container:hover .toggle-switch {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.container.checked {
background-color: #0A8276;
border-color: #0A8276;
}
.container.checked.disabled {
background-color: #BFBBBB;
border-color: #BFBBBB;
cursor: default;
}

53
Static/package/dist/collection/components/switch/switch.e2e.js vendored Normal file
View File

@ -0,0 +1,53 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-switch', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch></ifx-switch>');
const element = await page.find('ifx-switch');
expect(element).toHaveClass('hydrated');
});
it('does not toggle when disabled', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch disabled></ifx-switch>');
const switchDiv = await page.find('ifx-switch >>> div[role="switch"]');
await switchDiv.click();
const container = await page.find('ifx-switch >>> .container');
expect(container).not.toHaveClass('checked');
});
it('emits the ifxChange event', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch></ifx-switch>');
const component = await page.find('ifx-switch');
const ifxChangeEvent = await component.spyOnEvent('ifxChange');
await component.click();
expect(ifxChangeEvent).toHaveReceivedEventDetail(true);
});
it('toggles when Enter is pressed', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch></ifx-switch>');
const component = await page.find('ifx-switch');
await component.press('Enter');
const container = await page.find('ifx-switch >>> .container');
expect(container).not.toHaveClass('checked');
});
it('toggles when Space is pressed', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch></ifx-switch>');
const switchDiv = await page.find('ifx-switch >>> div[role="switch"]');
await switchDiv.press('Space');
// Wait for any changes after pressing 'Space'
await page.waitForChanges();
const container = await page.find('ifx-switch >>> .container');
expect(container).toHaveClass('checked');
});
it('updates the visual state when value prop changes', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-switch value="false"></ifx-switch>');
const component = await page.find('ifx-switch');
component.setProperty('value', true);
await page.waitForChanges();
const container = await page.find('ifx-switch >>> .container');
expect(container).toHaveClass('checked');
});
});
//# sourceMappingURL=switch.e2e.js.map

1
Static/package/dist/collection/components/switch/switch.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"switch.e2e.js","sourceRoot":"","sources":["../../../src/components/switch/switch.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-switch', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch></ifx-switch>');\n\n const element = await page.find('ifx-switch');\n expect(element).toHaveClass('hydrated');\n });\n\n\n it('does not toggle when disabled', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch disabled></ifx-switch>');\n\n const switchDiv = await page.find('ifx-switch >>> div[role=\"switch\"]');\n\n await switchDiv.click();\n\n const container = await page.find('ifx-switch >>> .container');\n expect(container).not.toHaveClass('checked');\n });\n\n\n it('emits the ifxChange event', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch></ifx-switch>');\n\n const component = await page.find('ifx-switch');\n const ifxChangeEvent = await component.spyOnEvent('ifxChange');\n\n await component.click();\n expect(ifxChangeEvent).toHaveReceivedEventDetail(true);\n });\n\n it('toggles when Enter is pressed', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch></ifx-switch>');\n\n const component = await page.find('ifx-switch');\n await component.press('Enter');\n\n const container = await page.find('ifx-switch >>> .container');\n expect(container).not.toHaveClass('checked');\n });\n\n it('toggles when Space is pressed', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch></ifx-switch>');\n\n const switchDiv = await page.find('ifx-switch >>> div[role=\"switch\"]');\n await switchDiv.press('Space');\n\n // Wait for any changes after pressing 'Space'\n await page.waitForChanges();\n\n const container = await page.find('ifx-switch >>> .container');\n expect(container).toHaveClass('checked');\n });\n\n\n\n it('updates the visual state when value prop changes', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-switch value=\"false\"></ifx-switch>');\n\n const component = await page.find('ifx-switch');\n component.setProperty('value', true);\n await page.waitForChanges();\n\n const container = await page.find('ifx-switch >>> .container');\n expect(container).toHaveClass('checked');\n });\n\n\n});\n"]}

134
Static/package/dist/collection/components/switch/switch.js vendored Normal file
View File

@ -0,0 +1,134 @@
import { h } from "@stencil/core";
export class Switch {
constructor() {
this.value = false;
this.name = '';
this.disabled = false;
this.internalValue = false;
}
componentWillLoad() {
this.internalValue = this.value;
}
valueChanged(newValue, oldValue) {
if (newValue !== oldValue) {
this.internalValue = newValue;
}
}
toggle() {
if (this.disabled)
return;
this.internalValue = !this.internalValue;
this.ifxChange.emit(this.internalValue);
}
handleKeyDown(event) {
if (this.disabled)
return;
// If the pressed key is either 'Enter' or 'Space'
if (event.key === 'Enter' || event.key === ' ') {
this.toggle();
}
}
render() {
return (h("div", { class: `container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, role: "switch", tabindex: "0", "aria-checked": this.internalValue ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggle(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { class: "switch_checkbox-wrapper" }, h("input", { type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, value: `${this.internalValue}` }), h("div", { class: `switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` })), h("div", { class: `switch_label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { htmlFor: "switch" }, h("slot", null)))));
}
static get is() { return "ifx-switch"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["switch.scss"]
};
}
static get styleUrls() {
return {
"$": ["switch.css"]
};
}
static get properties() {
return {
"value": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "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": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "value",
"methodName": "valueChanged"
}];
}
}
//# sourceMappingURL=switch.js.map

1
Static/package/dist/collection/components/switch/switch.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,MAAM;;iBACQ,KAAK;gBACP,EAAE;oBACG,KAAK;yBACC,KAAK;;EAIvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;EAClC,CAAC;EAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAID,MAAM;IACJ,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EAC1C,CAAC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,mDAAmD;IACnD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;EACH,CAAC;EAGD,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE,aAAa,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACvC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;MAE/C,WAAK,KAAK,EAAC,yBAAyB;QAClC,aAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAI;QACpC,WAAK,KAAK,EAAE,UAAU,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAC9F;MACN,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;QACnE,aAAO,OAAO,EAAC,QAAQ;UACrB,eAAQ,CACF,CACJ,CACD,CACR,CAAA;EAEH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"]}

42
Static/package/dist/collection/components/switch/switch.stories.js vendored Normal file
View File

@ -0,0 +1,42 @@
import { action } from "@storybook/addon-actions";
export default {
title: 'Components/Switch',
tags: ['autodocs'],
args: {
value: false,
disabled: false,
label: "Switch"
},
argTypes: {
ifxChange: {
description: 'Custom event emitted on change',
table: {
type: {
summary: 'Framework integration',
detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
},
},
action: 'ifxChange'
},
}
};
const DefaultTemplate = (args) => {
const element = document.createElement('ifx-switch');
// Set the attributes
element.setAttribute('disabled', args.disabled);
element.setAttribute('value', args.value);
// Add the event listener
// element.addEventListener('ifxChange', action('ifxChange'));
// Inside your story, add an event listener for the custom event
element.addEventListener('ifxChange', (event) => {
const customEvent = event;
const newValue = customEvent.detail;
action('ifxChange')(customEvent);
args.value = newValue;
});
const slotContent = document.createTextNode(args.label);
element.appendChild(slotContent);
return element;
};
export const Default = DefaultTemplate.bind({});
//# sourceMappingURL=switch.stories.js.map

1
Static/package/dist/collection/components/switch/switch.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;GAEhB;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,WAAW,EAAE,gCAAgC;MAC7C,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,iLAAiL;SAC1L;OACF;MACD,MAAM,EAAE,WAAW;KACpB;GACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;EAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;EAE7E,qBAAqB;EACrB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EAChD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAE1C,yBAAyB;EACzB,8DAA8D;EAC9D,gEAAgE;EAChE,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAY,EAAE,EAAE;IACrD,MAAM,WAAW,GAAG,KAAoB,CAAC;IACzC,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;IAEpC,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;IAEjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;EAGxB,CAAC,CAAC,CAAC;EAGH,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACxD,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;EAEjC,OAAO,OAAO,CAAC;AAEjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Switch',\n tags: ['autodocs'],\n\n args: {\n value: false,\n disabled: false,\n label: \"Switch\"\n\n },\n argTypes: {\n ifxChange: {\n description: 'Custom event emitted on change',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n action: 'ifxChange'\n },\n }\n};\n\n\nconst DefaultTemplate = (args) => {\n const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;\n\n // Set the attributes\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('value', args.value);\n\n // Add the event listener\n // element.addEventListener('ifxChange', action('ifxChange'));\n // Inside your story, add an event listener for the custom event\n element.addEventListener('ifxChange', (event: Event) => {\n const customEvent = event as CustomEvent;\n const newValue = customEvent.detail;\n\n action('ifxChange')(customEvent);\n\n args.value = newValue;\n\n\n });\n\n\n const slotContent = document.createTextNode(args.label);\n element.appendChild(slotContent);\n\n return element;\n\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n"]}