@usecapsule/core-components 1.0.10 → 1.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-bbbfec72.entry.js → p-47f9b803.entry.js} +3 -3
- package/dist/capsule/p-47f9b803.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_17.cjs.entry.js +37 -8
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
- package/dist/cjs/index-2a026742.js +30 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.css +10 -0
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +34 -5
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
- package/dist/esm/cpsl-alert_17.entry.js +37 -8
- package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
- package/dist/esm/index-7c2f5cb9.js +30 -1
- package/package.json +2 -2
- package/dist/capsule/p-bbbfec72.entry.js.map +0 -1
|
@@ -1859,7 +1859,36 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
1859
1859
|
if (module) {
|
|
1860
1860
|
return module[exportName];
|
|
1861
1861
|
}
|
|
1862
|
-
|
|
1862
|
+
|
|
1863
|
+
if (!hmrVersionId || !BUILD.hotModuleReplacement) {
|
|
1864
|
+
const processMod = importedModule => {
|
|
1865
|
+
cmpModules.set(bundleId, importedModule);
|
|
1866
|
+
return importedModule[exportName];
|
|
1867
|
+
}
|
|
1868
|
+
switch(bundleId) {
|
|
1869
|
+
|
|
1870
|
+
case 'cpsl-alert_17.cjs':
|
|
1871
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1872
|
+
/* webpackMode: "lazy" */
|
|
1873
|
+
'./cpsl-alert_17.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1874
|
+
case 'cpsl-col.cjs':
|
|
1875
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1876
|
+
/* webpackMode: "lazy" */
|
|
1877
|
+
'./cpsl-col.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1878
|
+
case 'cpsl-grid.cjs':
|
|
1879
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1880
|
+
/* webpackMode: "lazy" */
|
|
1881
|
+
'./cpsl-grid.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1882
|
+
case 'cpsl-info-box.cjs':
|
|
1883
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1884
|
+
/* webpackMode: "lazy" */
|
|
1885
|
+
'./cpsl-info-box.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1886
|
+
case 'cpsl-row.cjs':
|
|
1887
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1888
|
+
/* webpackMode: "lazy" */
|
|
1889
|
+
'./cpsl-row.cjs.entry.js')); }).then(processMod, consoleError);
|
|
1890
|
+
}
|
|
1891
|
+
}
|
|
1863
1892
|
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
1864
1893
|
/* @vite-ignore */
|
|
1865
1894
|
/* webpackInclude: /\.entry\.js$/ */
|
|
@@ -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"; }
|
|
@@ -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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
|
|
1
|
+
{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,aAAa;;QAmChB,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAc,EAAE,EAAE;;YACpD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAClC,IAAI,EAAE,CAAC,SAAS,IAAI,YAAY,EAAE,CAAC;gBACjC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;oBACvD,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC9B,OAAO;gBACT,CAAC;gBACD,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;gBAE1D,MAAM,OAAO,GAAG,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;gBAC/C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAiB,EAAE,EAAE;YACzD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,IAAI,OAAO,CAAC;oBACZ,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC9B,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;wBAC/C,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC5C,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC;oBAC5C,CAAC;yBAAM,CAAC;wBACN,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;oBACxC,CAAC;oBACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;oBACpB,MAAM;gBACR,CAAC;gBACD,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,UAAU,CAAC,GAAG,EAAE;wBACd,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC3C,CAAC,EAAE,CAAC,CAAC,CAAC;oBACN,MAAM;gBACR,CAAC;gBACD,OAAO,CAAC,CAAC,CAAC;oBACR,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAE;YACpC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;qBAAM,IAAI,KAAK,CAAC,EAAE,KAAK,cAAc,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC;oBACxD,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;YACH,CAAC;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC7C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAGM,gBAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YAC1C,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAClC,MAAM,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAEnD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC;gBAE1D,UAAU,CAAC,GAAG,EAAE;oBACd,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC9B,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;YACH,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,CAAC,CAAC;;;;;oBAzFmC,QAAQ;;IA2F7C,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;gBAAC,OAAA,CAC5C,aACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAC/D,EAAE,EAAE,cAAc,CAAC,EAAE,EACrB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1C,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GACtD,CACH,CAAA;aAAA,CAAC,CACE;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,WAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,iBAAW,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,GAAI;gBAC3E,gBAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
|
|
@@ -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 {
|
|
@@ -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: '
|
|
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"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-modal/cpsl-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,SAAS;;;;kCAgBiB,GAAG;;IAGxC,YAAY;QACV,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;IACnF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,IAAI;aACvB,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;aAC1C,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;aACrE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aAC5E,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aACrF,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC;aAC5E,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,GAAG,CAAC,CAAC;IAC3F,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACpE,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE;
|
|
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"]}
|
|
@@ -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 =
|
|
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
|
|
36
|
+
const elementMouseDrag = (e) => {
|
|
20
37
|
e.preventDefault();
|
|
21
38
|
pos1 = pos3 - e.clientX;
|
|
22
39
|
pos3 = e.clientX;
|
|
23
|
-
|
|
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.
|
|
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: '
|
|
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"; }
|
|
@@ -1 +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,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,WAAW,CAAC;QACrC,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YACxB,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC;YAGjB,MAAM,MAAM,GAAG,EAAE,CAAC,UAAU,GAAG,IAAI,CAAC;YACpC,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;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;QACX,EAAE,CAAC,WAAW,GAAG,aAAa,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 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"]}
|
|
@@ -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: '
|
|
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 =
|
|
7243
|
+
document.onmousemove = elementMouseDrag;
|
|
7234
7244
|
};
|
|
7235
|
-
const
|
|
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
|
-
|
|
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.
|
|
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: '
|
|
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
|
};
|