@scania/tegel
Version:
Tegel Design System
317 lines (316 loc) • 11.6 kB
JavaScript
import { h, Host } from "@stencil/core";
import hasSlot from "../../utils/hasSlot";
/**
* @slot label - Slot for the text injection. Serves as alternative to text prop.
* @slot icon - Slot used to display an Icon in the Button.
*/
export class TdsButton {
constructor() {
/** Button's type */
this.type = 'button';
/** Variation of Button's design */
this.variant = 'primary';
/** Size of a Button */
this.size = 'lg';
/** Control for disabled state of a component */
this.disabled = false;
/** When enabled, the Button takes 100% width */
this.fullbleed = false;
/** Set the mode variant of the Button. */
this.modeVariant = null;
/** Determines if and how the button should animate. */
this.animation = 'none';
this.onlyIcon = false;
}
handleKeyDown(event) {
var _a;
if (event.key === 'Enter' && !this.disabled) {
(_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.add('active');
}
}
handleKeyUp(event) {
var _a;
if (event.key === 'Enter' && !this.disabled) {
(_a = this.host.querySelector('button')) === null || _a === void 0 ? void 0 : _a.classList.remove('active');
}
}
render() {
const hasLabelSlot = hasSlot('label', this.host);
const hasIconSlot = hasSlot('icon', this.host);
if (!this.text && !hasLabelSlot) {
this.onlyIcon = true;
}
return (h(Host, { key: '35c60edf5c2e4769e8995a47e90b8e99ef4482f6', class: {
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
disabled: Boolean(this.disabled),
fullbleed: Boolean(this.fullbleed),
}, disabled: this.disabled }, h("button", Object.assign({ key: '819e795be3cdd3c435f54f1f9c0e13ae091aec98', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
'primary': this.variant === 'primary',
'secondary': this.variant === 'secondary',
'ghost': this.variant === 'ghost',
'danger': this.variant === 'danger',
'lg': this.size === 'lg',
'md': this.size === 'md',
'sm': this.size === 'sm',
'xs': this.size === 'xs',
'disabled': this.disabled,
'fullbleed': this.fullbleed,
'icon': hasIconSlot,
'only-icon': this.onlyIcon,
[`animation-${this.animation}`]: this.animation !== 'none',
} }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '1c43f0358cfa491bf3b2061e7891f17bc8f0aac4', name: "label" }), hasIconSlot && h("slot", { key: '40fb5ffa1bb25c098f413e672fb28ccc11a0d3d0', name: "icon" }))));
}
static get is() { return "tds-button"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["button.scss"]
};
}
static get styleUrls() {
return {
"$": ["button.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text displayed inside the Button"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "text"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'submit' | 'reset'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Button's type"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"defaultValue": "'button'"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'ghost' | 'danger'",
"resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variation of Button's design"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "variant",
"defaultValue": "'primary'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'xs' | 'sm' | 'md' | 'lg'",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of a Button"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "size",
"defaultValue": "'lg'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Control for disabled state of a component"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"fullbleed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When enabled, the Button takes 100% width"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "fullbleed",
"defaultValue": "false"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the mode variant of the Button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'none' | 'fade'",
"resolved": "\"fade\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines if and how the button should animate."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "animation",
"defaultValue": "'none'"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name attribute allows for different ways of accessing the button element"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The value attribute can be used when handling a form submission"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
}
};
}
static get states() {
return {
"onlyIcon": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keyup",
"method": "handleKeyUp",
"target": undefined,
"capture": false,
"passive": false
}];
}
}