@usecapsule/core-components 3.0.1-dev.2 → 3.0.1-dev.5

package/dist/collection/components/cpsl-popover/cpsl-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n  tag: 'cpsl-popover',\n  styleUrl: 'cpsl-popover.scss',\n  shadow: true,\n})\nexport class CpslPopover {\n  private triggerEl?: HTMLElement | null;\n  private destroyTriggerInteraction?: () => void;\n\n  @Element() el!: HTMLCpslPopoverElement;\n\n  @State() open = false;\n  private triggerClicked = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\n\n  /**\n   * ID for the element that the popover anchors to.\n   */\n  @Prop() anchorEl?: HTMLElement;\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n  /**\n   * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n   * Default is `true`\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() autoWidth?: boolean = true;\n\n  /**\n   * Whether or not to disable to popover.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Used internally to prevent select from blurring unintentionally.\n   */\n  @Prop() preventBlur: boolean;\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n  /**\n   * Which trigger causes the popover to open.\n   * Options are: `\"click\"`, `\"hover\"`.\n   * Default is: `\"click\"`.\n   */\n  @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n  /**\n   * ID for the element that triggers the popover to open.\n   */\n  @Prop() trigger: string;\n\n  /**\n   * Padding from edge of window for the popover container.\n   */\n  @Prop() windowPadding?: number = 16;\n\n  /**\n   * Emitted when the popover opens.\n   */\n  @Event() cpslOpen!: EventEmitter<void>;\n\n  /**\n   * Emitted when the popover closes.\n   */\n  @Event() cpslClose!: EventEmitter<void>;\n\n  /**\n   * Call to close the popover manually.\n   */\n  @Method()\n  async closePopover() {\n    this.close();\n  }\n\n  @Watch('trigger')\n  @Watch('triggerAction')\n  @Watch('preventBlur')\n  onTriggerChange() {\n    this.configureTriggerInteraction();\n  }\n\n  @Watch('anchorOriginHorizontal')\n  @Watch('anchorOriginVertical')\n  onAnchorChange() {\n    this.setPosition();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    if (this.open) {\n      window.addEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    } else {\n      window.removeEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (Boolean(destroyTriggerInteraction)) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!Boolean(this.triggerEl)) {\n      console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n      return;\n    }\n\n    let triggerCallbacks: InteractionCallback[] = [];\n    /**\n     * Based upon the kind of trigger interaction\n     * the user wants, we setup the correct event\n     * listeners.\n     */\n    switch (triggerAction) {\n      case 'hover':\n        triggerCallbacks = [\n          {\n            eventName: 'mouseenter',\n            callback: async () => {\n              this.present();\n            },\n          },\n          {\n            eventName: 'mouseleave',\n            callback: () => {\n              if (!this.containerEl.matches(':hover')) {\n                this.close();\n              } else {\n                this.containerEl.addEventListener('mouseleave', () => {\n                  this.close();\n                });\n              }\n            },\n          },\n          {\n            eventName: 'click',\n            callback: (ev: Event) => ev.stopPropagation(),\n          },\n        ];\n\n        break;\n      case 'click':\n      default:\n        triggerCallbacks = [\n          {\n            eventName: 'mousedown',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n        ];\n        break;\n    }\n\n    triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n    this.destroyTriggerInteraction = () => {\n      triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n    };\n  };\n\n  private setPosition = () => {\n    const anchorEl = this.anchorEl ?? this.triggerEl;\n    if (Boolean(anchorEl)) {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      const elWidth = this.el.clientWidth;\n      const elHeight = this.el.clientHeight;\n      const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n      switch (this.anchorOriginHorizontal) {\n        case 'left': {\n          this.positionX = left;\n          break;\n        }\n        case 'center': {\n          this.positionX = left + width / 2;\n          break;\n        }\n        case 'right': {\n          this.positionX = left + width;\n          break;\n        }\n      }\n\n      switch (this.anchorOriginVertical) {\n        case 'top': {\n          this.positionY = top;\n          break;\n        }\n        case 'center': {\n          this.positionY = top + height / 2;\n          break;\n        }\n        case 'bottom': {\n          this.positionY = top + height;\n          break;\n        }\n      }\n\n      if (this.positionY < this.windowPadding) {\n        this.positionY = this.windowPadding;\n      }\n      if (this.positionY + elHeight > windowHeight - 16) {\n        this.positionY = windowHeight - this.windowPadding - elHeight;\n      }\n\n      if (this.positionX < this.windowPadding) {\n        this.positionX = this.windowPadding;\n      }\n      if (this.positionX + elWidth > windowWidth - 16) {\n        this.positionX = windowWidth - this.windowPadding - elWidth;\n      }\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n      this.triggerClicked = true;\n      return;\n    }\n    if (this.open && !this.el.contains(event.target as Node)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private present = () => {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.cpslOpen.emit();\n      this.setPosition();\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.triggerClicked = false;\n    this.cpslClose.emit();\n  };\n\n  get containerEl() {\n    return this.el?.shadowRoot?.getElementById('container');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'open': this.open,\n          'transform-h-left': this.transformOriginHorizontal === 'left',\n          'transform-h-center': this.transformOriginHorizontal === 'center',\n          'transform-h-right': this.transformOriginHorizontal === 'right',\n          'transform-v-top': this.transformOriginVertical === 'top',\n          'transform-v-center': this.transformOriginVertical === 'center',\n          'transform-v-bottom': this.transformOriginVertical === 'bottom',\n        }}\n        style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n      >\n        <div id=\"container\" class={{ container: true, open: this.open }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-popover.js","sourceRoot":"","sources":["../../../../src/components/cpsl-popover/cpsl-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, Element, h, Method, Event, EventEmitter } from '@stencil/core';\nimport { InteractionCallback } from '../../interface';\n\n@Component({\n  tag: 'cpsl-popover',\n  styleUrl: 'cpsl-popover.scss',\n  shadow: true,\n})\nexport class CpslPopover {\n  private triggerEl?: HTMLElement | null;\n  private destroyTriggerInteraction?: () => void;\n\n  @Element() el!: HTMLCpslPopoverElement;\n\n  @State() open = false;\n  private triggerClicked = false;\n  @State() positionX?: number;\n  @State() positionY?: number;\n\n  /**\n   * ID for the element that the popover anchors to.\n   */\n  @Prop() anchorEl?: HTMLElement;\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() anchorOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical anchor origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() anchorOriginVertical?: 'top' | 'center' | 'bottom' = 'bottom';\n\n  /**\n   * If `true` the container will use the width of the content, else it will be set to the width of the trigger.\n   * Default is `true`\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() autoWidth?: boolean = true;\n\n  /**\n   * Whether or not to disable to popover.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Used internally to prevent select from blurring unintentionally.\n   */\n  @Prop() preventBlur: boolean;\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"left\"`, `\"center\"`, `\"right\"`.\n   * Default is: `\"left\"`.\n   */\n  @Prop() transformOriginHorizontal?: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Vertical transformation origin.\n   * Options are: `\"top\"`, `\"center\"`, `\"bottom\"`.\n   * Default is: `\"bottom\"`.\n   */\n  @Prop() transformOriginVertical?: 'top' | 'center' | 'bottom' = 'top';\n\n  /**\n   * Which trigger causes the popover to open.\n   * Options are: `\"click\"`, `\"hover\"`.\n   * Default is: `\"click\"`.\n   */\n  @Prop() triggerAction: 'click' | 'hover' = 'click';\n\n  /**\n   * ID for the element that triggers the popover to open.\n   */\n  @Prop() trigger: string;\n\n  /**\n   * Padding from edge of window for the popover container.\n   */\n  @Prop() windowPadding?: number = 16;\n\n  /**\n   * Emitted when the popover opens.\n   */\n  @Event() cpslOpen!: EventEmitter<void>;\n\n  /**\n   * Emitted when the popover closes.\n   */\n  @Event() cpslClose!: EventEmitter<void>;\n\n  /**\n   * Call to close the popover manually.\n   */\n  @Method()\n  async closePopover() {\n    this.close();\n  }\n\n  @Watch('trigger')\n  @Watch('triggerAction')\n  @Watch('preventBlur')\n  onTriggerChange() {\n    this.configureTriggerInteraction();\n  }\n\n  @Watch('anchorOriginHorizontal')\n  @Watch('anchorOriginVertical')\n  onAnchorChange() {\n    this.setPosition();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    if (this.open) {\n      window.addEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition(), true);\n    } else {\n      window.removeEventListener('click', this.handleClickOutside);\n      window.addEventListener('scroll', () => this.setPosition());\n    }\n  }\n\n  componentDidLoad() {\n    this.configureTriggerInteraction();\n  }\n\n  private configureTriggerInteraction = () => {\n    const { trigger, triggerAction, destroyTriggerInteraction } = this;\n\n    if (Boolean(destroyTriggerInteraction)) {\n      destroyTriggerInteraction();\n    }\n\n    if (trigger === undefined) {\n      return;\n    }\n\n    this.triggerEl = document.getElementById(trigger);\n    if (!Boolean(this.triggerEl)) {\n      console.error(`A trigger element with the ID \"${trigger}\" was not found in the DOM.`, this.el);\n      return;\n    }\n\n    let triggerCallbacks: InteractionCallback[] = [];\n    /**\n     * Based upon the kind of trigger interaction\n     * the user wants, we setup the correct event\n     * listeners.\n     */\n    switch (triggerAction) {\n      case 'hover':\n        triggerCallbacks = [\n          {\n            eventName: 'mouseenter',\n            callback: async () => {\n              this.present();\n            },\n          },\n          {\n            eventName: 'mouseleave',\n            callback: () => {\n              if (!this.containerEl.matches(':hover')) {\n                this.close();\n              } else {\n                this.containerEl.addEventListener('mouseleave', () => {\n                  this.close();\n                });\n              }\n            },\n          },\n          {\n            eventName: 'click',\n            callback: (ev: Event) => ev.stopPropagation(),\n          },\n        ];\n\n        break;\n      case 'click':\n      default:\n        triggerCallbacks = [\n          {\n            eventName: 'mousedown',\n            callback: e => {\n              if (this.preventBlur) {\n                e.preventDefault();\n              }\n              this.present();\n            },\n          },\n        ];\n        break;\n    }\n\n    triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.addEventListener(eventName, callback));\n\n    this.destroyTriggerInteraction = () => {\n      triggerCallbacks.forEach(({ eventName, callback }) => this.triggerEl.removeEventListener(eventName, callback));\n    };\n  };\n\n  private setPosition = () => {\n    const anchorEl = this.anchorEl ?? this.triggerEl;\n    if (Boolean(anchorEl)) {\n      const windowWidth = window.innerWidth;\n      const windowHeight = window.innerHeight;\n      const elWidth = this.el.clientWidth;\n      const elHeight = this.el.clientHeight;\n      const { top, left, height, width } = anchorEl.getBoundingClientRect();\n\n      switch (this.anchorOriginHorizontal) {\n        case 'left': {\n          this.positionX = left;\n          break;\n        }\n        case 'center': {\n          this.positionX = left + width / 2;\n          break;\n        }\n        case 'right': {\n          this.positionX = left + width;\n          break;\n        }\n      }\n\n      switch (this.anchorOriginVertical) {\n        case 'top': {\n          this.positionY = top;\n          break;\n        }\n        case 'center': {\n          this.positionY = top + height / 2;\n          break;\n        }\n        case 'bottom': {\n          this.positionY = top + height;\n          break;\n        }\n      }\n\n      if (this.positionY < this.windowPadding) {\n        this.positionY = this.windowPadding;\n      }\n      if (this.positionY + elHeight > windowHeight - 16) {\n        this.positionY = windowHeight - this.windowPadding - elHeight;\n      }\n\n      if (this.positionX < this.windowPadding) {\n        this.positionX = this.windowPadding;\n      }\n      if (this.positionX + elWidth > windowWidth - 16) {\n        this.positionX = windowWidth - this.windowPadding - elWidth;\n      }\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (!this.triggerClicked && this.triggerEl.contains(event.target as Node)) {\n      this.triggerClicked = true;\n      return;\n    }\n    if (this.open && !this.el.contains(event.target as Node)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private present = () => {\n    if (!this.open && !this.disabled) {\n      this.open = true;\n      this.cpslOpen.emit();\n      this.setPosition();\n    }\n  };\n\n  private close = () => {\n    this.open = false;\n    this.triggerClicked = false;\n    this.cpslClose.emit();\n  };\n\n  get containerEl() {\n    return this.el?.shadowRoot?.getElementById('container');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'open': this.open,\n          'transform-h-left': this.transformOriginHorizontal === 'left',\n          'transform-h-center': this.transformOriginHorizontal === 'center',\n          'transform-h-right': this.transformOriginHorizontal === 'right',\n          'transform-v-top': this.transformOriginVertical === 'top',\n          'transform-v-center': this.transformOriginVertical === 'center',\n          'transform-v-bottom': this.transformOriginVertical === 'bottom',\n        }}\n        style={{ top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${this.triggerEl?.clientWidth}px` }}\n      >\n        <div id=\"container\" class={{ container: true, open: this.open }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-select/cpsl-select.js

@@ -2,18 +2,6 @@ import { Host, h } from "@stencil/core";
 export class CpslSelect {
     constructor() {
         this.inputId = `cpsl-select-${inputIds++}`;
-        this.resetStyles = () => {
-            document.documentElement.style.removeProperty('overflow');
-            document.body.style.removeProperty('padding-right');
-        };
-        this.measureScrollbarWidth = () => {
-            const scrollbox = document.createElement('div');
-            scrollbox.style.overflow = 'scroll';
-            document.body.appendChild(scrollbox);
-            const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
-            document.body.removeChild(scrollbox);
-            return scrollBarWidth;
-        };
         this.onBlur = (ev) => {
             this.hasFocus = false;
             this.popoverEl.closePopover();
@@ -84,24 +72,18 @@ export class CpslSelect {
     }
     onPopoverOpen() {
         this.popoverOpen = true;
-        document.documentElement.style.overflow = 'hidden';
-        document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
     }
     onPopoverClose() {
         this.popoverOpen = false;
-        this.resetStyles();
     }
     componentDidLoad() {
         this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
         this.anchorEl = this.el.shadowRoot.getElementById('select-container');
         this.selectItem();
     }
-    disconnectedCallback() {
-        this.resetStyles();
-    }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', name: "items" }))))));
+        return (h(Host, { key: 'dfe6786c9be71ebd71fee236c9b569ef1ad30eac', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: 'fbe2cfb2d93558f647442e17b29713f37375be5a', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '9e5fdf3c056a7a6c13fe9ce45caf78e27482e779', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c721fcd057a142bad5f8f473c7b4daf090e7722a', name: "selected-item" }), h("div", { key: '58c94ace573965e8151ef4a9c0648385d6b1c4dc', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'ceb4c60607b6c2cbc17a086fe702045196afbd44', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '05cf53f1ce3f8f34e47082c591f2d75d4aeea11b', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: 'a395add0f06b0d10f1e2e6d0ea81478f4a1c07d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: 'e7f991ed99ed332f5f42e666bfd2d25eecff3113', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f734a586f0dd7e94ccb2d7806fc9a6a5bdb5f50b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'c45f42267e3b4945823e27f5901b58dc5545a51e', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'cd7bdc9a3e06a2c4aed9ebe12ec3cd070e323b12', class: "dropdown" }, h("div", { key: '0e1483542dd9d63ad548242a2bc2ecb2041f8ed5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e7697bc187fc433ccb2f5728f8944ff2162387d9', name: "items" }))))));
     }
     static get is() { return "cpsl-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cpsl-select/cpsl-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select',\n  styleUrl: 'cpsl-select.scss',\n  shadow: true,\n})\nexport class CpslSelect {\n  @Element() el!: HTMLCpslSelectElement;\n  private popoverEl!: HTMLCpslPopoverElement;\n  private inputId = `cpsl-select-${inputIds++}`;\n\n  @State() anchorEl!: HTMLDivElement;\n  @State() hasFocus = false;\n  @State() popoverOpen = false;\n  @State() hasSelectedItem = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set the max height of the dropdown.\n   */\n  @Prop() dropdownMaxHeight?: number;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Format value for display when selected.\n   */\n  @Prop() formatValue?: (value: string) => string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * ID of the element, must be unique for the popover trigger.\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() id: string = `${this.inputId}-trigger`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Placeholder to display if `selectedValue` is empty.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Value of the selected item.\n   */\n  @Prop() selectedValue?: string;\n\n  /**\n   * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n   */\n  @Prop() showFormattedSelectedItem?: boolean;\n\n  /**\n   * If `true`, the label will display an \"optional\" tag.\n   */\n  @Prop() showOptionalLabel = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n  @Watch('selectedValue')\n  onValueChange() {\n    this.popoverEl.closePopover();\n  }\n\n  @Watch('selectedValue')\n  handleValueChange() {\n    this.selectItem();\n  }\n\n  @Listen('cpslSelectItemClick')\n  selectItemClickHandler(event: CustomEvent<string>) {\n    this.cpslSelectValueChange.emit(event.detail);\n  }\n\n  @Listen('cpslOpen')\n  onPopoverOpen() {\n    this.popoverOpen = true;\n    document.documentElement.style.overflow = 'hidden';\n    document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;\n  }\n\n  @Listen('cpslClose')\n  onPopoverClose() {\n    this.popoverOpen = false;\n    this.resetStyles();\n  }\n\n  componentDidLoad() {\n    this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`) as HTMLCpslPopoverElement;\n    this.anchorEl = this.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\n\n    this.selectItem();\n  }\n\n  disconnectedCallback() {\n    this.resetStyles();\n  }\n\n  private resetStyles = () => {\n    document.documentElement.style.removeProperty('overflow');\n    document.body.style.removeProperty('padding-right');\n  };\n\n  private measureScrollbarWidth = () => {\n    // Add temporary box to wrapper\n    const scrollbox = document.createElement('div');\n\n    // Make box scrollable\n    scrollbox.style.overflow = 'scroll';\n\n    // Append box to document\n    document.body.appendChild(scrollbox);\n\n    // Measure inner width of box\n    const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;\n\n    // Remove box\n    document.body.removeChild(scrollbox);\n\n    return scrollBarWidth;\n  };\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    this.popoverEl.closePopover();\n\n    this.cpslBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n\n    this.cpslFocus.emit(ev);\n  };\n\n  private handleEnterPress = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      ev.preventDefault();\n      this.el.dispatchEvent(new MouseEvent('mousedown'));\n    }\n  };\n\n  private selectItem = () => {\n    const items = Array.from(this.el.querySelectorAll('cpsl-select-item')) as HTMLCpslSelectItemElement[];\n\n    items.forEach(item => {\n      if (item.value === this.selectedValue) {\n        item.setAttribute('selected', 'true');\n        this.hasSelectedItem = true;\n      } else {\n        item.setAttribute('selected', 'false');\n      }\n    });\n\n    if (!Boolean(this.selectedValue)) {\n      this.hasSelectedItem = false;\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.hasFocus && !this.el.contains(event.target as Node)) {\n      this.hasFocus = false;\n      window.removeEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.hasFocus = true;\n      window.addEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  render() {\n    return (\n      <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n        {this.label && (\n          <label class=\"label\" htmlFor={this.inputId}>\n            {this.label}\n            {this.required ? '*' : ' '}\n            {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n          </label>\n        )}\n        <div id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n          {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n          <div class=\"selected-container-content\" id=\"selected-container-content\">\n            {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n              <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n                {!Boolean(this.selectedValue) ? this.placeholder ?? 'Select' : this.formatValue?.(this.selectedValue) ?? this.selectedValue}\n              </cpsl-text>\n            )}\n          </div>\n          <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n          <input\n            id={this.inputId}\n            disabled={this.disabled}\n            class={{ disabled: this.disabled }}\n            value={this.selectedValue}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyPress={this.handleEnterPress}\n            inputmode=\"none\"\n          />\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n        <cpsl-popover autoWidth={false} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n          <div class=\"dropdown\">\n            <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n              <slot name=\"items\"></slot>\n            </div>\n          </div>\n        </cpsl-popover>\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}
+{"version":3,"file":"cpsl-select.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select/cpsl-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Prop, State, EventEmitter, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-select',\n  styleUrl: 'cpsl-select.scss',\n  shadow: true,\n})\nexport class CpslSelect {\n  @Element() el!: HTMLCpslSelectElement;\n  private popoverEl!: HTMLCpslPopoverElement;\n  private inputId = `cpsl-select-${inputIds++}`;\n\n  @State() anchorEl!: HTMLDivElement;\n  @State() hasFocus = false;\n  @State() popoverOpen = false;\n  @State() hasSelectedItem = false;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set the max height of the dropdown.\n   */\n  @Prop() dropdownMaxHeight?: number;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Format value for display when selected.\n   */\n  @Prop() formatValue?: (value: string) => string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * ID of the element, must be unique for the popover trigger.\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() id: string = `${this.inputId}-trigger`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Placeholder to display if `selectedValue` is empty.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Value of the selected item.\n   */\n  @Prop() selectedValue?: string;\n\n  /**\n   * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.\n   */\n  @Prop() showFormattedSelectedItem?: boolean;\n\n  /**\n   * If `true`, the label will display an \"optional\" tag.\n   */\n  @Prop() showOptionalLabel = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() cpslBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() cpslFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Event() cpslSelectValueChange!: EventEmitter<string>;\n\n  @Watch('selectedValue')\n  onValueChange() {\n    this.popoverEl.closePopover();\n  }\n\n  @Watch('selectedValue')\n  handleValueChange() {\n    this.selectItem();\n  }\n\n  @Listen('cpslSelectItemClick')\n  selectItemClickHandler(event: CustomEvent<string>) {\n    this.cpslSelectValueChange.emit(event.detail);\n  }\n\n  @Listen('cpslOpen')\n  onPopoverOpen() {\n    this.popoverOpen = true;\n  }\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.el.shadowRoot.getElementById('select-container') as HTMLDivElement;\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 (item.value === this.selectedValue) {\n        item.setAttribute('selected', 'true');\n        this.hasSelectedItem = true;\n      } else {\n        item.setAttribute('selected', 'false');\n      }\n    });\n\n    if (!Boolean(this.selectedValue)) {\n      this.hasSelectedItem = false;\n    }\n  };\n\n  private handleClickOutside = (event: MouseEvent) => {\n    if (this.hasFocus && !this.el.contains(event.target as Node)) {\n      this.hasFocus = false;\n      window.removeEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.hasFocus = true;\n      window.addEventListener('click', this.handleClickOutside);\n    }\n  };\n\n  render() {\n    return (\n      <Host id={this.id} class={{ 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) }}>\n        {this.label && (\n          <label class=\"label\" htmlFor={this.inputId}>\n            {this.label}\n            {this.required ? '*' : ' '}\n            {!this.required && this.showOptionalLabel ? <span class=\"optional-label\">(optional)</span> : ''}\n          </label>\n        )}\n        <div id=\"select-container\" class={{ 'select-container': true, 'error-container': Boolean(this.errorText) }} onMouseDown={this.handleClick}>\n          {this.hasSelectedItem && this.showFormattedSelectedItem && <slot name=\"selected-item\"></slot>}\n          <div class=\"selected-container-content\" id=\"selected-container-content\">\n            {(!this.hasSelectedItem || !this.showFormattedSelectedItem) && (\n              <cpsl-text class={{ 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) }}>\n                {!Boolean(this.selectedValue) ? this.placeholder ?? 'Select' : this.formatValue?.(this.selectedValue) ?? this.selectedValue}\n              </cpsl-text>\n            )}\n          </div>\n          <cpsl-icon class={{ 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }} icon=\"chevronUp\" />\n          <input\n            id={this.inputId}\n            disabled={this.disabled}\n            class={{ disabled: this.disabled }}\n            value={this.selectedValue}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyPress={this.handleEnterPress}\n            inputmode=\"none\"\n          />\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n        <cpsl-popover autoWidth={false} trigger={this.id} preventBlur={this.hasFocus} disabled={this.disabled} anchorEl={this.anchorEl}>\n          <div class=\"dropdown\">\n            <div class=\"dropdown-inner\" style={{ maxHeight: `${this.dropdownMaxHeight}px` }}>\n              <slot name=\"items\"></slot>\n            </div>\n          </div>\n        </cpsl-popover>\n      </Host>\n    );\n  }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'honorific-prefix'\n  | 'given-name'\n  | 'additional-name'\n  | 'family-name'\n  | 'honorific-suffix'\n  | 'nickname'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level4'\n  | 'address-level3'\n  | 'address-level2'\n  | 'address-level1'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'impp'\n  | 'url'\n  | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderRadius?: BorderRadius;\n  font?: string;\n  customPalette?: CustomPalette;\n  customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n  body2XS?: string;\n  bodyXS?: string;\n  bodyS?: string;\n  bodyM?: string;\n  bodyL?: string;\n  bodyXL?: string;\n  headingXS?: string;\n  headingS?: string;\n  headingM?: string;\n  headingL?: string;\n  headingXL?: string;\n  heading2XL?: string;\n}\n\nexport interface CustomPalette {\n  text?: {\n    primary?: string;\n    secondary?: string;\n    subtle?: string;\n    inverted?: string;\n    error?: string;\n  };\n  modal?: {\n    surface?: {\n      main?: string;\n      footer?: string;\n    };\n    border?: string;\n  };\n  input?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n  };\n  select?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n    dropdown?: {\n      border?: string;\n    };\n  };\n  file?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      drag?: string;\n    };\n    border?: {\n      placeholder?: string;\n      error?: string;\n    };\n  };\n  tileButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n    };\n    border?: string;\n  };\n  primaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  secondaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  destructiveButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  divider?: string;\n  spinner?: {\n    path?: string;\n    circle?: string;\n  };\n  pill?: {\n    text?: string;\n    container?: {\n      background?: string;\n      border?: string;\n    };\n  };\n  progressIndicator?: {\n    active?: string;\n    next?: string;\n    previous?: string;\n  };\n  qr?: {\n    fill?: string;\n    background?: string;\n    border?: string;\n  };\n  slideButton?: {\n    slider?: {\n      background?: string;\n      border?: string;\n      text?: string;\n      container?: {\n        start?: {\n          background?: string;\n          border?: string;\n        };\n        end?: {\n          background?: string;\n          border?: string;\n        };\n      };\n    };\n    start?: {\n      text?: string;\n    };\n    end?: {\n      text?: string;\n    };\n  };\n  alert?: {\n    surface?: {\n      error?: string;\n    };\n    border?: {\n      error?: string;\n    };\n  };\n  switch?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    thumb?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  checkbox?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n    icon?: string;\n  };\n  radio?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  card?: {\n    surface?: string;\n    border?: string;\n  };\n}\n\nexport interface InteractionCallback {\n  eventName: string;\n  callback: (ev: any) => void;\n}\n"]}
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'honorific-prefix'\n  | 'given-name'\n  | 'additional-name'\n  | 'family-name'\n  | 'honorific-suffix'\n  | 'nickname'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level4'\n  | 'address-level3'\n  | 'address-level2'\n  | 'address-level1'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'impp'\n  | 'url'\n  | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderRadius?: BorderRadius;\n  font?: string;\n  customPalette?: CustomPalette;\n  customFontSizes?: CustomFontSizes;\n  customBorderRadii?: CustomBorderRadii;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\nexport interface CustomBorderRadii {\n  input?: string;\n  select?: string;\n  fileSelect?: string;\n  alert?: string;\n  tabs?: string;\n  primaryButton?: string;\n  secondaryButton?: string;\n  destructiveButton?: string;\n  tileButton?: string;\n  modal?: string;\n  pill?: string;\n  qrCode?: string;\n  infoBox?: string;\n  tableContainer?: string;\n  switch?: string;\n  checkbox?: string;\n  radio?: string;\n  avatar?: string;\n  card?: string;\n  buttonGroup?: string;\n}\nexport interface CustomFontSizes {\n  body2XS?: string;\n  bodyXS?: string;\n  bodyS?: string;\n  bodyM?: string;\n  bodyL?: string;\n  bodyXL?: string;\n  headingXS?: string;\n  headingS?: string;\n  headingM?: string;\n  headingL?: string;\n  headingXL?: string;\n  heading2XL?: string;\n}\n\nexport interface CustomPalette {\n  text?: {\n    primary?: string;\n    secondary?: string;\n    subtle?: string;\n    inverted?: string;\n    error?: string;\n  };\n  modal?: {\n    surface?: {\n      main?: string;\n      footer?: string;\n    };\n    border?: string;\n  };\n  input?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n  };\n  select?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      hover?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n    dropdown?: {\n      border?: string;\n    };\n  };\n  file?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n      drag?: string;\n    };\n    border?: {\n      placeholder?: string;\n      error?: string;\n    };\n  };\n  tileButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n    };\n    border?: string;\n  };\n  primaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  secondaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  destructiveButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  divider?: string;\n  spinner?: {\n    path?: string;\n    circle?: string;\n  };\n  pill?: {\n    text?: string;\n    container?: {\n      background?: string;\n      border?: string;\n    };\n  };\n  progressIndicator?: {\n    active?: string;\n    next?: string;\n    previous?: string;\n  };\n  qr?: {\n    fill?: string;\n    background?: string;\n    border?: string;\n  };\n  slideButton?: {\n    slider?: {\n      background?: string;\n      border?: string;\n      text?: string;\n      container?: {\n        start?: {\n          background?: string;\n          border?: string;\n        };\n        end?: {\n          background?: string;\n          border?: string;\n        };\n      };\n    };\n    start?: {\n      text?: string;\n    };\n    end?: {\n      text?: string;\n    };\n  };\n  alert?: {\n    surface?: {\n      error?: string;\n    };\n    border?: {\n      error?: string;\n    };\n  };\n  switch?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    thumb?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  checkbox?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n    icon?: string;\n  };\n  radio?: {\n    surface?: {\n      default?: string;\n      checked?: string;\n    };\n    border?: {\n      default?: string;\n      checked?: string;\n    };\n  };\n  card?: {\n    surface?: string;\n    border?: string;\n  };\n}\n\nexport interface InteractionCallback {\n  eventName: string;\n  callback: (ev: any) => void;\n}\n"]}

package/dist/collection/utils/theme/generateBorderRadii.js

@@ -1,77 +1,74 @@
-export const generateBorderRadii = ({ borderRadius }) => {
-    if (!Boolean(borderRadius)) {
-        return;
-    }
-    let xSmallRadius, smallRadius, mediumRadius, largeRadius;
+import { getCssBorderRadii } from "./utils";
+export const generateBorderRadii = ({ borderRadius, customBorderRadii }) => {
+    let mediumRadius, largeRadius, checkboxRadius = 4;
     const fullRadius = 1000;
     let isFull = false;
     let isNone = false;
     switch (borderRadius) {
         case 'none': {
             isNone = true;
-            xSmallRadius = 0;
-            smallRadius = 0;
             mediumRadius = 0;
             largeRadius = 0;
+            checkboxRadius = 0;
             break;
         }
         case 'xs': {
-            xSmallRadius = 2;
-            smallRadius = 4;
-            mediumRadius = 12;
-            largeRadius = 20;
+            mediumRadius = 2;
+            largeRadius = 4;
+            checkboxRadius = 2;
             break;
         }
         case 'sm': {
-            xSmallRadius = 2;
-            smallRadius = 8;
-            mediumRadius = 16;
-            largeRadius = 24;
+            mediumRadius = 4;
+            largeRadius = 8;
             break;
         }
-        case 'lg': {
-            xSmallRadius = 8;
-            smallRadius = 16;
-            mediumRadius = 24;
+        case 'md': {
+            mediumRadius = 8;
+            largeRadius = 16;
+            break;
+        }
+        case 'xl': {
+            mediumRadius = 16;
             largeRadius = 32;
             break;
         }
         case 'full': {
-            xSmallRadius = 8;
-            smallRadius = 16;
             mediumRadius = 24;
             largeRadius = 32;
             isFull = true;
             break;
         }
         default:
-        case 'md': {
-            xSmallRadius = 4;
-            smallRadius = 12;
-            mediumRadius = 20;
-            largeRadius = 28;
+        case 'lg': {
+            mediumRadius = 12;
+            largeRadius = 24;
             break;
         }
     }
-    document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${mediumRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-card', `${largeRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${largeRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${checkboxRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${xSmallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
     document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${smallRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-card', `${mediumRadius}px`);
-    document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${xSmallRadius}px`);
+    if (Boolean(customBorderRadii)) {
+        const cssBorderRadiiVars = getCssBorderRadii(customBorderRadii);
+        Object.entries(cssBorderRadiiVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
+    }
 };
 //# sourceMappingURL=generateBorderRadii.js.map

package/dist/collection/utils/theme/generateBorderRadii.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAA+B,EAAE,EAAE;IACnF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3B,OAAO;IACT,CAAC;IAED,IAAI,YAAoB,EAAE,WAAmB,EAAE,YAAoB,EAAE,WAAmB,CAAC;IACzF,MAAM,UAAU,GAAG,IAAI,CAAC;IACxB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,MAAM,GAAG,KAAK,CAAC;IAEnB,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,GAAG,IAAI,CAAC;YACd,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM,GAAG,IAAI,CAAC;YACd,MAAM;QACR,CAAC;QACD,QAAQ;QACR,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IACnH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IACpH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAClH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC7F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAClH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC5H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,uCAAuC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC9H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,yCAAyC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAChI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IACnG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAC9F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC/F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAChG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,sCAAsC,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IAC1G,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IACjG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,UAAU,IAAI,CAAC,CAAC;IAC5F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC9F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAC7F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;AACvG,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n  if (!Boolean(borderRadius)) {\n    return;\n  }\n\n  let xSmallRadius: number, smallRadius: number, mediumRadius: number, largeRadius: number;\n  const fullRadius = 1000;\n  let isFull = false;\n  let isNone = false;\n\n  switch (borderRadius) {\n    case 'none': {\n      isNone = true;\n      xSmallRadius = 0;\n      smallRadius = 0;\n      mediumRadius = 0;\n      largeRadius = 0;\n      break;\n    }\n    case 'xs': {\n      xSmallRadius = 2;\n      smallRadius = 4;\n      mediumRadius = 12;\n      largeRadius = 20;\n      break;\n    }\n    case 'sm': {\n      xSmallRadius = 2;\n      smallRadius = 8;\n      mediumRadius = 16;\n      largeRadius = 24;\n      break;\n    }\n    case 'lg': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      break;\n    }\n    case 'full': {\n      xSmallRadius = 8;\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      isFull = true;\n      break;\n    }\n    default:\n    case 'md': {\n      xSmallRadius = 4;\n      smallRadius = 12;\n      mediumRadius = 20;\n      largeRadius = 28;\n      break;\n    }\n  }\n\n  document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${xSmallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-card', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${xSmallRadius}px`);\n};\n"]}
+{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../../interface';\nimport { getCssBorderRadii } from './utils';\n\nexport const generateBorderRadii = ({ borderRadius, customBorderRadii }: Pick<Theme, 'borderRadius' | 'customBorderRadii'>) => {\n  let mediumRadius: number,\n    largeRadius: number,\n    checkboxRadius: number = 4;\n  const fullRadius = 1000;\n  let isFull = false;\n  let isNone = false;\n\n  switch (borderRadius) {\n    case 'none': {\n      isNone = true;\n      mediumRadius = 0;\n      largeRadius = 0;\n      checkboxRadius = 0;\n      break;\n    }\n    case 'xs': {\n      mediumRadius = 2;\n      largeRadius = 4;\n      checkboxRadius = 2;\n      break;\n    }\n    case 'sm': {\n      mediumRadius = 4;\n      largeRadius = 8;\n      break;\n    }\n    case 'md': {\n      mediumRadius = 8;\n      largeRadius = 16;\n      break;\n    }\n    case 'xl': {\n      mediumRadius = 16;\n      largeRadius = 32;\n      break;\n    }\n    case 'full': {\n      mediumRadius = 24;\n      largeRadius = 32;\n      isFull = true;\n      break;\n    }\n    default:\n    case 'lg': {\n      mediumRadius = 12;\n      largeRadius = 24;\n      break;\n    }\n  }\n\n  document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-select', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-file', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-destructive-button', `${isFull ? fullRadius : mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-table-container', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-avatar', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-button-group', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-card', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-checkbox', `${checkboxRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-switch', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-radio', `${fullRadius}px`);\n\n  if (Boolean(customBorderRadii)) {\n    const cssBorderRadiiVars = getCssBorderRadii(customBorderRadii);\n    Object.entries(cssBorderRadiiVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n  }\n};\n"]}

package/dist/collection/utils/theme/generateTheme.js

@@ -2,10 +2,10 @@ import { DEFAULT_THEME } from "../../constants";
 import { generateBorderRadii } from "./generateBorderRadii";
 import { generateFont } from "./generateFont";
 import { generatePalette } from "./generatePalette";
-export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, }) => {
+export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, customBorderRadii, }) => {
     const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
     generateFont({ font, customFontSizes });
-    generateBorderRadii({ borderRadius });
+    generateBorderRadii({ borderRadius, customBorderRadii });
     return palette.isDarkBackground;
 };
 //# sourceMappingURL=generateTheme.js.map

package/dist/collection/utils/theme/generateTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,GACT,EAAW,EAAE;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;IAExC,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nexport const generateTheme = ({\n  foregroundColor = DEFAULT_THEME.foregroundColor,\n  backgroundColor = DEFAULT_THEME.backgroundColor,\n  font,\n  customPalette,\n  borderRadius,\n  customFontSizes,\n}: Theme): boolean => {\n  const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n  generateFont({ font, customFontSizes });\n\n  generateBorderRadii({ borderRadius });\n\n  return palette.isDarkBackground;\n};\n"]}
+{"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iBAAiB,GACX,EAAW,EAAE;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;IAExC,mBAAmB,CAAC,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC,CAAC;IAEzD,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nexport const generateTheme = ({\n  foregroundColor = DEFAULT_THEME.foregroundColor,\n  backgroundColor = DEFAULT_THEME.backgroundColor,\n  font,\n  customPalette,\n  borderRadius,\n  customFontSizes,\n  customBorderRadii,\n}: Theme): boolean => {\n  const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n  generateFont({ font, customFontSizes });\n\n  generateBorderRadii({ borderRadius, customBorderRadii });\n\n  return palette.isDarkBackground;\n};\n"]}

package/dist/collection/utils/theme/utils.js

@@ -20,6 +20,7 @@ const buildVars = (prev, obj) => {
     return resp;
 };
 export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
+export const getCssBorderRadii = (customBorderRadii) => buildVars('--cpsl-border-radius', customBorderRadii);
 export const overlayMix = (baseColor, overlayColor) => {
     const baseRGBA = parseToRgba(baseColor);
     const overlayRGBA = parseToRgba(overlayColor);

package/dist/collection/utils/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAEhI,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAE;IACpE,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEtK,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { parseToRgba, rgba } from 'color2k';\nimport { CustomPalette } from '../../interface';\nimport { overlay } from 'color-blend';\n\nexport const isColor = strColor => {\n  const s = new Option().style;\n  s.color = strColor;\n  return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n  let resp = {};\n\n  for (const k in obj) {\n    const name = `${prev}-${toKebabCase(k)}`;\n    if (typeof obj[k] === 'object' && obj[k] !== null) {\n      resp = { ...resp, ...buildVars(name, obj[k]) };\n    } else {\n      resp[name] = obj[k];\n    }\n  }\n\n  return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\n\nexport const overlayMix = (baseColor: string, overlayColor: string) => {\n  const baseRGBA = parseToRgba(baseColor);\n  const overlayRGBA = parseToRgba(overlayColor);\n\n  const finalRGBA = overlay({ r: baseRGBA[0], g: baseRGBA[1], b: baseRGBA[2], a: 0.1 }, { r: overlayRGBA[0], g: overlayRGBA[1], b: overlayRGBA[2], a: overlayRGBA[3] });\n\n  return rgba(finalRGBA.r, finalRGBA.g, finalRGBA.b, finalRGBA.a);\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAChI,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,iBAAoC,EAA2B,EAAE,CAAC,SAAS,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AAEzJ,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAE,EAAE;IACpE,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEtK,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { parseToRgba, rgba } from 'color2k';\nimport { CustomBorderRadii, CustomPalette } from '../../interface';\nimport { overlay } from 'color-blend';\n\nexport const isColor = strColor => {\n  const s = new Option().style;\n  s.color = strColor;\n  return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n  let resp = {};\n\n  for (const k in obj) {\n    const name = `${prev}-${toKebabCase(k)}`;\n    if (typeof obj[k] === 'object' && obj[k] !== null) {\n      resp = { ...resp, ...buildVars(name, obj[k]) };\n    } else {\n      resp[name] = obj[k];\n    }\n  }\n\n  return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\nexport const getCssBorderRadii = (customBorderRadii: CustomBorderRadii): { [k: string]: string } => buildVars('--cpsl-border-radius', customBorderRadii);\n\nexport const overlayMix = (baseColor: string, overlayColor: string) => {\n  const baseRGBA = parseToRgba(baseColor);\n  const overlayRGBA = parseToRgba(overlayColor);\n\n  const finalRGBA = overlay({ r: baseRGBA[0], g: baseRGBA[1], b: baseRGBA[2], a: 0.1 }, { r: overlayRGBA[0], g: overlayRGBA[1], b: overlayRGBA[2], a: overlayRGBA[3] });\n\n  return rgba(finalRGBA.r, finalRGBA.g, finalRGBA.b, finalRGBA.a);\n};\n"]}

package/dist/esm/cpsl-alert_33.entry.js

@@ -5131,7 +5131,7 @@ const CpslDropdown = class {
 };
 CpslDropdown.style = CpslDropdownStyle0;
 
-const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
+const cpslFileUploadCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-file-border-placeholder);--container-border-color:var(--cpsl-color-file-border-placeholder);--container-border-color-error:var(--cpsl-color-file-border-error);--container-background-color:var(--cpsl-color-file-surface-default);--container-background-color-disabled:var(--cpsl-color-file-surface-disabled);--container-background-color-drag:var(--cpsl-color-file-surface-drag);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-file);--container-padding-top:12px;--container-padding-bottom:12px;--container-padding-end:12px;--container-padding-start:12px;--container-height:48px;--container-gap:8px;--optional-label-color:var(--cpsl-color-text-secondary);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:0px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:0px;--sample-img-height:40px;--sample-img-width:40px;--sample-img-border-radius:8px;display:flex;flex-direction:column;gap:4px;font-family:var(--cpsl-font-family, inherit)}.container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;flex-wrap:wrap;width:100%;gap:var(--container-gap);cursor:pointer;position:relative;border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background:var(--container-background-color);box-shadow:var(--container-box-shadow)}.container.drag,.container:active{background:var(--container-background-color-drag)}.container.drag-error{cursor:no-drop}.container.error{border-color:var(--container-border-color-error)}input{position:absolute;width:100%;height:100%;top:0;left:0;margin:0px;opacity:0;cursor:pointer}.sample-img{height:var(--sample-img-height);width:var(--sample-img-width);border-radius:var(--sample-img-border-radius);object-fit:contain}.sample-image-name-container{display:flex;gap:4px;align-items:center;text-align:center}.sample-image-name-container cpsl-icon{z-index:10000;--height:16px;--width:16px}.inline-text{display:inline-block}.sample-image-name{display:inline-block;color:var(--cpsl-color-text-tertiary)}.label-container{flex:1}.file-container{display:flex;flex-direction:column;flex:1;gap:8px;justify-content:center;align-items:center}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.optional-label{display:inline-block;color:var(--optional-label-color);font-size:var(--label-font-size);font-weight:500}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}";
 const CpslFileUploadStyle0 = cpslFileUploadCss;
 
 var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -14891,7 +14891,7 @@ const CpslOverlay = class {
 };
 CpslOverlay.style = CpslOverlayStyle0;
 
-const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}";
+const cpslPaginationCss = ":host{display:block}.icon{--height:20px;--width:20px}.start-icon{transform:rotate(180deg)}.arrow-button{--button-secondary-icon-color:var(--cpsl-color-text-tertiary)}";
 const CpslPaginationStyle0 = cpslPaginationCss;
 
 const CpslPagination = class {
@@ -14968,7 +14968,7 @@ const CpslPagination = class {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8e6ec83618d2b44610155e25ec2c54e079810aec', onClick: this.handlePrevClick }, h("cpsl-icon", { key: '98f6960d6d1803d391e30f5b4bea63205a2b12c8', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '6d60771c0040ce028d2fe43c779f58a31a248bf8', onClick: this.handleNextClick }, h("cpsl-icon", { key: '770e0133a563622daa7683d65d289ec5247ec265', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8c78bd8f77c65535ceb6fc414f019b1fa7f8d7e8', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: 'da4779051c45a41a7fcec1fbe04eebf75a417e01', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '63f71be7e364edd629077d71ad4c401445807704', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'd21bc4f342374d026816d6c091fef282a77320d8', class: "icon", icon: "arrowNarrow" })))));
     }
     static get watchers() { return {
         "currentPage": ["watchChange"]
@@ -15182,7 +15182,7 @@ const CpslPopover = class {
     onOpenChange() {
         if (this.open) {
             window.addEventListener('click', this.handleClickOutside);
-            window.addEventListener('scroll', () => this.setPosition());
+            window.addEventListener('scroll', () => this.setPosition(), true);
         }
         else {
             window.removeEventListener('click', this.handleClickOutside);
@@ -15198,7 +15198,7 @@ const CpslPopover = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a5846acd01f652ff06d0f8fb842ab1c204b02c10', class: {
+        return (h(Host, { key: 'bb9a38fb37e6588041f6b09e064cbe85d0dd46b1', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -15206,7 +15206,7 @@ const CpslPopover = class {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '579332ea7cca439f8f331575e229c853109d0a06', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '92d5d72dc49d360b12a08028065ddc6e843a1b19' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '99478330639eed6be6f7e5a960ebb2f485692cff', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '2d15adf8c986698ce02858dfdca49047777e2c33' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15326,18 +15326,6 @@ const CpslSelect = class {
         this.cpslFocus = createEvent(this, "cpslFocus", 7);
         this.cpslSelectValueChange = createEvent(this, "cpslSelectValueChange", 7);
         this.inputId = `cpsl-select-${inputIds++}`;
-        this.resetStyles = () => {
-            document.documentElement.style.removeProperty('overflow');
-            document.body.style.removeProperty('padding-right');
-        };
-        this.measureScrollbarWidth = () => {
-            const scrollbox = document.createElement('div');
-            scrollbox.style.overflow = 'scroll';
-            document.body.appendChild(scrollbox);
-            const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
-            document.body.removeChild(scrollbox);
-            return scrollBarWidth;
-        };
         this.onBlur = (ev) => {
             this.hasFocus = false;
             this.popoverEl.closePopover();
@@ -15408,24 +15396,18 @@ const CpslSelect = class {
     }
     onPopoverOpen() {
         this.popoverOpen = true;
-        document.documentElement.style.overflow = 'hidden';
-        document.body.style.paddingRight = `${this.measureScrollbarWidth()}px`;
     }
     onPopoverClose() {
         this.popoverOpen = false;
-        this.resetStyles();
     }
     componentDidLoad() {
         this.popoverEl = this.el.shadowRoot.querySelector(`cpsl-popover`);
         this.anchorEl = this.el.shadowRoot.getElementById('select-container');
         this.selectItem();
     }
-    disconnectedCallback() {
-        this.resetStyles();
-    }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'f003552571504c992dff03463d3352c572bad02d', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: '81f80a9308efd7381b72d79762f2e80b1efff675', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '87bce962cd77da2ed32a33a52e0823f9762e7e7a', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: '5af6624ddb7dc97b00a6e15491cf74ed09afe032', name: "selected-item" }), h("div", { key: '2aac4d90d8abe8a23a0e8e94705b13744806886a', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: '562d171bfca20d3520422ad6e8e216ea05cd68ed', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: 'e492e0e95497bcd0c64ad6df39147b8b525fdd7c', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '174e62e95af2a23aea6daf8081b690069b8143d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: '22c98327b650ad5e355b65cf2a07170c691751d8', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '2212ea94c12e6612a3185e14f853ea543df7581a' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'a7b871c9da87ae9212dec7c0b8bd97ff3be4bafd', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '180fd8ef77b9bf1f6dcd2b59d5103f832a9f3cc3', class: "dropdown" }, h("div", { key: '55dce031838f22b5969912733ae15a60c7af0f49', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: '127909f8c47c6b6c2dcd21140c7f98c33b24ea1e', name: "items" }))))));
+        return (h(Host, { key: 'dfe6786c9be71ebd71fee236c9b569ef1ad30eac', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: 'fbe2cfb2d93558f647442e17b29713f37375be5a', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '9e5fdf3c056a7a6c13fe9ce45caf78e27482e779', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c721fcd057a142bad5f8f473c7b4daf090e7722a', name: "selected-item" }), h("div", { key: '58c94ace573965e8151ef4a9c0648385d6b1c4dc', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'ceb4c60607b6c2cbc17a086fe702045196afbd44', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '05cf53f1ce3f8f34e47082c591f2d75d4aeea11b', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: 'a395add0f06b0d10f1e2e6d0ea81478f4a1c07d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: 'e7f991ed99ed332f5f42e666bfd2d25eecff3113', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f734a586f0dd7e94ccb2d7806fc9a6a5bdb5f50b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'c45f42267e3b4945823e27f5901b58dc5545a51e', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'cd7bdc9a3e06a2c4aed9ebe12ec3cd070e323b12', class: "dropdown" }, h("div", { key: '0e1483542dd9d63ad548242a2bc2ecb2041f8ed5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e7697bc187fc433ccb2f5728f8944ff2162387d9', name: "items" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {