@usecapsule/core-components 1.0.12 → 1.0.13

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  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);
+  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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css

@@ -119,6 +119,10 @@
   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;
@@ -126,7 +130,7 @@
   position: absolute;
   text-align: center;
   opacity: 0%;
-  width: calc(100% - var(--slider-container-height) - 8px - 16px);
+  width: calc(100% - var(--slider-container-height) - 8px);
   left: 16px;
 }
 
@@ -163,4 +167,7 @@
 }
 .slider cpsl-icon {
   --icon-color: var(--slider-color);
+}
+.slider.disabled {
+  visibility: hidden;
 }

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslSlideButton {
     constructor() {
+        this.disabled = undefined;
         this.endIcon = undefined;
         this.endText = undefined;
         this.startIcon = undefined;
@@ -113,7 +114,7 @@ export class CpslSlideButton {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'd0e3aa388d3f4b51d7a8f90b47cd83a8ec0b40c1' }, h("div", { key: '070c1ec3286f5230af3a543e157d1a77cd2ee1fb', id: "slider-container", class: "slider-container" }, h("div", { key: '354a4b5aade02a3dd0480dcf25f76cee5637cc63', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '3a900eca29784820ffebe2be92b8483bbb1ce8a3', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '154f5873bb5b5c28085225cdbec1c0ca2e7c1e41', id: "slider", class: "slider" }, h("cpsl-icon", { key: '0a5a76abbf82f57eae7746a90d801feaa171a376', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '7faf38cbe2d94be9b3aca8c2c8da476734da9982', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ddd2e8cab1fb84245284b53e4c3a177f9cd99323', id: "start-text", class: "start-text" }, this.startText), h("span", { key: '4582adddc39bf15989dd1256d87573ba757ca468', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: '393258461f583632bd2f0c98787790cd0ce1f8a7' }, h("div", { key: '655dfa975fc02ba1d01f09589c34b15bb50c4659', id: "slider-container", class: "slider-container" }, h("div", { key: '7971c73bd81c8ac3e7e8e561754f7df2a2d855c4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '9e6f364011c1f75ab35de04019c43d5d3044b1e4', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '31eb370862bc888bf866f5b972740a655234bccc', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'eb54452bb2fdbc202d1fe5c8fb77235b66255372', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '121f213932a0a9d178fa680406fc20c2aa8d6a69', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '81a41d0ef2a1340fe8b9b29c7304352330cc7594', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'b584c9d5fed842cc5a9b2897601d7184a3addaf8', id: "end-text", class: "end-text" }, this.endText))));
     }
     static get is() { return "cpsl-slide-button"; }
     static get encapsulation() { return "shadow"; }
