@usecapsule/core-components 1.0.11 → 1.0.13
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/capsule.esm.js.map +1 -1
- package/dist/capsule/{p-bbbfec72.entry.js → p-0e2fbb7f.entry.js} +3 -3
- package/dist/capsule/p-0e2fbb7f.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_17.cjs.entry.js +39 -9
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +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.css +8 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +52 -5
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_17.entry.js +39 -9
- package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cpsl-slide-button/cpsl-slide-button.d.ts +1 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +2 -2
- package/dist/capsule/p-bbbfec72.entry.js.map +0 -1
package/dist/cjs/capsule.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ const patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_17.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-modal",{"footerExpanded":[4,"footer-expanded"],"transitionDuration":[2,"transition-duration"],"noFooter":[32]},null,{"footerExpanded":["toggleHeight"]}],[1,"cpsl-overlay",{"open":[4],"transitionDuration":[2,"transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text"],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -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 {
|
|
@@ -7214,13 +7214,14 @@ const CpslQrCode = class {
|
|
|
7214
7214
|
};
|
|
7215
7215
|
CpslQrCode.style = CpslQrCodeStyle0;
|
|
7216
7216
|
|
|
7217
|
-
const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-foreground-senary);--slider-container-end-background-color:var(--cpsl-color-foreground-primary);--slider-container-border-color:var(--cpsl-color-foreground-quinary);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-foreground-quinary);--slider-background-color:var(--cpsl-color-foreground-primary);--slider-color:var(--cpsl-color-text-inverted);--start-text-color:var(--cpsl-color-text-secondary);--end-text-color:var(--cpsl-color-text-inverted);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-color:var(--slider-container-border-color);border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px
|
|
7217
|
+
const cpslSlideButtonCss = ":host{--slider-container-font-size:14px;--slider-container-height:44px;--slider-container-border-width:1px;--slider-container-box-shadow:0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;--slider-container-start-background-color:var(--cpsl-color-foreground-senary);--slider-container-end-background-color:var(--cpsl-color-foreground-primary);--slider-container-border-color:var(--cpsl-color-foreground-quinary);--slider-border-width:1px;--slider-box-shadow:3px 0px 4px 0px var(--cpsl-color-alpha-black-16);--slider-border-color:var(--cpsl-color-foreground-quinary);--slider-background-color:var(--cpsl-color-foreground-primary);--slider-color:var(--cpsl-color-text-inverted);--start-text-color:var(--cpsl-color-text-secondary);--end-text-color:var(--cpsl-color-text-inverted);font-family:var(--cpsl-font-family, inherit);display:block}.slider-container{overflow:hidden;position:relative;box-sizing:border-box;display:flex;align-items:center;font-size:var(--slider-container-font-size);font-weight:500;height:var(--slider-container-height);border-width:var(--slider-container-border-width);border-style:solid;border-color:var(--slider-container-border-color);border-radius:calc(var(--slider-container-height) / 2);box-shadow:var(--slider-container-box-shadow)}.slider-container-background{position:absolute;top:0;bottom:0;left:0;right:0}.start-slider-container-background{background-color:var(--slider-container-start-background-color);opacity:100%}.end-slider-container-background{background-color:var(--slider-container-end-background-color);opacity:0%}.start-text{user-select:none;color:var(--start-text-color);position:absolute;text-align:center;opacity:100%;width:calc(100% - var(--slider-container-height) - 8px - 16px);left:calc(var(--slider-container-height) - 4px + 8px)}.start-text.disabled{left:0;width:100%}.end-text{user-select:none;color:var(--end-text-color);position:absolute;text-align:center;opacity:0%;width:calc(100% - var(--slider-container-height) - 8px);left:16px}.icon{position:absolute}.start-icon{opacity:100%}.end-icon{opacity:0%}.slider{left:1px;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:absolute;z-index:10;height:calc(var(--slider-container-height) - 4px);width:calc(var(--slider-container-height) - 4px);color:var(--slider-color);background-color:var(--slider-background-color);border-width:var(--slider-border-width);border-style:solid;border-color:var(--slider-border-color);border-radius:100%;box-shadow:var(--slider-box-shadow)}.slider cpsl-icon{--icon-color:var(--slider-color)}.slider.disabled{visibility:hidden}";
|
|
7218
7218
|
const CpslSlideButtonStyle0 = cpslSlideButtonCss;
|
|
7219
7219
|
|
|
7220
7220
|
const CpslSlideButton = class {
|
|
7221
7221
|
constructor(hostRef) {
|
|
7222
7222
|
index.registerInstance(this, hostRef);
|
|
7223
7223
|
this.cpslComplete = index.createEvent(this, "cpslComplete", 7);
|
|
7224
|
+
this.disabled = undefined;
|
|
7224
7225
|
this.endIcon = undefined;
|
|
7225
7226
|
this.endText = undefined;
|
|
7226
7227
|
this.startIcon = undefined;
|
|
@@ -7230,17 +7231,44 @@ const CpslSlideButton = class {
|
|
|
7230
7231
|
this.dragElement(this.el.shadowRoot.getElementById('slider'));
|
|
7231
7232
|
}
|
|
7232
7233
|
dragElement(el) {
|
|
7234
|
+
const pointerDown = (e) => {
|
|
7235
|
+
pos3 = e.clientX;
|
|
7236
|
+
switch (e.pointerType) {
|
|
7237
|
+
case 'mouse':
|
|
7238
|
+
el.onmousedown = dragMouseDown;
|
|
7239
|
+
break;
|
|
7240
|
+
default:
|
|
7241
|
+
el.ontouchstart = dragTouchDown;
|
|
7242
|
+
}
|
|
7243
|
+
};
|
|
7233
7244
|
const dragMouseDown = (e) => {
|
|
7234
7245
|
e.preventDefault();
|
|
7235
7246
|
pos3 = e.clientX;
|
|
7236
7247
|
document.onmouseup = closeDragElement;
|
|
7237
|
-
document.onmousemove =
|
|
7248
|
+
document.onmousemove = elementMouseDrag;
|
|
7238
7249
|
};
|
|
7239
|
-
const
|
|
7250
|
+
const dragTouchDown = (e) => {
|
|
7251
|
+
e.preventDefault();
|
|
7252
|
+
const touchLocation = e.targetTouches[0];
|
|
7253
|
+
pos3 = touchLocation.clientX;
|
|
7254
|
+
document.ontouchend = closeDragElement;
|
|
7255
|
+
document.ontouchmove = elementTouchDrag;
|
|
7256
|
+
};
|
|
7257
|
+
const elementMouseDrag = (e) => {
|
|
7240
7258
|
e.preventDefault();
|
|
7241
7259
|
pos1 = pos3 - e.clientX;
|
|
7242
7260
|
pos3 = e.clientX;
|
|
7243
|
-
|
|
7261
|
+
finishElementDrag(pos1);
|
|
7262
|
+
};
|
|
7263
|
+
const elementTouchDrag = (e) => {
|
|
7264
|
+
e.preventDefault();
|
|
7265
|
+
const touchLocation = e.targetTouches[0];
|
|
7266
|
+
pos1 = pos3 - touchLocation.clientX;
|
|
7267
|
+
pos3 = touchLocation.clientX;
|
|
7268
|
+
finishElementDrag(pos1);
|
|
7269
|
+
};
|
|
7270
|
+
const finishElementDrag = (pos) => {
|
|
7271
|
+
const newPos = el.offsetLeft - pos;
|
|
7244
7272
|
if (newPos >= minX && newPos <= maxX) {
|
|
7245
7273
|
const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);
|
|
7246
7274
|
startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
|
|
@@ -7271,6 +7299,8 @@ const CpslSlideButton = class {
|
|
|
7271
7299
|
}
|
|
7272
7300
|
document.onmouseup = null;
|
|
7273
7301
|
document.onmousemove = null;
|
|
7302
|
+
document.ontouchend = null;
|
|
7303
|
+
document.ontouchmove = null;
|
|
7274
7304
|
};
|
|
7275
7305
|
const startIconEl = this.startIconEl;
|
|
7276
7306
|
const endIconEl = this.endIconEl;
|
|
@@ -7283,7 +7313,7 @@ const CpslSlideButton = class {
|
|
|
7283
7313
|
const minX = 1;
|
|
7284
7314
|
const maxX = containerWidth - sliderHeight - 1;
|
|
7285
7315
|
let pos1 = 0, pos3 = 0;
|
|
7286
|
-
el.
|
|
7316
|
+
el.onpointerdown = pointerDown;
|
|
7287
7317
|
}
|
|
7288
7318
|
get sliderContainerEl() {
|
|
7289
7319
|
return this.el.shadowRoot.getElementById('slider-container');
|
|
@@ -7304,7 +7334,7 @@ const CpslSlideButton = class {
|
|
|
7304
7334
|
return this.el.shadowRoot.getElementById('end-icon');
|
|
7305
7335
|
}
|
|
7306
7336
|
render() {
|
|
7307
|
-
return (index.h(index.Host, { key: '
|
|
7337
|
+
return (index.h(index.Host, { key: '393258461f583632bd2f0c98787790cd0ce1f8a7' }, index.h("div", { key: '655dfa975fc02ba1d01f09589c34b15bb50c4659', id: "slider-container", class: "slider-container" }, index.h("div", { key: '7971c73bd81c8ac3e7e8e561754f7df2a2d855c4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '9e6f364011c1f75ab35de04019c43d5d3044b1e4', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '31eb370862bc888bf866f5b972740a655234bccc', id: "slider", class: { slider: true, disabled: this.disabled } }, index.h("cpsl-icon", { key: 'eb54452bb2fdbc202d1fe5c8fb77235b66255372', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '121f213932a0a9d178fa680406fc20c2aa8d6a69', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '81a41d0ef2a1340fe8b9b29c7304352330cc7594', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), index.h("span", { key: 'b584c9d5fed842cc5a9b2897601d7184a3addaf8', id: "end-text", class: "end-text" }, this.endText))));
|
|
7308
7338
|
}
|
|
7309
7339
|
get el() { return index.getElement(this); }
|
|
7310
7340
|
};
|