@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
262 lines (246 loc) • 24.9 kB
JavaScript
'use strict';
var index = require('./index-Cr4UXaM1.js');
var utils = require('./utils-C0e12S4M.js');
const convertPropsToClasses$2 = ({ size, }) => {
let classes = '';
if (size) {
classes = `${classes} modus-wc-checkbox-${size}`;
}
return classes.trim();
};
const modusWcCheckboxCss = "modus-wc-checkbox.modus-wc-checkbox-host{align-items:center;display:flex}modus-wc-checkbox.modus-wc-checkbox-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox{--chkbg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--chkfg:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--chkbg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox{--chkbg:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--chkbg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}";
const ModusWcCheckbox = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.inputBlur = index.createEvent(this, "inputBlur");
this.inputChange = index.createEvent(this, "inputChange");
this.inputFocus = index.createEvent(this, "inputFocus");
this.inheritedAttributes = {};
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The disabled state of the checkbox. */
this.disabled = false;
/** The indeterminate state of the checkbox. */
this.indeterminate = false;
/** Name of the form control. Submitted with the form as part of a name/value pair. */
this.name = '';
/** A value is required for the form to be submittable. */
this.required = false;
/** The size of the input. */
this.size = 'md';
/** The value of the checkbox. */
this.value = false;
this.handleBlur = (event) => {
this.inputBlur.emit(event);
};
this.handleFocus = (event) => {
this.inputFocus.emit(event);
};
this.handleInput = (event) => {
this.inputChange.emit(event);
};
}
componentDidRender() {
const checkbox = this.el.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.indeterminate = this.indeterminate;
}
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Checkbox';
}
this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-checkbox'];
const propClasses = convertPropsToClasses$2({ size: this.size });
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (index.h(index.Host, { key: '98750606924759916a598db5e6befc7098734119', class: "modus-wc-checkbox-host" }, index.h("input", Object.assign({ key: 'be35fe01388db0cc0e270770d6716697d41b6b54', "aria-checked": this.indeterminate ? 'mixed' : this.value, "aria-disabled": this.disabled, checked: this.value, class: this.getClasses(), disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, tabIndex: this.inputTabIndex, type: "checkbox" }, this.inheritedAttributes)), this.label && (index.h("modus-wc-input-label", { key: '00123acd4cbc9e7a3c89e763f67b9c57381b68d0', forId: this.inputId, labelText: this.label, required: this.required, size: this.size }))));
}
get el() { return index.getElement(this); }
};
ModusWcCheckbox.style = modusWcCheckboxCss;
const convertPropsToClasses$1 = ({ size, }) => {
let classes = '';
if (size) {
classes = `${classes} modus-wc-btn-${size}`;
}
return classes.trim();
};
const ChevronDoubleLeftSolidIcon = ({ className, }) => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-chevron-double-left ${className || ''}`, viewBox: "0 0 24 24" },
index.h("path", { d: "m14.42 12 3.88-3.88a.996.996 0 1 0-1.41-1.41L12.3 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01a.996.996 0 0 0 0-1.41zm-2.71-5.29a.996.996 0 0 0-1.41 0L5.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.38.38 1.01.38 1.4-.01s.39-1.02 0-1.41L7.83 12l3.88-3.88a.996.996 0 0 0 0-1.41" })));
const ChevronDoubleRightSolidIcon = ({ className, }) => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-chevron-double-right ${className || ''}`, viewBox: "0 0 24 24" },
index.h("path", { d: "M7.12 6.71c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41L9.58 12 5.7 15.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41zm11.17 4.58L13.7 6.7c-.38-.38-1.02-.38-1.41 0a.996.996 0 0 0 0 1.41l3.88 3.88-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41Z" })));
const ChevronLeftSolidIcon = ({ className, }) => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-chevron-left ${className || ''}`, viewBox: "0 0 24 24" },
index.h("path", { d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41" })));
const ChevronRightSolidIcon = ({ className, }) => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-chevron-right ${className || ''}`, viewBox: "0 0 24 24" },
index.h("path", { d: "M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01" })));
const modusWcPaginationCss = "modus-wc-pagination .modus-wc-pagination{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn{background-color:var(--modus-wc-color-base-100);border-color:transparent}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm .modus-wc-pagination-icon{height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md .modus-wc-pagination-icon{height:var(--modus-wc-ling-height-md);width:var(--modus-wc-line-height-md)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg .modus-wc-pagination-icon{height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-button-text{padding:calc(var(--modus-wc-spacing-sm) - 2px);width:auto !important}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-base-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-base-300);border-color:transparent}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination{background-color:transparent}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn{background-color:transparent;border:none;border-radius:var(--modus-wc-border-radius-md) !important;box-shadow:none}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-sm{height:var(--modus-wc-line-height-md);max-height:var(--modus-wc-line-height-md);min-height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-md{height:var(--modus-wc-line-height-lg);max-height:var(--modus-wc-line-height-lg);min-height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg,[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn.modus-wc-btn-lg{height:var(--modus-wc-line-height-xl);max-height:var(--modus-wc-line-height-xl);min-height:var(--modus-wc-line-height-xl);width:var(--modus-wc-line-height-xl)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-blue-pale);color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled){color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled).modus-wc-btn-active{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-pagination .modus-wc-pagination .modus-wc-pagination-btn:not(:disabled):hover:not(.modus-wc-btn-active){background-color:var(--modus-wc-color-gray-8)}";
const ModusWcPagination = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.pageChange = index.createEvent(this, "pageChange");
this.inheritedAttributes = {};
this.maxVisibleButtons = 5;
/** Total number of pages */
this.count = 1;
/** Custom CSS class to apply */
this.customClass = '';
/** The current page number */
this.page = 1;
/** Size of the pagination buttons */
this.size = 'md';
/** Internal state to track visible page numbers */
this.visiblePages = [];
this.handlePageClick = (newPage) => {
if (newPage === this.page || newPage < 1 || newPage > this.count) {
return;
}
this.pageChange.emit({ newPage, prevPage: this.page });
this.page = newPage;
};
}
// Creates a sliding "window" of page buttons that tries to keep the current page centered when possible.
calculateVisiblePages() {
const pages = [];
// Calculates how many page buttons should ideally appear on each side of current page.
const halfVisible = Math.floor(this.maxVisibleButtons / 2);
let startPage = Math.max(1, this.page - halfVisible);
let endPage = Math.min(this.count, startPage + this.maxVisibleButtons - 1);
// Handles edge case when near end of the page count.
// If we can't fit enough buttons after current page, then shift window left.
if (endPage - startPage + 1 < this.maxVisibleButtons) {
startPage = Math.max(1, endPage - this.maxVisibleButtons + 1);
}
for (let i = startPage; i <= endPage; i++) {
pages.push(i);
}
this.visiblePages = pages;
}
componentWillLoad() {
this.calculateVisiblePages();
this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
}
getClasses() {
const buttonClassList = [
'modus-wc-pagination-btn',
'modus-wc-join-item',
'modus-wc-btn',
'modus-wc-btn-square',
];
const paginationClassList = ['modus-wc-pagination', 'modus-wc-join'];
// The order CSS classes are added matters to CSS specificity
if (this.customClass)
paginationClassList.push(this.customClass);
const paginationClasses = paginationClassList.join(' ');
const propClasses = convertPropsToClasses$1({ size: this.size });
if (propClasses)
buttonClassList.push(propClasses);
const buttonClasses = buttonClassList.join(' ');
return { paginationClasses, buttonClasses };
}
render() {
var _a, _b, _c, _d, _e;
const { paginationClasses, buttonClasses } = this.getClasses();
const isFirstPage = this.page === 1;
const isLastPage = this.page === this.count;
const shouldShowFirstLastButtons = this.count > this.maxVisibleButtons;
// Default aria values if not provided
const ariaLabels = {
firstPage: ((_a = this.ariaLabelValues) === null || _a === void 0 ? void 0 : _a.firstPage) || 'First page',
lastPage: ((_b = this.ariaLabelValues) === null || _b === void 0 ? void 0 : _b.lastPage) || 'Last page',
nextPage: ((_c = this.ariaLabelValues) === null || _c === void 0 ? void 0 : _c.nextPage) || 'Next page',
page: ((_d = this.ariaLabelValues) === null || _d === void 0 ? void 0 : _d.page) || 'Page {0}',
previousPage: ((_e = this.ariaLabelValues) === null || _e === void 0 ? void 0 : _e.previousPage) || 'Previous page',
};
return (index.h("div", Object.assign({ key: 'a98ee63c53970988224d69574f8caef0a18e83c8', class: paginationClasses }, this.inheritedAttributes), shouldShowFirstLastButtons && (index.h("button", { key: '60f632a86371057be72603418ff9484579002849', "aria-label": ariaLabels.firstPage, class: buttonClasses, disabled: isFirstPage, onClick: () => this.handlePageClick(1) }, index.h(ChevronDoubleLeftSolidIcon, { key: '28d4d49215b91ce731bc5995a63fdacc64508b85', className: "modus-wc-pagination-icon" }))), index.h("button", { key: '964764254784345bd0631658c2d9a1b76714c93d', "aria-label": this.prevButtonText ? undefined : ariaLabels.previousPage, class: `${buttonClasses} ${this.prevButtonText ? 'modus-wc-pagination-button-text' : ''}`, disabled: isFirstPage, onClick: () => this.handlePageClick(this.page - 1) }, this.prevButtonText ? (index.h("span", null, this.prevButtonText)) : (index.h(ChevronLeftSolidIcon, { className: "modus-wc-pagination-icon" }))), this.visiblePages.map((page) => (index.h("button", { "aria-current": this.page === page ? 'page' : undefined, "aria-label": ariaLabels.page.replace('{0}', page.toString()), class: `${buttonClasses} ${this.page === page ? 'modus-wc-btn-active' : ''}`, onClick: () => this.handlePageClick(page) }, page))), index.h("button", { key: 'f4554c62d1e20b95e324b73b223a1a6b2ad1eaf2', "aria-label": this.nextButtonText ? undefined : ariaLabels.nextPage, class: `${buttonClasses} ${this.nextButtonText ? 'modus-wc-pagination-button-text' : ''}`, disabled: isLastPage, onClick: () => this.handlePageClick(this.page + 1) }, this.nextButtonText ? (index.h("span", null, this.nextButtonText)) : (index.h(ChevronRightSolidIcon, { className: "modus-wc-pagination-icon" }))), shouldShowFirstLastButtons && (index.h("button", { key: 'f725c5b939a5340637304c34ff260c51a6cbd5cd', "aria-label": ariaLabels.lastPage, class: buttonClasses, disabled: isLastPage, onClick: () => this.handlePageClick(this.count) }, index.h(ChevronDoubleRightSolidIcon, { key: 'b133e57a7633ed14304db9bd3c89c50f98cb33d2', className: "modus-wc-pagination-icon" })))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"page": ["calculateVisiblePages"],
"count": ["calculateVisiblePages"]
}; }
};
ModusWcPagination.style = modusWcPaginationCss;
const convertPropsToClasses = ({ bordered, feedback, size, }) => {
let classes = '';
if (bordered) {
classes = `${classes} modus-wc-select-bordered`;
}
if (feedback) {
classes = `${classes} modus-wc-input--${feedback.level}`;
}
if (size) {
classes = `${classes} modus-wc-select-${size}`;
}
return classes.trim();
};
const modusWcSelectCss = ".modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}.modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}.modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}.modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-select .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-sm,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-input-height-sm);min-height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-md,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-input-height-md);min-height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-lg,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-font-size-lg);min-height:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select:focus,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select,[data-theme=modus-modern-dark] modus-wc-select .modus-wc-select{background-color:var(--modus-wc-color-gray-10)}";
const ModusWcSelect = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.inputBlur = index.createEvent(this, "inputBlur");
this.inputChange = index.createEvent(this, "inputChange");
this.inputFocus = index.createEvent(this, "inputFocus");
this.inheritedAttributes = {};
/** Indicates that the input should have a border. */
this.bordered = true;
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** Whether the form control is disabled. */
this.disabled = false;
/** The options to display in the select dropdown. */
this.options = [];
/** A value is required for the form to be submittable. */
this.required = false;
/** The size of the input. */
this.size = 'md';
/** The value of the control. */
this.value = '';
this.handleBlur = (event) => {
this.inputBlur.emit(event);
};
this.handleFocus = (event) => {
this.inputFocus.emit(event);
};
this.handleInput = (event) => {
this.inputChange.emit(event);
};
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Select';
}
this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-select', 'modus-wc-w-full'];
const propClasses = convertPropsToClasses({
bordered: this.bordered,
feedback: this.feedback,
size: this.size,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (index.h(index.Host, { key: 'fe16ac943cb0b5ef7983890d68335804a92362b8' }, this.label && (index.h("modus-wc-input-label", { key: '3874531fe70334eb7b95a6d0ee5c37ddf23148d7', forId: this.inputId, labelText: this.label, required: this.required, size: this.size })), index.h("select", Object.assign({ key: 'b21f3b652da487383197f0b2872e098177690ae6', class: this.getClasses(), disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, tabindex: this.inputTabIndex }, this.inheritedAttributes), this.options.map((option) => (index.h("option", { disabled: option.disabled, selected: option.value === this.value, value: option.value }, option.label)))), this.feedback && (index.h("modus-wc-input-feedback", { key: '2827a99a1e016538434f13a759fe64e7f205b68a', level: this.feedback.level, message: this.feedback.message, size: this.size }))));
}
get el() { return index.getElement(this); }
};
ModusWcSelect.style = modusWcSelectCss;
exports.modus_wc_checkbox = ModusWcCheckbox;
exports.modus_wc_pagination = ModusWcPagination;
exports.modus_wc_select = ModusWcSelect;