@kyndryl-design-system/shidoka-applications 2.25.1 → 2.26.0

package/common/scss/form-input.scss

@@ -19,7 +19,7 @@
   }
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
   }
 }
 
@@ -43,6 +43,9 @@
       color: var(--kd-color-icon-disabled);
     }
   }
+  .input-icon.is-disabled {
+    color: var(--kd-color-icon-disabled);
+  }
 }
 
 .options-text {
@@ -111,7 +114,7 @@ textarea {
   &[disabled] {
     background: var(--kd-color-background-forms-disabled);
     border: none;
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
     cursor: not-allowed;
 
     &[invalid] {
@@ -151,10 +154,10 @@ textarea {
   }
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
 
     span svg {
-      color: var(--kd-color-text-link-level-disabled);
+      color: var(--kd-color-text-level-disabled);
     }
   }
 
@@ -168,7 +171,7 @@ textarea {
   color: var(--kd-color-status-error-dark);
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
   }
 }
 
@@ -176,7 +179,7 @@ textarea {
   color: var(--kd-color-background-success);
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
   }
 }
 
@@ -214,7 +217,7 @@ textarea {
     margin-top: 13px;
 
     [disabled] & {
-      color: var(--kd-color-text-link-level-disabled);
+      color: var(--kd-color-text-level-disabled);
     }
   }
 }
@@ -240,7 +243,7 @@ textarea {
   }
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
   }
 
   span,
@@ -257,6 +260,6 @@ textarea {
   margin-bottom: 8px;
 
   [disabled] & {
-    color: var(--kd-color-text-link-level-disabled);
+    color: var(--kd-color-text-level-disabled);
   }
 }

package/components/reusable/checkbox/checkbox.js

