@usecapsule/core-components 3.0.1-dev.1 → 3.0.1-dev.2
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +4 -4
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/p-397edab5.entry.js +2 -0
- package/dist/capsule/{p-73398222.entry.js → p-52d6ebee.entry.js} +2 -2
- package/dist/capsule/{p-39584a7b.entry.js → p-5ed5e96c.entry.js} +2 -2
- package/dist/capsule/{p-97c33636.js → p-6e71539d.js} +1 -1
- package/dist/{esm/index-97ed6ec1.js.map → capsule/p-6e71539d.js.map} +1 -1
- package/dist/capsule/{p-127ac658.entry.js → p-70f95c93.entry.js} +2 -2
- package/dist/capsule/{p-69756614.entry.js → p-86e6cba5.entry.js} +2 -2
- package/dist/capsule/{p-8de15b15.entry.js → p-dd596431.entry.js} +3 -3
- package/dist/capsule/p-dd596431.entry.js.map +1 -0
- package/dist/capsule/{p-fd26ce6e.entry.js → p-f9351426.entry.js} +2 -2
- package/dist/cjs/capsule.cjs.js +2 -2
- package/dist/cjs/capsule.cjs.js.map +1 -1
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +56 -19
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-animation.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-grid.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-info-box.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
- package/dist/cjs/{index-5293d431.js → index-85125285.js} +1 -1
- package/dist/cjs/index-85125285.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +46 -5
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.css +2 -0
- package/dist/collection/components/cpsl-select/cpsl-select.js +35 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.css +22 -12
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +1 -1
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/esm/capsule.js +3 -3
- package/dist/esm/capsule.js.map +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +56 -19
- package/dist/esm/cpsl-alert_33.entry.js.map +1 -1
- package/dist/esm/cpsl-animation.entry.js +1 -1
- package/dist/esm/cpsl-col.entry.js +1 -1
- package/dist/esm/cpsl-grid.entry.js +1 -1
- package/dist/esm/cpsl-info-box.entry.js +1 -1
- package/dist/esm/cpsl-modal-v2.entry.js +1 -1
- package/dist/esm/cpsl-row.entry.js +1 -1
- package/dist/esm/{index-97ed6ec1.js → index-b9a060b3.js} +1 -1
- package/dist/esm/index-b9a060b3.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/cpsl-popover/cpsl-popover.d.ts +2 -0
- package/dist/types/components/cpsl-select/cpsl-select.d.ts +6 -0
- package/dist/types/components.d.ts +16 -0
- package/package.json +1 -1
- package/dist/capsule/p-8de15b15.entry.js.map +0 -1
- package/dist/capsule/p-97c33636.js.map +0 -1
- package/dist/capsule/p-f72482c3.entry.js +0 -2
- package/dist/cjs/index-5293d431.js.map +0 -1
- /package/dist/capsule/{p-f72482c3.entry.js.map → p-397edab5.entry.js.map} +0 -0
- /package/dist/capsule/{p-73398222.entry.js.map → p-52d6ebee.entry.js.map} +0 -0
- /package/dist/capsule/{p-39584a7b.entry.js.map → p-5ed5e96c.entry.js.map} +0 -0
- /package/dist/capsule/{p-127ac658.entry.js.map → p-70f95c93.entry.js.map} +0 -0
- /package/dist/capsule/{p-69756614.entry.js.map → p-86e6cba5.entry.js.map} +0 -0
- /package/dist/capsule/{p-fd26ce6e.entry.js.map → p-f9351426.entry.js.map} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-b9a060b3.js';
|
|
2
2
|
import { a as DEFAULT_Z_INDICES, M as MOBILE_SIZE } from './constants-fce138fa.js';
|
|
3
3
|
import { g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.js';
|
|
4
4
|
|
|
@@ -15081,12 +15081,14 @@ const CpslPopover = class {
|
|
|
15081
15081
|
};
|
|
15082
15082
|
};
|
|
15083
15083
|
this.setPosition = () => {
|
|
15084
|
-
|
|
15084
|
+
var _a;
|
|
15085
|
+
const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
|
|
15086
|
+
if (Boolean(anchorEl)) {
|
|
15085
15087
|
const windowWidth = window.innerWidth;
|
|
15086
15088
|
const windowHeight = window.innerHeight;
|
|
15087
15089
|
const elWidth = this.el.clientWidth;
|
|
15088
15090
|
const elHeight = this.el.clientHeight;
|
|
15089
|
-
const { top, left, height, width } =
|
|
15091
|
+
const { top, left, height, width } = anchorEl.getBoundingClientRect();
|
|
15090
15092
|
switch (this.anchorOriginHorizontal) {
|
|
15091
15093
|
case 'left': {
|
|
15092
15094
|
this.positionX = left;
|
|
@@ -15140,7 +15142,7 @@ const CpslPopover = class {
|
|
|
15140
15142
|
}
|
|
15141
15143
|
};
|
|
15142
15144
|
this.present = () => {
|
|
15143
|
-
if (!this.open) {
|
|
15145
|
+
if (!this.open && !this.disabled) {
|
|
15144
15146
|
this.open = true;
|
|
15145
15147
|
this.cpslOpen.emit();
|
|
15146
15148
|
this.setPosition();
|
|
@@ -15154,9 +15156,11 @@ const CpslPopover = class {
|
|
|
15154
15156
|
this.open = false;
|
|
15155
15157
|
this.positionX = undefined;
|
|
15156
15158
|
this.positionY = undefined;
|
|
15159
|
+
this.anchorEl = undefined;
|
|
15157
15160
|
this.anchorOriginHorizontal = 'left';
|
|
15158
15161
|
this.anchorOriginVertical = 'bottom';
|
|
15159
15162
|
this.autoWidth = true;
|
|
15163
|
+
this.disabled = undefined;
|
|
15160
15164
|
this.preventBlur = undefined;
|
|
15161
15165
|
this.transformOriginHorizontal = 'left';
|
|
15162
15166
|
this.transformOriginVertical = 'top';
|
|
@@ -15194,7 +15198,7 @@ const CpslPopover = class {
|
|
|
15194
15198
|
}
|
|
15195
15199
|
render() {
|
|
15196
15200
|
var _a;
|
|
15197
|
-
return (h(Host, { key: '
|
|
15201
|
+
return (h(Host, { key: 'a5846acd01f652ff06d0f8fb842ab1c204b02c10', class: {
|
|
15198
15202
|
'open': this.open,
|
|
15199
15203
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
15200
15204
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -15202,7 +15206,7 @@ const CpslPopover = class {
|
|
|
15202
15206
|
'transform-v-top': this.transformOriginVertical === 'top',
|
|
15203
15207
|
'transform-v-center': this.transformOriginVertical === 'center',
|
|
15204
15208
|
'transform-v-bottom': this.transformOriginVertical === 'bottom',
|
|
15205
|
-
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '
|
|
15209
|
+
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '579332ea7cca439f8f331575e229c853109d0a06', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '92d5d72dc49d360b12a08028065ddc6e843a1b19' }))));
|
|
15206
15210
|
}
|
|
15207
15211
|
get el() { return getElement(this); }
|
|
15208
15212
|
static get watchers() { return {
|
|
@@ -15312,7 +15316,7 @@ const CpslRadio = class {
|
|
|
15312
15316
|
};
|
|
15313
15317
|
CpslRadio.style = CpslRadioStyle0;
|
|
15314
15318
|
|
|
15315
|
-
const cpslSelectCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-select-border-placeholder);--container-border-color:var(--cpsl-color-select-border-active);--container-border-error-color:var(--cpsl-color-select-border-error);--container-background-color:var(--cpsl-color-select-surface-default);--container-background-color-disabled:var(--cpsl-color-select-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-select);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--dropdown-margin-top:4px;--dropdown-border-width:1px;--dropdown-border-radius:var(--cpsl-border-radius-select);--dropdown-border-color:var(--cpsl-color-select-dropdown-border);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}input{box-sizing:border-box;position:absolute;width:100%;height:100%;margin:0px;opacity:0;top:0;left:0;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{color:var(--cpsl-color-text-primary)}.selected-text.placeholder{color:var(--cpsl-color-text-disabled)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;scrollbar-width:thin}";
|
|
15319
|
+
const cpslSelectCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-select-border-placeholder);--container-border-color:var(--cpsl-color-select-border-active);--container-border-error-color:var(--cpsl-color-select-border-error);--container-background-color:var(--cpsl-color-select-surface-default);--container-background-color-disabled:var(--cpsl-color-select-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-select);--container-padding-top:0px;--container-padding-bottom:0px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--dropdown-margin-top:4px;--dropdown-border-width:1px;--dropdown-border-radius:var(--cpsl-border-radius-select);--dropdown-border-color:var(--cpsl-color-select-dropdown-border);--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}input{box-sizing:border-box;position:absolute;width:100%;height:100%;margin:0px;opacity:0;top:0;left:0;z-index:-1;cursor:pointer}input.disabled{cursor:default}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-select-border-placeholder);--select-color:var(--cpsl-color-text-secondary)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--select-background-color:var(--select-background-color-disabled);--select-color:var(--cpsl-color-text-disabled)}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-select-border-active);--container-background-color:var(--cpsl-color-select-surface-default)}.select-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);cursor:pointer;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}.selected-container-content{flex:1}.chevron{transition:transform 0.3s ease;transform:rotate(180deg);--icon-color:var(--cpsl-color-text-disabled)}.chevron.open{transform:rotate(0deg);--icon-color:var(--cpsl-color-text-primary)}.chevron.has-value{--icon-color:var(--cpsl-color-text-primary)}.selected-text{color:var(--cpsl-color-text-primary)}.selected-text.placeholder{color:var(--cpsl-color-text-disabled)}.dropdown{margin-top:var(--dropdown-margin-top);border-style:solid;border-width:var(--dropdown-border-width);border-color:var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);overflow:hidden}.dropdown ::slotted(*:last-child){--container-border-width:0px}.dropdown-inner{overflow:auto;scrollbar-width:thin}";
|
|
15316
15320
|
const CpslSelectStyle0 = cpslSelectCss;
|
|
15317
15321
|
|
|
15318
15322
|
const CpslSelect = class {
|
|
@@ -15322,8 +15326,21 @@ const CpslSelect = class {
|
|
|
15322
15326
|
this.cpslFocus = createEvent(this, "cpslFocus", 7);
|
|
15323
15327
|
this.cpslSelectValueChange = createEvent(this, "cpslSelectValueChange", 7);
|
|
15324
15328
|
this.inputId = `cpsl-select-${inputIds++}`;
|
|
15329
|
+
this.resetStyles = () => {
|
|
15330
|
+
document.documentElement.style.removeProperty('overflow');
|
|
15331
|
+
document.body.style.removeProperty('padding-right');
|
|
15332
|
+
};
|
|
15333
|
+
this.measureScrollbarWidth = () => {
|
|
15334
|
+
const scrollbox = document.createElement('div');
|
|
15335
|
+
scrollbox.style.overflow = 'scroll';
|
|
15336
|
+
document.body.appendChild(scrollbox);
|
|
15337
|
+
const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
|
|
15338
|
+
document.body.removeChild(scrollbox);
|
|
15339
|
+
return scrollBarWidth;
|
|
15340
|
+
};
|
|
15325
15341
|
this.onBlur = (ev) => {
|
|
15326
15342
|
this.hasFocus = false;
|
|
15343
|
+
this.popoverEl.closePopover();
|
|
15327
15344
|
this.cpslBlur.emit(ev);
|
|
15328
15345
|
};
|
|
15329
15346
|
this.onFocus = (ev) => {
|
|
@@ -15351,6 +15368,19 @@ const CpslSelect = class {
|
|
|
15351
15368
|
this.hasSelectedItem = false;
|
|
15352
15369
|
}
|
|
15353
15370
|
};
|
|
15371
|
+
this.handleClickOutside = (event) => {
|
|
15372
|
+
if (this.hasFocus && !this.el.contains(event.target)) {
|
|
15373
|
+
this.hasFocus = false;
|
|
15374
|
+
window.removeEventListener('click', this.handleClickOutside);
|
|
15375
|
+
}
|
|
15376
|
+
};
|
|
15377
|
+
this.handleClick = () => {
|
|
15378
|
+
if (!this.disabled) {
|
|
15379
|
+
this.hasFocus = true;
|
|
15380
|
+
window.addEventListener('click', this.handleClickOutside);
|
|
15381
|
+
}
|
|
15382
|
+
};
|
|
15383
|
+
this.anchorEl = undefined;
|
|
15354
15384
|
this.hasFocus = false;
|
|
15355
15385
|
this.popoverOpen = false;
|
|
15356
15386
|
this.hasSelectedItem = false;
|
|
@@ -15378,17 +15408,24 @@ const CpslSelect = class {
|
|
|
15378
15408
|
}
|
|
15379
15409
|
onPopoverOpen() {
|
|
15380
15410
|
this.popoverOpen = true;
|
|
15411
|
+
document.documentElement.style.overflow = 'hidden';
|
|
15412
|
+
document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
|
|
15381
15413
|
}
|
|
15382
15414
|
onPopoverClose() {
|
|
15383
15415
|
this.popoverOpen = false;
|
|
15416
|
+
this.resetStyles();
|
|
15384
15417
|
}
|
|
15385
15418
|
componentDidLoad() {
|
|
15386
15419
|
this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
|
|
15420
|
+
this.anchorEl = this.el.shadowRoot.getElementById('select-container');
|
|
15387
15421
|
this.selectItem();
|
|
15388
15422
|
}
|
|
15423
|
+
disconnectedCallback() {
|
|
15424
|
+
this.resetStyles();
|
|
15425
|
+
}
|
|
15389
15426
|
render() {
|
|
15390
15427
|
var _a, _b, _c, _d;
|
|
15391
|
-
return (h(Host, { key: '
|
|
15428
|
+
return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', name: "items" }))))));
|
|
15392
15429
|
}
|
|
15393
15430
|
get el() { return getElement(this); }
|
|
15394
15431
|
static get watchers() { return {
|
|
@@ -15398,7 +15435,7 @@ const CpslSelect = class {
|
|
|
15398
15435
|
let inputIds = 0;
|
|
15399
15436
|
CpslSelect.style = CpslSelectStyle0;
|
|
15400
15437
|
|
|
15401
|
-
const cpslSelectItemCss = ":host{--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-
|
|
15438
|
+
const cpslSelectItemCss = ":host{--outer-container-padding-start:8px;--outer-container-padding-end:8px;--outer-container-padding-top:8px;--outer-container-padding-bottom:8px;--container-background-color:var(--cpsl-color-select-surface-default);--container-hover-background-color:var(--cpsl-color-select-surface-hover);--container-border-radius:calc(var(--cpsl-border-radius-select) - 4px);--container-padding-start:8px;--container-padding-end:8px;--container-padding-top:8px;--container-padding-bottom:8px;display:block;font-family:var(--cpsl-font-family, inherit);cursor:pointer}.inner-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);background-color:var(--container-background-color);border-radius:var(--container-border-radius);height:100%;display:flex;align-items:center}.outer-container{-webkit-padding-start:var(--outer-container-padding-start);padding-inline-start:var(--outer-container-padding-start);-webkit-padding-end:var(--outer-container-padding-end);padding-inline-end:var(--outer-container-padding-end);padding-top:var(--outer-container-padding-top);padding-bottom:var(--outer-container-padding-bottom);background-color:var(--container-background-color)}.outer-container:hover>.inner-container{background-color:var(--container-hover-background-color)}.selected{background-color:var(--container-hover-background-color)}:host(.in-select-box){--container-background-color:transparent;--container-hover-background-color:transparent;--container-border-width:0px;--container-padding-start:0px;--container-padding-end:0px;--container-padding-top:0px;--container-padding-bottom:0px;flex:1;height:100%}";
|
|
15402
15439
|
const CpslSelectItemStyle0 = cpslSelectItemCss;
|
|
15403
15440
|
|
|
15404
15441
|
const CpslSelectItem = class {
|
|
@@ -15412,7 +15449,7 @@ const CpslSelectItem = class {
|
|
|
15412
15449
|
this.value = undefined;
|
|
15413
15450
|
}
|
|
15414
15451
|
render() {
|
|
15415
|
-
return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: '
|
|
15452
|
+
return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: 'd13e45f3997cfbbc4042a2810c76eb9b71b15d22', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '5c9787fb9ad5b13740515386e269895d2c0ca91d', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '0fc1ff893cb3e5f53a99978f683b1e4f1fb15410' })))));
|
|
15416
15453
|
}
|
|
15417
15454
|
};
|
|
15418
15455
|
CpslSelectItem.style = CpslSelectItemStyle0;
|
|
@@ -15537,7 +15574,7 @@ const CpslSlideButton = class {
|
|
|
15537
15574
|
return this.el.shadowRoot.getElementById('end-icon');
|
|
15538
15575
|
}
|
|
15539
15576
|
render() {
|
|
15540
|
-
return (h(Host, { key: '
|
|
15577
|
+
return (h(Host, { key: 'aecef591819520c5abd43529f797a11d564bbf40' }, h("div", { key: '8d08c211ff7393aaf86569d3cb442216e1f78efd', id: "slider-container", class: "slider-container" }, h("div", { key: '072a8c587c34bf792d289cfa4490cd8564121a16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '6f656942985f8c490bb96d99475373fe6978c0e0', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0fcdc94813b54c9c32fdf7d5fc963448e0cf492a', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f45c670469c80f5604c06c8182ef7c9fabc56200', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'bc987b8d1495bb731ead75497ae7c411534f7ff0', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'bd6ab1e1adaff366e5ebb2bf82415bab514c00e8', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '0b94b997a625213645e737c77ad736663d41a844', id: "end-text", class: "end-text" }, this.endText))));
|
|
15541
15578
|
}
|
|
15542
15579
|
get el() { return getElement(this); }
|
|
15543
15580
|
};
|
|
@@ -15553,13 +15590,13 @@ const CpslSpinner = class {
|
|
|
15553
15590
|
this.speed = 1;
|
|
15554
15591
|
}
|
|
15555
15592
|
render() {
|
|
15556
|
-
return (h(Host, { key: '
|
|
15593
|
+
return (h(Host, { key: '10ec2d7dc8b62b0819e4ff3f683b5b7c7a6dbf19', style: {
|
|
15557
15594
|
'height': `${this.size}px`,
|
|
15558
15595
|
'width': `${this.size}px`,
|
|
15559
15596
|
'animation': `spin ${this.speed}s linear infinite`,
|
|
15560
15597
|
'-webkit-animation': `spin ${this.speed}s linear infinite`,
|
|
15561
15598
|
'-moz-animation': `spin ${this.speed}s linear infinite`,
|
|
15562
|
-
} }, h("svg", { key: '
|
|
15599
|
+
} }, h("svg", { key: 'e88b02f99bbfe3677eafe55d75ee65f595e829c5', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'de3d33313d7509abeb7733c37d3ed99ca9894260', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '7e0edc7e3222dc95a8c62d3228aceeddaf51593b', cx: "45", cy: "27", r: "5" }))));
|
|
15563
15600
|
}
|
|
15564
15601
|
};
|
|
15565
15602
|
CpslSpinner.style = CpslSpinnerStyle0;
|
|
@@ -15577,7 +15614,7 @@ const CpslSwitch = class {
|
|
|
15577
15614
|
this.checked = undefined;
|
|
15578
15615
|
}
|
|
15579
15616
|
render() {
|
|
15580
|
-
return (h(Host, { key: '
|
|
15617
|
+
return (h(Host, { key: '1b25c42d27a45e0af756eadba475d15a8034d483' }, h("input", { key: 'fbb246d9b9fd5d3842bef147922095a36277ff0f', type: "checkbox", checked: this.checked }), h("span", { key: 'fe9356dec1f9b41b94cd5597b36ae6e1d5fce7ac', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '11d0ce011571a147912b400398ed8b78743d356c', class: { thumb: true, checked: this.checked } }))));
|
|
15581
15618
|
}
|
|
15582
15619
|
};
|
|
15583
15620
|
CpslSwitch.style = CpslSwitchStyle0;
|
|
@@ -15609,7 +15646,7 @@ const CpslTab = class {
|
|
|
15609
15646
|
}
|
|
15610
15647
|
}
|
|
15611
15648
|
render() {
|
|
15612
|
-
return (h(Host, { key: '
|
|
15649
|
+
return (h(Host, { key: 'cc8785697e46574b6fdb1839098473bb3ca17866', onClick: this.onTabClicked }, h("div", { key: '2c6451937db4c48fa11bd610bfd344154eced8e6', class: { 'tab-container': true } }, h("slot", { key: '1dc724e299adbc96024aa6636f94551b09853c2a' }))));
|
|
15613
15650
|
}
|
|
15614
15651
|
get el() { return getElement(this); }
|
|
15615
15652
|
};
|
|
@@ -15629,7 +15666,7 @@ const CpslTable = class {
|
|
|
15629
15666
|
return this.el.querySelector('[slot="footer"]');
|
|
15630
15667
|
}
|
|
15631
15668
|
render() {
|
|
15632
|
-
return (h(Host, { key: '
|
|
15669
|
+
return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
|
|
15633
15670
|
}
|
|
15634
15671
|
get el() { return getElement(this); }
|
|
15635
15672
|
};
|
|
@@ -15688,7 +15725,7 @@ const CpslTabs = class {
|
|
|
15688
15725
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
15689
15726
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
15690
15727
|
const selectedTabRect = this.selectedTabRect;
|
|
15691
|
-
return (h(Host, { key: '
|
|
15728
|
+
return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
15692
15729
|
}
|
|
15693
15730
|
get el() { return getElement(this); }
|
|
15694
15731
|
static get watchers() { return {
|
|
@@ -15738,7 +15775,7 @@ const CpslText = class {
|
|
|
15738
15775
|
}
|
|
15739
15776
|
}
|
|
15740
15777
|
render() {
|
|
15741
|
-
return (h(Host, { key: '
|
|
15778
|
+
return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', class: {
|
|
15742
15779
|
'primary': this.color === 'primary',
|
|
15743
15780
|
'secondary': this.color === 'secondary',
|
|
15744
15781
|
'tertiary': this.color === 'tertiary',
|
|
@@ -15775,7 +15812,7 @@ const CpslTileButton = class {
|
|
|
15775
15812
|
this.icon = undefined;
|
|
15776
15813
|
}
|
|
15777
15814
|
render() {
|
|
15778
|
-
return (h(Host, { key: '
|
|
15815
|
+
return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
|
|
15779
15816
|
}
|
|
15780
15817
|
};
|
|
15781
15818
|
CpslTileButton.style = CpslTileButtonStyle0;
|