@usecapsule/core-components 3.0.1-dev.2 → 3.0.1-dev.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +10 -10
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/index.esm.js +1 -1
- package/dist/capsule/index.esm.js.map +1 -1
- package/dist/capsule/{p-dd596431.entry.js → p-d63ef54d.entry.js} +3 -3
- package/dist/capsule/p-d63ef54d.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +7 -25
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -1
- package/dist/cjs/index.cjs.js +104 -107
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.css +1 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.css +4 -0
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +3 -3
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +1 -19
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateBorderRadii.js +40 -43
- package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
- package/dist/collection/utils/theme/generateTheme.js +2 -2
- package/dist/collection/utils/theme/generateTheme.js.map +1 -1
- package/dist/collection/utils/theme/utils.js +1 -0
- package/dist/collection/utils/theme/utils.js.map +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +7 -25
- package/dist/esm/cpsl-alert_33.entry.js.map +1 -1
- package/dist/esm/index.js +104 -107
- package/dist/esm/index.js.map +1 -1
- package/dist/types/components/cpsl-select/cpsl-select.d.ts +0 -3
- package/dist/types/interface.d.ts +24 -1
- package/dist/types/utils/theme/generateBorderRadii.d.ts +1 -1
- package/dist/types/utils/theme/generateTheme.d.ts +1 -1
- package/dist/types/utils/theme/utils.d.ts +4 -1
- package/package.json +1 -1
- package/dist/capsule/p-dd596431.entry.js.map +0 -1
|
@@ -5135,7 +5135,7 @@ const CpslDropdown = class {
|
|
|
5135
5135
|
};
|
|
5136
5136
|
CpslDropdown.style = CpslDropdownStyle0;
|
|
5137
5137
|
|
|
5138
|
-
const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--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;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.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);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;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)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.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)}";
|
|
5138
|
+
const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--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;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.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);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;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)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center;text-align:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.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)}";
|
|
5139
5139
|
const CpslFileUploadStyle0 = cpslFileUploadCss;
|
|
5140
5140
|
|
|
5141
5141
|
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
@@ -14895,7 +14895,7 @@ const CpslOverlay = class {
|
|
|
14895
14895
|
};
|
|
14896
14896
|
CpslOverlay.style = CpslOverlayStyle0;
|
|
14897
14897
|
|
|
14898
|
-
const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}";
|
|
14898
|
+
const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}.arrow-button{--button-secondary-icon-color:var(--cpsl-color-text-tertiary)}";
|
|
14899
14899
|
const CpslPaginationStyle0 = cpslPaginationCss;
|
|
14900
14900
|
|
|
14901
14901
|
const CpslPagination = class {
|
|
@@ -14972,7 +14972,7 @@ const CpslPagination = class {
|
|
|
14972
14972
|
filteredPages.push(this.totalPages - 1);
|
|
14973
14973
|
}
|
|
14974
14974
|
}
|
|
14975
|
-
return (index.h(index.Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, index.h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '
|
|
14975
|
+
return (index.h(index.Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, index.h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, index.h("cpsl-button", { key: '8c78bd8f77c65535ceb6fc414f019b1fa7f8d7e8', class: "arrow-button", onClick: this.handlePrevClick }, index.h("cpsl-icon", { key: 'da4779051c45a41a7fcec1fbe04eebf75a417e01', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (index.h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, index.h("cpsl-text", { variant: "bodyS" }, page + 1)))), index.h("cpsl-button", { key: '63f71be7e364edd629077d71ad4c401445807704', class: "arrow-button", onClick: this.handleNextClick }, index.h("cpsl-icon", { key: 'd21bc4f342374d026816d6c091fef282a77320d8', class: "icon", icon: "arrowNarrow" })))));
|
|
14976
14976
|
}
|
|
14977
14977
|
static get watchers() { return {
|
|
14978
14978
|
"currentPage": ["watchChange"]
|
|
@@ -15186,7 +15186,7 @@ const CpslPopover = class {
|
|
|
15186
15186
|
onOpenChange() {
|
|
15187
15187
|
if (this.open) {
|
|
15188
15188
|
window.addEventListener('click', this.handleClickOutside);
|
|
15189
|
-
window.addEventListener('scroll', () => this.setPosition());
|
|
15189
|
+
window.addEventListener('scroll', () => this.setPosition(), true);
|
|
15190
15190
|
}
|
|
15191
15191
|
else {
|
|
15192
15192
|
window.removeEventListener('click', this.handleClickOutside);
|
|
@@ -15202,7 +15202,7 @@ const CpslPopover = class {
|
|
|
15202
15202
|
}
|
|
15203
15203
|
render() {
|
|
15204
15204
|
var _a;
|
|
15205
|
-
return (index.h(index.Host, { key: '
|
|
15205
|
+
return (index.h(index.Host, { key: 'bb9a38fb37e6588041f6b09e064cbe85d0dd46b1', class: {
|
|
15206
15206
|
'open': this.open,
|
|
15207
15207
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
15208
15208
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -15210,7 +15210,7 @@ const CpslPopover = class {
|
|
|
15210
15210
|
'transform-v-top': this.transformOriginVertical === 'top',
|
|
15211
15211
|
'transform-v-center': this.transformOriginVertical === 'center',
|
|
15212
15212
|
'transform-v-bottom': this.transformOriginVertical === 'bottom',
|
|
15213
|
-
}, 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` } }, index.h("div", { key: '
|
|
15213
|
+
}, 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` } }, index.h("div", { key: '99478330639eed6be6f7e5a960ebb2f485692cff', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: '2d15adf8c986698ce02858dfdca49047777e2c33' }))));
|
|
15214
15214
|
}
|
|
15215
15215
|
get el() { return index.getElement(this); }
|
|
15216
15216
|
static get watchers() { return {
|
|
@@ -15330,18 +15330,6 @@ const CpslSelect = class {
|
|
|
15330
15330
|
this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
|
|
15331
15331
|
this.cpslSelectValueChange = index.createEvent(this, "cpslSelectValueChange", 7);
|
|
15332
15332
|
this.inputId = `cpsl-select-${inputIds++}`;
|
|
15333
|
-
this.resetStyles = () => {
|
|
15334
|
-
document.documentElement.style.removeProperty('overflow');
|
|
15335
|
-
document.body.style.removeProperty('padding-right');
|
|
15336
|
-
};
|
|
15337
|
-
this.measureScrollbarWidth = () => {
|
|
15338
|
-
const scrollbox = document.createElement('div');
|
|
15339
|
-
scrollbox.style.overflow = 'scroll';
|
|
15340
|
-
document.body.appendChild(scrollbox);
|
|
15341
|
-
const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
|
|
15342
|
-
document.body.removeChild(scrollbox);
|
|
15343
|
-
return scrollBarWidth;
|
|
15344
|
-
};
|
|
15345
15333
|
this.onBlur = (ev) => {
|
|
15346
15334
|
this.hasFocus = false;
|
|
15347
15335
|
this.popoverEl.closePopover();
|
|
@@ -15412,24 +15400,18 @@ const CpslSelect = class {
|
|
|
15412
15400
|
}
|
|
15413
15401
|
onPopoverOpen() {
|
|
15414
15402
|
this.popoverOpen = true;
|
|
15415
|
-
document.documentElement.style.overflow = 'hidden';
|
|
15416
|
-
document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
|
|
15417
15403
|
}
|
|
15418
15404
|
onPopoverClose() {
|
|
15419
15405
|
this.popoverOpen = false;
|
|
15420
|
-
this.resetStyles();
|
|
15421
15406
|
}
|
|
15422
15407
|
componentDidLoad() {
|
|
15423
15408
|
this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
|
|
15424
15409
|
this.anchorEl = this.el.shadowRoot.getElementById('select-container');
|
|
15425
15410
|
this.selectItem();
|
|
15426
15411
|
}
|
|
15427
|
-
disconnectedCallback() {
|
|
15428
|
-
this.resetStyles();
|
|
15429
|
-
}
|
|
15430
15412
|
render() {
|
|
15431
15413
|
var _a, _b, _c, _d;
|
|
15432
|
-
return (index.h(index.Host, { key: '
|
|
15414
|
+
return (index.h(index.Host, { key: 'dfe6786c9be71ebd71fee236c9b569ef1ad30eac', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { key: 'fbe2cfb2d93558f647442e17b29713f37375be5a', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: '9e5fdf3c056a7a6c13fe9ce45caf78e27482e779', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: 'c721fcd057a142bad5f8f473c7b4daf090e7722a', name: "selected-item" }), index.h("div", { key: '58c94ace573965e8151ef4a9c0648385d6b1c4dc', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: 'ceb4c60607b6c2cbc17a086fe702045196afbd44', 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))), index.h("cpsl-icon", { key: '05cf53f1ce3f8f34e47082c591f2d75d4aeea11b', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), index.h("input", { key: 'a395add0f06b0d10f1e2e6d0ea81478f4a1c07d6', 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) && (index.h("div", { key: 'e7f991ed99ed332f5f42e666bfd2d25eecff3113', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: 'f734a586f0dd7e94ccb2d7806fc9a6a5bdb5f50b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), index.h("cpsl-popover", { key: 'c45f42267e3b4945823e27f5901b58dc5545a51e', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: 'cd7bdc9a3e06a2c4aed9ebe12ec3cd070e323b12', class: "dropdown" }, index.h("div", { key: '0e1483542dd9d63ad548242a2bc2ecb2041f8ed5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'e7697bc187fc433ccb2f5728f8944ff2162387d9', name: "items" }))))));
|
|
15433
15415
|
}
|
|
15434
15416
|
get el() { return index.getElement(this); }
|
|
15435
15417
|
static get watchers() { return {
|