@usecapsule/core-components 1.0.11 → 1.0.12
Sign up to get free protection for your applications and to get access to all the features.
- 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/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/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
|
};
|