@limetech/lime-elements 37.55.5 → 37.55.6

package/dist/types/components.d.ts

@@ -1979,12 +1979,11 @@ export namespace Components {
         "contentCollection": HTMLCollection;
     }
     /**
-     * The portal component provides a way to render children into a DOM node that
-     * exist outside the DOM hierarchy of the parent component.
-     * When the limel-portal component is used, it creates a new DOM node (a div element)
-     * and appends it to a parent element (by default, the body of the document).
-     * The child elements of the limel-portal are then moved from
-     * their original location in the DOM to this new div element.
+     * The portal component provides a way to render children in the top layer of
+     * the document (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+     * When the limel-portal component is used, it renders a container with the
+     * `popover` attribute set to `manual` in order to render all content on top of
+     * everything else.
      * This technique is often used to overcome CSS stacking context issues,
      * or to render UI elements like modals, dropdowns, tooltips, etc.,
      * that need to visually "break out" of their container.
@@ -1994,19 +1993,10 @@ export namespace Components {
      * z-indexes, or other stacking context issues.
      * :::important
      * There are some caveats when using this component
-     * 1. Events might not bubble up as expected since the content is moved out to
-     * another DOM node.
-     * 2. Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web-component it will work without any issues.
-     * Alternatively, use the `style=""` html attribute.
-     * 3. Any component that is placed inside the container must have a style of
+     * 1. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * 4. When the node is moved in the DOM, `disconnectedCallback` and
-     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
-     * to do any tear-down, the appropriate setup will have to be done again on
-     * `connectedCallback`.
      * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
@@ -2016,14 +2006,6 @@ export namespace Components {
           * The element that the content should be positioned relative to. Defaults to the limel-portal element.
          */
         "anchor"?: HTMLElement;
-        /**
-          * A unique ID.
-         */
-        "containerId": string;
-        /**
-          * Dynamic styling that can be applied to the container holding the content.
-         */
-        "containerStyle": object;
         /**
           * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
          */
