@getpara/core-components 1.2.0 → 1.3.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-48826e01.entry.js +28 -0
- package/dist/capsule/p-48826e01.entry.js.map +1 -0
- package/dist/capsule/p-a6214f0a.entry.js +2 -0
- package/dist/capsule/p-a6214f0a.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +114 -108
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-col.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js +71 -69
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +20 -18
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +19 -17
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.js +4 -4
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/utils/media.js +1 -1
- package/dist/collection/utils/media.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +114 -108
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/cpsl-col.entry.js +1 -1
- package/dist/esm/cpsl-col.entry.js.map +1 -1
- package/package.json +4 -4
- package/dist/capsule/p-0a4c8cdc.entry.js +0 -2
- package/dist/capsule/p-0a4c8cdc.entry.js.map +0 -1
- package/dist/capsule/p-d813dac5.entry.js +0 -28
- package/dist/capsule/p-d813dac5.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQ7G,MAAM,OAAO,UAAU;;QAGb,YAAO,GAAG,eAAe,QAAQ,EAAE,EAAE,CAAC;QAqLtC,WAAM,GAAG,CAAC,EAAc,EAAE,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YAE9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC;QAEM,YAAO,GAAG,CAAC,EAAc,EAAE,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAiB,EAAE,EAAE;YAC/C,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC;YACrD,CAAC;QACH,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAgC,CAAC;YAEtG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;gBACnB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE,CAAC;oBAC3C,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;wBACtC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;oBACxC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,IAAI,MAAA,IAAI,CAAC,aAAa,0CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;wBAC7C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;oBACxC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,eAAe,GAAG,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAA,CAAC;QACtH,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC5D,CAAC;QACH,CAAC,CAAC;;wBAzOkB,KAAK;2BACF,KAAK;+BACD,KAAK;;yBAWF,KAAK;wBAKhB,KAAK;;;;;kBA0BH,GAAG,IAAI,CAAC,OAAO,UAAU;oBAMpB,WAAW;;;;;wBAyBlB,KAAK;;;iCAeI,KAAK;0BAKZ,KAAK;;iCAYwF,SAAS;mCAQzH,OAAO;kCAOiE,SAAS;;IAuBnF,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,sBAAsB,CAAC,KAA0B;QAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAA2B,CAAC;QAC5F,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;QAEnI,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IA2DD,MAAM;;QACJ,MAAM,qBAAqB,GAAG,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1H,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE;YACjH,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;gBACvC,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBACzB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,gBAAgB,iBAAkB,CAAC,CAAC,CAAC,EAAE,CACzF,CACT;YACD,4DAAK,IAAI,EAAC,kBAAkB,EAAC,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,iBAAiB,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC9J,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,IAAI,6DAAM,IAAI,EAAC,eAAe,GAAQ;gBAC7F,4DAAK,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,EAAE,EAAE,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,IAC5J,CAAC,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAC7D,kEACE,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACpE,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,MAAM,EAAE,IAAI,CAAC,kBAAkB,IAE9B,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,WAAW,qDAAG,IAAI,CAAC,aAAa,CAAC,mCAAI,qBAAqB,CAAC,CAC/G,CACb,CACG;gBACN,kEAAW,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBAC5J,8DACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EACjC,SAAS,EAAC,MAAM,GAChB;gBACF,qEAAc,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACpJ,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU;wBAClC,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,kBAAkB;4BAC3B,mEACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,WAAW,EAAE,MAAA,IAAI,CAAC,iBAAiB,mCAAI,QAAQ,EAC/C,KAAK,EAAC,EAAE,EACR,WAAW,EAAE,CAAC,CAAC,EAAE;oCACf,CAAC,CAAC,eAAe,EAAE,CAAC;oCACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gCAC7C,CAAC,GACD,CACE,CACP;wBACD,4DAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,iBAAiB,IAAI,EAAE;4BAC7E,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACO,CACX;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,4DAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,+DAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","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 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 const selectedValueAsString = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');\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 = () => {\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 = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');\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"]}
|
|
@@ -12,7 +12,7 @@ export const matchBreakpoint = (breakpoint) => {
|
|
|
12
12
|
if (breakpoint === undefined || breakpoint === '') {
|
|
13
13
|
return true;
|
|
14
14
|
}
|
|
15
|
-
if (window.matchMedia) {
|
|
15
|
+
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
16
16
|
const mediaQuery = SIZE_TO_MEDIA[breakpoint];
|
|
17
17
|
return window.matchMedia(mediaQuery).matches;
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/utils/media.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAQ;IAChC,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAEF,8CAA8C;AAC9C,2BAA2B;AAC3B,mEAAmE;AACnE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAA8B,EAAE,EAAE;IAChE,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,EAAE,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/utils/media.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAQ;IAChC,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAEF,8CAA8C;AAC9C,2BAA2B;AAC3B,mEAAmE;AACnE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAA8B,EAAE,EAAE;IAChE,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,EAAE,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;QAChE,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["export const SIZE_TO_MEDIA: any = {\n xs: '(min-width: 0px)',\n sm: '(min-width: 576px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 992px)',\n xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string | undefined) => {\n if (breakpoint === undefined || breakpoint === '') {\n return true;\n }\n if (typeof window !== 'undefined' && (window as any).matchMedia) {\n const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n return window.matchMedia(mediaQuery).matches;\n }\n return false;\n};\n"]}
|
|
@@ -6149,77 +6149,79 @@ const CpslAuthModal = class {
|
|
|
6149
6149
|
});
|
|
6150
6150
|
}
|
|
6151
6151
|
handleAnimation() {
|
|
6152
|
-
if (
|
|
6153
|
-
if (
|
|
6154
|
-
|
|
6155
|
-
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
else {
|
|
6188
|
-
if (window.innerWidth >= MOBILE_SIZE + 1) {
|
|
6189
|
-
gsapWithCSS
|
|
6190
|
-
.timeline({
|
|
6191
|
-
onStart: () => {
|
|
6192
|
-
this.cpslModalExiting.emit();
|
|
6193
|
-
},
|
|
6194
|
-
onComplete: () => {
|
|
6195
|
-
var _a;
|
|
6196
|
-
this.cpslModalExited.emit();
|
|
6197
|
-
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6198
|
-
},
|
|
6199
|
-
})
|
|
6200
|
-
.to(this.modalWrapperEl, {
|
|
6201
|
-
scale: 0.8,
|
|
6202
|
-
opacity: 0,
|
|
6203
|
-
duration: this.exitTransitionDuration,
|
|
6204
|
-
});
|
|
6152
|
+
if (typeof window !== 'undefined') {
|
|
6153
|
+
if (this.open) {
|
|
6154
|
+
if (window.innerWidth >= MOBILE_SIZE + 1) {
|
|
6155
|
+
gsapWithCSS
|
|
6156
|
+
.timeline({
|
|
6157
|
+
onStart: () => {
|
|
6158
|
+
this.cpslModalEntering.emit();
|
|
6159
|
+
},
|
|
6160
|
+
onComplete: () => {
|
|
6161
|
+
this.cpslModalEntered.emit();
|
|
6162
|
+
},
|
|
6163
|
+
})
|
|
6164
|
+
.set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
|
|
6165
|
+
.to(this.modalWrapperEl, {
|
|
6166
|
+
scale: 1,
|
|
6167
|
+
opacity: 1,
|
|
6168
|
+
duration: this.enterTransitionDuration,
|
|
6169
|
+
});
|
|
6170
|
+
}
|
|
6171
|
+
else {
|
|
6172
|
+
gsapWithCSS
|
|
6173
|
+
.timeline({
|
|
6174
|
+
onStart: () => {
|
|
6175
|
+
this.cpslModalEntering.emit();
|
|
6176
|
+
},
|
|
6177
|
+
onComplete: () => {
|
|
6178
|
+
this.cpslModalEntered.emit();
|
|
6179
|
+
},
|
|
6180
|
+
})
|
|
6181
|
+
.set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
|
|
6182
|
+
.to(this.modalWrapperEl, {
|
|
6183
|
+
yPercent: -100,
|
|
6184
|
+
duration: this.enterTransitionDuration,
|
|
6185
|
+
});
|
|
6186
|
+
}
|
|
6205
6187
|
}
|
|
6206
6188
|
else {
|
|
6207
|
-
|
|
6208
|
-
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
|
|
6214
|
-
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
|
|
6222
|
-
|
|
6189
|
+
if (window.innerWidth >= MOBILE_SIZE + 1) {
|
|
6190
|
+
gsapWithCSS
|
|
6191
|
+
.timeline({
|
|
6192
|
+
onStart: () => {
|
|
6193
|
+
this.cpslModalExiting.emit();
|
|
6194
|
+
},
|
|
6195
|
+
onComplete: () => {
|
|
6196
|
+
var _a;
|
|
6197
|
+
this.cpslModalExited.emit();
|
|
6198
|
+
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6199
|
+
},
|
|
6200
|
+
})
|
|
6201
|
+
.to(this.modalWrapperEl, {
|
|
6202
|
+
scale: 0.8,
|
|
6203
|
+
opacity: 0,
|
|
6204
|
+
duration: this.exitTransitionDuration,
|
|
6205
|
+
});
|
|
6206
|
+
}
|
|
6207
|
+
else {
|
|
6208
|
+
gsapWithCSS
|
|
6209
|
+
.timeline({
|
|
6210
|
+
onStart: () => {
|
|
6211
|
+
this.cpslModalExiting.emit();
|
|
6212
|
+
},
|
|
6213
|
+
onComplete: () => {
|
|
6214
|
+
var _a;
|
|
6215
|
+
this.cpslModalExited.emit();
|
|
6216
|
+
(_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
|
|
6217
|
+
},
|
|
6218
|
+
})
|
|
6219
|
+
.to(this.modalWrapperEl, {
|
|
6220
|
+
yPercent: 0,
|
|
6221
|
+
duration: this.exitTransitionDuration,
|
|
6222
|
+
})
|
|
6223
|
+
.set(this.modalContainerEl, { y: 0 });
|
|
6224
|
+
}
|
|
6223
6225
|
}
|
|
6224
6226
|
}
|
|
6225
6227
|
}
|
|
@@ -12458,29 +12460,31 @@ const CpslDropdown = class {
|
|
|
12458
12460
|
}
|
|
12459
12461
|
adjustPosition() {
|
|
12460
12462
|
var _a;
|
|
12461
|
-
|
|
12462
|
-
|
|
12463
|
-
|
|
12464
|
-
|
|
12465
|
-
|
|
12466
|
-
|
|
12467
|
-
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12463
|
+
if (typeof window !== 'undefined') {
|
|
12464
|
+
const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
|
|
12465
|
+
const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
12466
|
+
const searchBar = this.el.shadowRoot.querySelector('.search-bar');
|
|
12467
|
+
const viewportHeight = window.innerHeight;
|
|
12468
|
+
if (parentRect) {
|
|
12469
|
+
this.width = `${parentRect.width}px`;
|
|
12470
|
+
dropdownOptions.style.left = `${parentRect.x}px`;
|
|
12471
|
+
if (window.innerWidth <= 480) {
|
|
12472
|
+
searchBar.style.maxHeight = `30px`;
|
|
12473
|
+
dropdownOptions.style.top = `425px`;
|
|
12474
|
+
dropdownOptions.style.maxHeight = '110px';
|
|
12475
|
+
return;
|
|
12476
|
+
}
|
|
12477
|
+
dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
|
|
12478
|
+
const availableHeight = viewportHeight - parentRect.bottom;
|
|
12479
|
+
dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
|
|
12473
12480
|
}
|
|
12474
|
-
dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
|
|
12475
|
-
const availableHeight = viewportHeight - parentRect.bottom;
|
|
12476
|
-
dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
|
|
12477
12481
|
}
|
|
12478
12482
|
}
|
|
12479
12483
|
addClickOutsideListener() {
|
|
12480
|
-
window.addEventListener('click', this.handleClickOutside);
|
|
12484
|
+
typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
|
|
12481
12485
|
}
|
|
12482
12486
|
removeClickOutsideListener() {
|
|
12483
|
-
window.removeEventListener('click', this.handleClickOutside);
|
|
12487
|
+
typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
|
|
12484
12488
|
}
|
|
12485
12489
|
componentWillLoad() {
|
|
12486
12490
|
if (this.items.length > 0) {
|
|
@@ -12498,7 +12502,7 @@ const CpslDropdown = class {
|
|
|
12498
12502
|
}
|
|
12499
12503
|
render() {
|
|
12500
12504
|
var _a, _b, _c;
|
|
12501
|
-
return (h(Host, { key: '
|
|
12505
|
+
return (h(Host, { key: '918eabdb23ab1f6c136c2ade37b572b60966ce75' }, h("button", { key: '53cde2c1780c6ceb1c08667fac003910810472b2', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '9dded62f6bcd83665f2af693f2ac6cff20de4d52', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '10a3cfc29eb61e9a2c64b0075c0b9b2985d08c70', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '702a1282cb816da185a0ce435146443daddb1d6c', class: "search-bar" }, h("input", { key: 'da05fa6019d2c0bd1dab4336378cd449172a3cae', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
|
|
12502
12506
|
}
|
|
12503
12507
|
get el() { return getElement(this); }
|
|
12504
12508
|
static get watchers() { return {
|
|
@@ -16952,7 +16956,7 @@ const CpslPopover = class {
|
|
|
16952
16956
|
this.setPosition = () => {
|
|
16953
16957
|
var _a;
|
|
16954
16958
|
const anchorEl = (_a = this.anchorEl) !== null && _a !== void 0 ? _a : this.triggerEl;
|
|
16955
|
-
if (anchorEl) {
|
|
16959
|
+
if (anchorEl && typeof window !== 'undefined') {
|
|
16956
16960
|
const windowWidth = window.innerWidth;
|
|
16957
16961
|
const windowHeight = window.innerHeight;
|
|
16958
16962
|
const elWidth = this.el.clientWidth;
|
|
@@ -17065,19 +17069,21 @@ const CpslPopover = class {
|
|
|
17065
17069
|
this.setPosition();
|
|
17066
17070
|
}
|
|
17067
17071
|
onOpenChange() {
|
|
17068
|
-
if (
|
|
17069
|
-
|
|
17070
|
-
|
|
17071
|
-
|
|
17072
|
-
|
|
17073
|
-
|
|
17074
|
-
|
|
17075
|
-
|
|
17076
|
-
|
|
17077
|
-
|
|
17078
|
-
|
|
17079
|
-
|
|
17080
|
-
|
|
17072
|
+
if (typeof window !== 'undefined') {
|
|
17073
|
+
if (this.open) {
|
|
17074
|
+
window.addEventListener('mousedown', this.validateEventStart);
|
|
17075
|
+
window.addEventListener('touchstart', this.validateEventStart);
|
|
17076
|
+
window.addEventListener('click', this.handleClickOutside);
|
|
17077
|
+
window.addEventListener('scroll', () => this.setPosition(), true);
|
|
17078
|
+
window.addEventListener('resize', () => this.setPosition(), true);
|
|
17079
|
+
}
|
|
17080
|
+
else {
|
|
17081
|
+
window.removeEventListener('mousedown', this.validateEventStart);
|
|
17082
|
+
window.removeEventListener('touchstart', this.validateEventStart);
|
|
17083
|
+
window.removeEventListener('click', this.handleClickOutside);
|
|
17084
|
+
window.removeEventListener('scroll', () => this.setPosition(), true);
|
|
17085
|
+
window.removeEventListener('resize', () => this.setPosition(), true);
|
|
17086
|
+
}
|
|
17081
17087
|
}
|
|
17082
17088
|
}
|
|
17083
17089
|
componentDidLoad() {
|
|
@@ -17089,7 +17095,7 @@ const CpslPopover = class {
|
|
|
17089
17095
|
}
|
|
17090
17096
|
render() {
|
|
17091
17097
|
var _a;
|
|
17092
|
-
return (h(Host, { key: '
|
|
17098
|
+
return (h(Host, { key: 'ef05d515c8622a70f143f460538a422c010de2e5', class: {
|
|
17093
17099
|
'open': this.open,
|
|
17094
17100
|
'transform-h-left': this.transformOriginHorizontal === 'left',
|
|
17095
17101
|
'transform-h-center': this.transformOriginHorizontal === 'center',
|
|
@@ -17101,9 +17107,9 @@ const CpslPopover = class {
|
|
|
17101
17107
|
top: `${this.positionY}px`,
|
|
17102
17108
|
left: `${this.positionX}px`,
|
|
17103
17109
|
width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px`,
|
|
17104
|
-
} }, h("div", { key: '
|
|
17110
|
+
} }, h("div", { key: 'd9134dc8de72f5802ce8ebf8b31f0a9a1cb09775', id: "container", class: { container: true, open: this.open }, style: {
|
|
17105
17111
|
visibility: this.hasSetInitialPosition ? 'visible' : 'hidden',
|
|
17106
|
-
} }, h("slot", { key: '
|
|
17112
|
+
} }, h("slot", { key: '6461c7a0c09cd8a0b03e5c42ba9fae303e571146' }))));
|
|
17107
17113
|
}
|
|
17108
17114
|
get el() { return getElement(this); }
|
|
17109
17115
|
static get watchers() { return {
|
|
@@ -21331,13 +21337,13 @@ const CpslSelect = class {
|
|
|
21331
21337
|
this.handleClickOutside = (event) => {
|
|
21332
21338
|
if (this.hasFocus && !this.el.contains(event.target)) {
|
|
21333
21339
|
this.hasFocus = false;
|
|
21334
|
-
window.removeEventListener('click', this.handleClickOutside);
|
|
21340
|
+
typeof window !== 'undefined' && window.removeEventListener('click', this.handleClickOutside);
|
|
21335
21341
|
}
|
|
21336
21342
|
};
|
|
21337
21343
|
this.handleClick = () => {
|
|
21338
21344
|
if (!this.disabled) {
|
|
21339
21345
|
this.hasFocus = true;
|
|
21340
|
-
window.addEventListener('click', this.handleClickOutside);
|
|
21346
|
+
typeof window !== 'undefined' && window.addEventListener('click', this.handleClickOutside);
|
|
21341
21347
|
}
|
|
21342
21348
|
};
|
|
21343
21349
|
this.anchorEl = undefined;
|
|
@@ -21392,10 +21398,10 @@ const CpslSelect = class {
|
|
|
21392
21398
|
render() {
|
|
21393
21399
|
var _a, _b, _c, _d, _e;
|
|
21394
21400
|
const selectedValueAsString = typeof this.selectedValue === 'string' ? this.selectedValue : this.selectedValue.join(', ');
|
|
21395
|
-
return (h(Host, { key: '
|
|
21401
|
+
return (h(Host, { key: '0b366a3c097d845993afaa7d27c894c5c0f03e44', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': this.hasSelectedItem } }, this.label && (h("label", { key: 'cfa4ae1a802f98d1beeea74bce33dd1844f821bf', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '971c488bbadbaa9ade8e17d0ec91bbaaccd1c3df', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c4cb233ece4d06a3cc7ef4b7aa5d9ccb6fada6c2', name: "selected-item" }), h("div", { key: '78e52b91db67e50205601902074610c4841d73db', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '682ce440ce404b1549eec38f6a523026eb48ea0d', 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: '96355103fb2e94e3c2bce8be308c643de03cb94c', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': this.hasSelectedItem }, icon: this.icon }), h("input", { key: '60eb6ad37fcaa568b3166f10b6c8dd59b8ca6e10', 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: '4bd5c2e243c05671786dded417234bdb3ae4e5ef', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '0d1bb3a829f31e211cc99e28e3650d21a353ec75', part: "dropdown", class: "dropdown" }, this.showSearch && (h("div", { key: 'af48dfde2c8fd8717b9602ad6870a7b8da86c6db', class: "search-container" }, h("cpsl-input", { key: '3a3d0197b1fe0f6a91568fb2c0530a34d8f68c8d', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
|
|
21396
21402
|
e.stopPropagation();
|
|
21397
21403
|
this.cpslSearchChange.emit(e.detail.value);
|
|
21398
|
-
} }))), h("div", { key: '
|
|
21404
|
+
} }))), h("div", { key: 'fb7d1dc0be277669ad804766f7ebb03218268a17', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'f63682b1d61aeab270cd2bf8683bf9b2f100274d', name: "items" }))))), (this.errorText || this.helperText) && (h("div", { key: '66ff41128e6faa920cd1a3e7cea36995921b89b6', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '77f56f4d6c7bff3836cdb54392b7938a0aa2ef9a' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
|
|
21399
21405
|
}
|
|
21400
21406
|
get el() { return getElement(this); }
|
|
21401
21407
|
static get watchers() { return {
|