@usecapsule/core-components 3.0.1-dev.1 → 3.0.1-dev.2
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +4 -4
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/p-397edab5.entry.js +2 -0
- package/dist/capsule/{p-73398222.entry.js → p-52d6ebee.entry.js} +2 -2
- package/dist/capsule/{p-39584a7b.entry.js → p-5ed5e96c.entry.js} +2 -2
- package/dist/capsule/{p-97c33636.js → p-6e71539d.js} +1 -1
- package/dist/{esm/index-97ed6ec1.js.map → capsule/p-6e71539d.js.map} +1 -1
- package/dist/capsule/{p-127ac658.entry.js → p-70f95c93.entry.js} +2 -2
- package/dist/capsule/{p-69756614.entry.js → p-86e6cba5.entry.js} +2 -2
- package/dist/capsule/{p-8de15b15.entry.js → p-dd596431.entry.js} +3 -3
- package/dist/capsule/p-dd596431.entry.js.map +1 -0
- package/dist/capsule/{p-fd26ce6e.entry.js → p-f9351426.entry.js} +2 -2
- package/dist/cjs/capsule.cjs.js +2 -2
- package/dist/cjs/capsule.cjs.js.map +1 -1
- package/dist/cjs/cpsl-alert_33.cjs.entry.js +56 -19
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-animation.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-grid.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-info-box.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
- package/dist/cjs/{index-5293d431.js → index-85125285.js} +1 -1
- package/dist/cjs/index-85125285.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +46 -5
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.css +2 -0
- package/dist/collection/components/cpsl-select/cpsl-select.js +35 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.css +22 -12
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +1 -1
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +1 -1
- package/dist/esm/capsule.js +3 -3
- package/dist/esm/capsule.js.map +1 -1
- package/dist/esm/cpsl-alert_33.entry.js +56 -19
- package/dist/esm/cpsl-alert_33.entry.js.map +1 -1
- package/dist/esm/cpsl-animation.entry.js +1 -1
- package/dist/esm/cpsl-col.entry.js +1 -1
- package/dist/esm/cpsl-grid.entry.js +1 -1
- package/dist/esm/cpsl-info-box.entry.js +1 -1
- package/dist/esm/cpsl-modal-v2.entry.js +1 -1
- package/dist/esm/cpsl-row.entry.js +1 -1
- package/dist/esm/{index-97ed6ec1.js → index-b9a060b3.js} +1 -1
- package/dist/esm/index-b9a060b3.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/cpsl-popover/cpsl-popover.d.ts +2 -0
- package/dist/types/components/cpsl-select/cpsl-select.d.ts +6 -0
- package/dist/types/components.d.ts +16 -0
- package/package.json +1 -1
- package/dist/capsule/p-8de15b15.entry.js.map +0 -1
- package/dist/capsule/p-97c33636.js.map +0 -1
- package/dist/capsule/p-f72482c3.entry.js +0 -2
- package/dist/cjs/index-5293d431.js.map +0 -1
- /package/dist/capsule/{p-f72482c3.entry.js.map → p-397edab5.entry.js.map} +0 -0
- /package/dist/capsule/{p-73398222.entry.js.map → p-52d6ebee.entry.js.map} +0 -0
- /package/dist/capsule/{p-39584a7b.entry.js.map → p-5ed5e96c.entry.js.map} +0 -0
- /package/dist/capsule/{p-127ac658.entry.js.map → p-70f95c93.entry.js.map} +0 -0
- /package/dist/capsule/{p-69756614.entry.js.map → p-86e6cba5.entry.js.map} +0 -0
- /package/dist/capsule/{p-fd26ce6e.entry.js.map → p-f9351426.entry.js.map} +0 -0
|
@@ -84,12 +84,14 @@ export class CpslPopover {
|
|
|
84
84
|
};
|
|
85
85
|
};
|
|
86
86
|
this.setPosition = () => {
|
|
87
|
-
|
|
87
|
+
var _a;
|
|
88
|
+
const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
|
|
89
|
+
if (Boolean(anchorEl)) {
|
|
88
90
|
const windowWidth = window.innerWidth;
|
|
89
91
|
const windowHeight = window.innerHeight;
|
|
90
92
|
const elWidth = this.el.clientWidth;
|
|
91
93
|
const elHeight = this.el.clientHeight;
|
|
92
|
-
const { top, left, height, width } =
|
|
94
|
+
const { top, left, height, width } = anchorEl.getBoundingClientRect();
|
|
93
95
|
switch (this.anchorOriginHorizontal) {
|
|
94
96
|
case 'left': {
|
|
95
97
|
this.positionX = left;
|
|
@@ -143,7 +145,7 @@ export class CpslPopover {
|
|
|
143
145
|
}
|
|
144
146
|
};
|
|
145
147
|
this.present = () => {
|
|
146
|
-
if (!this.open) {
|
|
148
|
+
if (!this.open && !this.disabled) {
|
|
147
149
|
this.open = true;
|
|
148
150
|
this.cpslOpen.emit();
|
|
149
151
|
this.setPosition();
|
|
@@ -157,9 +159,11 @@ export class CpslPopover {
|
|
|
157
159
|
this.open = false;
|
|
158
160
|
this.positionX = undefined;
|
|
159
161
|
this.positionY = undefined;
|
|
162
|
+
this.anchorEl = undefined;
|
|
160
163
|
this.anchorOriginHorizontal = 'left';
|
|
161
164
|
this.anchorOriginVertical = 'bottom';
|
|
162
165
|
this.autoWidth = true;
|
|
166
|
+
this.disabled = undefined;
|
|
163
167
|
this.preventBlur = undefined;
|
|
164
168
|
this.transformOriginHorizontal = 'left';
|
|
165
169
|
this.transformOriginVertical = 'top';
|
|
@@ -197,7 +201,7 @@ export class CpslPopover {
|
|
|
197
201
|
}
|
|
198
202
|
render() {
|
|
199
203
|
var _a;
|
|
200
|
-
return (h(Host, { key: '
|
|
204
|
+
return (h(Host, { key: 'a5846acd01f652ff06d0f8fb842ab1c204b02c10', class: {
|
|
201
205
|
'open': this.open,
|
|
202
206
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
203
207
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -205,7 +209,7 @@ export class CpslPopover {
|
|
|
205
209
|
'transform-v-top': this.transformOriginVertical === 'top',
|
|
206
210
|
'transform-v-center': this.transformOriginVertical === 'center',
|
|
207
211
|
'transform-v-bottom': this.transformOriginVertical === 'bottom',
|
|
208
|
-
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '
|
|
212
|
+
}, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '579332ea7cca439f8f331575e229c853109d0a06', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '92d5d72dc49d360b12a08028065ddc6e843a1b19' }))));
|
|
209
213
|
}
|
|
210
214
|
static get is() { return "cpsl-popover"; }
|
|
211
215
|
static get encapsulation() { return "shadow"; }
|
|
@@ -221,6 +225,26 @@ export class CpslPopover {
|
|
|
221
225
|
}
|
|
222
226
|
static get properties() {
|
|
223
227
|
return {
|
|
228
|
+
"anchorEl": {
|
|
229
|
+
"type": "unknown",
|
|
230
|
+
"mutable": false,
|
|
231
|
+
"complexType": {
|
|
232
|
+
"original": "HTMLElement",
|
|
233
|
+
"resolved": "HTMLElement",
|
|
234
|
+
"references": {
|
|
235
|
+
"HTMLElement": {
|
|
236
|
+
"location": "global",
|
|
237
|
+
"id": "global::HTMLElement"
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
"required": false,
|
|
242
|
+
"optional": true,
|
|
243
|
+
"docs": {
|
|
244
|
+
"tags": [],
|
|
245
|
+
"text": "ID for the element that the popover anchors to."
|
|
246
|
+
}
|
|
247
|
+
},
|
|
224
248
|
"anchorOriginHorizontal": {
|
|
225
249
|
"type": "string",
|
|
226
250
|
"mutable": false,
|
|
@@ -275,6 +299,23 @@ export class CpslPopover {
|
|
|
275
299
|
"reflect": false,
|
|
276
300
|
"defaultValue": "true"
|
|
277
301
|
},
|
|
302
|
+
"disabled": {
|
|
303
|
+
"type": "boolean",
|
|
304
|
+
"mutable": false,
|
|
305
|
+
"complexType": {
|
|
306
|
+
"original": "boolean",
|
|
307
|
+
"resolved": "boolean",
|
|
308
|
+
"references": {}
|
|
309
|
+
},
|
|
310
|
+
"required": false,
|
|
311
|
+
"optional": false,
|
|
312
|
+
"docs": {
|
|
313
|
+
"tags": [],
|
|
314
|
+
"text": "Whether or not to disable to popover."
|
|
315
|
+
},
|
|
316
|
+
"attribute": "disabled",
|
|
317
|
+
"reflect": false
|
|
318
|
+
},
|
|
278
319
|
"preventBlur": {
|
|
279
320
|
"type": "boolean",
|
|
280
321
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement | null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n private triggerClicked = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n /**\n * Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n /**\n * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /**\n * Used internally to prevent select from blurring unintentionally.\n */\n @Prop() preventBlur: boolean;\n\n /**\n * Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n /**\n * Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n */\n @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n /**\n * ID for the element that triggers the popover to open.\n */\n @Prop() trigger: string;\n\n /**\n * Padding from edge of window for the popover container.\n */\n @Prop() windowPadding?: number = 16;\n\n /**\n * Emitted when the popover opens.\n */\n @Event() cpslOpen!: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes.\n */\n @Event() cpslClose!: EventEmitter<void>;\n\n /**\n * Call to close the popover manually.\n */\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition());\n } else {\n window.removeEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition());\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (Boolean(destroyTriggerInteraction)) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!Boolean(this.triggerEl)) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /**\n * Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n if (Boolean(this.triggerEl)) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = this.triggerEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n this.triggerClicked = true;\n return;\n }\n if (this.open && !this.el.contains(event.target as Node)) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open) {\n this.open = true;\n this.cpslOpen.emit();\n this.setPosition();\n }\n };\n\n private close = () => {\n this.open = false;\n this.triggerClicked = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ7G,MAAM,OAAO,WAAW;;QAOd,mBAAc,GAAG,KAAK,CAAC;QAqHvB,gCAA2B,GAAG,GAAG,EAAE;YACzC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,GAAG,IAAI,CAAC;YAEnE,IAAI,OAAO,CAAC,yBAAyB,CAAC,EAAE,CAAC;gBACvC,yBAAyB,EAAE,CAAC;YAC9B,CAAC;YAED,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAClD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC7B,OAAO,CAAC,KAAK,CAAC,kCAAkC,OAAO,6BAA6B,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC/F,OAAO;YACT,CAAC;YAED,IAAI,gBAAgB,GAA0B,EAAE,CAAC;YAMjD,QAAQ,aAAa,EAAE,CAAC;gBACtB,KAAK,OAAO;oBACV,gBAAgB,GAAG;wBACjB;4BACE,SAAS,EAAE,YAAY;4BACvB,QAAQ,EAAE,GAAS,EAAE;gCACnB,IAAI,CAAC,OAAO,EAAE,CAAC;4BACjB,CAAC,CAAA;yBACF;wBACD;4BACE,SAAS,EAAE,YAAY;4BACvB,QAAQ,EAAE,GAAG,EAAE;gCACb,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oCACxC,IAAI,CAAC,KAAK,EAAE,CAAC;gCACf,CAAC;qCAAM,CAAC;oCACN,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;wCACnD,IAAI,CAAC,KAAK,EAAE,CAAC;oCACf,CAAC,CAAC,CAAC;gCACL,CAAC;4BACH,CAAC;yBACF;wBACD;4BACE,SAAS,EAAE,OAAO;4BAClB,QAAQ,EAAE,CAAC,EAAS,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;yBAC9C;qBACF,CAAC;oBAEF,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb;oBACE,gBAAgB,GAAG;wBACjB;4BACE,SAAS,EAAE,WAAW;4BACtB,QAAQ,EAAE,CAAC,CAAC,EAAE;gCACZ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;oCACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gCACrB,CAAC;gCACD,IAAI,CAAC,OAAO,EAAE,CAAC;4BACjB,CAAC;yBACF;qBACF,CAAC;oBACF,MAAM;YACV,CAAC;YAED,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YAE5G,IAAI,CAAC,yBAAyB,GAAG,GAAG,EAAE;gBACpC,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;YACjH,CAAC,CAAC;QACJ,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;;YACzB,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI,CAAC,SAAS,CAAC;YACjD,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACtB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;gBACtC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;gBACxC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;gBACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;gBACtC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBAEtE,QAAQ,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBACpC,KAAK,MAAM,CAAC,CAAC,CAAC;wBACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;wBACtB,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;wBAClC,MAAM;oBACR,CAAC;oBACD,KAAK,OAAO,CAAC,CAAC,CAAC;wBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;wBAC9B,MAAM;oBACR,CAAC;gBACH,CAAC;gBAED,QAAQ,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAClC,KAAK,KAAK,CAAC,CAAC,CAAC;wBACX,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;wBACrB,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC;wBAClC,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,MAAM,CAAC;wBAC9B,MAAM;oBACR,CAAC;gBACH,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;gBACtC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,EAAE,CAAC;oBAClD,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;gBAChE,CAAC;gBAED,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;gBACtC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,EAAE,EAAE,CAAC;oBAChD,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;gBAC9D,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC1E,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACzD,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;QAEM,YAAO,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;oBA9Qc,KAAK;;;;sCAe0C,MAAM;oCAOR,QAAQ;yBAOvC,IAAI;;;yCAiBgC,MAAM;uCAOR,KAAK;6BAO1B,OAAO;;6BAUjB,EAAE;;IAgB7B,YAAY;;YAChB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;KAAA;IAKD,eAAe;QACb,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAID,cAAc;QACZ,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC1D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC9D,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC7D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IA4JD,IAAI,WAAW;;QACb,OAAO,MAAA,MAAA,IAAI,CAAC,EAAE,0CAAE,UAAU,0CAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,kBAAkB,EAAE,IAAI,CAAC,yBAAyB,KAAK,MAAM;gBAC7D,oBAAoB,EAAE,IAAI,CAAC,yBAAyB,KAAK,QAAQ;gBACjE,mBAAmB,EAAE,IAAI,CAAC,yBAAyB,KAAK,OAAO;gBAC/D,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,KAAK,KAAK;gBACzD,oBAAoB,EAAE,IAAI,CAAC,uBAAuB,KAAK,QAAQ;gBAC/D,oBAAoB,EAAE,IAAI,CAAC,uBAAuB,KAAK,QAAQ;aAChE,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAE,WAAW,IAAI,EAAE;YAEvI,4DAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;gBAC7D,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n tag: 'cpsl-popover',\n styleUrl: 'cpsl-popover.scss',\n shadow: true,\n})\nexport class CpslPopover {\n private triggerEl?: HTMLElement | null;\n private destroyTriggerInteraction?: () => void;\n\n @Element() el!: HTMLCpslPopoverElement;\n\n @State() open = false;\n private triggerClicked = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n /**\n * ID for the element that the popover anchors to.\n */\n @Prop() anchorEl?: HTMLElement;\n\n /**\n * Vertical anchor origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical anchor origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n /**\n * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `true`\n */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autoWidth?: boolean = true;\n\n /**\n * Whether or not to disable to popover.\n */\n @Prop() disabled: boolean;\n\n /**\n * Used internally to prevent select from blurring unintentionally.\n */\n @Prop() preventBlur: boolean;\n\n /**\n * Vertical transformation origin.\n * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n * Default is: `\"left\"`.\n */\n @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Vertical transformation origin.\n * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n * Default is: `\"bottom\"`.\n */\n @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n /**\n * Which trigger causes the popover to open.\n * Options are: `\"click\"`, `\"hover\"`.\n * Default is: `\"click\"`.\n */\n @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n /**\n * ID for the element that triggers the popover to open.\n */\n @Prop() trigger: string;\n\n /**\n * Padding from edge of window for the popover container.\n */\n @Prop() windowPadding?: number = 16;\n\n /**\n * Emitted when the popover opens.\n */\n @Event() cpslOpen!: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes.\n */\n @Event() cpslClose!: EventEmitter<void>;\n\n /**\n * Call to close the popover manually.\n */\n @Method()\n async closePopover() {\n this.close();\n }\n\n @Watch('trigger')\n @Watch('triggerAction')\n @Watch('preventBlur')\n onTriggerChange() {\n this.configureTriggerInteraction();\n }\n\n @Watch('anchorOriginHorizontal')\n @Watch('anchorOriginVertical')\n onAnchorChange() {\n this.setPosition();\n }\n\n @Watch('open')\n onOpenChange() {\n if (this.open) {\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition());\n } else {\n window.removeEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition());\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (Boolean(destroyTriggerInteraction)) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!Boolean(this.triggerEl)) {\n console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n return;\n }\n\n let triggerCallbacks: InteractionCallback[] = [];\n /**\n * Based upon the kind of trigger interaction\n * the user wants, we setup the correct event\n * listeners.\n */\n switch (triggerAction) {\n case 'hover':\n triggerCallbacks = [\n {\n eventName: 'mouseenter',\n callback: async () => {\n this.present();\n },\n },\n {\n eventName: 'mouseleave',\n callback: () => {\n if (!this.containerEl.matches(':hover')) {\n this.close();\n } else {\n this.containerEl.addEventListener('mouseleave', () => {\n this.close();\n });\n }\n },\n },\n {\n eventName: 'click',\n callback: (ev: Event) => ev.stopPropagation(),\n },\n ];\n\n break;\n case 'click':\n default:\n triggerCallbacks = [\n {\n eventName: 'mousedown',\n callback: e => {\n if (this.preventBlur) {\n e.preventDefault();\n }\n this.present();\n },\n },\n ];\n break;\n }\n\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n this.destroyTriggerInteraction = () => {\n triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n };\n };\n\n private setPosition = () => {\n const anchorEl = this.anchorEl ?? this.triggerEl;\n if (Boolean(anchorEl)) {\n const windowWidth = window.innerWidth;\n const windowHeight = window.innerHeight;\n const elWidth = this.el.clientWidth;\n const elHeight = this.el.clientHeight;\n const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n switch (this.anchorOriginHorizontal) {\n case 'left': {\n this.positionX = left;\n break;\n }\n case 'center': {\n this.positionX = left + width / 2;\n break;\n }\n case 'right': {\n this.positionX = left + width;\n break;\n }\n }\n\n switch (this.anchorOriginVertical) {\n case 'top': {\n this.positionY = top;\n break;\n }\n case 'center': {\n this.positionY = top + height / 2;\n break;\n }\n case 'bottom': {\n this.positionY = top + height;\n break;\n }\n }\n\n if (this.positionY < this.windowPadding) {\n this.positionY = this.windowPadding;\n }\n if (this.positionY + elHeight > windowHeight - 16) {\n this.positionY = windowHeight - this.windowPadding - elHeight;\n }\n\n if (this.positionX < this.windowPadding) {\n this.positionX = this.windowPadding;\n }\n if (this.positionX + elWidth > windowWidth - 16) {\n this.positionX = windowWidth - this.windowPadding - elWidth;\n }\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n this.triggerClicked = true;\n return;\n }\n if (this.open && !this.el.contains(event.target as Node)) {\n event.preventDefault();\n this.close();\n }\n };\n\n private present = () => {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.cpslOpen.emit();\n this.setPosition();\n }\n };\n\n private close = () => {\n this.open = false;\n this.triggerClicked = false;\n this.cpslClose.emit();\n };\n\n get containerEl() {\n return this.el?.shadowRoot?.getElementById('container');\n }\n\n render() {\n return (\n <Host\n class={{\n 'open': this.open,\n 'transform-h-left': this.transformOriginHorizontal === 'left',\n 'transform-h-center': this.transformOriginHorizontal === 'center',\n 'transform-h-right': this.transformOriginHorizontal === 'right',\n 'transform-v-top': this.transformOriginVertical === 'top',\n 'transform-v-center': this.transformOriginVertical === 'center',\n 'transform-v-bottom': this.transformOriginVertical === 'bottom',\n }}\n style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n >\n <div id=\"container\" class={{ container: true, open: this.open }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -98,6 +98,7 @@ input {
|
|
|
98
98
|
opacity: 0;
|
|
99
99
|
top: 0;
|
|
100
100
|
left: 0;
|
|
101
|
+
z-index: -1;
|
|
101
102
|
cursor: pointer;
|
|
102
103
|
}
|
|
103
104
|
input.disabled {
|
|
@@ -136,6 +137,7 @@ input.disabled {
|
|
|
136
137
|
box-sizing: border-box;
|
|
137
138
|
height: var(--container-height);
|
|
138
139
|
gap: var(--container-gap);
|
|
140
|
+
cursor: pointer;
|
|
139
141
|
border-style: solid;
|
|
140
142
|
border-width: var(--container-border-width);
|
|
141
143
|
border-color: var(--container-border-color);
|
|
@@ -2,8 +2,21 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class CpslSelect {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.inputId = `cpsl-select-${inputIds++}`;
|
|
5
|
+
this.resetStyles = () => {
|
|
6
|
+
document.documentElement.style.removeProperty('overflow');
|
|
7
|
+
document.body.style.removeProperty('padding-right');
|
|
8
|
+
};
|
|
9
|
+
this.measureScrollbarWidth = () => {
|
|
10
|
+
const scrollbox = document.createElement('div');
|
|
11
|
+
scrollbox.style.overflow = 'scroll';
|
|
12
|
+
document.body.appendChild(scrollbox);
|
|
13
|
+
const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
|
|
14
|
+
document.body.removeChild(scrollbox);
|
|
15
|
+
return scrollBarWidth;
|
|
16
|
+
};
|
|
5
17
|
this.onBlur = (ev) => {
|
|
6
18
|
this.hasFocus = false;
|
|
19
|
+
this.popoverEl.closePopover();
|
|
7
20
|
this.cpslBlur.emit(ev);
|
|
8
21
|
};
|
|
9
22
|
this.onFocus = (ev) => {
|
|
@@ -31,6 +44,19 @@ export class CpslSelect {
|
|
|
31
44
|
this.hasSelectedItem = false;
|
|
32
45
|
}
|
|
33
46
|
};
|
|
47
|
+
this.handleClickOutside = (event) => {
|
|
48
|
+
if (this.hasFocus && !this.el.contains(event.target)) {
|
|
49
|
+
this.hasFocus = false;
|
|
50
|
+
window.removeEventListener('click', this.handleClickOutside);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
this.handleClick = () => {
|
|
54
|
+
if (!this.disabled) {
|
|
55
|
+
this.hasFocus = true;
|
|
56
|
+
window.addEventListener('click', this.handleClickOutside);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
this.anchorEl = undefined;
|
|
34
60
|
this.hasFocus = false;
|
|
35
61
|
this.popoverOpen = false;
|
|
36
62
|
this.hasSelectedItem = false;
|
|
@@ -58,17 +84,24 @@ export class CpslSelect {
|
|
|
58
84
|
}
|
|
59
85
|
onPopoverOpen() {
|
|
60
86
|
this.popoverOpen = true;
|
|
87
|
+
document.documentElement.style.overflow = 'hidden';
|
|
88
|
+
document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
|
|
61
89
|
}
|
|
62
90
|
onPopoverClose() {
|
|
63
91
|
this.popoverOpen = false;
|
|
92
|
+
this.resetStyles();
|
|
64
93
|
}
|
|
65
94
|
componentDidLoad() {
|
|
66
95
|
this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
|
|
96
|
+
this.anchorEl = this.el.shadowRoot.getElementById('select-container');
|
|
67
97
|
this.selectItem();
|
|
68
98
|
}
|
|
99
|
+
disconnectedCallback() {
|
|
100
|
+
this.resetStyles();
|
|
101
|
+
}
|
|
69
102
|
render() {
|
|
70
103
|
var _a, _b, _c, _d;
|
|
71
|
-
return (h(Host, { key: '
|
|
104
|
+
return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', name: "items" }))))));
|
|
72
105
|
}
|
|
73
106
|
static get is() { return "cpsl-select"; }
|
|
74
107
|
static get encapsulation() { return "shadow"; }
|
|
@@ -294,6 +327,7 @@ export class CpslSelect {
|
|
|
294
327
|
}
|
|
295
328
|
static get states() {
|
|
296
329
|
return {
|
|
330
|
+
"anchorEl": {},
|
|
297
331
|
"hasFocus": {},
|
|
298
332
|
"popoverOpen": {},
|
|
299
333
|
"hasSelectedItem": {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * Set the max height of the dropdown.\n */\n @Prop() dropdownMaxHeight?: number;\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 * Format value for display when selected.\n */\n @Prop() formatValue?: (value: string) => 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 * ID of the element, must be unique for the popover trigger.\n */\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * Placeholder to display if `selectedValue` is empty.\n */\n @Prop() placeholder?: string;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * Value of the selected item.\n */\n @Prop() selectedValue?: string;\n\n /**\n * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n */\n @Prop() showFormattedSelectedItem?: boolean;\n\n /**\n * If `true`, the label will display an \"optional\" tag.\n */\n @Prop() showOptionalLabel = false;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the value changes.\n */\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n }\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n\n this.selectItem();\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n this.hasSelectedItem = true;\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n if (!Boolean(this.selectedValue)) {\n this.hasSelectedItem = false;\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '*' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class=\"selected-container-content\" id=\"selected-container-content\">\n {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n {!Boolean(this.selectedValue) ? this.placeholder ?? 'Select' : this.formatValue?.(this.selectedValue) ?? this.selectedValue}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n />\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n <cpsl-popover autoWidth={false} trigger={this.id} preventBlur={this.hasFocus}>\n <div class=\"dropdown\">\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
|
|
1
|
+
{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-select',\n styleUrl: 'cpsl-select.scss',\n shadow: true,\n})\nexport class CpslSelect {\n @Element() el!: HTMLCpslSelectElement;\n private popoverEl!: HTMLCpslPopoverElement;\n private inputId = `cpsl-select-${inputIds++}`;\n\n @State() anchorEl!: HTMLDivElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * Set the max height of the dropdown.\n */\n @Prop() dropdownMaxHeight?: number;\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 * Format value for display when selected.\n */\n @Prop() formatValue?: (value: string) => 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 * ID of the element, must be unique for the popover trigger.\n */\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * Placeholder to display if `selectedValue` is empty.\n */\n @Prop() placeholder?: string;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * Value of the selected item.\n */\n @Prop() selectedValue?: string;\n\n /**\n * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n */\n @Prop() showFormattedSelectedItem?: boolean;\n\n /**\n * If `true`, the label will display an \"optional\" tag.\n */\n @Prop() showOptionalLabel = false;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the value changes.\n */\n @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n this.popoverEl.closePopover();\n }\n\n @Watch('selectedValue')\n handleValueChange() {\n this.selectItem();\n }\n\n @Listen('cpslSelectItemClick')\n selectItemClickHandler(event: CustomEvent<string>) {\n this.cpslSelectValueChange.emit(event.detail);\n }\n\n @Listen('cpslOpen')\n onPopoverOpen() {\n this.popoverOpen = true;\n document.documentElement.style.overflow = 'hidden';\n document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;\n }\n\n @Listen('cpslClose')\n onPopoverClose() {\n this.popoverOpen = false;\n this.resetStyles();\n }\n\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\n\n this.selectItem();\n }\n\n disconnectedCallback() {\n this.resetStyles();\n }\n\n private resetStyles = () => {\n document.documentElement.style.removeProperty('overflow');\n document.body.style.removeProperty('padding-right');\n };\n\n private measureScrollbarWidth = () => {\n // Add temporary box to wrapper\n const scrollbox = document.createElement('div');\n\n // Make box scrollable\n scrollbox.style.overflow = 'scroll';\n\n // Append box to document\n document.body.appendChild(scrollbox);\n\n // Measure inner width of box\n const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;\n\n // Remove box\n document.body.removeChild(scrollbox);\n\n return scrollBarWidth;\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n this.popoverEl.closePopover();\n\n this.cpslBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n\n this.cpslFocus.emit(ev);\n };\n\n private handleEnterPress = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter') {\n ev.preventDefault();\n this.el.dispatchEvent(new MouseEvent('mousedown'));\n }\n };\n\n private selectItem = () => {\n const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n items.forEach(item => {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n this.hasSelectedItem = true;\n } else {\n item.setAttribute('selected', 'false');\n }\n });\n\n if (!Boolean(this.selectedValue)) {\n this.hasSelectedItem = false;\n }\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = () => {\n if (!this.disabled) {\n this.hasFocus = true;\n window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n {this.label && (\n <label class=\"label\" htmlFor={this.inputId}>\n {this.label}\n {this.required ? '*' : ' '}\n {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n </label>\n )}\n <div id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class=\"selected-container-content\" id=\"selected-container-content\">\n {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n {!Boolean(this.selectedValue) ? this.placeholder ?? 'Select' : this.formatValue?.(this.selectedValue) ?? this.selectedValue}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n <input\n id={this.inputId}\n disabled={this.disabled}\n class={{ disabled: this.disabled }}\n value={this.selectedValue}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyPress={this.handleEnterPress}\n inputmode=\"none\"\n />\n </div>\n {(this.errorText || this.helperText) && (\n <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n <span>{this.errorText ?? this.helperText}</span>\n </div>\n )}\n <cpsl-popover autoWidth={false} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div class=\"dropdown\">\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
|
|
@@ -54,20 +54,23 @@
|
|
|
54
54
|
* }
|
|
55
55
|
*/
|
|
56
56
|
:host {
|
|
57
|
+
--outer-container-padding-start: 8px;
|
|
58
|
+
--outer-container-padding-end: 8px;
|
|
59
|
+
--outer-container-padding-top: 8px;
|
|
60
|
+
--outer-container-padding-bottom: 8px;
|
|
57
61
|
--container-background-color: var(--cpsl-color-select-surface-default);
|
|
58
62
|
--container-hover-background-color: var(--cpsl-color-select-surface-hover);
|
|
59
|
-
--container-border-
|
|
60
|
-
--container-
|
|
61
|
-
--container-padding-
|
|
62
|
-
--container-padding-
|
|
63
|
-
--container-padding-
|
|
64
|
-
--container-padding-bottom: 16px;
|
|
63
|
+
--container-border-radius: calc(var(--cpsl-border-radius-select) - 4px);
|
|
64
|
+
--container-padding-start: 8px;
|
|
65
|
+
--container-padding-end: 8px;
|
|
66
|
+
--container-padding-top: 8px;
|
|
67
|
+
--container-padding-bottom: 8px;
|
|
65
68
|
display: block;
|
|
66
69
|
font-family: var(--cpsl-font-family, inherit);
|
|
67
70
|
cursor: pointer;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
|
-
.container {
|
|
73
|
+
.inner-container {
|
|
71
74
|
-webkit-padding-start: var(--container-padding-start);
|
|
72
75
|
padding-inline-start: var(--container-padding-start);
|
|
73
76
|
-webkit-padding-end: var(--container-padding-end);
|
|
@@ -75,15 +78,22 @@
|
|
|
75
78
|
padding-top: var(--container-padding-top);
|
|
76
79
|
padding-bottom: var(--container-padding-bottom);
|
|
77
80
|
background-color: var(--container-background-color);
|
|
78
|
-
border-
|
|
79
|
-
border-width: 0px;
|
|
80
|
-
border-bottom-width: var(--container-border-width);
|
|
81
|
-
border-color: var(--container-border-color);
|
|
81
|
+
border-radius: var(--container-border-radius);
|
|
82
82
|
height: 100%;
|
|
83
83
|
display: flex;
|
|
84
84
|
align-items: center;
|
|
85
85
|
}
|
|
86
|
-
|
|
86
|
+
|
|
87
|
+
.outer-container {
|
|
88
|
+
-webkit-padding-start: var(--outer-container-padding-start);
|
|
89
|
+
padding-inline-start: var(--outer-container-padding-start);
|
|
90
|
+
-webkit-padding-end: var(--outer-container-padding-end);
|
|
91
|
+
padding-inline-end: var(--outer-container-padding-end);
|
|
92
|
+
padding-top: var(--outer-container-padding-top);
|
|
93
|
+
padding-bottom: var(--outer-container-padding-bottom);
|
|
94
|
+
background-color: var(--container-background-color);
|
|
95
|
+
}
|
|
96
|
+
.outer-container:hover > .inner-container {
|
|
87
97
|
background-color: var(--container-hover-background-color);
|
|
88
98
|
}
|
|
89
99
|
|
|
@@ -8,7 +8,7 @@ export class CpslSelectItem {
|
|
|
8
8
|
this.value = undefined;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: '
|
|
11
|
+
return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: 'd13e45f3997cfbbc4042a2810c76eb9b71b15d22', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '5c9787fb9ad5b13740515386e269895d2c0ca91d', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '0fc1ff893cb3e5f53a99978f683b1e4f1fb15410' })))));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "cpsl-select-item"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,
|
|
1
|
+
{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;gBACxD,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;oBAChE,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-select-item',\n styleUrl: 'cpsl-select-item.scss',\n shadow: true,\n})\nexport class CpslSelectItem {\n /**\n * Whether the item is selected or not.\n */\n @Prop() selected?: boolean;\n\n /**\n * Value of the item.\n */\n @Prop() value: string;\n\n /**\n * Called when item is clicked.\n * @internal\n */\n @Event() cpslSelectItemClick: EventEmitter<string>;\n\n private handleItemClick = () => {\n this.cpslSelectItemClick.emit(this.value);\n };\n\n render() {\n return (\n <Host>\n <div class=\"outer-container\" onClick={this.handleItemClick}>\n <div class={{ 'inner-container': true, 'selected': this.selected }}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -114,7 +114,7 @@ export class CpslSlideButton {
|
|
|
114
114
|
return this.el.shadowRoot.getElementById('end-icon');
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
117
|
-
return (h(Host, { key: '
|
|
117
|
+
return (h(Host, { key: 'aecef591819520c5abd43529f797a11d564bbf40' }, h("div", { key: '8d08c211ff7393aaf86569d3cb442216e1f78efd', id: "slider-container", class: "slider-container" }, h("div", { key: '072a8c587c34bf792d289cfa4490cd8564121a16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '6f656942985f8c490bb96d99475373fe6978c0e0', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0fcdc94813b54c9c32fdf7d5fc963448e0cf492a', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f45c670469c80f5604c06c8182ef7c9fabc56200', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'bc987b8d1495bb731ead75497ae7c411534f7ff0', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'bd6ab1e1adaff366e5ebb2bf82415bab514c00e8', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '0b94b997a625213645e737c77ad736663d41a844', id: "end-text", class: "end-text" }, this.endText))));
|
|
118
118
|
}
|
|
119
119
|
static get is() { return "cpsl-slide-button"; }
|
|
120
120
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,13 +5,13 @@ export class CpslSpinner {
|
|
|
5
5
|
this.speed = 1;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '10ec2d7dc8b62b0819e4ff3f683b5b7c7a6dbf19', style: {
|
|
9
9
|
'height': `${this.size}px`,
|
|
10
10
|
'width': `${this.size}px`,
|
|
11
11
|
'animation': `spin ${this.speed}s linear infinite`,
|
|
12
12
|
'-webkit-animation': `spin ${this.speed}s linear infinite`,
|
|
13
13
|
'-moz-animation': `spin ${this.speed}s linear infinite`,
|
|
14
|
-
} }, h("svg", { key: '
|
|
14
|
+
} }, h("svg", { key: 'e88b02f99bbfe3677eafe55d75ee65f595e829c5', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'de3d33313d7509abeb7733c37d3ed99ca9894260', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '7e0edc7e3222dc95a8c62d3228aceeddaf51593b', cx: "45", cy: "27", r: "5" }))));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "cpsl-spinner"; }
|
|
17
17
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ export class CpslSwitch {
|
|
|
7
7
|
this.checked = undefined;
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '1b25c42d27a45e0af756eadba475d15a8034d483' }, h("input", { key: 'fbb246d9b9fd5d3842bef147922095a36277ff0f', type: "checkbox", checked: this.checked }), h("span", { key: 'fe9356dec1f9b41b94cd5597b36ae6e1d5fce7ac', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '11d0ce011571a147912b400398ed8b78743d356c', class: { thumb: true, checked: this.checked } }))));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "cpsl-switch"; }
|
|
13
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,7 +21,7 @@ export class CpslTab {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: 'cc8785697e46574b6fdb1839098473bb3ca17866', onClick: this.onTabClicked }, h("div", { key: '2c6451937db4c48fa11bd610bfd344154eced8e6', class: { 'tab-container': true } }, h("slot", { key: '1dc724e299adbc96024aa6636f94551b09853c2a' }))));
|
|
25
25
|
}
|
|
26
26
|
static get is() { return "cpsl-tab"; }
|
|
27
27
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ export class CpslTable {
|
|
|
7
7
|
return this.el.querySelector('[slot="footer"]');
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '69d28584233c9f7545be8068c6f6fe5c6698d36f' }, h("cpsl-card", { key: 'fe1cdd5e9b0332d6056a38d32239057a252909e1', part: "table-container" }, h("div", { key: 'fd8eba0d9ebb48efb45617da3884d4a330a42704', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '8aaf689f820bc2c6732058b9d60a16d34974f0f0', name: "header" })), h("div", { key: '54610dd3abedc4f1214308a8b1f57d5f41b4d530', class: "content", part: "content" }, h("slot", { key: '49b369b546a08d25c85573e9807a4dd730a3e5e6', name: "content" })), h("div", { key: 'dcfb4bcbe1ad526bf07f4717ac4089711a8e4e70', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '4c60a98ad1098c77b8c14f8943fabe6141428fe0', name: "footer" })))));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "cpsl-table"; }
|
|
13
13
|
static get encapsulation() { return "shadow"; }
|
|
@@ -46,7 +46,7 @@ export class CpslTabs {
|
|
|
46
46
|
const tabsPosition = this.el.getBoundingClientRect();
|
|
47
47
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
|
48
48
|
const selectedTabRect = this.selectedTabRect;
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '8620de3b1cff8b60d0273f892ca7669cd53e479c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '1441d0f383ae41c5293e2ced9a0c77b04e3cfd5f', class: "tabs-container" }, h("slot", { key: '78f40c6d6f4826bc83254349e35ef98faf3968ce' }), h("div", { key: '900ab917e38b71195cd498cc2ed05a90d48515ac', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "cpsl-tabs"; }
|
|
52
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,7 +31,7 @@ export class CpslText {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '0f21250f8e8b38eeb854ba3b465c4ac0917b058b', class: {
|
|
35
35
|
'primary': this.color === 'primary',
|
|
36
36
|
'secondary': this.color === 'secondary',
|
|
37
37
|
'tertiary': this.color === 'tertiary',
|
|
@@ -5,7 +5,7 @@ export class CpslTileButton {
|
|
|
5
5
|
this.icon = undefined;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'f7d808cefadce272235872ba05cd60f9c0bffc3c' }, h("button", { key: '47e808a5ed0bdb6e0705d746844f74ce7ad07620', class: "button-native" }, h("cpsl-icon", { key: 'ba374a65bee6433b96d2f3c8abbe1da51f9172af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b5f55bdcec9566625f7c7a9567a933ff86815d6c' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "cpsl-tile-button"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
package/dist/esm/capsule.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-b9a060b3.js';
|
|
2
|
+
export { s as setNonce } from './index-b9a060b3.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table"],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_33",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-file-upload",{"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-select",{"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"label":[1],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-alert",{"icon":[1],"variant":[1]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table"],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-nav-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"variant":[513]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=capsule.js.map
|
package/dist/esm/capsule.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"capsule.js","mappings":";;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../../
|
|
1
|
+
{"file":"capsule.js","mappings":";;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../../web-sdk/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.18.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|