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:
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
|
||||
Reference in New Issue
Block a user