@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.
Files changed (16) hide show
  1. package/dist/capsule/capsule.esm.js +1 -1
  2. package/dist/capsule/{p-bbbfec72.entry.js → p-47f9b803.entry.js} +3 -3
  3. package/dist/capsule/p-47f9b803.entry.js.map +1 -0
  4. package/dist/cjs/cpsl-alert_17.cjs.entry.js +37 -8
  5. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
  7. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
  8. package/dist/collection/components/cpsl-modal/cpsl-modal.css +10 -0
  9. package/dist/collection/components/cpsl-modal/cpsl-modal.js +1 -1
  10. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  11. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +34 -5
  12. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
  13. package/dist/esm/cpsl-alert_17.entry.js +37 -8
  14. package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
  15. package/package.json +2 -2
  16. package/dist/capsule/p-bbbfec72.entry.js.map +0 -1
package/dist/collection/components/cpsl-code-input/cpsl-code-input.js CHANGED
@@ -89,7 +89,7 @@ export class CpslCodeInput {
89
89
  var _a;
90
90
  return (h(Host, { key: '1c877c2c935da7b35b291ef549d1df66aef4a999' }, h("div", { key: 'cf8bba26f01b2036ec7414f2f22113f8e270e810', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
91
91
  var _a;
92
- return (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] }));
92
+ return (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' }));
93
93
  })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
94
94
  }
95
95
  static get is() { return "cpsl-code-input"; }
package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /**\n * Value of the code.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) code: string;\n\n /**\n * Error text to show below the input. If this is provided the input will enter an error state.\n */\n @Prop() errorText?: string;\n\n /**\n * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n */\n @Prop() helperText?: string;\n\n /**\n * Length of the code.\n */\n @Prop() length: number;\n\n /**\n * Type of characters to accept in the code.\n * Defaults to number.\n */\n @Prop() type?: 'number' | 'string' = 'number';\n\n /**\n * The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n if (ev.inputType == 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n const newCode = `${this.code ?? ''}${ev.data}`;\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n // TODO: figure out why pasting a string populates the first input\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[this.length - 1].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n id={`code-input-${i}`}\n maxLength={1}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n />\n ))}\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface';\n\n@Component({\n tag: 'cpsl-code-input',\n styleUrl: 'cpsl-code-input.scss',\n shadow: true,\n})\nexport class CpslCodeInput {\n @Element() el!: HTMLCpslCodeInputElement;\n\n /**\n * Value of the code.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) code: string;\n\n /**\n * Error text to show below the input. If this is provided the input will enter an error state.\n */\n @Prop() errorText?: string;\n\n /**\n * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n */\n @Prop() helperText?: string;\n\n /**\n * Length of the code.\n */\n @Prop() length: number;\n\n /**\n * Type of characters to accept in the code.\n * Defaults to number.\n */\n @Prop() type?: 'number' | 'string' = 'number';\n\n /**\n * The `cpslInput` event is fired each time the user modifies the input's value.\n */\n @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n private handleInput = (ind: number, ev: InputEvent) => {\n const inputElements = this.inputs;\n if (ev.inputType == 'insertText') {\n if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n inputElements[ind].value = '';\n return;\n }\n inputElements[Math.min(this.length - 1, ind + 1)].focus();\n\n const newCode = `${this.code ?? ''}${ev.data}`;\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n }\n };\n\n private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n const inputElements = this.inputs;\n\n switch (ev.key) {\n case 'Backspace': {\n let newCode;\n if (!inputElements[ind].value) {\n inputElements[Math.max(0, ind - 1)].value = '';\n inputElements[Math.max(0, ind - 1)].focus();\n newCode = this.code.substring(0, ind - 1);\n } else {\n newCode = this.code.substring(0, ind);\n }\n this.cpslInput.emit({ value: newCode });\n this.code = newCode;\n break;\n }\n case 'ArrowLeft': {\n setTimeout(() => {\n this.inputs[ind].setSelectionRange(1, 1);\n }, 0);\n break;\n }\n default: {\n break;\n }\n }\n };\n\n private handleFocus = (ind: number) => {\n const inputElements = this.inputs;\n\n for (const input of inputElements) {\n if (!input.value) {\n input.focus();\n break;\n } else if (input.id === `code-input-${this.length - 1}`) {\n input.focus();\n break;\n }\n }\n\n setTimeout(() => {\n inputElements[ind].setSelectionRange(1, 1);\n }, 0);\n };\n\n // TODO: figure out why pasting a string populates the first input\n private handlePaste = (e: ClipboardEvent) => {\n const inputElements = this.inputs;\n const pastedCode = e.clipboardData.getData('text');\n\n if (this.type === 'number' && isNaN(parseInt(pastedCode))) {\n // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.\n setTimeout(() => {\n inputElements[0].value = '';\n }, 0);\n return;\n }\n\n this.cpslInput.emit({\n value: pastedCode,\n });\n inputElements.forEach((input, index) => {\n input.value = pastedCode.charAt(index);\n });\n inputElements[this.length - 1].focus();\n };\n\n private get inputs() {\n return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n }\n\n render() {\n return (\n <Host>\n <div class=\"code-container\">\n {new Array(this.length).fill(0).map((_, i) => (\n <input\n class={{ 'code-input': true, 'error': Boolean(this.errorText) }}\n id={`code-input-${i}`}\n maxLength={1}\n onKeyDown={ev => this.handleKeyDown(i, ev)}\n onInput={ev => this.handleInput(i, ev)}\n onFocus={() => this.handleFocus(i)}\n onPaste={this.handlePaste}\n min={0}\n max={9}\n value={this.code?.[i]}\n inputMode={this.type === 'number' ? 'numeric' : 'text'}\n />\n ))}\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <cpsl-icon icon={Boolean(this.errorText) ? 'alertCircle' : 'infoCircle'} />\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/cpsl-modal/cpsl-modal.css CHANGED
@@ -87,6 +87,16 @@
87
87
  border-radius: var(--container-border-radius);
