@claromentis/design-system
Version:
Claromentis Design System Component Library
247 lines (246 loc) • 6.45 kB
JavaScript
import { h } from '@stencil/core';
import { hasShadowDom, propagateFocusEvent, submitClosestForm } from "../../utils/utils";
/**
* The Button component.
*
* @slot - Content placed inside the button.
*/
export class Button {
constructor() {
/**
* Propagate a focus event.
*
* Used to propagate `<button>` focus events through the Shadow DOM boundary
* in the case that they aren't by the browser.
*
* @param {FocusEvent} event
*/
this.onFocusEvent = (event) => {
propagateFocusEvent(this.element, event);
};
this.type = 'button';
this.name = undefined;
this.value = undefined;
this.color = undefined;
this.size = 'default';
this.block = undefined;
this.outline = false;
this.disabled = false;
}
/**
* Submit or reset the closest form on click when in the Shadow DOM.
*/
onClick() {
if (this.type === 'button') {
return;
}
if (hasShadowDom(this.element)) {
submitClosestForm(this.element, this.type, this.name, this.value);
}
}
/**
* Get the map of CSS classes for the button.
*
* @return CssClassMap
*/
getClassMap() {
const outline = this.outline;
const block = this.block;
const size = this.size;
return {
'btn': true,
[`btn-block`]: block,
[`btn-${this.color}`]: !outline,
[`btn-outline-${this.color}`]: outline,
[`btn-lg`]: size === 'large',
[`btn-sm`]: size === 'small'
};
}
/**
* Render the component.
*/
render() {
return (h("button", { type: this.type, name: this.name, value: this.value, class: this.getClassMap(), disabled: this.disabled, onFocus: this.onFocusEvent, onBlur: this.onFocusEvent }, h("slot", null)));
}
static get is() { return "cla-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-button.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": true,
"complexType": {
"original": "ButtonType",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {
"ButtonType": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The button type."
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The button name."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The button value."
},
"attribute": "value",
"reflect": false
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ButtonColor",
"resolved": "\"danger\" | \"dark\" | \"info\" | \"light\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
"references": {
"ButtonColor": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The button color."
},
"attribute": "color",
"reflect": false
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Size",
"resolved": "\"default\" | \"large\" | \"small\" | \"xsmall\"",
"references": {
"Size": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The button size."
},
"attribute": "size",
"reflect": false,
"defaultValue": "'default'"
},
"block": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "false",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to use the block style variant of the button.\n\nThis makes the button full width within its container."
},
"attribute": "block",
"reflect": false
},
"outline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to use the outline style variant of the button.\n\nThis removes the background from the button when it's not hovered."
},
"attribute": "outline",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the button is disabled."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
}
};
}
static get elementRef() { return "element"; }
static get listeners() {
return [{
"name": "click",
"method": "onClick",
"target": undefined,
"capture": false,
"passive": false
}];
}
}