@getpara/core-components 1.15.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-f3c04263.entry.js → p-d06ac2cf.entry.js} +6 -6
- package/dist/capsule/p-d06ac2cf.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +11 -25
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +5 -22
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +2 -2
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +4 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +11 -25
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/capsule/p-f3c04263.entry.js.map +0 -1
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/appendLoaderExports.d.ts +0 -0
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
|
@@ -73,35 +73,18 @@ export class CpslPopover {
|
|
|
73
73
|
default:
|
|
74
74
|
triggerCallbacks = [
|
|
75
75
|
{
|
|
76
|
-
eventName: '
|
|
77
|
-
callback: e => {
|
|
76
|
+
eventName: 'click',
|
|
77
|
+
callback: (e) => {
|
|
78
78
|
var _a;
|
|
79
79
|
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
80
80
|
if (targetId === 'ignore-click') {
|
|
81
81
|
return;
|
|
82
82
|
}
|
|
83
|
-
if (this.preventBlur) {
|
|
84
|
-
e.preventDefault();
|
|
85
|
-
}
|
|
86
83
|
if (!this.open) {
|
|
87
84
|
this.present();
|
|
88
85
|
}
|
|
89
86
|
},
|
|
90
87
|
},
|
|
91
|
-
{
|
|
92
|
-
eventName: 'touchstart',
|
|
93
|
-
callback: e => {
|
|
94
|
-
var _a;
|
|
95
|
-
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
96
|
-
if (targetId === 'ignore-click') {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
if (this.preventBlur) {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
}
|
|
102
|
-
this.present();
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
88
|
];
|
|
106
89
|
break;
|
|
107
90
|
}
|
|
@@ -252,7 +235,7 @@ export class CpslPopover {
|
|
|
252
235
|
}
|
|
253
236
|
render() {
|
|
254
237
|
var _a;
|
|
255
|
-
return (h(Host, { key: '
|
|
238
|
+
return (h(Host, { key: '10c267166cb8ccb9c9eff6b3e865804688d31b95', class: {
|
|
256
239
|
'open': this.open,
|
|
257
240
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
258
241
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -264,9 +247,9 @@ export class CpslPopover {
|
|
|
264
247
|
top: `${this.positionY}px`,
|
|
265
248
|
left: `${this.positionX}px`,
|
|
266
249
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
267
|
-
} }, h("div", { key: '
|
|
250
|
+
} }, h("div", { key: '292d9e8e45996b711b8979d4a38c054a04306f48', id: "container", class: { container: true, open: this.open }, style: {
|
|
268
251
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
269
|
-
} }, h("slot", { key: '
|
|
252
|
+
} }, h("slot", { key: 'aca410ff44bf9c77cb3eea6da1bd349bdc87287d' }))));
|
|
270
253
|
}
|
|
271
254
|
static get is() { return "cpsl-popover"; }
|
|
272
255
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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.js';\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 @State() hasSetInitialPosition = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n private startedInside = false;\n private startedWhenMounted = false;\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 (typeof window !== 'undefined') {\n if (this.open) {\n window.addEventListener('mousedown', this.validateEventStart);\n window.addEventListener('touchstart', this.validateEventStart);\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('mousedown', this.validateEventStart);\n window.removeEventListener('touchstart', this.validateEventStart);\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!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 const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (this.preventBlur) {\n e.preventDefault();\n }\n\n if (!this.open) {\n this.present();\n }\n },\n },\n {\n eventName: 'touchstart',\n callback: e => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\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 (anchorEl && typeof window !== 'undefined') {\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 validateEventStart = event => {\n this.startedWhenMounted = !!this.triggerEl;\n this.startedInside = this.triggerEl.contains(event.target);\n this.present();\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n // Do nothing if `mousedown` or `touchstart` started inside ref element\n if (this.startedInside || !this.startedWhenMounted) return;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n if (this.open) {\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\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n this.hasSetInitialPosition = true;\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.startedInside = false;\n this.cpslClose.emit();\n this.hasSetInitialPosition = false;\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={{\n top: `${this.positionY}px`,\n left: `${this.positionX}px`,\n width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n }}\n >\n <div\n id=\"container\"\n class={{ container: true, open: this.open }}\n style={{\n visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n }}\n >\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":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface.js';\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 @State() hasSetInitialPosition = false;\n @State() positionX?: number;\n @State() positionY?: number;\n\n private startedInside = false;\n private startedWhenMounted = false;\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 (typeof window !== 'undefined') {\n if (this.open) {\n window.addEventListener('mousedown', this.validateEventStart);\n window.addEventListener('touchstart', this.validateEventStart);\n window.addEventListener('click', this.handleClickOutside);\n window.addEventListener('scroll', () => this.setPosition(), true);\n window.addEventListener('resize', () => this.setPosition(), true);\n } else {\n window.removeEventListener('mousedown', this.validateEventStart);\n window.removeEventListener('touchstart', this.validateEventStart);\n window.removeEventListener('click', this.handleClickOutside);\n window.removeEventListener('scroll', () => this.setPosition(), true);\n window.removeEventListener('resize', () => this.setPosition(), true);\n }\n }\n }\n\n componentDidLoad() {\n this.configureTriggerInteraction();\n }\n\n private configureTriggerInteraction = () => {\n const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n if (destroyTriggerInteraction) {\n destroyTriggerInteraction();\n }\n\n if (trigger === undefined) {\n return;\n }\n\n this.triggerEl = document.getElementById(trigger);\n if (!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: 'click',\n callback: (e: Event) => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (!this.open) {\n this.present();\n }\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 (anchorEl && typeof window !== 'undefined') {\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 validateEventStart = event => {\n this.startedWhenMounted = !!this.triggerEl;\n this.startedInside = this.triggerEl.contains(event.target);\n this.present();\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n // Do nothing if `mousedown` or `touchstart` started inside ref element\n if (this.startedInside || !this.startedWhenMounted) return;\n\n // Do nothing if clicking ref's element or descendent elements\n if (!this.triggerEl || this.triggerEl.contains(event.target as Node)) return;\n\n if (this.open) {\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\n // Using a small timeout here to ensure the popover is open before attempting to do position calculations\n setTimeout(() => {\n this.setPosition();\n this.hasSetInitialPosition = true;\n }, 20);\n }\n };\n\n private close = () => {\n this.open = false;\n this.startedInside = false;\n this.cpslClose.emit();\n this.hasSetInitialPosition = false;\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={{\n top: `${this.positionY}px`,\n left: `${this.positionX}px`,\n width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px`,\n }}\n >\n <div\n id=\"container\"\n class={{ container: true, open: this.open }}\n style={{\n visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -110,10 +110,10 @@ export class CpslSelect {
|
|
|
110
110
|
render() {
|
|
111
111
|
var _a, _b, _c, _d, _e;
|
|
112
112
|
const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;
|
|
113
|
-
return (h(Host, { key: 'f7c2db799e3462ef83fd0e7b29a3fd88a2d69e38', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: '8629dcd2d81bbf631962f84c551b2e2a3c96dd33', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '
|
|
113
|
+
return (h(Host, { key: 'f7c2db799e3462ef83fd0e7b29a3fd88a2d69e38', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: '8629dcd2d81bbf631962f84c551b2e2a3c96dd33', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '581836944bb5c01766bd0ec13f6bf5e1149cd7e7', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onClick: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '39d58ccf94664d9d6c01a2b7dc5369fa77f224e2', name: "selected-item" }), h("div", { key: '511122f39895b25a0624497be7cb99c6ec9b92ba', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'd8ad96dab7e5b298d621ffc0621298c3ecc05907', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !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 : selectedValueAsString)))), h("cpsl-icon", { key: '787c3d3dff16bd68d3526604523f130ca329e8c9', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), h("input", { key: 'b606c940537173d3d8f4d66e131d7b624779713c', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '272c71c9466bd5f301be9c02da68ac78dc95b087', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'e8d9dde383da411ebfe8a238e8e3d0b37c0cbdde', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '571f898c5ad668bd55373a4c3aceff8e4c9f990c', class: "search-container" }, h("cpsl-input", { key: 'faef8d5df2c800564c6dfb9176dbfa35592089fd', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
|
|
114
114
|
e.stopPropagation();
|
|
115
115
|
this.cpslSearchChange.emit(e.detail.value);
|
|
116
|
-
} }))), h("div", { key: '
|
|
116
|
+
} }))), h("div", { key: '2a7a58fe4cac9ef5c6e193c7520c7fc5d4bdbec5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a0630a42e11c011ed5404e05a7ea1933da90e8fc', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: 'cee93a66e762e3c111edcaf8f57379d9ed106369', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '438123416a44bbd84b6fa908a9ba21635d808400' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
|
|
117
117
|
}
|
|
118
118
|
static get is() { return "cpsl-select"; }
|
|
119
119
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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';\nimport { IconType } from '../../interface.js';\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!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /**\n * ID of element to anchor popover to.\n */\n @Prop() anchorElId?: string;\n\n /**\n * If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n */\n @Prop() autoWidth?: boolean = 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[]) => 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\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /**\n * The name of the icon to use for the end icon.\n * Default: `chevronUp`\n */\n @Prop() icon?: IconType = 'chevronUp';\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the user can select more than one value.\n */\n @Prop() multiple?: boolean;\n\n /**\n * Whether or not to show the rotation animation for the end icon.\n */\n @Prop() noIconAnimation?: boolean;\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 | 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 * If `true`, the dropdown will contain a search field.\n */\n @Prop() showSearch = false;\n\n /**\n * Placeholder for the search field.\n */\n @Prop() searchPlaceholder?: string;\n\n /**\n * The color of the selected item or placeholder text.\n * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n */\n @Prop() selectedItemColor?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' = 'primary';\n\n /**\n * The variant of the selected item or placeholder text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n */\n @Prop() selectedItemVariant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' =\n 'bodyM';\n\n /**\n * The weight of the selected item or placeholder text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() selectedItemWeight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\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 /**\n * Emitted when the search value changes.\n */\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n if (!this.multiple) {\n this.popoverEl.closePopover();\n }\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\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\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 (typeof this.selectedValue === 'string') {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n } else {\n if (this.selectedValue?.includes(item.value)) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n }\n });\n\n this.hasSelectedItem = typeof this.selectedValue === 'string' ? !!this.selectedValue : !!this.selectedValue?.length;\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = (e: MouseEvent) => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (!this.disabled) {\n this.hasFocus = true;\n typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;\n\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem }}>\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 part=\"select-container\" 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': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n <cpsl-text\n class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}\n part=\"selected-text\"\n color={this.selectedItemColor}\n variant={this.selectedItemVariant}\n weight={this.selectedItemWeight}\n >\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? selectedValueAsString)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }} icon={this.icon} />\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 <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\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 </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';\nimport { IconType } from '../../interface.js';\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!: HTMLElement;\n @State() hasFocus = false;\n @State() popoverOpen = false;\n @State() hasSelectedItem = false;\n\n /**\n * ID of element to anchor popover to.\n */\n @Prop() anchorElId?: string;\n\n /**\n * If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.\n * Default is `false`\n */\n @Prop() autoWidth?: boolean = 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[]) => 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\n @Prop() id: string = `${this.inputId}-trigger`;\n\n /**\n * The name of the icon to use for the end icon.\n * Default: `chevronUp`\n */\n @Prop() icon?: IconType = 'chevronUp';\n\n /**\n * The label for the input.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the user can select more than one value.\n */\n @Prop() multiple?: boolean;\n\n /**\n * Whether or not to show the rotation animation for the end icon.\n */\n @Prop() noIconAnimation?: boolean;\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 | 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 * If `true`, the dropdown will contain a search field.\n */\n @Prop() showSearch = false;\n\n /**\n * Placeholder for the search field.\n */\n @Prop() searchPlaceholder?: string;\n\n /**\n * The color of the selected item or placeholder text.\n * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n */\n @Prop() selectedItemColor?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' = 'primary';\n\n /**\n * The variant of the selected item or placeholder text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n */\n @Prop() selectedItemVariant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' =\n 'bodyM';\n\n /**\n * The weight of the selected item or placeholder text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() selectedItemWeight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\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 /**\n * Emitted when the search value changes.\n */\n @Event() cpslSearchChange!: EventEmitter<string>;\n\n @Watch('selectedValue')\n onValueChange() {\n if (!this.multiple) {\n this.popoverEl.closePopover();\n }\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\n componentDidLoad() {\n this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n this.anchorEl = this.anchorElId ? document.getElementById(this.anchorElId) : this.el.shadowRoot.getElementById('select-container');\n\n this.selectItem();\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 (typeof this.selectedValue === 'string') {\n if (item.value === this.selectedValue) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n } else {\n if (this.selectedValue?.includes(item.value)) {\n item.setAttribute('selected', 'true');\n } else {\n item.setAttribute('selected', 'false');\n }\n }\n });\n\n this.hasSelectedItem = typeof this.selectedValue === 'string' ? !!this.selectedValue : !!this.selectedValue?.length;\n };\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.hasFocus && !this.el.contains(event.target as Node)) {\n this.hasFocus = false;\n typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);\n }\n };\n\n private handleClick = (e: MouseEvent) => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n if (!this.disabled) {\n this.hasFocus = true;\n typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);\n }\n };\n\n render() {\n const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;\n\n return (\n <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem }}>\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 part=\"select-container\" id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onClick={this.handleClick}>\n {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n <div class={{ 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }} id=\"selected-container-content\" style={{}}>\n {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n <cpsl-text\n class={{ 'selected-text': true, 'placeholder': !this.selectedValue }}\n part=\"selected-text\"\n color={this.selectedItemColor}\n variant={this.selectedItemVariant}\n weight={this.selectedItemWeight}\n >\n {!this.selectedValue ? (this.placeholder ?? 'Select') : (this.formatValue?.(this.selectedValue) ?? selectedValueAsString)}\n </cpsl-text>\n )}\n </div>\n <cpsl-icon part=\"icon\" class={{ 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }} icon={this.icon} />\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 <cpsl-popover part=\"popover\" autoWidth={this.autoWidth} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n <div part=\"dropdown\" class=\"dropdown\">\n {this.showSearch && (\n <div class=\"search-container\">\n <cpsl-input\n onClick={e => e.stopPropagation()}\n placeholder={this.searchPlaceholder ?? 'Search'}\n value=\"\"\n onCpslInput={e => {\n e.stopPropagation();\n this.cpslSearchChange.emit(e.detail.value);\n }}\n />\n </div>\n )}\n <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n <slot name=\"items\"></slot>\n </div>\n </div>\n </cpsl-popover>\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 </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
|
|
@@ -8,7 +8,10 @@ export class CpslSelectItem {
|
|
|
8
8
|
this.value = undefined;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: '
|
|
11
|
+
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: 'c96fd4ab69add9b97726ef5869da0f4ef4353b23', part: "outer-container", class: "outer-container", onClick: e => {
|
|
12
|
+
this.handleItemClick();
|
|
13
|
+
e.stopPropagation();
|
|
14
|
+
} }, h("div", { key: '0dd87fde160b31a3609ee41b550066279c9f00d6', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: 'c526deb812322490f235d34d7d98f30eb2f6a19e' })))));
|
|
12
15
|
}
|
|
13
16
|
static get is() { return "cpsl-select-item"; }
|
|
14
17
|
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,
|
|
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,4DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE;oBACX,IAAI,CAAC,eAAe,EAAE,CAAC;oBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC;gBAED,4DAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvF,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\n part=\"outer-container\"\n class=\"outer-container\"\n onClick={e => {\n this.handleItemClick();\n e.stopPropagation();\n }}\n >\n <div part=\"inner-container\" class={{ 'inner-container': true, 'selected': this.selected }}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -16937,35 +16937,18 @@ const CpslPopover = class {
|
|
|
16937
16937
|
default:
|
|
16938
16938
|
triggerCallbacks = [
|
|
16939
16939
|
{
|
|
16940
|
-
eventName: '
|
|
16941
|
-
callback: e => {
|
|
16940
|
+
eventName: 'click',
|
|
16941
|
+
callback: (e) => {
|
|
16942
16942
|
var _a;
|
|
16943
16943
|
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
16944
16944
|
if (targetId === 'ignore-click') {
|
|
16945
16945
|
return;
|
|
16946
16946
|
}
|
|
16947
|
-
if (this.preventBlur) {
|
|
16948
|
-
e.preventDefault();
|
|
16949
|
-
}
|
|
16950
16947
|
if (!this.open) {
|
|
16951
16948
|
this.present();
|
|
16952
16949
|
}
|
|
16953
16950
|
},
|
|
16954
16951
|
},
|
|
16955
|
-
{
|
|
16956
|
-
eventName: 'touchstart',
|
|
16957
|
-
callback: e => {
|
|
16958
|
-
var _a;
|
|
16959
|
-
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
16960
|
-
if (targetId === 'ignore-click') {
|
|
16961
|
-
return;
|
|
16962
|
-
}
|
|
16963
|
-
if (this.preventBlur) {
|
|
16964
|
-
e.preventDefault();
|
|
16965
|
-
}
|
|
16966
|
-
this.present();
|
|
16967
|
-
},
|
|
16968
|
-
},
|
|
16969
16952
|
];
|
|
16970
16953
|
break;
|
|
16971
16954
|
}
|
|
@@ -17116,7 +17099,7 @@ const CpslPopover = class {
|
|
|
17116
17099
|
}
|
|
17117
17100
|
render() {
|
|
17118
17101
|
var _a;
|
|
17119
|
-
return (h(Host, { key: '
|
|
17102
|
+
return (h(Host, { key: '10c267166cb8ccb9c9eff6b3e865804688d31b95', class: {
|
|
17120
17103
|
'open': this.open,
|
|
17121
17104
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
17122
17105
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -17128,9 +17111,9 @@ const CpslPopover = class {
|
|
|
17128
17111
|
top: `${this.positionY}px`,
|
|
17129
17112
|
left: `${this.positionX}px`,
|
|
17130
17113
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
17131
|
-
} }, h("div", { key: '
|
|
17114
|
+
} }, h("div", { key: '292d9e8e45996b711b8979d4a38c054a04306f48', id: "container", class: { container: true, open: this.open }, style: {
|
|
17132
17115
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
17133
|
-
} }, h("slot", { key: '
|
|
17116
|
+
} }, h("slot", { key: 'aca410ff44bf9c77cb3eea6da1bd349bdc87287d' }))));
|
|
17134
17117
|
}
|
|
17135
17118
|
get el() { return getElement(this); }
|
|
17136
17119
|
static get watchers() { return {
|
|
@@ -21424,10 +21407,10 @@ const CpslSelect = class {
|
|
|
21424
21407
|
render() {
|
|
21425
21408
|
var _a, _b, _c, _d, _e;
|
|
21426
21409
|
const selectedValueAsString = Array.isArray(this.selectedValue) ? this.selectedValue.join(', ') : this.selectedValue;
|
|
21427
|
-
return (h(Host, { key: 'f7c2db799e3462ef83fd0e7b29a3fd88a2d69e38', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: '8629dcd2d81bbf631962f84c551b2e2a3c96dd33', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '
|
|
21410
|
+
return (h(Host, { key: 'f7c2db799e3462ef83fd0e7b29a3fd88a2d69e38', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: '8629dcd2d81bbf631962f84c551b2e2a3c96dd33', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '581836944bb5c01766bd0ec13f6bf5e1149cd7e7', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onClick: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '39d58ccf94664d9d6c01a2b7dc5369fa77f224e2', name: "selected-item" }), h("div", { key: '511122f39895b25a0624497be7cb99c6ec9b92ba', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'd8ad96dab7e5b298d621ffc0621298c3ecc05907', class: { 'selected-text': true, 'placeholder': !this.selectedValue }, part: "selected-text", color: this.selectedItemColor, variant: this.selectedItemVariant, weight: this.selectedItemWeight }, !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 : selectedValueAsString)))), h("cpsl-icon", { key: '787c3d3dff16bd68d3526604523f130ca329e8c9', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), h("input", { key: 'b606c940537173d3d8f4d66e131d7b624779713c', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), h("cpsl-popover", { key: '272c71c9466bd5f301be9c02da68ac78dc95b087', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'e8d9dde383da411ebfe8a238e8e3d0b37c0cbdde', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: '571f898c5ad668bd55373a4c3aceff8e4c9f990c', class: "search-container" }, h("cpsl-input", { key: 'faef8d5df2c800564c6dfb9176dbfa35592089fd', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
|
|
21428
21411
|
e.stopPropagation();
|
|
21429
21412
|
this.cpslSearchChange.emit(e.detail.value);
|
|
21430
|
-
} }))), h("div", { key: '
|
|
21413
|
+
} }))), h("div", { key: '2a7a58fe4cac9ef5c6e193c7520c7fc5d4bdbec5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a0630a42e11c011ed5404e05a7ea1933da90e8fc', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: 'cee93a66e762e3c111edcaf8f57379d9ed106369', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '438123416a44bbd84b6fa908a9ba21635d808400' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
|
|
21431
21414
|
}
|
|
21432
21415
|
get el() { return getElement(this); }
|
|
21433
21416
|
static get watchers() { return {
|
|
@@ -21451,7 +21434,10 @@ const CpslSelectItem = class {
|
|
|
21451
21434
|
this.value = undefined;
|
|
21452
21435
|
}
|
|
21453
21436
|
render() {
|
|
21454
|
-
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: '
|
|
21437
|
+
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: 'c96fd4ab69add9b97726ef5869da0f4ef4353b23', part: "outer-container", class: "outer-container", onClick: e => {
|
|
21438
|
+
this.handleItemClick();
|
|
21439
|
+
e.stopPropagation();
|
|
21440
|
+
} }, h("div", { key: '0dd87fde160b31a3609ee41b550066279c9f00d6', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: 'c526deb812322490f235d34d7d98f30eb2f6a19e' })))));
|
|
21455
21441
|
}
|
|
21456
21442
|
};
|
|
21457
21443
|
CpslSelectItem.style = CpslSelectItemStyle0;
|