@usecapsule/core-components 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-bbbfec72.entry.js → p-47f9b803.entry.js} +3 -3
- package/dist/capsule/p-47f9b803.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_17.cjs.entry.js +37 -8
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
- package/dist/cjs/index-2a026742.js +30 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.css +10 -0
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +34 -5
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
- package/dist/esm/cpsl-alert_17.entry.js +37 -8
- package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
- package/dist/esm/index-7c2f5cb9.js +30 -1
- package/package.json +2 -2
- package/dist/capsule/p-bbbfec72.entry.js.map +0 -1
@@ -836,7 +836,7 @@ const CpslCodeInput = class {
|
|
836
836
|
var _a;
|
837
837
|
return (index.h(index.Host, { key: '1c877c2c935da7b35b291ef549d1df66aef4a999' }, index.h("div", { key: 'cf8bba26f01b2036ec7414f2f22113f8e270e810', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
|
838
838
|
var _a;
|
839
|
-
return (index.h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i] }));
|
839
|
+
return (index.h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
|
840
840
|
})), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
841
841
|
}
|
842
842
|
get el() { return index.getElement(this); }
|
@@ -7030,7 +7030,7 @@ gsap.registerPlugin(CSSPlugin);
|
|
7030
7030
|
|
7031
7031
|
var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
|
7032
7032
|
|
7033
|
-
const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 2px 4px 0px var(--cpsl-color-alpha-black-8);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:inline-block}.modal-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);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background-color:var(--container-background-color)}.modal-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:var(--inner-container-padding-top);padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);display:flex;flex-direction:column;flex:1;border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background-color:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}";
|
7033
|
+
const cpslModalCss = ":host{--container-width:360px;--container-gap:16px;--container-border-radius:var(--cpsl-border-radius-modal);--container-border-width:1px;--container-border-color:var(--cpsl-color-modal-border);--container-background-color:var(--cpsl-color-modal-surface-footer);--container-padding-bottom:16px;--container-box-shadow:0px 2px 4px 0px var(--cpsl-color-alpha-black-8);--inner-container-background-color:var(--cpsl-color-modal-surface-main);--inner-container-border-radius:var(--cpsl-border-radius-modal);--inner-container-box-shadow:0px 1px 2px 0px var(--cpsl-color-alpha-black-8);--inner-container-padding-top:16px;--inner-container-padding-end:16px;--inner-container-padding-bottom:24px;--inner-container-padding-start:16px;--inner-container-margin-bottom:16px;display:inline-block}.modal-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);width:var(--container-width);display:flex;flex-direction:column;border:var(--container-border-width) solid var(--container-border-color);border-radius:var(--container-border-radius);box-shadow:var(--container-box-shadow);background-color:var(--container-background-color);max-width:95vw;max-height:95vh;max-height:95dvh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none;}.modal-container ::-webkit-scrollbar{display:none}.modal-inner-container{-webkit-padding-start:var(--inner-container-padding-start);padding-inline-start:var(--inner-container-padding-start);-webkit-padding-end:var(--inner-container-padding-end);padding-inline-end:var(--inner-container-padding-end);padding-top:var(--inner-container-padding-top);padding-bottom:var(--inner-container-padding-bottom);margin-bottom:var(--inner-container-margin-bottom);display:flex;flex-direction:column;flex:1;border-radius:var(--inner-container-border-radius);box-shadow:var(--inner-container-box-shadow);background-color:var(--inner-container-background-color)}.expanded{height:0px;overflow:hidden}.modal-inner-container.no-footer{margin-bottom:0px;box-shadow:none}.modal-container.no-footer{padding-bottom:0px}";
|
7034
7034
|
const CpslModalStyle0 = cpslModalCss;
|
7035
7035
|
|
7036
7036
|
const CpslModal = class {
|
@@ -7071,7 +7071,7 @@ const CpslModal = class {
|
|
7071
7071
|
return this.el.shadowRoot.getElementById('modal-header-expanded');
|
7072
7072
|
}
|
7073
7073
|
render() {
|
7074
|
-
return (index.h(index.Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, index.h("div", { key: '
|
7074
|
+
return (index.h(index.Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, index.h("div", { key: '9dde8baf5b03f06d3a5a933071021a0e86e44f28', class: { 'modal-container': true, 'no-footer': this.noFooter }, part: "modal-container" }, index.h("div", { key: 'ef572da671e05a6bcec961fe7746991ab2b7fc03', class: { 'modal-inner-container': true, 'no-footer': this.noFooter }, part: "modal-inner-container" }, index.h("div", { key: '520cfa8d91bbaa1c8afcfcf0a783ff2de5a64ee7', id: "modal-header", class: "no-overflow" }, index.h("slot", { key: '3b1b8146883e4a00fbf34855a6911fd3f2328446', name: "header" })), index.h("div", { key: '02a42d926c1665fcc9cc7911f629873c56370de0', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, index.h("slot", { key: '0d531f4562595f479509dcffc832b7286f907f17', name: "footerExpandedHeader" })), index.h("div", { key: '400e6400b0a10978ad130f837ea28fabbd4a82f8', id: "modal-body", class: "no-overflow" }, index.h("slot", { key: '3ee02065b109655bea2d3c06c79eb29e870bde0b', name: "body" }))), index.h("div", { key: 'e755b09b53eed8d51aa165a491b4d97a7b0f76cd', id: "modal-footer", class: "no-overflow" }, index.h("slot", { key: 'bc2d815a46b9d57fccd96350b1ec63fb44d4406c', name: "footer" })), index.h("div", { key: '07e72b9a0eff535a0fe1056a5dbf6ff2dac5c065', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, index.h("slot", { key: '15d6a854ce7b99ead8b19d177b9e7f7b43074e30', name: "footerExpandedFooter" })))));
|
7075
7075
|
}
|
7076
7076
|
get el() { return index.getElement(this); }
|
7077
7077
|
static get watchers() { return {
|
@@ -7230,17 +7230,44 @@ const CpslSlideButton = class {
|
|
7230
7230
|
this.dragElement(this.el.shadowRoot.getElementById('slider'));
|
7231
7231
|
}
|
7232
7232
|
dragElement(el) {
|
7233
|
+
const pointerDown = (e) => {
|
7234
|
+
pos3 = e.clientX;
|
7235
|
+
switch (e.pointerType) {
|
7236
|
+
case 'mouse':
|
7237
|
+
el.onmousedown = dragMouseDown;
|
7238
|
+
break;
|
7239
|
+
default:
|
7240
|
+
el.ontouchstart = dragTouchDown;
|
7241
|
+
}
|
7242
|
+
};
|
7233
7243
|
const dragMouseDown = (e) => {
|
7234
7244
|
e.preventDefault();
|
7235
7245
|
pos3 = e.clientX;
|
7236
7246
|
document.onmouseup = closeDragElement;
|
7237
|
-
document.onmousemove =
|
7247
|
+
document.onmousemove = elementMouseDrag;
|
7238
7248
|
};
|
7239
|
-
const
|
7249
|
+
const dragTouchDown = (e) => {
|
7250
|
+
e.preventDefault();
|
7251
|
+
const touchLocation = e.targetTouches[0];
|
7252
|
+
pos3 = touchLocation.clientX;
|
7253
|
+
document.ontouchend = closeDragElement;
|
7254
|
+
document.ontouchmove = elementTouchDrag;
|
7255
|
+
};
|
7256
|
+
const elementMouseDrag = (e) => {
|
7240
7257
|
e.preventDefault();
|
7241
7258
|
pos1 = pos3 - e.clientX;
|
7242
7259
|
pos3 = e.clientX;
|
7243
|
-
|
7260
|
+
finishElementDrag(pos1);
|
7261
|
+
};
|
7262
|
+
const elementTouchDrag = (e) => {
|
7263
|
+
e.preventDefault();
|
7264
|
+
const touchLocation = e.targetTouches[0];
|
7265
|
+
pos1 = pos3 - touchLocation.clientX;
|
7266
|
+
pos3 = touchLocation.clientX;
|
7267
|
+
finishElementDrag(pos1);
|
7268
|
+
};
|
7269
|
+
const finishElementDrag = (pos) => {
|
7270
|
+
const newPos = el.offsetLeft - pos;
|
7244
7271
|
if (newPos >= minX && newPos <= maxX) {
|
7245
7272
|
const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);
|
7246
7273
|
startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
|
@@ -7271,6 +7298,8 @@ const CpslSlideButton = class {
|
|
7271
7298
|
}
|
7272
7299
|
document.onmouseup = null;
|
7273
7300
|
document.onmousemove = null;
|
7301
|
+
document.ontouchend = null;
|
7302
|
+
document.ontouchmove = null;
|
7274
7303
|
};
|
7275
7304
|
const startIconEl = this.startIconEl;
|
7276
7305
|
const endIconEl = this.endIconEl;
|
@@ -7283,7 +7312,7 @@ const CpslSlideButton = class {
|
|
7283
7312
|
const minX = 1;
|
7284
7313
|
const maxX = containerWidth - sliderHeight - 1;
|
7285
7314
|
let pos1 = 0, pos3 = 0;
|
7286
|
-
el.
|
7315
|
+
el.onpointerdown = pointerDown;
|
7287
7316
|
}
|
7288
7317
|
get sliderContainerEl() {
|
7289
7318
|
return this.el.shadowRoot.getElementById('slider-container');
|
@@ -7304,7 +7333,7 @@ const CpslSlideButton = class {
|
|
7304
7333
|
return this.el.shadowRoot.getElementById('end-icon');
|
7305
7334
|
}
|
7306
7335
|
render() {
|
7307
|
-
return (index.h(index.Host, { key: '
|
7336
|
+
return (index.h(index.Host, { key: 'd0e3aa388d3f4b51d7a8f90b47cd83a8ec0b40c1' }, index.h("div", { key: '070c1ec3286f5230af3a543e157d1a77cd2ee1fb', id: "slider-container", class: "slider-container" }, index.h("div", { key: '354a4b5aade02a3dd0480dcf25f76cee5637cc63', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '3a900eca29784820ffebe2be92b8483bbb1ce8a3', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '154f5873bb5b5c28085225cdbec1c0ca2e7c1e41', id: "slider", class: "slider" }, index.h("cpsl-icon", { key: '0a5a76abbf82f57eae7746a90d801feaa171a376', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '7faf38cbe2d94be9b3aca8c2c8da476734da9982', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: 'ddd2e8cab1fb84245284b53e4c3a177f9cd99323', id: "start-text", class: "start-text" }, this.startText), index.h("span", { key: '4582adddc39bf15989dd1256d87573ba757ca468', id: "end-text", class: "end-text" }, this.endText))));
|
7308
7337
|
}
|
7309
7338
|
get el() { return index.getElement(this); }
|
7310
7339
|
};
|