Remove with Text
Remove GetEngineeringSpcReview Better error message EnforceCodeStyleInBuild NginxFileSystem Remove Reactors and Working Directory AppSettings Delete self contained Thunder Tests Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter
This commit is contained in:
252
Server/wwwroot/package/dist/collection/components/button/button.css
vendored
Normal file
252
Server/wwwroot/package/dist/collection/components/button/button.css
vendored
Normal file
@ -0,0 +1,252 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
vertical-align: bottom;
|
||||
display: inline-flex;
|
||||
width: var(--bw, fit-content);
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding: 0px 16px;
|
||||
gap: 8px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
border-radius: 1px;
|
||||
line-height: 1.5rem;
|
||||
font-family: var(--ifx-font-family);
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
font-size: 1rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
width: var(--bw, fit-content);
|
||||
}
|
||||
|
||||
.btn:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
color: #FFFFFF;
|
||||
background-color: #0A8276;
|
||||
}
|
||||
.btn-default:disabled, .btn-default.disabled {
|
||||
background-color: #BFBBBB;
|
||||
color: #FFFFFF;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-secondary-default {
|
||||
background-color: #FFFFFF;
|
||||
color: #0A8276;
|
||||
border: 1px solid #0A8276;
|
||||
}
|
||||
.btn-secondary-default:disabled, .btn-secondary-default.disabled {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #BFBBBB;
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-tertiary-default {
|
||||
background-color: transparent;
|
||||
color: #0A8276;
|
||||
}
|
||||
.btn-tertiary-default:disabled, .btn-tertiary-default.disabled {
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: #FFFFFF;
|
||||
background-color: #CD002F;
|
||||
border-color: #CD002F;
|
||||
}
|
||||
.btn-danger:disabled, .btn-danger.disabled {
|
||||
background-color: #BFBBBB;
|
||||
color: #FFFFFF;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-secondary-danger {
|
||||
background-color: #FFFFFF;
|
||||
color: #CD002F;
|
||||
border: 1px solid #CD002F;
|
||||
}
|
||||
.btn-secondary-danger:disabled, .btn-secondary-danger.disabled {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #BFBBBB;
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-tertiary-danger {
|
||||
background-color: transparent;
|
||||
color: #CD002F;
|
||||
}
|
||||
.btn-tertiary-danger:disabled, .btn-tertiary-danger.disabled {
|
||||
background-color: #FFFFFF;
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-inverse {
|
||||
color: #0A8276;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.btn-inverse:disabled, .btn-inverse.disabled {
|
||||
opacity: 1;
|
||||
background-color: #FFFFFF;
|
||||
color: #0A8276;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-secondary-inverse {
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #FFFFFF;
|
||||
}
|
||||
.btn-secondary-inverse:disabled, .btn-secondary-inverse.disabled {
|
||||
border: 1px solid #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-tertiary-inverse {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-tertiary-inverse:disabled, .btn-tertiary-inverse.disabled {
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn ifx-icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.btn.btn-xs {
|
||||
font-size: 0.875rem;
|
||||
height: 32px;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.btn.btn-s {
|
||||
font-size: 0.875rem;
|
||||
height: 36px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.btn.btn-l {
|
||||
font-size: 1.25rem;
|
||||
height: 48px;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.btn.btn-default:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-default:not(:disabled, .disabled):hover {
|
||||
background-color: #08665C;
|
||||
}
|
||||
.btn.btn-default:not(:disabled, .disabled):active, .btn.btn-default:not(:disabled, .disabled).active {
|
||||
background-color: #06534B;
|
||||
}
|
||||
.btn.btn-secondary-default:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-secondary-default:not(:disabled, .disabled):hover {
|
||||
color: #FFFFFF;
|
||||
background-color: #08665C;
|
||||
}
|
||||
.btn.btn-secondary-default:not(:disabled, .disabled):active, .btn.btn-secondary-default:not(:disabled, .disabled).active {
|
||||
background-color: #06534B;
|
||||
}
|
||||
.btn.btn-secondary:not(:disabled, .disabled):hover {
|
||||
background-color: #9C216E;
|
||||
}
|
||||
.btn.btn-secondary:not(:disabled, .disabled):active, .btn.btn-secondary:not(:disabled, .disabled).active {
|
||||
background-color: #9C216E;
|
||||
}
|
||||
.btn.btn-danger:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-danger:not(:disabled, .disabled):hover {
|
||||
background-color: #A2001E;
|
||||
}
|
||||
.btn.btn-danger:not(:disabled, .disabled):active, .btn.btn-danger:not(:disabled, .disabled).active {
|
||||
background-color: #900021;
|
||||
}
|
||||
.btn.btn-secondary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-secondary-danger:not(:disabled, .disabled):hover {
|
||||
color: #FFFFFF;
|
||||
background-color: #A2001E;
|
||||
}
|
||||
.btn.btn-secondary-danger:not(:disabled, .disabled):active, .btn.btn-secondary-danger:not(:disabled, .disabled).active {
|
||||
background-color: #900021;
|
||||
}
|
||||
.btn.btn-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
|
||||
}
|
||||
.btn.btn-inverse:not(:disabled, .disabled):hover {
|
||||
background-color: #EEEDED;
|
||||
}
|
||||
.btn.btn-inverse:not(:disabled, .disabled):active, .btn.btn-inverse:not(:disabled, .disabled).active {
|
||||
background-color: #BFBBBB;
|
||||
}
|
||||
.btn.btn-secondary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
|
||||
}
|
||||
.btn.btn-secondary-inverse:not(:disabled, .disabled):hover {
|
||||
color: #0A8276;
|
||||
background-color: #EEEDED;
|
||||
}
|
||||
.btn.btn-secondary-inverse:not(:disabled, .disabled):active, .btn.btn-secondary-inverse:not(:disabled, .disabled).active {
|
||||
color: #0A8276;
|
||||
background-color: #BFBBBB;
|
||||
}
|
||||
.btn.btn-tertiary-default:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #08665C;
|
||||
}
|
||||
.btn.btn-tertiary-default:not(:disabled, .disabled):hover {
|
||||
color: #08665C;
|
||||
}
|
||||
.btn.btn-tertiary-default:not(:disabled, .disabled):active, .btn.btn-tertiary-default:not(:disabled, .disabled).active {
|
||||
color: #06534B;
|
||||
}
|
||||
.btn.btn-tertiary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E;
|
||||
}
|
||||
.btn.btn-tertiary-danger:not(:disabled, .disabled):hover {
|
||||
color: #A2001E;
|
||||
}
|
||||
.btn.btn-tertiary-danger:not(:disabled, .disabled):active, .btn.btn-tertiary-danger:not(:disabled, .disabled).active {
|
||||
color: #900021;
|
||||
}
|
||||
.btn.btn-tertiary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
|
||||
}
|
||||
.btn.btn-tertiary-inverse:not(:disabled, .disabled):hover {
|
||||
color: #EEEDED;
|
||||
}
|
||||
.btn.btn-tertiary-inverse:not(:disabled, .disabled):active, .btn.btn-tertiary-inverse:not(:disabled, .disabled).active {
|
||||
color: #BFBBBB;
|
||||
}
|
||||
42
Server/wwwroot/package/dist/collection/components/button/button.e2e.js
vendored
Normal file
42
Server/wwwroot/package/dist/collection/components/button/button.e2e.js
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-button', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-button></ifx-button>');
|
||||
const element = await page.find('ifx-button');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should display slotted content', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-button>Button Text</ifx-button>');
|
||||
const buttonText = await page.evaluate(() => {
|
||||
const button = document.querySelector('ifx-button');
|
||||
const slot = button.shadowRoot.querySelector('slot');
|
||||
const nodes = slot.assignedNodes();
|
||||
return nodes[0].textContent;
|
||||
});
|
||||
expect(buttonText).toBe('Button Text');
|
||||
});
|
||||
it('should set correct variant', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-button variant="secondary"></ifx-button>');
|
||||
const element = await page.find('ifx-button');
|
||||
const variant = await element.getProperty('variant');
|
||||
expect(variant).toBe('secondary');
|
||||
});
|
||||
it('should set correct theme', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-button theme="danger"></ifx-button>');
|
||||
const element = await page.find('ifx-button');
|
||||
const color = await element.getProperty('theme');
|
||||
expect(color).toBe('danger');
|
||||
});
|
||||
it('should set correct size', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-button size="s"></ifx-button>');
|
||||
const element = await page.find('ifx-button');
|
||||
const size = await element.getProperty('size');
|
||||
expect(size).toBe('s');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=button.e2e.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/button/button.e2e.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/button/button.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"button.e2e.js","sourceRoot":"","sources":["../../../src/components/button/button.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAE1B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,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,sCAAsC,CAAC,CAAC;IAE9D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC1C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;MACpD,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACrD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EACzC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+CAA+C,CAAC,CAAC;IAEvE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;IACxC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0CAA0C,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEjD,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC/B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,oCAAoC,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACzB,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-button', () => {\n\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button></ifx-button>');\n\n const element = await page.find('ifx-button');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button>Button Text</ifx-button>');\n\n const buttonText = await page.evaluate(() => {\n const button = document.querySelector('ifx-button');\n const slot = button.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(buttonText).toBe('Button Text');\n });\n\n it('should set correct variant', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button variant=\"secondary\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const variant = await element.getProperty('variant');\n\n expect(variant).toBe('secondary');\n });\n\n it('should set correct theme', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button theme=\"danger\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const color = await element.getProperty('theme');\n\n expect(color).toBe('danger');\n });\n\n it('should set correct size', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-button size=\"s\"></ifx-button>');\n\n const element = await page.find('ifx-button');\n const size = await element.getProperty('size');\n\n expect(size).toBe('s');\n });\n\n});\n"]}
|
||||
331
Server/wwwroot/package/dist/collection/components/button/button.js
vendored
Normal file
331
Server/wwwroot/package/dist/collection/components/button/button.js
vendored
Normal file
@ -0,0 +1,331 @@
|
||||
import { h, Host } from "@stencil/core";
|
||||
import classNames from "classnames";
|
||||
export class Button {
|
||||
constructor() {
|
||||
this.handleClick = (ev) => {
|
||||
if (this.el.shadowRoot) {
|
||||
const parentForm = this.el.closest('form');
|
||||
if (parentForm) {
|
||||
ev.preventDefault();
|
||||
if (this.type === 'reset') {
|
||||
// If the button type is 'reset', manually reset all custom form fields
|
||||
this.resetClickHandler(); //this will reset all ifx-text-fields within a form
|
||||
}
|
||||
else {
|
||||
const fakeButton = document.createElement('button');
|
||||
if (this.type) {
|
||||
fakeButton.type = this.type;
|
||||
}
|
||||
fakeButton.style.display = 'none';
|
||||
parentForm.appendChild(fakeButton);
|
||||
fakeButton.click();
|
||||
fakeButton.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.variant = 'primary';
|
||||
this.theme = 'default';
|
||||
this.size = 'm';
|
||||
this.disabled = false;
|
||||
this.internalHref = undefined;
|
||||
this.href = undefined;
|
||||
this.target = '_self';
|
||||
this.type = "button";
|
||||
this.fullWidth = false;
|
||||
}
|
||||
setInternalHref(newValue) {
|
||||
this.internalHref = newValue;
|
||||
}
|
||||
async setFocus() {
|
||||
this.focusableElement.focus();
|
||||
}
|
||||
insertNativeButton() {
|
||||
this.nativeButton = document.createElement('button');
|
||||
this.nativeButton.type = this.type;
|
||||
this.nativeButton.style.display = 'none';
|
||||
this.el.closest('form').appendChild(this.nativeButton);
|
||||
}
|
||||
handleFormAndInternalHref() {
|
||||
if (this.el.closest('form')) {
|
||||
if (this.el.href) {
|
||||
this.el.internalHref = undefined;
|
||||
}
|
||||
this.insertNativeButton();
|
||||
}
|
||||
else {
|
||||
this.internalHref = this.href;
|
||||
}
|
||||
}
|
||||
handleButtonWidth() {
|
||||
if (this.fullWidth) {
|
||||
this.el.style.setProperty('--bw', '100%');
|
||||
}
|
||||
else {
|
||||
this.el.style.setProperty('--bw', 'fit-content');
|
||||
}
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.handleFormAndInternalHref();
|
||||
}
|
||||
componentWillRender() {
|
||||
this.handleButtonWidth();
|
||||
}
|
||||
resetClickHandler() {
|
||||
const formElement = this.el.closest('form');
|
||||
const customElements = formElement.querySelectorAll('ifx-text-field');
|
||||
customElements.forEach(element => {
|
||||
element.reset();
|
||||
});
|
||||
}
|
||||
handleKeyDown(ev) {
|
||||
if (ev.key === 'Enter' && !this.disabled) {
|
||||
this.handleClick(ev);
|
||||
}
|
||||
}
|
||||
handleHostClick(event) {
|
||||
if (this.disabled === true) {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
handleFocus(event) {
|
||||
if (this.disabled) {
|
||||
event.preventDefault();
|
||||
this.focusableElement.blur();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h(Host, null, h("a", { tabIndex: 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled, "aria-labelledby": "label" }, h("slot", null))));
|
||||
}
|
||||
getVariantClass() {
|
||||
return `${this.variant}` === "secondary"
|
||||
? `secondary-${this.theme}`
|
||||
: `${this.variant}` === 'tertiary'
|
||||
? `tertiary-${this.theme}`
|
||||
: `${this.theme}`;
|
||||
}
|
||||
getSizeClass() {
|
||||
if (`${this.size}` === "xs") {
|
||||
return "xs";
|
||||
}
|
||||
else if (`${this.size}` === "s") {
|
||||
return "s";
|
||||
}
|
||||
else if (`${this.size}` === "l") {
|
||||
return "l";
|
||||
}
|
||||
else
|
||||
return "";
|
||||
}
|
||||
getClassNames() {
|
||||
return classNames('btn', this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? 'disabled' : '');
|
||||
}
|
||||
static get is() { return "ifx-button"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["button.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["button.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'primary' | 'secondary' | 'tertiary'",
|
||||
"resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false,
|
||||
"defaultValue": "'primary'"
|
||||
},
|
||||
"theme": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'default' | 'danger' | 'inverse'",
|
||||
"resolved": "\"danger\" | \"default\" | \"inverse\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "theme",
|
||||
"reflect": false,
|
||||
"defaultValue": "'default'"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "size",
|
||||
"reflect": false,
|
||||
"defaultValue": "'m'"
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "disabled",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "href",
|
||||
"reflect": false
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "target",
|
||||
"reflect": false,
|
||||
"defaultValue": "'_self'"
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "\"button\" | \"submit\" | \"reset\"",
|
||||
"resolved": "\"button\" | \"reset\" | \"submit\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "type",
|
||||
"reflect": false,
|
||||
"defaultValue": "\"button\""
|
||||
},
|
||||
"fullWidth": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "full-width",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"internalHref": {}
|
||||
};
|
||||
}
|
||||
static get methods() {
|
||||
return {
|
||||
"setFocus": {
|
||||
"complexType": {
|
||||
"signature": "() => Promise<void>",
|
||||
"parameters": [],
|
||||
"references": {
|
||||
"Promise": {
|
||||
"location": "global",
|
||||
"id": "global::Promise"
|
||||
}
|
||||
},
|
||||
"return": "Promise<void>"
|
||||
},
|
||||
"docs": {
|
||||
"text": "",
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "href",
|
||||
"methodName": "setInternalHref"
|
||||
}];
|
||||
}
|
||||
static get listeners() {
|
||||
return [{
|
||||
"name": "keydown",
|
||||
"method": "handleKeyDown",
|
||||
"target": undefined,
|
||||
"capture": false,
|
||||
"passive": false
|
||||
}, {
|
||||
"name": "click",
|
||||
"method": "handleHostClick",
|
||||
"target": undefined,
|
||||
"capture": true,
|
||||
"passive": false
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=button.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/button/button.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/button/button.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
57
Server/wwwroot/package/dist/collection/components/button/button.stories.js
vendored
Normal file
57
Server/wwwroot/package/dist/collection/components/button/button.stories.js
vendored
Normal file
@ -0,0 +1,57 @@
|
||||
import { icons } from "@infineon/infineon-icons";
|
||||
export default {
|
||||
title: "Components/Button",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
label: "Button",
|
||||
variant: "primary",
|
||||
theme: "default",
|
||||
type: "button",
|
||||
size: "m",
|
||||
fullWidth: false,
|
||||
disabled: false,
|
||||
iconPosition: 'left',
|
||||
href: false,
|
||||
url: "",
|
||||
target: '_blank'
|
||||
},
|
||||
argTypes: {
|
||||
icon: {
|
||||
options: Object.values(icons).map(i => i['name']),
|
||||
control: { type: 'select' },
|
||||
},
|
||||
variant: {
|
||||
options: ['primary', 'secondary', 'tertiary'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
theme: {
|
||||
options: ['default', 'danger', 'inverse'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
type: {
|
||||
options: ['button', 'submit', 'reset'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
size: {
|
||||
description: "Size options: xs (32px) s (36px), m (40px), l (48px) - default: m",
|
||||
options: ['xs', 's', 'm', 'l'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
fullWidth: {
|
||||
control: { type: 'boolean' }
|
||||
},
|
||||
iconPosition: {
|
||||
options: ['left', 'right'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
target: {
|
||||
options: ['_blank', '_self', '_parent'],
|
||||
control: { type: 'radio' }
|
||||
}
|
||||
},
|
||||
};
|
||||
const DefaultTemplate = (args) => `<ifx-button type="${args.type}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ""} full-width="${args.fullWidth}">
|
||||
${args.icon && args.iconPosition.toUpperCase() === "LEFT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""}${args.label}${args.icon && args.iconPosition.toUpperCase() === "RIGHT" ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ""}
|
||||
</ifx-button>`;
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
//# sourceMappingURL=button.stories.js.map
|
||||
1
Server/wwwroot/package/dist/collection/components/button/button.stories.js.map
vendored
Normal file
1
Server/wwwroot/package/dist/collection/components/button/button.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,QAAQ;GACjB;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,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;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;MACzC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;MACtC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,WAAW,EAAE,oEAAoE;MACjF,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,SAAS,EAAE;MACT,OAAO,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC3B;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;MAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,qBAAqB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC5N,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAGf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["\r\nimport { icons } from '@infineon/infineon-icons'\r\n\r\nexport default {\r\n title: \"Components/Button\",\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: \"Button\",\r\n variant: \"primary\",\r\n theme: \"default\",\r\n type: \"button\",\r\n size: \"m\",\r\n fullWidth: false,\r\n disabled: false,\r\n iconPosition: 'left',\r\n href: false,\r\n url: \"\",\r\n target: '_blank'\r\n },\r\n\r\n argTypes: {\r\n icon: {\r\n options: Object.values(icons).map(i => i['name']),\r\n control: { type: 'select' },\r\n },\r\n variant: {\r\n options: ['primary', 'secondary', 'tertiary'],\r\n control: { type: 'radio' },\r\n },\r\n theme: {\r\n options: ['default', 'danger', 'inverse'],\r\n control: { type: 'radio' },\r\n },\r\n type: {\r\n options: ['button', 'submit', 'reset'],\r\n control: { type: 'radio' },\r\n },\r\n size: {\r\n description: \"Size options: xs (32px) s (36px), m (40px), l (48px) - default: m\",\r\n options: ['xs', 's', 'm', 'l'],\r\n control: { type: 'radio' },\r\n },\r\n fullWidth: {\r\n control: {type: 'boolean'}\r\n },\r\n iconPosition: {\r\n options: ['left', 'right'],\r\n control: { type: 'radio' }\r\n },\r\n target: {\r\n options: ['_blank', '_self', '_parent'],\r\n control: { type: 'radio' }\r\n }\r\n\r\n },\r\n\r\n};\r\n\r\n\r\nconst DefaultTemplate = (args) =>\r\n `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : \"\"} full-width=\"${args.fullWidth}\">\r\n ${args.icon && args.iconPosition.toUpperCase() === \"LEFT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"}${args.label}${args.icon && args.iconPosition.toUpperCase() === \"RIGHT\" ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : \"\"} \r\n</ifx-button>`;\r\n\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
|
||||
Reference in New Issue
Block a user