@@ -2032,10 +2014,6 @@ export namespace Components {
           * Decides which direction the portal content should open.
          */
         "openDirection": OpenDirection;
-        /**
-          * The `parent` property specifies the parent element where the content of the portal will be moved to. By default, it is set to `document.body`, meaning the content will be appended as a child of the body element in the DOM. If you want the content to be appended to a different element, you can specify that element by setting this property. Please note that the specified parent element should exist in the DOM at the time of rendering the portal.
-         */
-        "parent": HTMLElement;
         /**
           * Position of the content.
          */
@@ -3858,12 +3836,11 @@ declare global {
         new (): HTMLLimelPopoverSurfaceElement;
     };
     /**
-     * The portal component provides a way to render children into a DOM node that
-     * exist outside the DOM hierarchy of the parent component.
-     * When the limel-portal component is used, it creates a new DOM node (a div element)
-     * and appends it to a parent element (by default, the body of the document).
-     * The child elements of the limel-portal are then moved from
-     * their original location in the DOM to this new div element.
+     * The portal component provides a way to render children in the top layer of
+     * the document (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+     * When the limel-portal component is used, it renders a container with the
+     * `popover` attribute set to `manual` in order to render all content on top of
+     * everything else.
      * This technique is often used to overcome CSS stacking context issues,
      * or to render UI elements like modals, dropdowns, tooltips, etc.,
      * that need to visually "break out" of their container.
@@ -3873,19 +3850,10 @@ declare global {
      * z-indexes, or other stacking context issues.
      * :::important
      * There are some caveats when using this component
-     * 1. Events might not bubble up as expected since the content is moved out to
-     * another DOM node.
-     * 2. Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web-component it will work without any issues.
-     * Alternatively, use the `style=""` html attribute.
-     * 3. Any component that is placed inside the container must have a style of
+     * 1. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * 4. When the node is moved in the DOM, `disconnectedCallback` and
-     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
-     * to do any tear-down, the appropriate setup will have to be done again on
-     * `connectedCallback`.
      * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
@@ -6362,12 +6330,11 @@ declare namespace LocalJSX {
         "contentCollection"?: HTMLCollection;
     }
     /**
-     * The portal component provides a way to render children into a DOM node that
-     * exist outside the DOM hierarchy of the parent component.
-     * When the limel-portal component is used, it creates a new DOM node (a div element)
-     * and appends it to a parent element (by default, the body of the document).
-     * The child elements of the limel-portal are then moved from
-     * their original location in the DOM to this new div element.
+     * The portal component provides a way to render children in the top layer of
+     * the document (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+     * When the limel-portal component is used, it renders a container with the
+     * `popover` attribute set to `manual` in order to render all content on top of
+     * everything else.
      * This technique is often used to overcome CSS stacking context issues,
      * or to render UI elements like modals, dropdowns, tooltips, etc.,
      * that need to visually "break out" of their container.
@@ -6377,19 +6344,10 @@ declare namespace LocalJSX {
      * z-indexes, or other stacking context issues.
      * :::important
      * There are some caveats when using this component
-     * 1. Events might not bubble up as expected since the content is moved out to
-     * another DOM node.
-     * 2. Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web-component it will work without any issues.
-     * Alternatively, use the `style=""` html attribute.
-     * 3. Any component that is placed inside the container must have a style of
+     * 1. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * 4. When the node is moved in the DOM, `disconnectedCallback` and
-     * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
-     * to do any tear-down, the appropriate setup will have to be done again on
-     * `connectedCallback`.
      * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
@@ -6399,14 +6357,6 @@ declare namespace LocalJSX {
           * The element that the content should be positioned relative to. Defaults to the limel-portal element.
          */
         "anchor"?: HTMLElement;
-        /**
-          * A unique ID.
-         */
-        "containerId"?: string;
-        /**
-          * Dynamic styling that can be applied to the container holding the content.
-         */
-        "containerStyle"?: object;
         /**
           * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
          */
@@ -6415,10 +6365,6 @@ declare namespace LocalJSX {
           * Decides which direction the portal content should open.
          */
         "openDirection"?: OpenDirection;
-        /**
-          * The `parent` property specifies the parent element where the content of the portal will be moved to. By default, it is set to `document.body`, meaning the content will be appended as a child of the body element in the DOM. If you want the content to be appended to a different element, you can specify that element by setting this property. Please note that the specified parent element should exist in the DOM at the time of rendering the portal.
-         */
-        "parent"?: HTMLElement;
         /**
           * Position of the content.
          */
@@ -7988,12 +7934,11 @@ declare module "@stencil/core" {
              */
             "limel-popover-surface": LocalJSX.LimelPopoverSurface & JSXBase.HTMLAttributes<HTMLLimelPopoverSurfaceElement>;
             /**
-             * The portal component provides a way to render children into a DOM node that
-             * exist outside the DOM hierarchy of the parent component.
-             * When the limel-portal component is used, it creates a new DOM node (a div element)
-             * and appends it to a parent element (by default, the body of the document).
-             * The child elements of the limel-portal are then moved from
-             * their original location in the DOM to this new div element.
+             * The portal component provides a way to render children in the top layer of
+             * the document (https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+             * When the limel-portal component is used, it renders a container with the
+             * `popover` attribute set to `manual` in order to render all content on top of
+             * everything else.
              * This technique is often used to overcome CSS stacking context issues,
              * or to render UI elements like modals, dropdowns, tooltips, etc.,
              * that need to visually "break out" of their container.
@@ -8003,19 +7948,10 @@ declare module "@stencil/core" {
              * z-indexes, or other stacking context issues.
              * :::important
              * There are some caveats when using this component
-             * 1. Events might not bubble up as expected since the content is moved out to
-             * another DOM node.
-             * 2. Any styling that is applied to content from the parent will be lost, if the
-             * content is just another web-component it will work without any issues.
-             * Alternatively, use the `style=""` html attribute.
-             * 3. Any component that is placed inside the container must have a style of
+             * 1. Any component that is placed inside the container must have a style of
              * `max-height: inherit`. This ensures that its placement is calculated
              * correctly in relation to the trigger, and that it never covers its own
              * trigger.
-             * 4. When the node is moved in the DOM, `disconnectedCallback` and
-             * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
-             * to do any tear-down, the appropriate setup will have to be done again on
-             * `connectedCallback`.
              * :::
              * @private 
              * @exampleComponent limel-example-portal-basic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.55.5",
+  "version": "37.55.6",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -59,12 +59,12 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.11",
-    "eslint": "^9.8.0",
+    "dayjs": "^1.11.12",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
@@ -73,13 +73,13 @@
     "eslint-plugin-sonarjs": "^1.0.4",
     "eslint-plugin-tsdoc": "^0.3.0",
     "flatpickr": "^4.6.13",
-    "globals": "^15.8.0",
+    "globals": "^15.9.0",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^8.1.4",
-    "kompendium": "^0.14.2",
+    "kompendium": "^0.14.3",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
     "moment": "^2.30.1",

package/dist/lime-elements/p-5224d7bb.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,g as s}from"./p-443111b3.js";import{c as h}from"./p-3ccdc4a3.js";import{i as n,a}from"./p-cc9ebbef.js";import"./p-4ffb9b7a.js";import{m as r}from"./p-6aa5e7b8.js";import{M as l}from"./p-9ab3a908.js";import"./p-eab67c09.js";import"./p-2ff3f85e.js";import"./p-11d5d44e.js";import"./p-dcc97cc2.js";import"./p-083d1db4.js";class o{constructor(t="en"){this.language=t}formatDate(t,i){if(t){return r(t).locale(this.getLanguage()).format(i)}return""}parseDate(t,i){if(t){return r(t,i).toDate()}return null}getLanguage(){if(this.language==="no"){return"nb"}return this.language}getDateFormat(t){return{date:"L",time:"LT",week:"[w] W GGGG",month:"MM/YYYY",quarter:"[Q]Q YYYY",year:"YYYY",datetime:"L - LT"}[t]||"L - LT"}}const d=":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";const u={date:"date",time:"time",week:n()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"};const m={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this.portalId=`date-picker-calendar-${h()}`;this.documentClickListener=t=>{if(t.composedPath().includes(this.textField)){return}const i=document.querySelector(`#${this.portalId}`);if(!i.contains(t.target)){this.hideCalendar()}};this.formatValue=t=>this.dateFormatter.formatDate(t,this.internalFormat);this.disabled=false;this.readonly=false;this.invalid=false;this.label=undefined;this.placeholder=undefined;this.helperText=undefined;this.required=false;this.value=undefined;this.type="datetime";this.format=undefined;this.language="en";this.formatter=undefined;this.internalFormat=undefined;this.showPortal=false;this.handleCalendarChange=this.handleCalendarChange.bind(this);this.handleInputElementChange=this.handleInputElementChange.bind(this);this.showCalendar=this.showCalendar.bind(this);this.dateFormatter=new o(this.language);this.clearValue=this.clearValue.bind(this);this.hideCalendar=this.hideCalendar.bind(this);this.onInputClick=this.onInputClick.bind(this);this.nativeChangeHandler=this.nativeChangeHandler.bind(this);this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(n()||a());this.updateInternalFormatAndType()}componentWillUpdate(){this.updateInternalFormatAndType()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly){t.trailingIcon="clear_symbol"}if(this.useNative){return e("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formatValue(this.value),type:this.nativeType,onChange:this.nativeChangeHandler})}const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");const s=this.formatter||this.formatValue;return[e("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,placeholder:this.placeholder,helperText:this.helperText,required:this.required,value:this.value?s(this.value):"",onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),e("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":i}},e("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,formatter:s,onChange:this.handleCalendarChange}))]}updateInternalFormatAndType(){this.nativeType=u[this.type||"default"];this.nativeFormat=m[this.nativeType];if(this.useNative){this.internalFormat=this.nativeFormat}else if(this.formatter||this.format){this.internalFormat=this.format}else{this.internalFormat=this.dateFormatter.getDateFormat(this.type)}}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.change.emit(i)}showCalendar(t){this.showPortal=true;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i}));t.stopPropagation();document.addEventListener("mousedown",this.documentClickListener,{passive:true});document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:true})}preventBlurFromCalendarContainer(t){if(t.relatedTarget===this.datePickerCalendar){t.stopPropagation()}}hideCalendar(){setTimeout((()=>{this.showPortal=false}));document.removeEventListener("mousedown",this.documentClickListener);document.removeEventListener("blur",this.preventBlurFromCalendarContainer);if(!this.pickerIsAutoClosing()){this.fixFlatpickrFocusBug()}}fixFlatpickrFocusBug(){const t=new l(this.textField.shadowRoot.querySelector(".mdc-text-field"));t.getDefaultFoundation().deactivateFocus()}handleCalendarChange(t){const i=t.detail;t.stopPropagation();if(this.pickerIsAutoClosing()){this.hideCalendar()}this.change.emit(i)}onInputClick(t){if(this.disabled||this.readonly){return}if(this.showPortal){return}this.showCalendar(t)}handleInputElementChange(t){if(t.detail===""){this.clearValue()}t.stopPropagation()}pickerIsAutoClosing(){return this.type!=="datetime"&&this.type!=="time"}clearValue(){this.change.emit(null)}get host(){return s(this)}};c.style=d;export{c as limel_date_picker};
-//# sourceMappingURL=p-5224d7bb.entry.js.map

package/dist/lime-elements/p-5224d7bb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DateFormatter","constructor","language","this","formatDate","date","dateFormat","moment","locale","getLanguage","format","parseDate","toDate","getDateFormat","type","time","week","month","quarter","year","datetime","datePickerCss","nativeTypeForConsumerType","isIOSDevice","default","nativeFormatForType","DatePicker","hostRef","portalId","createRandomString","documentClickListener","event","composedPath","includes","textField","element","document","querySelector","contains","target","hideCalendar","formatValue","value","dateFormatter","internalFormat","handleCalendarChange","bind","handleInputElementChange","showCalendar","clearValue","onInputClick","nativeChangeHandler","preventBlurFromCalendarContainer","componentWillLoad","useNative","readonly","isAndroidDevice","updateInternalFormatAndType","componentWillUpdate","render","inputProps","onAction","trailingIcon","h","disabled","invalid","label","helperText","required","nativeType","onChange","dropdownZIndex","getComputedStyle","host","getPropertyValue","formatter","Object","assign","placeholder","onFocus","onBlur","onClick","ref","el","containerId","visible","showPortal","containerStyle","datePickerCalendar","isOpen","nativeFormat","stopPropagation","detail","change","emit","inputElement","shadowRoot","setTimeout","addEventListener","passive","capture","relatedTarget","removeEventListener","pickerIsAutoClosing","fixFlatpickrFocusBug","mdcTextField","MDCTextField","getDefaultFoundation","deactivateFocus"],"sources":["./src/components/date-picker/dateFormatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n    private language: string;\n\n    public constructor(language: string = 'en') {\n        this.language = language;\n    }\n\n    public formatDate(date: Date, dateFormat: string) {\n        if (date) {\n            return moment(date).locale(this.getLanguage()).format(dateFormat);\n        }\n\n        return '';\n    }\n\n    public parseDate(date: string, dateFormat: string) {\n        if (date) {\n            return moment(date, dateFormat).toDate();\n        }\n\n        return null;\n    }\n\n    public getLanguage() {\n        if (this.language === 'no') {\n            return 'nb';\n        }\n\n        return this.language;\n    }\n\n    public getDateFormat(type: DateType) {\n        return (\n            {\n                date: 'L',\n                time: 'LT',\n                week: '[w] W GGGG',\n                month: 'MM/YYYY',\n                quarter: '[Q]Q YYYY',\n                year: 'YYYY',\n                datetime: 'L - LT',\n            }[type] || 'L - LT'\n        );\n    }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n    position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n    pointer-events: none;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Element,\n    EventEmitter,\n    Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n    date: 'date',\n    time: 'time',\n    // Mobile Safari feature detects as capable of input type `week`,\n    // but it just displays a non-interactive input\n    // TODO(ads): remove this when support is decent on iOS!\n    week: isIOSDevice() ? 'date' : 'week',\n    month: 'month',\n    quarter: 'date',\n    year: 'date',\n    datetime: 'datetime-local',\n    default: 'datetime-local',\n};\nconst nativeFormatForType = {\n    date: 'Y-MM-DD',\n    time: 'HH:mm',\n    week: 'GGGG-[W]WW',\n    month: 'Y-MM',\n    'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n    tag: 'limel-date-picker',\n    shadow: true,\n    styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the date picker is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Text to display next to the date picker\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * The placeholder text shown inside the input field, when the field is focused and empty\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * The value of the field.\n     */\n    @Prop()\n    public value: Date;\n\n    /**\n     * Type of date picker.\n     */\n    @Prop({ reflect: true })\n    public type: DateType = 'datetime';\n\n    /**\n     * Format to display the selected date in.\n     */\n    @Prop({ reflect: true })\n    public format: string;\n\n    /**\n     * Defines the localisation for translations and date formatting.\n     * Property `format` customizes the localized date format.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Custom formatting function. Will be used for date formatting.\n     *\n     * :::note\n     * overrides `format` and `language`\n     * :::\n     */\n    @Prop()\n    public formatter?: (date: Date) => string;\n\n    /**\n     * Emitted when the date picker value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Date>;\n\n    @Element()\n    private host: HTMLLimelDatePickerElement;\n\n    @State()\n    private internalFormat: string;\n    @State()\n    private showPortal = false;\n\n    private useNative: boolean;\n    private nativeType: InputType;\n    private nativeFormat: string;\n    private textField: HTMLElement;\n    private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n    private portalId = `date-picker-calendar-${createRandomString()}`;\n    private dateFormatter: DateFormatter;\n\n    constructor() {\n        this.handleCalendarChange = this.handleCalendarChange.bind(this);\n        this.handleInputElementChange =\n            this.handleInputElementChange.bind(this);\n        this.showCalendar = this.showCalendar.bind(this);\n        this.dateFormatter = new DateFormatter(this.language);\n        this.clearValue = this.clearValue.bind(this);\n        this.hideCalendar = this.hideCalendar.bind(this);\n        this.onInputClick = this.onInputClick.bind(this);\n        this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n        this.preventBlurFromCalendarContainer =\n            this.preventBlurFromCalendarContainer.bind(this);\n    }\n\n    public componentWillLoad() {\n        this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n        this.updateInternalFormatAndType();\n    }\n\n    public componentWillUpdate() {\n        this.updateInternalFormatAndType();\n    }\n\n    public render() {\n        const inputProps: any = {\n            onAction: this.clearValue,\n        };\n\n        if (this.value && !this.readonly) {\n            inputProps.trailingIcon = 'clear_symbol';\n        }\n\n        if (this.useNative) {\n            return (\n                <limel-input-field\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    invalid={this.invalid}\n                    label={this.label}\n                    helperText={this.helperText}\n                    required={this.required}\n                    value={this.formatValue(this.value)}\n                    type={this.nativeType}\n                    onChange={this.nativeChangeHandler}\n                />\n            );\n        }\n\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        const formatter = this.formatter || this.formatValue;\n\n        return [\n            <limel-input-field\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                placeholder={this.placeholder}\n                helperText={this.helperText}\n                required={this.required}\n                value={this.value ? formatter(this.value) : ''}\n                onFocus={this.showCalendar}\n                onBlur={this.hideCalendar}\n                onClick={this.onInputClick}\n                onChange={this.handleInputElementChange}\n                ref={(el) => (this.textField = el)}\n                {...inputProps}\n            />,\n            <limel-portal\n                containerId={this.portalId}\n                visible={this.showPortal}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-flatpickr-adapter\n                    format={this.internalFormat}\n                    language={this.language}\n                    type={this.type}\n                    value={this.value}\n                    ref={(el) => (this.datePickerCalendar = el)}\n                    isOpen={this.showPortal}\n                    formatter={formatter}\n                    onChange={this.handleCalendarChange}\n                />\n            </limel-portal>,\n        ];\n    }\n\n    private updateInternalFormatAndType() {\n        this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n        this.nativeFormat = nativeFormatForType[this.nativeType];\n\n        if (this.useNative) {\n            this.internalFormat = this.nativeFormat;\n        } else if (this.formatter || this.format) {\n            this.internalFormat = this.format;\n        } else {\n            this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n        }\n    }\n\n    private nativeChangeHandler(event: CustomEvent<string>) {\n        event.stopPropagation();\n        const date = this.dateFormatter.parseDate(\n            event.detail,\n            this.internalFormat,\n        );\n        this.change.emit(date);\n    }\n\n    private showCalendar(event) {\n        this.showPortal = true;\n        const inputElement = this.textField.shadowRoot.querySelector('input');\n        setTimeout(() => {\n            this.datePickerCalendar.inputElement = inputElement;\n        });\n        event.stopPropagation();\n\n        document.addEventListener('mousedown', this.documentClickListener, {\n            passive: true,\n        });\n\n        document.addEventListener(\n            'blur',\n            this.preventBlurFromCalendarContainer,\n            {\n                capture: true,\n            },\n        );\n    }\n\n    private preventBlurFromCalendarContainer(event) {\n        // We don't want the input element to lose focus when we pick\n        // a date in the calendar container.\n        // This is also required in order to not close the non\n        // automatically closing pickers (type datetime and time)\n        // when you pick a value.\n        if (event.relatedTarget === this.datePickerCalendar) {\n            event.stopPropagation();\n        }\n    }\n\n    private hideCalendar() {\n        setTimeout(() => {\n            this.showPortal = false;\n        });\n        document.removeEventListener('mousedown', this.documentClickListener);\n        document.removeEventListener(\n            'blur',\n            this.preventBlurFromCalendarContainer,\n        );\n\n        if (!this.pickerIsAutoClosing()) {\n            this.fixFlatpickrFocusBug();\n        }\n    }\n\n    private fixFlatpickrFocusBug() {\n        // Flatpickr removes the focus from the input field\n        // but the 'visual focus' is still there\n        const mdcTextField = new MDCTextField(\n            this.textField.shadowRoot.querySelector('.mdc-text-field'),\n        );\n        mdcTextField.getDefaultFoundation().deactivateFocus();\n    }\n\n    private documentClickListener = (event: MouseEvent) => {\n        if (event.composedPath().includes(this.textField)) {\n            return;\n        }\n\n        const element = document.querySelector(`#${this.portalId}`);\n        if (!element.contains(event.target as Node)) {\n            this.hideCalendar();\n        }\n    };\n\n    private handleCalendarChange(event) {\n        const date = event.detail;\n        event.stopPropagation();\n        if (this.pickerIsAutoClosing()) {\n            this.hideCalendar();\n        }\n\n        this.change.emit(date);\n    }\n\n    private onInputClick(event) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.showPortal) {\n            return;\n        }\n\n        this.showCalendar(event);\n    }\n\n    private handleInputElementChange(event) {\n        if (event.detail === '') {\n            this.clearValue();\n        }\n\n        event.stopPropagation();\n    }\n\n    private pickerIsAutoClosing() {\n        return this.type !== 'datetime' && this.type !== 'time';\n    }\n\n    private clearValue() {\n        this.change.emit(null);\n    }\n\n    private formatValue = (value: Date): string =>\n        this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-53fc6f0e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,g as r}from"./p-443111b3.js";import{c as i}from"./p-3ccdc4a3.js";import{E as s}from"./p-e03dfe70.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,t){var o;if(e.contains(t)||((o=e.shadowRoot)===null||o===void 0?void 0:o.contains(t))){return true}const r=c(t);if(!r){return false}return a(e,r)}function c(e){const t=e.closest(".limel-portal--container");if(t){return t.portalSource}const o=e.getRootNode();return o.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(o){e(this,o);this.close=t(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const t={"aria-haspopup":true,"aria-expanded":this.open,"aria-controls":this.portalId,role:"button"};for(const[o,r]of Object.entries(t)){if(!r){e.removeAttribute(o)}else{e.setAttribute(o,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();const t=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return o("div",{class:"trigger-anchor"},o("slot",{name:"trigger"}),o("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t},openDirection:this.openDirection},o("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const t=e.target;const o=a(this.host,t);if(this.open&&!o){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const t=getComputedStyle(this.host);const o=e.map((e=>t.getPropertyValue(e)));return n(e,o)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const u=class{constructor(t){e(this,t);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return o("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((t=>{if(t.slot==="trigger"){return}e.appendChild(t)}))}get host(){return r(this)}};u.style=d;export{l as limel_popover,u as limel_popover_surface};
-//# sourceMappingURL=p-53fc6f0e.entry.js.map

package/dist/lime-elements/p-53fc6f0e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","portalId","role","value","Object","entries","removeAttribute","setAttribute","String","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement,\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--popover-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{ 'z-index': popoverZIndex }}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.target as HTMLElement;\n        const clickedInside = portalContains(this.host, element);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--shadow-depth-16);\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.75;\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"mappings":"sSAWgBA,EACZC,EACAC,G,MAEA,GAAID,EAAQE,SAASD,MAAUE,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAED,SAASD,IAAQ,CAChE,OAAO,I,CAGX,MAAMI,EAASC,EAAWL,GAC1B,IAAKI,EAAQ,CACT,OAAO,K,CAGX,OAAON,EAAeC,EAASK,EACnC,CAEA,SAASC,EAAWN,GAChB,MAAMO,EAAcP,EAAQQ,QAAQ,4BACpC,GAAID,EAAQ,CACR,OAAOA,EAAOE,Y,CAGlB,MAAMC,EAAWV,EAAQW,cAEzB,OAAOD,EAASE,IACpB,CCpCA,MAAMC,EAAa,0D,MCsENC,EAAO,MAwBhBC,YAAAC,G,uCA+EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,EAGbR,KAAAS,qBAAwB1B,IAC5B,MAAM2B,EAAa,CACf,gBAAiB,KACjB,gBAAiBV,KAAKW,KACtB,gBAAiBX,KAAKY,SACtBC,KAAM,UAGV,IAAK,MAAOV,EAAKW,KAAUC,OAAOC,QAAQN,GAAa,CACnD,IAAKI,EAAO,CACR/B,EAAQkC,gBAAgBd,E,KACrB,CACHpB,EAAQmC,aAAaf,EAAKgB,OAAOL,G,cAxH/B,M,6BAoBVd,KAAKY,SAAWQ,IAChBpB,KAAKqB,oBAAsBrB,KAAKqB,oBAAoBC,KAAKtB,K,CAInDuB,YACNvB,KAAKwB,qB,CAGFC,oBACHzB,KAAKwB,qB,CAGFE,qBACH,MAAMC,EAAc3B,KAAKL,KAAKR,WAAWyC,cAAc,QACvDD,EAAYE,mBAAmBC,QAAQ9B,KAAKS,qB,CAGxCe,sBACJ,GAAIxB,KAAKW,KAAM,CACXoB,SAASC,iBAAiB,QAAShC,KAAKqB,oBAAqB,CACzDY,QAAS,OAEbF,SAASC,iBAAiB,QAAShC,KAAKC,qB,KACrC,CACH8B,SAASG,oBAAoB,QAASlC,KAAKqB,qBAC3CU,SAASG,oBAAoB,QAASlC,KAAKC,qB,EAI5CkC,SACH,MAAMC,EAAgBpC,KAAKqC,mBAC3B,MAAMC,EAAgBC,iBAAiBvC,KAAKL,MAAM6C,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS5C,KAAKW,KACdkC,YAAa7C,KAAKY,SAClBkC,eAAgB,CAAE,UAAWR,GAC7BS,cAAe/C,KAAK+C,eAEpBN,EAAA,yBACIO,kBAAmBhD,KAAKL,KAAKsD,SAC7BC,MAAOd,K,CAOnBf,oBAAoBnB,GACxB,MAAMnB,EAAuBmB,EAAMiD,OACnC,MAAMC,EAAgBtE,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKW,OAASyC,EAAe,CAC7BlD,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIX6B,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBvC,KAAKL,MACpC,MAAM2D,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFC1KxC,MAAMI,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH5D,KAAK6D,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkB/D,KAAKL,KAAKR,WAAWyC,cACzC,0BAGJoC,MAAMC,KAAKjE,KAAKgD,mBAAmBlB,SAAS9C,IACxC,GAAIA,EAAMkF,OAAS,UAAW,CAC1B,M,CAGJH,EAAgBI,YAAYnF,EAAM,G"}