88
88
  box-shadow: var(--container-box-shadow);
89
89
  background-color: var(--container-background-color);
90
+ max-width: 95vw;
91
+ max-height: 95vh;
92
+ max-height: 95dvh;
93
+ overflow: auto;
94
+ -ms-overflow-style: none; /* IE and Edge */
95
+ scrollbar-width: none; /* Firefox */
96
+ /* Hide scrollbar for Chrome, Safari and Opera */
97
+ }
98
+ .modal-container ::-webkit-scrollbar {
99
+ display: none;
90
100
  }
91
101
 
92
102
  .modal-inner-container {
package/dist/collection/components/cpsl-modal/cpsl-modal.js CHANGED
@@ -37,7 +37,7 @@ export class CpslModal {
37
37
  return this.el.shadowRoot.getElementById('modal-header-expanded');
38
38
  }
39
39
  render() {
40
- return (h(Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, h("div", { key: '5deda08b40a3e034e1c1b412eb7ab0c7780b4f53', class: { 'modal-container': true, 'no-footer': this.noFooter } }, h("div", { key: '6f5340b60ded651410a3eec83ecca3ee0e24f643', class: { 'modal-inner-container': true, 'no-footer': this.noFooter } }, h("div", { key: '632ecd039ac402971cd3f15efb30fc527402f0cd', id: "modal-header", class: "no-overflow" }, h("slot", { key: 'af0d35f477ff94d7f65b3bd81b845819ba8c8439', name: "header" })), h("div", { key: '6116bba4b65cebb91fd283106a58915216e5d828', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd7cd88d70a15e2a02bc590422913c481f0b61a2e', name: "footerExpandedHeader" })), h("div", { key: '72e1ede4c4754526c83f2723d322717d8888bf6d', id: "modal-body", class: "no-overflow" }, h("slot", { key: '66c63bb06b6b4ccce422855ecb483ab42ca6e27e', name: "body" }))), h("div", { key: 'fec82340b95072a6d3167fda064082005f760661', id: "modal-footer", class: "no-overflow" }, h("slot", { key: 'bcd91a6cf6ef753e4b0fbb163e93984a9afa15ca', name: "footer" })), h("div", { key: 'a39a058058adedb6494c307729823467d6c45df7', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd5f0d390de50e0706358bd033655047c742298e2', name: "footerExpandedFooter" })))));
40
+ return (h(Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, h("div", { key: '9dde8baf5b03f06d3a5a933071021a0e86e44f28', class: { 'modal-container': true, 'no-footer': this.noFooter }, part: "modal-container" }, h("div", { key: 'ef572da671e05a6bcec961fe7746991ab2b7fc03', class: { 'modal-inner-container': true, 'no-footer': this.noFooter }, part: "modal-inner-container" }, h("div", { key: '520cfa8d91bbaa1c8afcfcf0a783ff2de5a64ee7', id: "modal-header", class: "no-overflow" }, h("slot", { key: '3b1b8146883e4a00fbf34855a6911fd3f2328446', name: "header" })), h("div", { key: '02a42d926c1665fcc9cc7911f629873c56370de0', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: '0d531f4562595f479509dcffc832b7286f907f17', name: "footerExpandedHeader" })), h("div", { key: '400e6400b0a10978ad130f837ea28fabbd4a82f8', id: "modal-body", class: "no-overflow" }, h("slot", { key: '3ee02065b109655bea2d3c06c79eb29e870bde0b', name: "body" }))), h("div", { key: 'e755b09b53eed8d51aa165a491b4d97a7b0f76cd', id: "modal-footer", class: "no-overflow" }, h("slot", { key: 'bc2d815a46b9d57fccd96350b1ec63fb44d4406c', name: "footer" })), h("div", { key: '07e72b9a0eff535a0fe1056a5dbf6ff2dac5c065', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: '15d6a854ce7b99ead8b19d177b9e7f7b43074e30', name: "footerExpandedFooter" })))));
41
41
  }