@@ -129,6 +130,23 @@ export class CpslSlideButton {
     }
     static get properties() {
         return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component is disabled. If true, the component will display the `startText`."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
             "endIcon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-slide-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,eAAe;;;;;;;IA4B1B,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChE,CAAC;IAEO,WAAW,CAAC,EAAe;QACjC,MAAM,WAAW,GAAG,CAAC,CAAe,EAAE,EAAE;YACtC,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YAEjB,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;gBACtB,KAAK,OAAO;oBACV,EAAE,CAAC,WAAW,GAAG,aAAa,CAAC;oBAC/B,MAAM;gBACR;oBACE,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YACjB,QAAQ,CAAC,SAAS,GAAG,gBAAgB,CAAC;YAEtC,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAEzC,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YAC7B,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC;YAEvC,QAAQ,CAAC,WAAW,GAAG,gBAAgB,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YACzC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YACxB,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YAEjB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;YACzC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YAEzC,IAAI,GAAG,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YACpC,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC;YAE7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAE,EAAE;YACxC,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,GAAG,GAAG,CAAC;YACnC,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACrC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBAE1F,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC;gBAChE,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAEpD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC;gBAChE,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAEpD,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,aAAa,GAAG,GAAG,GAAG,CAAC;gBAE1D,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,MAAM,IAAI,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;YAC5B,IAAI,EAAE,CAAC,UAAU,GAAG,YAAY,IAAI,cAAc,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC;gBACtE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;gBAC5B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACjC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBACjC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACjC,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;gBAC5B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACnC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC/B,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACnC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC/B,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;YACvC,CAAC;YAED,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;YAC1B,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;YAC5B,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3B,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;QAC9B,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAE7C,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACjD,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,CAAC;QAErD,MAAM,YAAY,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAGvD,MAAM,IAAI,GAAG,CAAC,CAAC;QAEf,MAAM,IAAI,GAAG,cAAc,GAAG,YAAY,GAAG,CAAC,CAAC;QAE/C,IAAI,IAAI,GAAG,CAAC,EACV,IAAI,GAAG,CAAC,CAAC;QAEX,EAAE,CAAC,aAAa,GAAG,WAAW,CAAC;IACjC,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,iCAAiC,CAAC,CAAC;IAC9E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,kBAAkB;gBACjD,4DAAK,EAAE,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,mCAAmC,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,EAAE,GAAI;gBACzI,4DAAK,EAAE,EAAC,iCAAiC,EAAC,KAAK,EAAE,EAAE,iCAAiC,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,EAAE,GAAI;gBACrI,4DAAK,EAAE,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;oBAC7B,kEAAW,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI;oBAChG,kEAAW,EAAE,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAI,CACtF;gBACN,6DAAM,EAAE,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACrC,IAAI,CAAC,SAAS,CACV;gBACP,6DAAM,EAAE,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,IACjC,IAAI,CAAC,OAAO,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const pointerDown = (e: PointerEvent) => {\n      pos3 = e.clientX;\n\n      switch (e.pointerType) {\n        case 'mouse':\n          el.onmousedown = dragMouseDown;\n          break;\n        default:\n          el.ontouchstart = dragTouchDown;\n      }\n    };\n\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementMouseDrag;\n    };\n\n    const dragTouchDown = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // get the mouse cursor position at startup:\n      pos3 = touchLocation.clientX;\n      document.ontouchend = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.ontouchmove = elementTouchDrag;\n    };\n\n    const elementMouseDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const elementTouchDrag = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // calculate the new cursor position:\n      pos1 = pos3 - touchLocation.clientX;\n      pos3 = touchLocation.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const finishElementDrag = (pos: number) => {\n      const newPos = el.offsetLeft - pos;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n      document.ontouchend = null;\n      document.ontouchmove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n\n    el.onpointerdown = pointerDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class=\"slider\">\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class=\"start-text\">\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-slide-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * Whether or not the component is disabled. If true, the component will display the `startText`.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const pointerDown = (e: PointerEvent) => {\n      pos3 = e.clientX;\n\n      switch (e.pointerType) {\n        case 'mouse':\n          el.onmousedown = dragMouseDown;\n          break;\n        default:\n          el.ontouchstart = dragTouchDown;\n      }\n    };\n\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementMouseDrag;\n    };\n\n    const dragTouchDown = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // get the mouse cursor position at startup:\n      pos3 = touchLocation.clientX;\n      document.ontouchend = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.ontouchmove = elementTouchDrag;\n    };\n\n    const elementMouseDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const elementTouchDrag = (e: TouchEvent) => {\n      e.preventDefault();\n      const touchLocation = e.targetTouches[0];\n      // calculate the new cursor position:\n      pos1 = pos3 - touchLocation.clientX;\n      pos3 = touchLocation.clientX;\n      // set the element's new position:\n      finishElementDrag(pos1);\n    };\n\n    const finishElementDrag = (pos: number) => {\n      const newPos = el.offsetLeft - pos;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n      document.ontouchend = null;\n      document.ontouchmove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n\n    el.onpointerdown = pointerDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class={{ slider: true, disabled: this.disabled }}>\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class={{ 'start-text': true, 'disabled': this.disabled }}>\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm/capsule.js

@@ -16,7 +16,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[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);
+  return bootstrapLazy([["cpsl-col",[[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",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_17",[[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);
 });
 
 //# sourceMappingURL=capsule.js.map

package/dist/esm/cpsl-alert_17.entry.js

@@ -7210,13 +7210,14 @@ const CpslQrCode = class {
 };
 CpslQrCode.style = CpslQrCodeStyle0;
 
-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 - 16px);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)}";
+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}";
 const CpslSlideButtonStyle0 = cpslSlideButtonCss;
 
 const CpslSlideButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.cpslComplete = createEvent(this, "cpslComplete", 7);
+        this.disabled = undefined;
         this.endIcon = undefined;
         this.endText = undefined;
         this.startIcon = undefined;
@@ -7329,7 +7330,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'd0e3aa388d3f4b51d7a8f90b47cd83a8ec0b40c1' }, h("div", { key: '070c1ec3286f5230af3a543e157d1a77cd2ee1fb', id: "slider-container", class: "slider-container" }, h("div", { key: '354a4b5aade02a3dd0480dcf25f76cee5637cc63', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '3a900eca29784820ffebe2be92b8483bbb1ce8a3', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '154f5873bb5b5c28085225cdbec1c0ca2e7c1e41', id: "slider", class: "slider" }, h("cpsl-icon", { key: '0a5a76abbf82f57eae7746a90d801feaa171a376', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '7faf38cbe2d94be9b3aca8c2c8da476734da9982', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ddd2e8cab1fb84245284b53e4c3a177f9cd99323', id: "start-text", class: "start-text" }, this.startText), h("span", { key: '4582adddc39bf15989dd1256d87573ba757ca468', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: '393258461f583632bd2f0c98787790cd0ce1f8a7' }, h("div", { key: '655dfa975fc02ba1d01f09589c34b15bb50c4659', id: "slider-container", class: "slider-container" }, h("div", { key: '7971c73bd81c8ac3e7e8e561754f7df2a2d855c4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '9e6f364011c1f75ab35de04019c43d5d3044b1e4', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '31eb370862bc888bf866f5b972740a655234bccc', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'eb54452bb2fdbc202d1fe5c8fb77235b66255372', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '121f213932a0a9d178fa680406fc20c2aa8d6a69', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '81a41d0ef2a1340fe8b9b29c7304352330cc7594', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'b584c9d5fed842cc5a9b2897601d7184a3addaf8', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return getElement(this); }
 };