gov-gui
Version:
Gov UI Component Library Typscript Build
299 lines (298 loc) • 9.85 kB
JavaScript
import { h, Host } from "@stencil/core";
import "./gov-box.css";
export class GovBox {
constructor() {
// Props for alignment and spacing
this.align = 'start'; // Vertical alignment
this.justify = 'start'; // Horizontal alignment
this.gap = '0'; // Gap between child elements (e.g., "10px" or "1rem")
// Props for customization
this.auto = false; // Auto width box
this.isFlexBox = false; // toggle flex box
}
// Generate class names dynamically
getClass() {
const classes = [
`col-${this.size || '12'}`, // Default to full width if no size is provided
this.xs ? `col-xs-${this.xs}` : '',
this.sm ? `col-sm-${this.sm}` : '',
this.md ? `col-md-${this.md}` : '',
this.lg ? `col-lg-${this.lg}` : '',
this.xl ? `col-xl-${this.xl}` : '',
this.auto ? 'auto-width' : '',
this.classes || '', // Add custom classes
];
return classes.filter(Boolean).join(' '); // Remove empty strings
}
render() {
// Dynamic styles
const style = Object.assign({ alignItems: this.align, justifyContent: this.justify, gap: this.gap }, this.styles);
return (h(Host, { key: '40f8a488a4e6f5db1ff8cf6135109118404650f7', flex: this.isFlexBox ? '' : null, class: this.getClass(), style: style }, h("slot", { key: '85980f42ac5248af99988065c937f6f53dff61bc' })));
}
static get is() { return "gov-box"; }
static get originalStyleUrls() {
return {
"$": ["gov-box.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-box.css"]
};
}
static get properties() {
return {
"size": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "size",
"reflect": false
},
"xs": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "xs",
"reflect": false
},
"sm": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "sm",
"reflect": false
},
"md": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "md",
"reflect": false
},
"lg": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "lg",
"reflect": false
},
"xl": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "xl",
"reflect": false
},
"align": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'start' | 'center' | 'end'",
"resolved": "\"center\" | \"end\" | \"start\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "align",
"reflect": false,
"defaultValue": "'start'"
},
"justify": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
"resolved": "\"around\" | \"between\" | \"center\" | \"end\" | \"evenly\" | \"start\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "justify",
"reflect": false,
"defaultValue": "'start'"
},
"gap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "gap",
"reflect": false,
"defaultValue": "'0'"
},
"auto": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "auto",
"reflect": false,
"defaultValue": "false"
},
"isFlexBox": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "is-flex-box",
"reflect": false,
"defaultValue": "false"
},
"classes": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "classes",
"reflect": false
},
"styles": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ [key: string]: string }",
"resolved": "{ [key: string]: string; }",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
}
};
}
}
//# sourceMappingURL=gov-box.js.map