@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.
@@ -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: '5deda08b40a3e034e1c1b412eb7ab0c7780b4f53', class: { 'modal-container': true, 'no-footer': this.noFooter } }, index.h("div", { key: '6f5340b60ded651410a3eec83ecca3ee0e24f643', class: { 'modal-inner-container': true, 'no-footer': this.noFooter } }, index.h("div", { key: '632ecd039ac402971cd3f15efb30fc527402f0cd', id: "modal-header", class: "no-overflow" }, index.h("slot", { key: 'af0d35f477ff94d7f65b3bd81b845819ba8c8439', name: "header" })), index.h("div", { key: '6116bba4b65cebb91fd283106a58915216e5d828', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, index.h("slot", { key: 'd7cd88d70a15e2a02bc590422913c481f0b61a2e', name: "footerExpandedHeader" })), index.h("div", { key: '72e1ede4c4754526c83f2723d322717d8888bf6d', id: "modal-body", class: "no-overflow" }, index.h("slot", { key: '66c63bb06b6b4ccce422855ecb483ab42ca6e27e', name: "body" }))), index.h("div", { key: 'fec82340b95072a6d3167fda064082005f760661', id: "modal-footer", class: "no-overflow" }, index.h("slot", { key: 'bcd91a6cf6ef753e4b0fbb163e93984a9afa15ca', name: "footer" })), index.h("div", { key: 'a39a058058adedb6494c307729823467d6c45df7', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, index.h("slot", { key: 'd5f0d390de50e0706358bd033655047c742298e2', name: "footerExpandedFooter" })))));
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 = elementDrag;
7247
+ document.onmousemove = elementMouseDrag;
7238
7248
  };
7239
- const elementDrag = (e) => {
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
- const newPos = el.offsetLeft - pos1;
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.onmousedown = dragMouseDown;
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: '3025e2306923953edd5857009828af027cd0d561' }, index.h("div", { key: '5557072bcccfc099af005fed9af45adf335a98dd', id: "slider-container", class: "slider-container" }, index.h("div", { key: '39e1b5d2123eda0a004c0f250c8afa66b53768f4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: '80486f55315077693d481e193eba1bf37acd5afd', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), index.h("div", { key: 'c13596a1a117aa3e5674d5a91c0ec38ff9ac7a49', id: "slider", class: "slider" }, index.h("cpsl-icon", { key: 'd2d78f42e65efd180c9dd106738341cf0aee6f27', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), index.h("cpsl-icon", { key: '63f9ce569084f2541c69028aedc949b3ecccac0c', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), index.h("span", { key: '9bead9870b949f91734c4199d9c96f7b50a10128', id: "start-text", class: "start-text" }, this.startText), index.h("span", { key: '8dfa1e9e0866a74f72d27b2541a4ac9d56038d34', id: "end-text", class: "end-text" }, this.endText))));
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
  };