@@ -22,7 +22,7 @@ label.label-hidden {
   gap: 0;
 }
 label[disabled] {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 span {
@@ -109,16 +109,16 @@ input:not([disabled]):checked:active::before {
   background: var(--kd-color-background-ui-hollow-pressed);
 }
 input[disabled] {
-  background: var(--kd-color-background-ui-hollow-default);
+  background: var(--kd-color-background-forms-disabled);
   border-color: var(--kd-color-border-ui-disabled);
 }
 input[disabled]:checked {
-  background: var(--kd-color-background-ui-default-disabled);
+  background: var(--kd-color-background-forms-disabled);
   border-color: transparent;
 }
 input[disabled]:checked::before {
   transform: scale(1);
-  background: var(--kd-color-background-ui-hollow-default);
+  background: var(--kd-color-icon-disabled);
   mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
   -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
   mask-size: contain;
@@ -168,7 +168,7 @@ input[type=checkbox]:indeterminate:disabled::before {
   width: 10px;
   height: 8px;
   transform: scale(1);
-  background: var(--kd-color-background-ui-hollow-default);
+  background: var(--kd-color-icon-disabled);
   mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
   -webkit-mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
 }

package/components/reusable/checkbox/checkboxGroup.js

@@ -85,7 +85,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   width: 1px;
 }
 [disabled] .label-text {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .required {
@@ -105,6 +105,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
 .input-wrapper textarea[disabled] ~ .input-icon {
   color: var(--kd-color-icon-disabled);
 }
+.input-wrapper .input-icon.is-disabled {
+  color: var(--kd-color-icon-disabled);
+}
 
 .options-text {
   margin: 0;
@@ -262,7 +265,7 @@ input[disabled],
 textarea[disabled] {
   background: var(--kd-color-background-forms-disabled);
   border: none;
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
   cursor: not-allowed;
 }
 input[disabled][invalid],
@@ -308,10 +311,10 @@ textarea:not([disabled])[invalid] {
   align-items: center;
 }
 [disabled] .error {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 [disabled] .error span svg {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 .error span svg {
   margin-right: 8px;
@@ -322,14 +325,14 @@ textarea:not([disabled])[invalid] {
   color: var(--kd-color-status-error-dark);
 }
 [disabled] .error-icon {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .success-icon {
   color: var(--kd-color-background-success);
 }
 [disabled] .success-icon {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .caption {
@@ -397,7 +400,7 @@ textarea:not([disabled])[invalid] {
   }
 }
 [disabled] .caption-error-count .count {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .input-icon {
@@ -420,7 +423,7 @@ textarea:not([disabled])[invalid] {
   font-size: 16px;
 }
 [disabled] .warn {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 .warn span,
 .warn svg {
@@ -463,7 +466,7 @@ textarea:not([disabled])[invalid] {
   }
 }
 [disabled] .description-text {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 :host {

package/components/reusable/checkbox/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot tooltip - Slot for tooltip.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <span>${this.label}</span>\n            <slot name=\"tooltip\"></slot>\n          </legend>\n          <div class=\"description-text\">\n            <slot name=\"description\"></slot>\n          </div>\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    role=\"img\"\n                    class=\"error-icon\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this._limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (!changedProps.has('invalidText')) {\n      this._onUpdated(changedProps);\n    }\n\n    if (changedProps.has('invalidText')) {\n      this._isInvalid =\n        this.invalidText !== '' || this._internalValidationMsg !== '';\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    } else if (changedProps.has('value')) {\n      this._updateCheckboxStates();\n    }\n\n    if (changedProps.has('name')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('required')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _updateCheckboxStates() {\n    this.checkboxes.forEach((checkbox: any) => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    const entries = new FormData();\n    this.value.forEach((value) => {\n      entries.append(this.name, value);\n    });\n    this._internals.setFormValue(entries);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    if (interacted || this.invalidText !== '') {\n      this._internals.setValidity(Validity, ValidationMessage);\n\n      // set internal validation message if value was changed by user input\n      if (interacted) {\n        this._internalValidationMsg = InternalMsg;\n      }\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.indeterminate = false;\n      });\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this._limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    const previousCheckboxes = this.checkboxes;\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n\n    if (!previousCheckboxes.length) {\n      this._updateChildren();\n    }\n\n    this._toggleRevealed(this.limitRevealed);\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = checkbox.hasAttribute('disabled') || this.disabled;\n      if (this.value && this.value.length) {\n        checkbox.checked = this.value.includes(checkbox.value);\n      } else {\n        checkbox.checked = false;\n      }\n    });\n\n    if (this.selectAll) {\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    }\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","label","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","invalid","_updateCheckboxStates","name","undefined","get","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","indeterminate","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","previousCheckboxes","Array","from","querySelectorAll","_updateChildren","hasAttribute","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","String","state","Object","customElement"],"mappings":"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"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../../src/components/reusable/checkbox/checkboxGroup.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport CheckboxGroupScss from './checkboxGroup.scss';\n\nimport '../textInput';\nimport './checkbox';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\n\nconst _defaultTextStrings = {\n  selectAll: 'Select all',\n  showMore: 'Show more',\n  showLess: 'Show less',\n  search: 'Search',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Checkbox group container.\n * @fires on-checkbox-group-change - Captures the change event and emits the selected values.\n * @fires on-search - Captures the search input event and emits the search term.\n * @fires on-limit-toggle - Captures the show more/less click and emits the expanded state.\n * @slot unnamed - Slot for individual checkboxes.\n * @slot tooltip - Slot for tooltip.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-checkbox-group')\nexport class CheckboxGroup extends FormMixin(LitElement) {\n  static override styles = CheckboxGroupScss;\n\n  /** Checkbox group selected values. */\n  @property({ type: Array })\n  override value: Array<any> = [];\n\n  /** Makes a single selection required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Checkbox group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Checkbox group horizontal style. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Adds a \"Select All\" checkbox to the top of the group. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Hide the group legend/label visually. */\n  @property({ type: Boolean })\n  hideLegend = false;\n\n  /** Adds a search input to enable filtering of checkboxes. */\n  @property({ type: Boolean })\n  filterable = false;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Filter text input value.\n   * @internal\n   */\n  @state()\n  searchTerm = '';\n\n  /** Limits visible checkboxes behind a \"Show all\" button. */\n  @property({ type: Boolean })\n  limitCheckboxes = false;\n\n  /** Number of checkboxes visible when limited.\n   * @internal\n   */\n  @state()\n  _limitCount = 4;\n\n  /** Checkbox limit visibility.\n   * @internal\n   */\n  @state()\n  limitRevealed = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  // /**\n  //  * Queries for slotted checkboxes.\n  //  * @ignore\n  //  */\n  // @queryAssignedElements()\n  // checkboxes!: Array<any>;\n\n  @state()\n  checkboxes: Array<any> = [];\n\n  @state()\n  filteredCheckboxes: Array<any> = [];\n\n  override render() {\n    return html`\n      <div>\n        ${this.filterable\n          ? html`\n              <kyn-text-input\n                class=\"search\"\n                type=\"search\"\n                size=\"sm\"\n                placeholder=${this._textStrings.search}\n                hideLabel\n                value=${this.searchTerm}\n                ?disabled=${this.disabled}\n                @on-input=${(e: Event) => this._handleFilter(e)}\n              >\n                ${this._textStrings.search}\n              </kyn-text-input>\n            `\n          : null}\n\n        <fieldset ?disabled=${this.disabled}>\n          <legend class=\"label-text ${this.hideLegend ? 'sr-only' : ''}\">\n            ${this.required\n              ? html`\n                  <abbr\n                    class=\"required\"\n                    title=${this._textStrings.required}\n                    aria-label=${this._textStrings.required}\n                  >\n                    *\n                  </abbr>\n                `\n              : null}\n            <span>${this.label}</span>\n            <slot name=\"tooltip\"></slot>\n          </legend>\n          <div class=\"description-text\">\n            <slot name=\"description\"></slot>\n          </div>\n          ${this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    role=\"img\"\n                    class=\"error-icon\"\n                    title=${this._textStrings.error}\n                    aria-label=${this._textStrings.error}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null}\n\n          <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n            ${this.selectAll\n              ? html`\n                  <kyn-checkbox\n                    class=\"select-all\"\n                    value=\"selectAll\"\n                    ?checked=${this.selectAllChecked}\n                    ?indeterminate=${this.selectAllIndeterminate}\n                    ?required=${this.required}\n                    ?disabled=${this.disabled}\n                    ?invalid=${this.invalidText !== '' ||\n                    this._internalValidationMsg !== ''}\n                  >\n                    ${this._textStrings.selectAll}\n                  </kyn-checkbox>\n                `\n              : null}\n\n            <slot @slotchange=${this._handleSlotChange}></slot>\n\n            ${this.limitCheckboxes &&\n            this.filteredCheckboxes.length > this._limitCount\n              ? html`\n                  <button\n                    class=\"reveal-toggle\"\n                    @click=${() => this._toggleRevealed(!this.limitRevealed)}\n                  >\n                    ${this.limitRevealed\n                      ? this._textStrings.showLess\n                      : html`\n                          ${this._textStrings.showMore}\n                          (${this.filteredCheckboxes.length})\n                        `}\n                  </button>\n                `\n              : null}\n          </div>\n        </fieldset>\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    if (!changedProps.has('invalidText')) {\n      this._onUpdated(changedProps);\n    }\n\n    if (changedProps.has('invalidText')) {\n      this._isInvalid =\n        this.invalidText !== '' || this._internalValidationMsg !== '';\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.invalid = this._isInvalid;\n      });\n    } else if (changedProps.has('value')) {\n      this._updateCheckboxStates();\n    }\n\n    if (changedProps.has('name')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.name = this.name;\n      });\n    }\n\n    if (changedProps.has('required')) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('limitCheckboxes') &&\n      changedProps.get('limitCheckboxes') !== undefined\n    ) {\n      this._toggleRevealed(false);\n    }\n  }\n\n  private _updateCheckboxStates() {\n    this.checkboxes.forEach((checkbox: any) => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n\n    const CheckedBoxesCount = this.checkboxes.filter(\n      (checkbox) => checkbox.checked\n    ).length;\n\n    this.selectAllChecked =\n      this.checkboxes.length > 0 &&\n      CheckedBoxesCount === this.checkboxes.length;\n\n    this.selectAllIndeterminate =\n      CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    const entries = new FormData();\n    this.value.forEach((value) => {\n      entries.append(this.name, value);\n    });\n    this._internals.setFormValue(entries);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && !this.value.length,\n    };\n\n    const InternalMsg =\n      this.required && !this.value.length ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    if (interacted || this.invalidText !== '') {\n      this._internals.setValidity(Validity, ValidationMessage);\n\n      // set internal validation message if value was changed by user input\n      if (interacted) {\n        this._internalValidationMsg = InternalMsg;\n      }\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleCheckboxChange(e: any) {\n    const value = e.detail.value;\n\n    if (value === 'selectAll') {\n      if (e.detail.checked) {\n        this.value = this.checkboxes\n          .filter((checkbox) => !checkbox.disabled)\n          .map((checkbox) => {\n            return checkbox.value;\n          });\n      } else {\n        this.value = [];\n      }\n\n      this.checkboxes.forEach((checkbox: any) => {\n        checkbox.indeterminate = false;\n      });\n    } else {\n      const newValues = [...this.value];\n      if (newValues.includes(value)) {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n      } else {\n        newValues.push(value);\n      }\n      this.value = newValues;\n    }\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  private _emitChangeEvent() {\n    const event = new CustomEvent('on-checkbox-group-change', {\n      detail: { value: this.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleFilter(e: any) {\n    let visibleCount = 0;\n\n    this.searchTerm = e.detail.value.toLowerCase();\n\n    this.filteredCheckboxes = this.checkboxes.filter((checkboxEl) => {\n      return checkboxEl.textContent.toLowerCase().includes(this.searchTerm);\n    });\n\n    this.checkboxes.forEach((checkboxEl) => {\n      // get checkbox label text\n      const checkboxText = checkboxEl.textContent.toLowerCase();\n\n      // hide checkbox if no match to search term\n      if (this.limitCheckboxes && !this.limitRevealed) {\n        if (\n          checkboxText.includes(this.searchTerm) &&\n          visibleCount < this._limitCount\n        ) {\n          checkboxEl.style.display = 'block';\n          visibleCount++;\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      } else {\n        if (checkboxText.includes(this.searchTerm)) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-search', {\n      detail: { searchTerm: this.searchTerm },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _toggleRevealed(revealed: boolean) {\n    this.limitRevealed = revealed;\n\n    this.filteredCheckboxes.forEach((checkboxEl, index) => {\n      if (!this.limitCheckboxes || this.limitRevealed) {\n        checkboxEl.style.display = 'block';\n      } else {\n        if (index < this._limitCount) {\n          checkboxEl.style.display = 'block';\n        } else {\n          checkboxEl.style.display = 'none';\n        }\n      }\n    });\n\n    const event = new CustomEvent('on-limit-toggle', {\n      detail: { expanded: this.limitRevealed },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange() {\n    const previousCheckboxes = this.checkboxes;\n    this.checkboxes = Array.from(this.querySelectorAll('kyn-checkbox'));\n    this.filteredCheckboxes = this.checkboxes;\n\n    if (!previousCheckboxes.length) {\n      this._updateChildren();\n    }\n\n    this._toggleRevealed(this.limitRevealed);\n  }\n\n  private _updateChildren() {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = checkbox.hasAttribute('disabled') || this.disabled;\n      if (this.value && this.value.length) {\n        checkbox.checked = this.value.includes(checkbox.value);\n      } else {\n        checkbox.checked = false;\n      }\n    });\n\n    if (this.selectAll) {\n      const CheckedBoxesCount = this.checkboxes.filter(\n        (checkbox) => checkbox.checked\n      ).length;\n\n      this.selectAllChecked =\n        this.checkboxes.length > 0 &&\n        CheckedBoxesCount === this.checkboxes.length;\n\n      this.selectAllIndeterminate =\n        CheckedBoxesCount < this.checkboxes.length && CheckedBoxesCount > 0;\n    }\n  }\n\n  private _handleSubgroupChange(e: any) {\n    const newValues = [...this.value];\n    const {\n      isParent,\n      parentChecked,\n      parentValue,\n      value,\n      checked,\n      childValues,\n    } = e.detail;\n\n    if (isParent) {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n\n        childValues.forEach((value: string) => {\n          if (!newValues.includes(value)) {\n            newValues.push(value);\n          }\n        });\n      } else {\n        const index = newValues.indexOf(value);\n        newValues.splice(index, 1);\n\n        childValues.forEach((value: string) => {\n          const index = newValues.indexOf(value);\n          if (index !== -1) {\n            newValues.splice(index, 1);\n          }\n        });\n      }\n    } else {\n      if (checked) {\n        if (!newValues.includes(value)) {\n          newValues.push(value);\n        }\n      } else {\n        const index = newValues.indexOf(value);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n\n      if (parentChecked) {\n        if (!newValues.includes(parentValue)) {\n          newValues.push(parentValue);\n        }\n      } else {\n        const index = newValues.indexOf(parentValue);\n        if (index !== -1) {\n          newValues.splice(index, 1);\n        }\n      }\n    }\n\n    this.value = newValues;\n\n    this._validate(true, false);\n\n    this._emitChangeEvent();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child checkboxes change event\n    this.addEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    // capture subgroup change event\n    this.addEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-checkbox-change', (e: any) =>\n      this._handleCheckboxChange(e)\n    );\n\n    this.removeEventListener('on-checkbox-subgroup-change', (e: any) =>\n      this._handleSubgroupChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-checkbox-group': CheckboxGroup;\n  }\n}\n"],"names":["_defaultTextStrings","selectAll","showMore","showLess","search","required","error","CheckboxGroup","FormMixin","LitElement","constructor","this","value","disabled","horizontal","selectAllChecked","selectAllIndeterminate","hideLegend","filterable","label","searchTerm","limitCheckboxes","_limitCount","limitRevealed","textStrings","_textStrings","checkboxes","filteredCheckboxes","render","html","e","_handleFilter","_isInvalid","unsafeSVG","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","length","_toggleRevealed","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","forEach","checkbox","invalid","_updateCheckboxStates","name","undefined","get","checked","includes","CheckedBoxesCount","filter","entries","FormData","append","_internals","setFormValue","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","setValidity","reportValidity","_handleCheckboxChange","detail","map","indeterminate","newValues","index","indexOf","splice","push","_emitChangeEvent","event","CustomEvent","dispatchEvent","visibleCount","toLowerCase","checkboxEl","textContent","checkboxText","style","display","revealed","expanded","previousCheckboxes","Array","from","querySelectorAll","_updateChildren","hasAttribute","_handleSubgroupChange","isParent","parentChecked","parentValue","childValues","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","CheckboxGroupScss","__decorate","property","type","prototype","Boolean","String","state","Object","customElement"],"mappings":"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"}

package/components/reusable/datePicker/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAgB5D,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAS3D,KAAK,eAAe,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;;AAUnD;;;;GAIG;AACH,qBACa,UAAW,SAAQ,eAAqB;IACnD,OAAgB,MAAM,QAA6C;IAEnE,kBAAkB;IAElB,KAAK,SAAM;IAIX,MAAM,EAAE,eAAe,GAAG,MAAM,CAAQ;IAExC,wGAAwG;IAExG,UAAU,SAAW;IAErB,kHAAkH;IAElH,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAQ;IAE7C,kCAAkC;IAElC,mBAAmB,SAAM;IAEzB,6DAA6D;IAE7D,QAAQ,UAAS;IAEjB,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ;;;;;;;;OAQG;IAEM,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAQ;IAE5C,yCAAyC;IAEzC,QAAQ,SAAM;IAEd,qIAAqI;IAErI,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAEzC,mDAAmD;IAEnD,OAAO,CAAC,sBAAsB,CAAkC;IAEhE,+DAA+D;IAE/D,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAExC,sEAAsE;IAEtE,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvC,uEAAuE;IAEvE,OAAO,SAAM;IAEb,+DAA+D;IAE/D,kBAAkB,UAAS;IAE3B,uDAAuD;IAEvD,QAAQ,UAAS;IAEjB;;OAEG;IAEH,oBAAoB,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE5C,wDAAwD;IAExD,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAM;IAErC,wDAAwD;IAExD,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAM;IAErC,mDAAmD;IAEnD,cAAc,SAAM;IAEpB,8CAA8C;IAE9C,UAAU,SAAM;IAEhB,qDAAqD;IAErD,gBAAgB,SAAM;IAEtB,gDAAgD;IAEhD,YAAY,SAAM;IAElB,4EAA4E;IAE5E,cAAc,UAAS;IAEvB;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B;;;OAGG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAC,CAAqB;IAE/C;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAAC,CAAmB;IAEpC;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAS;IAE5B,iCAAiC;IAEjC,WAAW;;;;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;;;;MAA8B;IAE1C;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAS;IAErC,qFAAqF;IAErF,OAAO,CAAC,sBAAsB,CAAS;IAEvC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,eAAe,CAA2C;IAElE,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,eAAe,CAOf;IAEC,iBAAiB;IAUjB,oBAAoB;IAY7B,OAAO,CAAC,QAAQ;IAsBP,MAAM;IA0Ff,OAAO,CAAC,uBAAuB;IAwC/B,oBAAoB;;;;;;IASL,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAqB7D,OAAO,CAAC,mBAAmB;IAuBlB,OAAO,CAAC,iBAAiB,EAAE,cAAc;YAiGpC,WAAW;YAYX,YAAY;IAqCpB,mBAAmB;IAmDnB,sBAAsB;IAQ5B,OAAO,CAAC,eAAe;IAyBvB,eAAe;IAqDT,4BAA4B,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IA0BnE,UAAU;IAWJ,WAAW;IASX,gBAAgB,CAAC,aAAa,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM;IAoC7D,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,SAAS;IAoFjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,gBAAgB;CAOzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/datePicker/datepicker.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e,n as i,t as a,i as r,e as l}from"../../../vendor/lit-461e78e6.js";import{i as n,x as s,s as o}from"../../../vendor/lit-element-c6c02f24.js";import{FormMixin as d}from"../../../common/mixins/form-input.js";import{o as p}from"../../../vendor/lit-html-29220869.js";import{getPlaceholder as c,injectFlatpickrStyles as h,updateEnableTime as u,emitValue as m,initializeSingleAnchorFlatpickr as v,getModalContainer as k,setCalendarAttributes as f,hideEmptyYear as g,getFlatpickrOptions as b,loadLocale as y,preventFlatpickrOpen as x,handleInputClick as _,handleInputFocus as w}from"../../../common/helpers/flatpickr.js";import"../button/button.js";import{c as D}from"../../../shidoka-flatpickr-theme-a2d1482c.js";import{c as z,J as I,K as F}from"../../../vendor/@kyndryl-design-system/shidoka-icons-39c6d852.js";import"../../../vendor/flatpickr-bbd13d61.js";import"../../../common/flatpickrLangs.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var $=n`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e,n as i,t as a,i as r,e as l}from"../../../vendor/lit-461e78e6.js";import{i as n,x as s,s as o}from"../../../vendor/lit-element-c6c02f24.js";import{FormMixin as d}from"../../../common/mixins/form-input.js";import{o as p}from"../../../vendor/lit-html-29220869.js";import{getPlaceholder as c,injectFlatpickrStyles as h,updateEnableTime as u,emitValue as m,initializeSingleAnchorFlatpickr as v,getModalContainer as f,setCalendarAttributes as k,hideEmptyYear as g,getFlatpickrOptions as b,loadLocale as y,preventFlatpickrOpen as x,handleInputClick as _,handleInputFocus as w}from"../../../common/helpers/flatpickr.js";import"../button/button.js";import{c as D}from"../../../shidoka-flatpickr-theme-469e3123.js";import{c as z,J as I,K as F}from"../../../vendor/@kyndryl-design-system/shidoka-icons-39c6d852.js";import"../../../vendor/flatpickr-bbd13d61.js";import"../../../common/flatpickrLangs.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";var $=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -85,7 +85,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e,n as i,t as
   width: 1px;
 }
 [disabled] .label-text {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .required {
@@ -105,6 +105,9 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{o as e,n as i,t as
 .input-wrapper textarea[disabled] ~ .input-icon {
   color: var(--kd-color-icon-disabled);
 }
+.input-wrapper .input-icon.is-disabled {
+  color: var(--kd-color-icon-disabled);
+}
 
 .options-text {
   margin: 0;
@@ -262,7 +265,7 @@ input[disabled],
 textarea[disabled] {
   background: var(--kd-color-background-forms-disabled);
   border: none;
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
   cursor: not-allowed;
 }
 input[disabled][invalid],
@@ -308,10 +311,10 @@ textarea:not([disabled])[invalid] {
   align-items: center;
 }
 [disabled] .error {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 [disabled] .error span svg {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 .error span svg {
   margin-right: 8px;
@@ -322,14 +325,14 @@ textarea:not([disabled])[invalid] {
   color: var(--kd-color-status-error-dark);
 }
 [disabled] .error-icon {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .success-icon {
   color: var(--kd-color-background-success);
 }
 [disabled] .success-icon {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .caption {
@@ -397,7 +400,7 @@ textarea:not([disabled])[invalid] {
   }
 }
 [disabled] .caption-error-count .count {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 .input-icon {
@@ -420,7 +423,7 @@ textarea:not([disabled])[invalid] {
   font-size: 16px;
 }
 [disabled] .warn {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 .warn span,
 .warn svg {
@@ -463,7 +466,7 @@ textarea:not([disabled])[invalid] {
   }
 }
 [disabled] .description-text {
-  color: var(--kd-color-text-link-level-disabled);
+  color: var(--kd-color-text-level-disabled);
 }
 
 :host {
@@ -585,7 +588,10 @@ input {
                     >${p(z)}</span
                   >
                 </kyn-button>
-              `:s`<span class="input-icon">${p(I)}</span>`}
+              `:s`<span
+                class="input-icon ${this.datePickerDisabled?"is-disabled":""}"
+                >${p(I)}</span
+              >`}
         </div>
 
         ${this.caption?s`<div
@@ -623,5 +629,5 @@ input {
         @click=${this.preventFlatpickrOpen}
       >
         ${this.warnText}
-      </div>`:null}getDatepickerClasses(){return{"date-picker":!0,"date-picker__enable-time":this._enableTime,"date-picker__multiple-select":"multiple"===this.mode,"date-picker__disabled":this.datePickerDisabled}}async firstUpdated(t){if(super.firstUpdated(t),!this._initialized&&(h(D.toString()),this._initialized=!0,await this.updateComplete,this.setupAnchor(),this._hasInitialDefaultDate&&this.defaultDate)){const t=this.processDefaultDates(this.defaultDate);t&&t.length>0&&("multiple"===this.mode?this.value=[...t]:this.value=t[0])}}processDefaultDates(t){if(!t)return[];if(Array.isArray(t))return t.map((t=>t instanceof Date?t:"string"==typeof t?this.parseDateString(t):null)).filter((t=>null!==t));if("string"==typeof t){const e=this.parseDateString(t);return e?[e]:[]}return t instanceof Date?[t]:[]}updated(t){if(super.updated(t),t.has("value")&&!this._isClearing){let t=this.value;if("string"==typeof t)try{const e=t;if(""!==e.trim()&&/\d{4}-\d{2}-\d{2}/.test(e)){const[i,a,r]=e.split("-").map(Number);isNaN(i)||isNaN(a)||isNaN(r)||(this.value=new Date(i,a-1,r,12),t=this.value,this.flatpickrInstance&&this.flatpickrInstance.setDate(t,!0))}}catch(t){console.warn("Error parsing date string:",t)}if((null===t||Array.isArray(t)&&0===t.length)&&this.flatpickrInstance){this._isClearing=!0;try{this.flatpickrInstance.clear(),this._inputEl&&(this._inputEl.value="")}finally{this._isClearing=!1}}this.requestUpdate()}t.has("defaultDate")&&this.flatpickrInstance&&!this._isClearing&&this.debouncedUpdate(),t.has("disable")&&(Array.isArray(this.disable)?this._processedDisableDates=this.disable.map((t=>{if(t instanceof Date)return t;if("number"==typeof t)return new Date(t);if("string"==typeof t){const[e,i,a]=t.split("-").map(Number);if(!isNaN(e)&&!isNaN(i)&&!isNaN(a))return new Date(e,i-1,a)}return t})):this._processedDisableDates=[],this.flatpickrInstance&&this.debouncedUpdate()),(t.has("dateFormat")||t.has("minDate")||t.has("maxDate")||t.has("locale")||t.has("twentyFourHourFormat"))&&(this._enableTime=u(this.dateFormat),this.flatpickrInstance&&this._initialized&&!this._isClearing&&(t.has("dateFormat"),this.debouncedUpdate())),(t.has("datePickerDisabled")&&this.datePickerDisabled||t.has("readonly")&&this.readonly)&&this.flatpickrInstance&&this.flatpickrInstance.close()}async setupAnchor(){if(this._inputEl)try{await this.initializeFlatpickr()}catch(t){console.error("Error setting up flatpickr:",t)}}async _handleClear(t){var e;if(t.preventDefault(),t.stopPropagation(),this.flatpickrInstance){this._isClearing=!0;try{this.value="multiple"===this.mode?[]:null,this.defaultDate=null,this.flatpickrInstance.clear(),this._inputEl&&(this._inputEl.value=""),m(this,"on-change",{dates:this.value,dateString:null===(e=this._inputEl)||void 0===e?void 0:e.value,source:"clear"}),this._validate(!0,!1),await this.updateComplete,await this.initializeFlatpickr(),this.requestUpdate()}catch(t){console.error("Error clearing datepicker:",t)}finally{this._isClearing=!1}}else console.warn("Cannot clear: Flatpickr instance not available")}async initializeFlatpickr(){if(!this._isDestroyed)if(this._inputEl&&this._inputEl.isConnected)try{if(this.flatpickrInstance&&this.flatpickrInstance.destroy(),this.flatpickrInstance=await v({inputEl:this._inputEl,getFlatpickrOptions:()=>this.getComponentFlatpickrOptions(),setCalendarAttributes:t=>{try{const e=k(this);f(t,e!==document.body),t.calendarContainer&&t.calendarContainer.setAttribute("aria-label","Date picker")}catch(t){console.error("Error setting calendar attributes:",t)}},setInitialDates:this.setInitialDates.bind(this)}),!this.flatpickrInstance)throw new Error("Failed to initialize Flatpickr instance");g(),this._validate(!1,!1)}catch(t){console.error("Error initializing Flatpickr:",t),t instanceof Error&&console.error("Error details:",t.message)}else console.warn("Cannot initialize Flatpickr: input element not available or not connected to DOM")}async updateFlatpickrOptions(){this.flatpickrInstance?await this.debouncedUpdate():console.warn("Cannot update options: Flatpickr instance not available")}parseDateString(t){if(!t||!t.trim())return null;if(t.includes("T")){const e=new Date(t);return isNaN(e.getTime())?null:e}const e={"Y-m-d":/^\d{4}-\d{2}-\d{2}$/,"Y-m-d h:i K":/^\d{4}-\d{2}-\d{2}( \d{1,2}:\d{2} [AP]M)?$/}[this.dateFormat];if(!e||!e.test(t))return null;const[i]=t.split(" "),[a,r,l]=i.split("-").map(Number);if(!a||!r||!l)return null;const n=new Date(a,r-1,l);return isNaN(n.getTime())?null:n}setInitialDates(){if(this.flatpickrInstance)try{const t=this.defaultDate||this.value;if(!t)return;if(Array.isArray(t)){const e=t.map((t=>t instanceof Date?t:"string"==typeof t?this.parseDateString(t):null)).filter((t=>null!==t));e.length>0&&(this.flatpickrInstance.setDate(e,!0),(null===this.value||Array.isArray(this.value)&&0===this.value.length)&&("multiple"===this.mode?this.value=[...e]:this.value=e[0]))}else if("string"==typeof t){const e=this.parseDateString(t);e&&(this.flatpickrInstance.setDate(e,!0),null===this.value&&(this.value=e))}else t instanceof Date&&(this.flatpickrInstance.setDate(t,!0),null===this.value&&(this.value=t))}catch(t){console.warn("Error setting initial dates:",t)}}async getComponentFlatpickrOptions(){var t;const e=k(this);return await b({locale:this.locale,dateFormat:this.dateFormat,defaultDate:this.defaultDate?this.defaultDate:void 0,enableTime:this._enableTime,twentyFourHourFormat:null!==(t=this.twentyFourHourFormat)&&void 0!==t?t:void 0,inputEl:this._inputEl,minDate:this.minDate,maxDate:this.maxDate,enable:this.enable,disable:this._processedDisableDates,mode:this.mode,closeOnSelect:!("multiple"===this.mode||this._enableTime),loadLocale:y,onOpen:this.handleOpen.bind(this),onClose:this.handleClose.bind(this),onChange:this.handleDateChange.bind(this),appendTo:e,noCalendar:!1,static:this.staticPosition})}handleOpen(){var t,e;this.readonly?null===(t=this.flatpickrInstance)||void 0===t||t.close():this._shouldFlatpickrOpen||(null===(e=this.flatpickrInstance)||void 0===e||e.close(),this._shouldFlatpickrOpen=!0)}async handleClose(){this._validate(!1,!1),await this.updateComplete,this.value||this.defaultDate||(this._hasInteracted=!0)}async handleDateChange(t,e){var i;if(!this._isClearing){this._hasInteracted=!0;try{let a;"multiple"===this.mode?this.value=t.length>0?[...t]:[]:this.value=t.length>0?t[0]:null;const r="multiple"===this.mode;a=r?t.map((t=>t.toISOString())):t.length>0?t[0].toISOString():r?[]:null,m(this,"on-change",{dates:a,dateString:(null===(i=this._inputEl)||void 0===i?void 0:i.value)||e,source:0===t.length?"clear":void 0}),this._validate(!0,!1),await this.updateComplete,this.requestUpdate()}catch(t){console.warn("Error handling date change:",t)}}}setShouldFlatpickrOpen(t){this._shouldFlatpickrOpen=t}closeFlatpickr(){var t;null===(t=this.flatpickrInstance)||void 0===t||t.close()}preventFlatpickrOpen(t){x(t,this.setShouldFlatpickrOpen.bind(this))}handleInputClickEvent(){_(this.setShouldFlatpickrOpen.bind(this))}handleInputFocusEvent(){w(this._shouldFlatpickrOpen,this.closeFlatpickr.bind(this),this.setShouldFlatpickrOpen.bind(this))}_validate(t,e){if(!(this._inputEl&&this._inputEl instanceof HTMLInputElement))return;if(this.datePickerDisabled)return this._internals.setValidity({},"",this._inputEl),this._isInvalid=!1,void(this._internalValidationMsg="");t&&(this._hasInteracted=!0);const i=null!==this.defaultDate&&("string"==typeof this.defaultDate&&""!==this.defaultDate.trim()||Array.isArray(this.defaultDate)&&this.defaultDate.length>0&&this.defaultDate.some((t=>t&&""!==t))),a=!this._inputEl.value.trim()&&!i,r=this.required;let l=this._inputEl.validity,n=this._inputEl.validationMessage;if(!this._hasInteracted&&!t&&this._enableTime&&(!r||!a))return this._internals.setValidity({},"",this._inputEl),this._isInvalid=!1,void(this._internalValidationMsg="");if(r&&a)return l={...l,valueMissing:!0},n=this.defaultErrorMessage||this._textStrings.pleaseSelectDate,this._internals.setValidity(l,n,this._inputEl),this._isInvalid=this._hasInteracted||t,this._internalValidationMsg=n,e&&this._internals.reportValidity(),void this.requestUpdate();this.invalidText&&(l={...l,customError:!0},n=this.invalidText);const s=!l.valueMissing&&!l.customError;s||n||(n=this._textStrings.pleaseSelectValidDate),this._internals.setValidity(l,n,this._inputEl),this._isInvalid=!s&&(this._hasInteracted||""!==this.invalidText||t),this._internalValidationMsg=n,e&&this._internals.reportValidity(),this.requestUpdate()}_onChange(){this._validate(!0,!1)}_handleFormReset(){this.value=null,this.flatpickrInstance&&this.flatpickrInstance.clear(),this._hasInteracted=!1}};S.styles=[$,D],t([i({type:String})],S.prototype,"label",void 0),t([i({type:String})],S.prototype,"locale",void 0),t([i({type:String})],S.prototype,"dateFormat",void 0),t([i({type:Array})],S.prototype,"defaultDate",void 0),t([i({type:String})],S.prototype,"defaultErrorMessage",void 0),t([i({type:Boolean})],S.prototype,"required",void 0),t([i({type:String})],S.prototype,"size",void 0),t([a()],S.prototype,"value",void 0),t([i({type:String})],S.prototype,"warnText",void 0),t([i({type:Array})],S.prototype,"disable",void 0),t([a()],S.prototype,"_processedDisableDates",void 0),t([i({type:Array})],S.prototype,"enable",void 0),t([i({type:String})],S.prototype,"mode",void 0),t([i({type:String})],S.prototype,"caption",void 0),t([i({type:Boolean})],S.prototype,"datePickerDisabled",void 0),t([i({type:Boolean})],S.prototype,"readonly",void 0),t([i({type:Boolean})],S.prototype,"twentyFourHourFormat",void 0),t([i({type:String})],S.prototype,"minDate",void 0),t([i({type:String})],S.prototype,"maxDate",void 0),t([i({type:String})],S.prototype,"errorAriaLabel",void 0),t([i({type:String})],S.prototype,"errorTitle",void 0),t([i({type:String})],S.prototype,"warningAriaLabel",void 0),t([i({type:String})],S.prototype,"warningTitle",void 0),t([i({type:Boolean})],S.prototype,"staticPosition",void 0),t([a()],S.prototype,"_enableTime",void 0),t([a()],S.prototype,"_hasInteracted",void 0),t([a()],S.prototype,"flatpickrInstance",void 0),t([r("input")],S.prototype,"_inputEl",void 0),t([a()],S.prototype,"_isClearing",void 0),t([i({type:Object})],S.prototype,"textStrings",void 0),t([a()],S.prototype,"_textStrings",void 0),t([a()],S.prototype,"_shouldFlatpickrOpen",void 0),t([a()],S.prototype,"_hasInitialDefaultDate",void 0),S=t([l("kyn-date-picker")],S);export{S as DatePicker};
+      </div>`:null}getDatepickerClasses(){return{"date-picker":!0,"date-picker__enable-time":this._enableTime,"date-picker__multiple-select":"multiple"===this.mode,"date-picker__disabled":this.datePickerDisabled}}async firstUpdated(t){if(super.firstUpdated(t),!this._initialized&&(h(D.toString()),this._initialized=!0,await this.updateComplete,this.setupAnchor(),this._hasInitialDefaultDate&&this.defaultDate)){const t=this.processDefaultDates(this.defaultDate);t&&t.length>0&&("multiple"===this.mode?this.value=[...t]:this.value=t[0])}}processDefaultDates(t){if(!t)return[];if(Array.isArray(t))return t.map((t=>t instanceof Date?t:"string"==typeof t?this.parseDateString(t):null)).filter((t=>null!==t));if("string"==typeof t){const e=this.parseDateString(t);return e?[e]:[]}return t instanceof Date?[t]:[]}updated(t){if(super.updated(t),t.has("value")&&!this._isClearing){let t=this.value;if("string"==typeof t)try{const e=t;if(""!==e.trim()&&/\d{4}-\d{2}-\d{2}/.test(e)){const[i,a,r]=e.split("-").map(Number);isNaN(i)||isNaN(a)||isNaN(r)||(this.value=new Date(i,a-1,r,12),t=this.value,this.flatpickrInstance&&this.flatpickrInstance.setDate(t,!0))}}catch(t){console.warn("Error parsing date string:",t)}if((null===t||Array.isArray(t)&&0===t.length)&&this.flatpickrInstance){this._isClearing=!0;try{this.flatpickrInstance.clear(),this._inputEl&&(this._inputEl.value="")}finally{this._isClearing=!1}}this.requestUpdate()}t.has("defaultDate")&&this.flatpickrInstance&&!this._isClearing&&this.debouncedUpdate(),t.has("disable")&&(Array.isArray(this.disable)?this._processedDisableDates=this.disable.map((t=>{if(t instanceof Date)return t;if("number"==typeof t)return new Date(t);if("string"==typeof t){const[e,i,a]=t.split("-").map(Number);if(!isNaN(e)&&!isNaN(i)&&!isNaN(a))return new Date(e,i-1,a)}return t})):this._processedDisableDates=[],this.flatpickrInstance&&this.debouncedUpdate()),(t.has("dateFormat")||t.has("minDate")||t.has("maxDate")||t.has("locale")||t.has("twentyFourHourFormat"))&&(this._enableTime=u(this.dateFormat),this.flatpickrInstance&&this._initialized&&!this._isClearing&&(t.has("dateFormat"),this.debouncedUpdate())),(t.has("datePickerDisabled")&&this.datePickerDisabled||t.has("readonly")&&this.readonly)&&this.flatpickrInstance&&this.flatpickrInstance.close()}async setupAnchor(){if(this._inputEl)try{await this.initializeFlatpickr()}catch(t){console.error("Error setting up flatpickr:",t)}}async _handleClear(t){var e;if(t.preventDefault(),t.stopPropagation(),this.flatpickrInstance){this._isClearing=!0;try{this.value="multiple"===this.mode?[]:null,this.defaultDate=null,this.flatpickrInstance.clear(),this._inputEl&&(this._inputEl.value=""),m(this,"on-change",{dates:this.value,dateString:null===(e=this._inputEl)||void 0===e?void 0:e.value,source:"clear"}),this._validate(!0,!1),await this.updateComplete,await this.initializeFlatpickr(),this.requestUpdate()}catch(t){console.error("Error clearing datepicker:",t)}finally{this._isClearing=!1}}else console.warn("Cannot clear: Flatpickr instance not available")}async initializeFlatpickr(){if(!this._isDestroyed)if(this._inputEl&&this._inputEl.isConnected)try{if(this.flatpickrInstance&&this.flatpickrInstance.destroy(),this.flatpickrInstance=await v({inputEl:this._inputEl,getFlatpickrOptions:()=>this.getComponentFlatpickrOptions(),setCalendarAttributes:t=>{try{const e=f(this);k(t,e!==document.body),t.calendarContainer&&t.calendarContainer.setAttribute("aria-label","Date picker")}catch(t){console.error("Error setting calendar attributes:",t)}},setInitialDates:this.setInitialDates.bind(this)}),!this.flatpickrInstance)throw new Error("Failed to initialize Flatpickr instance");g(),this._validate(!1,!1)}catch(t){console.error("Error initializing Flatpickr:",t),t instanceof Error&&console.error("Error details:",t.message)}else console.warn("Cannot initialize Flatpickr: input element not available or not connected to DOM")}async updateFlatpickrOptions(){this.flatpickrInstance?await this.debouncedUpdate():console.warn("Cannot update options: Flatpickr instance not available")}parseDateString(t){if(!t||!t.trim())return null;if(t.includes("T")){const e=new Date(t);return isNaN(e.getTime())?null:e}const e={"Y-m-d":/^\d{4}-\d{2}-\d{2}$/,"Y-m-d h:i K":/^\d{4}-\d{2}-\d{2}( \d{1,2}:\d{2} [AP]M)?$/}[this.dateFormat];if(!e||!e.test(t))return null;const[i]=t.split(" "),[a,r,l]=i.split("-").map(Number);if(!a||!r||!l)return null;const n=new Date(a,r-1,l);return isNaN(n.getTime())?null:n}setInitialDates(){if(this.flatpickrInstance)try{const t=this.defaultDate||this.value;if(!t)return;if(Array.isArray(t)){const e=t.map((t=>t instanceof Date?t:"string"==typeof t?this.parseDateString(t):null)).filter((t=>null!==t));e.length>0&&(this.flatpickrInstance.setDate(e,!0),(null===this.value||Array.isArray(this.value)&&0===this.value.length)&&("multiple"===this.mode?this.value=[...e]:this.value=e[0]))}else if("string"==typeof t){const e=this.parseDateString(t);e&&(this.flatpickrInstance.setDate(e,!0),null===this.value&&(this.value=e))}else t instanceof Date&&(this.flatpickrInstance.setDate(t,!0),null===this.value&&(this.value=t))}catch(t){console.warn("Error setting initial dates:",t)}}async getComponentFlatpickrOptions(){var t;const e=f(this);return await b({locale:this.locale,dateFormat:this.dateFormat,defaultDate:this.defaultDate?this.defaultDate:void 0,enableTime:this._enableTime,twentyFourHourFormat:null!==(t=this.twentyFourHourFormat)&&void 0!==t?t:void 0,inputEl:this._inputEl,minDate:this.minDate,maxDate:this.maxDate,enable:this.enable,disable:this._processedDisableDates,mode:this.mode,closeOnSelect:!("multiple"===this.mode||this._enableTime),loadLocale:y,onOpen:this.handleOpen.bind(this),onClose:this.handleClose.bind(this),onChange:this.handleDateChange.bind(this),appendTo:e,noCalendar:!1,static:this.staticPosition})}handleOpen(){var t,e;this.readonly?null===(t=this.flatpickrInstance)||void 0===t||t.close():this._shouldFlatpickrOpen||(null===(e=this.flatpickrInstance)||void 0===e||e.close(),this._shouldFlatpickrOpen=!0)}async handleClose(){this._validate(!1,!1),await this.updateComplete,this.value||this.defaultDate||(this._hasInteracted=!0)}async handleDateChange(t,e){var i;if(!this._isClearing){this._hasInteracted=!0;try{let a;"multiple"===this.mode?this.value=t.length>0?[...t]:[]:this.value=t.length>0?t[0]:null;const r="multiple"===this.mode;a=r?t.map((t=>t.toISOString())):t.length>0?t[0].toISOString():r?[]:null,m(this,"on-change",{dates:a,dateString:(null===(i=this._inputEl)||void 0===i?void 0:i.value)||e,source:0===t.length?"clear":void 0}),this._validate(!0,!1),await this.updateComplete,this.requestUpdate()}catch(t){console.warn("Error handling date change:",t)}}}setShouldFlatpickrOpen(t){this._shouldFlatpickrOpen=t}closeFlatpickr(){var t;null===(t=this.flatpickrInstance)||void 0===t||t.close()}preventFlatpickrOpen(t){x(t,this.setShouldFlatpickrOpen.bind(this))}handleInputClickEvent(){_(this.setShouldFlatpickrOpen.bind(this))}handleInputFocusEvent(){w(this._shouldFlatpickrOpen,this.closeFlatpickr.bind(this),this.setShouldFlatpickrOpen.bind(this))}_validate(t,e){if(!(this._inputEl&&this._inputEl instanceof HTMLInputElement))return;if(this.datePickerDisabled)return this._internals.setValidity({},"",this._inputEl),this._isInvalid=!1,void(this._internalValidationMsg="");t&&(this._hasInteracted=!0);const i=null!==this.defaultDate&&("string"==typeof this.defaultDate&&""!==this.defaultDate.trim()||Array.isArray(this.defaultDate)&&this.defaultDate.length>0&&this.defaultDate.some((t=>t&&""!==t))),a=!this._inputEl.value.trim()&&!i,r=this.required;let l=this._inputEl.validity,n=this._inputEl.validationMessage;if(!this._hasInteracted&&!t&&this._enableTime&&(!r||!a))return this._internals.setValidity({},"",this._inputEl),this._isInvalid=!1,void(this._internalValidationMsg="");if(r&&a)return l={...l,valueMissing:!0},n=this.defaultErrorMessage||this._textStrings.pleaseSelectDate,this._internals.setValidity(l,n,this._inputEl),this._isInvalid=this._hasInteracted||t,this._internalValidationMsg=n,e&&this._internals.reportValidity(),void this.requestUpdate();this.invalidText&&(l={...l,customError:!0},n=this.invalidText);const s=!l.valueMissing&&!l.customError;s||n||(n=this._textStrings.pleaseSelectValidDate),this._internals.setValidity(l,n,this._inputEl),this._isInvalid=!s&&(this._hasInteracted||""!==this.invalidText||t),this._internalValidationMsg=n,e&&this._internals.reportValidity(),this.requestUpdate()}_onChange(){this._validate(!0,!1)}_handleFormReset(){this.value=null,this.flatpickrInstance&&this.flatpickrInstance.clear(),this._hasInteracted=!1}};S.styles=[$,D],t([i({type:String})],S.prototype,"label",void 0),t([i({type:String})],S.prototype,"locale",void 0),t([i({type:String})],S.prototype,"dateFormat",void 0),t([i({type:Array})],S.prototype,"defaultDate",void 0),t([i({type:String})],S.prototype,"defaultErrorMessage",void 0),t([i({type:Boolean})],S.prototype,"required",void 0),t([i({type:String})],S.prototype,"size",void 0),t([a()],S.prototype,"value",void 0),t([i({type:String})],S.prototype,"warnText",void 0),t([i({type:Array})],S.prototype,"disable",void 0),t([a()],S.prototype,"_processedDisableDates",void 0),t([i({type:Array})],S.prototype,"enable",void 0),t([i({type:String})],S.prototype,"mode",void 0),t([i({type:String})],S.prototype,"caption",void 0),t([i({type:Boolean})],S.prototype,"datePickerDisabled",void 0),t([i({type:Boolean})],S.prototype,"readonly",void 0),t([i({type:Boolean})],S.prototype,"twentyFourHourFormat",void 0),t([i({type:String})],S.prototype,"minDate",void 0),t([i({type:String})],S.prototype,"maxDate",void 0),t([i({type:String})],S.prototype,"errorAriaLabel",void 0),t([i({type:String})],S.prototype,"errorTitle",void 0),t([i({type:String})],S.prototype,"warningAriaLabel",void 0),t([i({type:String})],S.prototype,"warningTitle",void 0),t([i({type:Boolean})],S.prototype,"staticPosition",void 0),t([a()],S.prototype,"_enableTime",void 0),t([a()],S.prototype,"_hasInteracted",void 0),t([a()],S.prototype,"flatpickrInstance",void 0),t([r("input")],S.prototype,"_inputEl",void 0),t([a()],S.prototype,"_isClearing",void 0),t([i({type:Object})],S.prototype,"textStrings",void 0),t([a()],S.prototype,"_textStrings",void 0),t([a()],S.prototype,"_shouldFlatpickrOpen",void 0),t([a()],S.prototype,"_hasInitialDefaultDate",void 0),S=t([l("kyn-date-picker")],S);export{S as DatePicker};
 //# sourceMappingURL=datepicker.js.map