@govtechsg/sgds-web-component 3.0.0-rc.1 → 3.0.0-rc.2

package/components/Datepicker/datepicker-input.d.ts

@@ -13,8 +13,10 @@ export declare class DatepickerInput extends SgdsInput {
     shadowInput: Promise<HTMLInputElement>;
     private mask;
     constructor();
-    connectedCallback(): void;
-    firstUpdated(changes: any): Promise<void>;
+    protected _handleChange(e: Event): Promise<void>;
+    /** @internal */
+    _handleIsTouched(): void;
+    firstUpdated(changedProperties: any): Promise<void>;
     private _applyInputMask;
     updateMaskValue(): void;
     private _validateInput;

package/components/Datepicker/datepicker-input.js

@@ -6,6 +6,7 @@ import { property, queryAsync } from 'lit/decorators.js';
 import { setTimeToNoon, DATE_PATTERNS } from '../../utils/time.js';
 import { SgdsInput } from '../Input/sgds-input.js';
 import css_248z from './datepicker-input2.js';
+import { watch } from '../../utils/watch.js';
 
 class DatepickerInput extends SgdsInput {
     constructor() {
@@ -40,15 +41,28 @@ class DatepickerInput extends SgdsInput {
             }
         };
         this.type = "text";
-        this.hasFeedback = true;
-        this._handleValueChange = () => null;
+        this.hasFeedback = "both";
+        // this._handleChange = () => null;
+        // this._handleInputChange = () => null
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("sgds-change", this._validateInput);
+    // connectedCallback(): void {
+    //   super.connectedCallback();
+    //   this.addEventListener("sgds-change", this._validateInput);
+    // }
+    async _handleChange(e) {
+        this.value = this.input.value;
+        this.emit("sgds-change");
+        super._mixinHandleChange(e);
+        await this._validateInput();
     }
-    async firstUpdated(changes) {
-        super.firstUpdated(changes);
+    /** @internal */
+    _handleIsTouched() {
+        if (this._isTouched && this.required) {
+            this.invalid = true;
+        }
+    }
+    async firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         this._applyInputMask(this.dateFormat);
     }
     async _applyInputMask(dateFormat) {
@@ -145,6 +159,9 @@ __decorate([
 __decorate([
     queryAsync("input")
 ], DatepickerInput.prototype, "shadowInput", void 0);
+__decorate([
+    watch("_isTouched", { waitUntilFirstUpdate: true })
+], DatepickerInput.prototype, "_handleIsTouched", null);
 
 export { DatepickerInput, DatepickerInput as default };
 //# sourceMappingURL=datepicker-input.js.map

package/components/Datepicker/datepicker-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-input.js","sources":["../../../src/components/Datepicker/datepicker-input.ts"],"sourcesContent":["import { isAfter, isBefore, isValid, parse } from \"date-fns\";\nimport IMask, { InputMask } from \"imask\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nimport datepickerInputStyles from \"./datepicker-input.css\";\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\nexport class DatepickerInput extends SgdsInput {\n  static styles = [...SgdsInput.styles, datepickerInputStyles];\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: DateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate: string;\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate: string;\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  @queryAsync(\"input\")\n  shadowInput: Promise<HTMLInputElement>;\n\n  private mask: InputMask;\n  constructor() {\n    super();\n    this.type = \"text\";\n    this.hasFeedback = true;\n    this._handleValueChange = () => null;\n  }\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-change\", this._validateInput);\n  }\n\n  async firstUpdated(changes) {\n    super.firstUpdated(changes);\n    this._applyInputMask(this.dateFormat);\n  }\n  private async _applyInputMask(dateFormat: string) {\n    const shadowInput = await this.shadowInput;\n    const imPattern =\n      this.mode === \"single\" ? DATE_PATTERNS[dateFormat].imPattern : DATE_PATTERNS[dateFormat].imRangePattern;\n    const blocks = {\n      d: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      m: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 },\n      D: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      M: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      Y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 }\n    };\n    const maskOptions = {\n      mask: imPattern,\n      pattern: imPattern,\n      eager: true,\n      overwrite: true,\n      // define str -> date convertion\n      parse: function (str: string) {\n        const dates = str.split(\" - \");\n        return dates.map(date => parse(date, DATE_PATTERNS[dateFormat].fnsPattern, new Date()));\n      },\n      format: function (dateArr: Date[]) {\n        const dateStrings = dateArr.map(date => {\n          let dayStr: string,\n            monthStr = \"\";\n          const day = date.getDate();\n          const month = date.getMonth() + 1;\n          const year = date.getFullYear();\n\n          if (day < 10) dayStr = \"0\" + day;\n          if (month < 10) monthStr = \"0\" + month;\n\n          return [dayStr, monthStr, year].join(\"/\");\n        });\n        return dateStrings.join(\" - \");\n      },\n      lazy: false,\n      blocks\n    };\n\n    this.mask = IMask(shadowInput, maskOptions);\n    this.mask.on(\"accept\", () => {\n      this.value = this.mask.masked.value;\n      this.emit(\"sgds-mask-input-change\", { detail: this.value });\n    });\n    /**\n     * Validation after date is complete\n     */\n    this.mask.on(\"complete\", this._validateInput);\n  }\n  public updateMaskValue() {\n    this.mask?.updateValue();\n  }\n  private _validateInput = async () => {\n    const dates = this.mask.value.split(\" - \");\n    const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());\n    const dateArray: Date[] | string[] = noEmptyDates.map(date =>\n      setTimeToNoon(parse(date, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n    );\n    const invalidDates = dateArray.filter(\n      date =>\n        !isValid(date) ||\n        isBefore(date, new Date(0, 0, 1)) ||\n        isBefore(date, setTimeToNoon(new Date(this.minDate))) ||\n        isAfter(date, setTimeToNoon(new Date(this.maxDate)))\n    );\n\n    if (invalidDates.length > 0) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (this.mode === \"range\" && dateArray.length === 1) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (invalidDates.length === 0 && dateArray.length > 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-selectdates-input\", { detail: dateArray });\n    }\n    if (dateArray.length === 0 && invalidDates.length === 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-empty-input\");\n    }\n  };\n\n  public destroyInputMask() {\n    this.mask?.destroy();\n  }\n  public async applyInputMask() {\n    return await this._applyInputMask(this.dateFormat);\n  }\n  public async focus() {\n    const input = await this.shadowInput;\n    return input.focus();\n  }\n  render() {\n    return html`\n      ${this._renderLabel()} ${this._renderHintText()}\n      <div class=\"input-container\">\n      <div class=\"input-feedback\">\n        ${this._renderInput()}\n        ${this._renderFeedback()}\n        </div>\n        <slot name=\"calendar-btn\"></slot>\n        <slot name=\"reset-btn\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerInput;\n"],"names":["datepickerInputStyles"],"mappings":"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"}
+{"version":3,"file":"datepicker-input.js","sources":["../../../src/components/Datepicker/datepicker-input.ts"],"sourcesContent":["import { isAfter, isBefore, isValid, parse } from \"date-fns\";\nimport IMask, { InputMask } from \"imask\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { DATE_PATTERNS, setTimeToNoon } from \"../../utils/time\";\nimport { SgdsInput } from \"../Input/sgds-input\";\nimport datepickerInputStyles from \"./datepicker-input.css\";\nimport { watch } from \"../../utils/watch\";\nexport type DateFormat = \"MM/DD/YYYY\" | \"DD/MM/YYYY\" | \"YYYY/MM/DD\";\n\nexport class DatepickerInput extends SgdsInput {\n  static styles = [...SgdsInput.styles, datepickerInputStyles];\n  /** Date format reflected on input  */\n  @property({ type: String }) dateFormat: DateFormat = \"DD/MM/YYYY\";\n\n  /** ISO date string to set the lowest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) minDate: string;\n\n  /** ISO date string to set the highest allowable date value. e.g. \"2016-05-19T12:00:00.000Z\" */\n  @property({ type: String }) maxDate: string;\n\n  /** Changes DatePicker to single date selection or range date selection */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  @queryAsync(\"input\")\n  shadowInput: Promise<HTMLInputElement>;\n\n  private mask: InputMask;\n  constructor() {\n    super();\n    this.type = \"text\";\n    this.hasFeedback = \"both\";\n    // this._handleChange = () => null;\n    // this._handleInputChange = () => null\n  }\n  // connectedCallback(): void {\n  //   super.connectedCallback();\n  //   this.addEventListener(\"sgds-change\", this._validateInput);\n  // }\n\n  protected override async _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n    await this._validateInput();\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  override _handleIsTouched() {\n    if (this._isTouched && this.required) {\n      this.invalid = true;\n    }\n  }\n  async firstUpdated(changedProperties) {\n    super.firstUpdated(changedProperties);\n    this._applyInputMask(this.dateFormat);\n  }\n  private async _applyInputMask(dateFormat: string) {\n    const shadowInput = await this.shadowInput;\n    const imPattern =\n      this.mode === \"single\" ? DATE_PATTERNS[dateFormat].imPattern : DATE_PATTERNS[dateFormat].imRangePattern;\n    const blocks = {\n      d: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      m: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 },\n      D: { mask: IMask.MaskedRange, placeholderChar: \"d\", from: 0, to: 9, maxLength: 1 },\n      M: { mask: IMask.MaskedRange, placeholderChar: \"m\", from: 0, to: 9, maxLength: 1 },\n      Y: { mask: IMask.MaskedRange, placeholderChar: \"y\", from: 0, to: 9, maxLength: 1 }\n    };\n    const maskOptions = {\n      mask: imPattern,\n      pattern: imPattern,\n      eager: true,\n      overwrite: true,\n      // define str -> date convertion\n      parse: function (str: string) {\n        const dates = str.split(\" - \");\n        return dates.map(date => parse(date, DATE_PATTERNS[dateFormat].fnsPattern, new Date()));\n      },\n      format: function (dateArr: Date[]) {\n        const dateStrings = dateArr.map(date => {\n          let dayStr: string,\n            monthStr = \"\";\n          const day = date.getDate();\n          const month = date.getMonth() + 1;\n          const year = date.getFullYear();\n\n          if (day < 10) dayStr = \"0\" + day;\n          if (month < 10) monthStr = \"0\" + month;\n\n          return [dayStr, monthStr, year].join(\"/\");\n        });\n        return dateStrings.join(\" - \");\n      },\n      lazy: false,\n      blocks\n    };\n\n    this.mask = IMask(shadowInput, maskOptions);\n    this.mask.on(\"accept\", () => {\n      this.value = this.mask.masked.value;\n      this.emit(\"sgds-mask-input-change\", { detail: this.value });\n    });\n    /**\n     * Validation after date is complete\n     */\n    this.mask.on(\"complete\", this._validateInput);\n  }\n  public updateMaskValue() {\n    this.mask?.updateValue();\n  }\n  private _validateInput = async () => {\n    const dates = this.mask.value.split(\" - \");\n    const noEmptyDates = dates.filter(d => d !== this.dateFormat.toLowerCase());\n    const dateArray: Date[] | string[] = noEmptyDates.map(date =>\n      setTimeToNoon(parse(date, DATE_PATTERNS[this.dateFormat].fnsPattern, new Date()))\n    );\n    const invalidDates = dateArray.filter(\n      date =>\n        !isValid(date) ||\n        isBefore(date, new Date(0, 0, 1)) ||\n        isBefore(date, setTimeToNoon(new Date(this.minDate))) ||\n        isAfter(date, setTimeToNoon(new Date(this.maxDate)))\n    );\n\n    if (invalidDates.length > 0) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (this.mode === \"range\" && dateArray.length === 1) {\n      this.setInvalid(true);\n      return this.emit(\"sgds-invalid-input\");\n    }\n    if (invalidDates.length === 0 && dateArray.length > 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-selectdates-input\", { detail: dateArray });\n    }\n    if (dateArray.length === 0 && invalidDates.length === 0) {\n      this.setInvalid(false);\n      return this.emit(\"sgds-empty-input\");\n    }\n  };\n\n  public destroyInputMask() {\n    this.mask?.destroy();\n  }\n  public async applyInputMask() {\n    return await this._applyInputMask(this.dateFormat);\n  }\n  public async focus() {\n    const input = await this.shadowInput;\n    return input.focus();\n  }\n  render() {\n    return html`\n      ${this._renderLabel()} ${this._renderHintText()}\n      <div class=\"input-container\">\n      <div class=\"input-feedback\">\n        ${this._renderInput()}\n        ${this._renderFeedback()}\n        </div>\n        <slot name=\"calendar-btn\"></slot>\n        <slot name=\"reset-btn\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerInput;\n"],"names":["datepickerInputStyles"],"mappings":";;;;;;;;;;AAUM,MAAO,eAAgB,SAAQ,SAAS,CAAA;AAkB5C,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;;QAhBkB,IAAU,CAAA,UAAA,GAAe,YAAY,CAAC;;QASvB,IAAI,CAAA,IAAA,GAAuB,QAAQ,CAAC;QAyFvE,IAAc,CAAA,cAAA,GAAG,YAAW;AAClC,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3C,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AAC5E,YAAA,MAAM,SAAS,GAAsB,YAAY,CAAC,GAAG,CAAC,IAAI,IACxD,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,CAClF,CAAC;AACF,YAAA,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CACnC,IAAI,IACF,CAAC,OAAO,CAAC,IAAI,CAAC;AACd,gBAAA,QAAQ,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACjC,gBAAA,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;AACrD,gBAAA,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACvD,CAAC;AAEF,YAAA,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3B,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACtB,gBAAA,OAAO,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;aACxC;AACD,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AACnD,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AACtB,gBAAA,OAAO,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;aACxC;AACD,YAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AACrD,gBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AACvB,gBAAA,OAAO,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;aACnE;AACD,YAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACvD,gBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AACvB,gBAAA,OAAO,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;aACtC;AACH,SAAC,CAAC;AA/GA,QAAA,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;AACnB,QAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;;;KAG3B;;;;;IAMkB,MAAM,aAAa,CAAC,CAAQ,EAAA;QAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACzB,QAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAC5B,QAAA,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;KAC7B;;IAGQ,gBAAgB,GAAA;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IACD,MAAM,YAAY,CAAC,iBAAiB,EAAA;AAClC,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACvC;IACO,MAAM,eAAe,CAAC,UAAkB,EAAA;AAC9C,QAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC;QAC3C,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,SAAS,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC;AAC1G,QAAA,MAAM,MAAM,GAAG;YACb,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;YAClF,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;YAClF,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;YAClF,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;YAClF,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;YAClF,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;SACnF,CAAC;AACF,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,SAAS,EAAE,IAAI;;YAEf,KAAK,EAAE,UAAU,GAAW,EAAA;gBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC/B,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;aACzF;YACD,MAAM,EAAE,UAAU,OAAe,EAAA;gBAC/B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,IAAG;AACrC,oBAAA,IAAI,MAAc,EAChB,QAAQ,GAAG,EAAE,CAAC;AAChB,oBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;oBAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AAClC,oBAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;oBAEhC,IAAI,GAAG,GAAG,EAAE;AAAE,wBAAA,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC;oBACjC,IAAI,KAAK,GAAG,EAAE;AAAE,wBAAA,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAEvC,oBAAA,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC5C,iBAAC,CAAC,CAAC;AACH,gBAAA,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAChC;AACD,YAAA,IAAI,EAAE,KAAK;YACX,MAAM;SACP,CAAC;QAEF,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAK;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAC9D,SAAC,CAAC,CAAC;AACH;;AAEG;QACH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC/C;IACM,eAAe,GAAA;;AACpB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAC;KAC1B;IAiCM,gBAAgB,GAAA;;AACrB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,EAAE,CAAC;KACtB;AACM,IAAA,MAAM,cAAc,GAAA;QACzB,OAAO,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACpD;AACM,IAAA,MAAM,KAAK,GAAA;AAChB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC;AACrC,QAAA,OAAO,KAAK,CAAC,KAAK,EAAE,CAAC;KACtB;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACP,MAAA,EAAA,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,CAAA;;;UAG3C,IAAI,CAAC,YAAY,EAAE,CAAA;UACnB,IAAI,CAAC,eAAe,EAAE,CAAA;;;;;;KAM3B,CAAC;KACH;;AA3JM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAEA,QAAqB,CAA9C,CAAgD;AAEjC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAuC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGtC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAAiB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG/E,UAAA,CAAA;IADC,UAAU,CAAC,OAAO,CAAC;AACmB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuB9B,UAAA,CAAA;IADR,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAKnD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA;;;;"}