42
42
  static get is() { return "cpsl-modal"; }
43
43
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-modal/cpsl-modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n tag: 'cpsl-modal',\n styleUrl: 'cpsl-modal.scss',\n shadow: true,\n})\nexport class CpslModal {\n private expandFooterTl;\n\n @Element() el!: HTMLCpslModalElement;\n\n @State() noFooter: boolean;\n\n /**\n * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n */\n @Prop() footerExpanded: boolean;\n\n /**\n * Duration in seconds of the footer expansion animation.\n * Default is .5.\n */\n @Prop() transitionDuration: number = 0.5;\n\n @Watch('footerExpanded')\n toggleHeight() {\n this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n }\n\n componentDidLoad() {\n if (!Boolean(this.el.querySelector('[slot=\"footer\"]'))) {\n this.noFooter = true;\n }\n\n this.expandFooterTl = gsap\n .timeline({ reversed: true, paused: true })\n .to(this.bodyEl, { height: '0px', duration: this.transitionDuration })\n .to(this.footerEl, { height: '0px', duration: this.transitionDuration }, '<')\n .to(this.footerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<')\n .to(this.headerEl, { height: '0px', duration: this.transitionDuration }, '<')\n .to(this.headerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<');\n }\n\n private get bodyEl() {\n return this.el.shadowRoot.getElementById('modal-body');\n }\n\n private get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\n }\n\n private get footerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-footer-expanded');\n }\n\n private get headerEl() {\n return this.el.shadowRoot.getElementById('modal-header');\n }\n\n private get headerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-header-expanded');\n }\n\n render() {\n return (\n <Host>\n <div class={{ 'modal-container': true, 'no-footer': this.noFooter }}>\n <div class={{ 'modal-inner-container': true, 'no-footer': this.noFooter }}>\n <div id=\"modal-header\" class=\"no-overflow\">\n <slot name=\"header\"></slot>\n </div>\n <div id=\"modal-header-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n <slot name=\"footerExpandedHeader\"></slot>\n </div>\n <div id=\"modal-body\" class=\"no-overflow\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n <div id=\"modal-footer\" class=\"no-overflow\">\n <slot name=\"footer\"></slot>\n </div>\n <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n <slot name=\"footerExpandedFooter\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n tag: 'cpsl-modal',\n styleUrl: 'cpsl-modal.scss',\n shadow: true,\n})\nexport class CpslModal {\n private expandFooterTl;\n\n @Element() el!: HTMLCpslModalElement;\n\n @State() noFooter: boolean;\n\n /**\n * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.\n */\n @Prop() footerExpanded: boolean;\n\n /**\n * Duration in seconds of the footer expansion animation.\n * Default is .5.\n */\n @Prop() transitionDuration: number = 0.5;\n\n @Watch('footerExpanded')\n toggleHeight() {\n this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();\n }\n\n componentDidLoad() {\n if (!Boolean(this.el.querySelector('[slot=\"footer\"]'))) {\n this.noFooter = true;\n }\n\n this.expandFooterTl = gsap\n .timeline({ reversed: true, paused: true })\n .to(this.bodyEl, { height: '0px', duration: this.transitionDuration })\n .to(this.footerEl, { height: '0px', duration: this.transitionDuration }, '<')\n .to(this.footerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<')\n .to(this.headerEl, { height: '0px', duration: this.transitionDuration }, '<')\n .to(this.headerExpandedEl, { height: 'auto', duration: this.transitionDuration }, '<');\n }\n\n private get bodyEl() {\n return this.el.shadowRoot.getElementById('modal-body');\n }\n\n private get footerEl() {\n return this.el.shadowRoot.getElementById('modal-footer');\n }\n\n private get footerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-footer-expanded');\n }\n\n private get headerEl() {\n return this.el.shadowRoot.getElementById('modal-header');\n }\n\n private get headerExpandedEl() {\n return this.el.shadowRoot.getElementById('modal-header-expanded');\n }\n\n render() {\n return (\n <Host>\n <div class={{ 'modal-container': true, 'no-footer': this.noFooter }} part=\"modal-container\">\n <div class={{ 'modal-inner-container': true, 'no-footer': this.noFooter }} part=\"modal-inner-container\">\n <div id=\"modal-header\" class=\"no-overflow\">\n <slot name=\"header\"></slot>\n </div>\n <div id=\"modal-header-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n <slot name=\"footerExpandedHeader\"></slot>\n </div>\n <div id=\"modal-body\" class=\"no-overflow\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n <div id=\"modal-footer\" class=\"no-overflow\">\n <slot name=\"footer\"></slot>\n </div>\n <div id=\"modal-footer-expanded\" class={{ 'expanded': true, 'no-overflow': true }}>\n <slot name=\"footerExpandedFooter\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js CHANGED
@@ -10,17 +10,44 @@ export class CpslSlideButton {
10
10
  this.dragElement(this.el.shadowRoot.getElementById('slider'));
11
11
  }
12
12
  dragElement(el) {
13
+ const pointerDown = (e) => {
14
+ pos3 = e.clientX;
15
+ switch (e.pointerType) {
16
+ case 'mouse':
17
+ el.onmousedown = dragMouseDown;
18
+ break;
19
+ default:
20
+ el.ontouchstart = dragTouchDown;
21
+ }
22
+ };
13
23
  const dragMouseDown = (e) => {
14
24
  e.preventDefault();
15
25
  pos3 = e.clientX;
16
26
  document.onmouseup = closeDragElement;
17
- document.onmousemove = elementDrag;
27
+ document.onmousemove = elementMouseDrag;
28
+ };
29
+ const dragTouchDown = (e) => {
30
+ e.preventDefault();
31
+ const touchLocation = e.targetTouches[0];
32
+ pos3 = touchLocation.clientX;
33
+ document.ontouchend = closeDragElement;
34
+ document.ontouchmove = elementTouchDrag;
18
35
  };
19
- const elementDrag = (e) => {
36
+ const elementMouseDrag = (e) => {
20
37
  e.preventDefault();
21
38
  pos1 = pos3 - e.clientX;
22
39
  pos3 = e.clientX;
23
- const newPos = el.offsetLeft - pos1;
40
+ finishElementDrag(pos1);
41
+ };
42
+ const elementTouchDrag = (e) => {
43
+ e.preventDefault();
44
+ const touchLocation = e.targetTouches[0];
45
+ pos1 = pos3 - touchLocation.clientX;
46
+ pos3 = touchLocation.clientX;
47
+ finishElementDrag(pos1);
48
+ };
49
+ const finishElementDrag = (pos) => {
50
+ const newPos = el.offsetLeft - pos;
24
51
  if (newPos >= minX && newPos <= maxX) {
25
52
  const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);
26
53
  startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
@@ -51,6 +78,8 @@ export class CpslSlideButton {
51
78
  }
52
79
  document.onmouseup = null;
53
80
  document.onmousemove = null;
81
+ document.ontouchend = null;
82
+ document.ontouchmove = null;
54
83
  };
55
84
  const startIconEl = this.startIconEl;
56
85
  const endIconEl = this.endIconEl;
@@ -63,7 +92,7 @@ export class CpslSlideButton {
63
92
  const minX = 1;
64
93
  const maxX = containerWidth - sliderHeight - 1;
65
94
  let pos1 = 0, pos3 = 0;
66
- el.onmousedown = dragMouseDown;
95
+ el.onpointerdown = pointerDown;
67
96
  }
68
97
  get sliderContainerEl() {
69
98
  return this.el.shadowRoot.getElementById('slider-container');
@@ -84,7 +113,7 @@ export class CpslSlideButton {
84
113
  return this.el.shadowRoot.getElementById('end-icon');
85
114
  }
86
115
  render() {
87
- return (h(Host, { key: '3025e2306923953edd5857009828af027cd0d561' }, h("div", { key: '5557072bcccfc099af005fed9af45adf335a98dd', id: "slider-container", class: "slider-container" }, h("div", { key: '39e1b5d2123eda0a004c0f250c8afa66b53768f4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '80486f55315077693d481e193eba1bf37acd5afd', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'c13596a1a117aa3e5674d5a91c0ec38ff9ac7a49', id: "slider", class: "slider" }, h("cpsl-icon", { key: 'd2d78f42e65efd180c9dd106738341cf0aee6f27', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '63f9ce569084f2541c69028aedc949b3ecccac0c', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '9bead9870b949f91734c4199d9c96f7b50a10128', id: "start-text", class: "start-text" }, this.startText), h("span", { key: '8dfa1e9e0866a74f72d27b2541a4ac9d56038d34', id: "end-text", class: "end-text" }, this.endText))));
116
+ 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))));
88
117
  }
89
118
  static get is() { return "cpsl-slide-button"; }
90
119
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map CHANGED
@@ -1 +1 @@
1
- {"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 * 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 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 = elementDrag;\n };\n\n const elementDrag = (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\n const newPos = el.offsetLeft - pos1;\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 };\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 el.onmousedown = dragMouseDown;\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"]}
1
+ {"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 * 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"]}
package/dist/esm/cpsl-alert_17.entry.js CHANGED
@@ -832,7 +832,7 @@ const CpslCodeInput = class {
832
832
  var _a;
833
833
  return (h(Host, { key: '1c877c2c935da7b35b291ef549d1df66aef4a999' }, h("div", { key: 'cf8bba26f01b2036ec7414f2f22113f8e270e810', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
834
834
  var _a;
835
- return (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] }));
835
+ return (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' }));
836
836
  })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
837
837
  }
838
838
  get el() { return getElement(this); }
@@ -7026,7 +7026,7 @@ gsap.registerPlugin(CSSPlugin);
7026
7026
 
7027
7027
  var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap;
7028
7028
 
7029
- 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}";
7029
+ 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}";
7030
7030
  const CpslModalStyle0 = cpslModalCss;
7031
7031
 
7032
7032
  const CpslModal = class {
@@ -7067,7 +7067,7 @@ const CpslModal = class {
7067
7067
  return this.el.shadowRoot.getElementById('modal-header-expanded');
7068
7068
  }
7069
7069
  render() {
7070
- return (h(Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, h("div", { key: '5deda08b40a3e034e1c1b412eb7ab0c7780b4f53', class: { 'modal-container': true, 'no-footer': this.noFooter } }, h("div", { key: '6f5340b60ded651410a3eec83ecca3ee0e24f643', class: { 'modal-inner-container': true, 'no-footer': this.noFooter } }, h("div", { key: '632ecd039ac402971cd3f15efb30fc527402f0cd', id: "modal-header", class: "no-overflow" }, h("slot", { key: 'af0d35f477ff94d7f65b3bd81b845819ba8c8439', name: "header" })), h("div", { key: '6116bba4b65cebb91fd283106a58915216e5d828', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd7cd88d70a15e2a02bc590422913c481f0b61a2e', name: "footerExpandedHeader" })), h("div", { key: '72e1ede4c4754526c83f2723d322717d8888bf6d', id: "modal-body", class: "no-overflow" }, h("slot", { key: '66c63bb06b6b4ccce422855ecb483ab42ca6e27e', name: "body" }))), h("div", { key: 'fec82340b95072a6d3167fda064082005f760661', id: "modal-footer", class: "no-overflow" }, h("slot", { key: 'bcd91a6cf6ef753e4b0fbb163e93984a9afa15ca', name: "footer" })), h("div", { key: 'a39a058058adedb6494c307729823467d6c45df7', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: 'd5f0d390de50e0706358bd033655047c742298e2', name: "footerExpandedFooter" })))));
7070
+ return (h(Host, { key: 'aa5c26013878e80fe58a2826d4cae04db88dace3' }, h("div", { key: '9dde8baf5b03f06d3a5a933071021a0e86e44f28', class: { 'modal-container': true, 'no-footer': this.noFooter }, part: "modal-container" }, h("div", { key: 'ef572da671e05a6bcec961fe7746991ab2b7fc03', class: { 'modal-inner-container': true, 'no-footer': this.noFooter }, part: "modal-inner-container" }, h("div", { key: '520cfa8d91bbaa1c8afcfcf0a783ff2de5a64ee7', id: "modal-header", class: "no-overflow" }, h("slot", { key: '3b1b8146883e4a00fbf34855a6911fd3f2328446', name: "header" })), h("div", { key: '02a42d926c1665fcc9cc7911f629873c56370de0', id: "modal-header-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: '0d531f4562595f479509dcffc832b7286f907f17', name: "footerExpandedHeader" })), h("div", { key: '400e6400b0a10978ad130f837ea28fabbd4a82f8', id: "modal-body", class: "no-overflow" }, h("slot", { key: '3ee02065b109655bea2d3c06c79eb29e870bde0b', name: "body" }))), h("div", { key: 'e755b09b53eed8d51aa165a491b4d97a7b0f76cd', id: "modal-footer", class: "no-overflow" }, h("slot", { key: 'bc2d815a46b9d57fccd96350b1ec63fb44d4406c', name: "footer" })), h("div", { key: '07e72b9a0eff535a0fe1056a5dbf6ff2dac5c065', id: "modal-footer-expanded", class: { 'expanded': true, 'no-overflow': true } }, h("slot", { key: '15d6a854ce7b99ead8b19d177b9e7f7b43074e30', name: "footerExpandedFooter" })))));
7071
7071
  }
7072
7072
  get el() { return getElement(this); }
7073
7073
  static get watchers() { return {
@@ -7226,17 +7226,44 @@ const CpslSlideButton = class {
7226
7226
  this.dragElement(this.el.shadowRoot.getElementById('slider'));
7227
7227
  }
7228
7228
  dragElement(el) {
7229
+ const pointerDown = (e) => {
7230
+ pos3 = e.clientX;
7231
+ switch (e.pointerType) {
7232
+ case 'mouse':
7233
+ el.onmousedown = dragMouseDown;
7234
+ break;
7235
+ default:
7236
+ el.ontouchstart = dragTouchDown;
7237
+ }
7238
+ };
7229
7239
  const dragMouseDown = (e) => {
7230
7240
  e.preventDefault();
7231
7241
  pos3 = e.clientX;
7232
7242
  document.onmouseup = closeDragElement;
7233
- document.onmousemove = elementDrag;
7243
+ document.onmousemove = elementMouseDrag;
7234
7244
  };
7235
- const elementDrag = (e) => {
7245
+ const dragTouchDown = (e) => {
7246
+ e.preventDefault();
7247
+ const touchLocation = e.targetTouches[0];
7248
+ pos3 = touchLocation.clientX;
7249
+ document.ontouchend = closeDragElement;
7250
+ document.ontouchmove = elementTouchDrag;
7251
+ };
7252
+ const elementMouseDrag = (e) => {
7236
7253
  e.preventDefault();
7237
7254
  pos1 = pos3 - e.clientX;
7238
7255
  pos3 = e.clientX;
7239
- const newPos = el.offsetLeft - pos1;
7256
+ finishElementDrag(pos1);
7257
+ };
7258
+ const elementTouchDrag = (e) => {
7259
+ e.preventDefault();
7260
+ const touchLocation = e.targetTouches[0];
7261
+ pos1 = pos3 - touchLocation.clientX;
7262
+ pos3 = touchLocation.clientX;
7263
+ finishElementDrag(pos1);
7264
+ };
7265
+ const finishElementDrag = (pos) => {
7266
+ const newPos = el.offsetLeft - pos;
7240
7267
  if (newPos >= minX && newPos <= maxX) {
7241
7268
  const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);
7242
7269
  startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
@@ -7267,6 +7294,8 @@ const CpslSlideButton = class {
7267
7294
  }
7268
7295
  document.onmouseup = null;
7269
7296
  document.onmousemove = null;
7297
+ document.ontouchend = null;
7298
+ document.ontouchmove = null;
7270
7299
  };
7271
7300
  const startIconEl = this.startIconEl;
7272
7301
  const endIconEl = this.endIconEl;
@@ -7279,7 +7308,7 @@ const CpslSlideButton = class {
7279
7308
  const minX = 1;
7280
7309
  const maxX = containerWidth - sliderHeight - 1;
7281
7310
  let pos1 = 0, pos3 = 0;
7282
- el.onmousedown = dragMouseDown;
7311
+ el.onpointerdown = pointerDown;
7283
7312
  }
7284
7313
  get sliderContainerEl() {
7285
7314
  return this.el.shadowRoot.getElementById('slider-container');
@@ -7300,7 +7329,7 @@ const CpslSlideButton = class {
7300
7329
  return this.el.shadowRoot.getElementById('end-icon');
7301
7330
  }
7302
7331
  render() {
7303
- return (h(Host, { key: '3025e2306923953edd5857009828af027cd0d561' }, h("div", { key: '5557072bcccfc099af005fed9af45adf335a98dd', id: "slider-container", class: "slider-container" }, h("div", { key: '39e1b5d2123eda0a004c0f250c8afa66b53768f4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '80486f55315077693d481e193eba1bf37acd5afd', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'c13596a1a117aa3e5674d5a91c0ec38ff9ac7a49', id: "slider", class: "slider" }, h("cpsl-icon", { key: 'd2d78f42e65efd180c9dd106738341cf0aee6f27', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '63f9ce569084f2541c69028aedc949b3ecccac0c', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '9bead9870b949f91734c4199d9c96f7b50a10128', id: "start-text", class: "start-text" }, this.startText), h("span", { key: '8dfa1e9e0866a74f72d27b2541a4ac9d56038d34', id: "end-text", class: "end-text" }, this.endText))));
7332
+ 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))));
7304
7333
  }
7305
7334
  get el() { return getElement(this); }
7306
7335
  };