@kyndryl-design-system/shidoka-applications 1.0.4 → 1.0.6

package/components/global/header/headerFlyout.d.ts

@@ -14,6 +14,8 @@ export declare class HeaderFlyout extends LitElement {
     hideArrow: boolean;
     /** Button assistive text, title + aria-label. */
     assistiveText: string;
+    /** Turns the button into a link. */
+    href: string;
     /**
      * Determines if menu should be a small flyout or large flyout for small screens.
      * @ignore

package/components/global/header/headerFlyout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,iDAAiD;IAEjD,aAAa,SAAM;IAEnB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IAoCf,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
+{"version":3,"file":"headerFlyout.d.ts","sourceRoot":"","sources":["../../../../src/components/global/header/headerFlyout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAavC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,yBAAyB;IAEzB,IAAI,UAAS;IAEb,mFAAmF;IAEnF,UAAU,UAAS;IAEnB,uBAAuB;IAEvB,SAAS,UAAS;IAElB,iDAAiD;IAEjD,aAAa,SAAM;IAEnB,oCAAoC;IAEpC,IAAI,SAAM;IAEV;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM;IA4Df,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAMb,iBAAiB;IAcjB,oBAAoB;IAa7B,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

package/components/global/header/headerFlyout.js

@@ -1,20 +1,40 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as a}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as d}from"../../../common/helpers/helpers.js";import m from"./headerFlyout.scss.js";import p from'./../../../external/@carbon/icons/es/caret--down/16.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.assistiveText="",this.breakpointHit=!1}render(){const e={menu:!0,"breakpoint-hit":this.breakpointHit,open:this.open},o={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{queryAssignedElements as r}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../../external/lit-html/directives/class-map.js';import{querySelectorDeep as a}from'./../../../external/query-selector-shadow-dom/src/querySelectorDeep.js';import{debounce as d}from"../../../common/helpers/helpers.js";import c from"./headerFlyout.scss.js";import m from'./../../../external/@carbon/icons/es/caret--down/16.js';let p=class extends o{constructor(){super(...arguments),this.open=!1,this.anchorLeft=!1,this.hideArrow=!1,this.assistiveText="",this.href="",this.breakpointHit=!1}render(){const e={menu:!0,"breakpoint-hit":this.breakpointHit,open:this.open},o={menu__content:!0,"menu__content--left":this.anchorLeft,slotted:this.slottedElements.length};return t`
       <div
         class="${l(e)}"
         @pointerleave=${e=>this.handlePointerLeave(e)}
       >
-        <button
-          class="btn interactive"
-          title=${this.assistiveText}
-          aria-label=${this.assistiveText}
-          @click=${this.handleClick}
-          @pointerenter=${e=>this.handlePointerEnter(e)}
-        >
-          <slot name="button"></slot>
+        ${""!==this.href?t`
+              <a
+                class="btn interactive"
+                href=${this.href}
+                title=${this.assistiveText}
+                aria-label=${this.assistiveText}
+                @click=${this.handleClick}
+                @pointerenter=${e=>this.handlePointerEnter(e)}
+              >
+                <slot name="button"></slot>
+
+                ${this.hideArrow?null:t`
+                      <kd-icon slot="button" .icon="${m}"></kd-icon>
+                    `}
+              </a>
+            `:t`
+              <button
+                class="btn interactive"
+                title=${this.assistiveText}
+                aria-label=${this.assistiveText}
+                @click=${this.handleClick}
+                @pointerenter=${e=>this.handlePointerEnter(e)}
+              >
+                <slot name="button"></slot>
+
+                ${this.hideArrow?null:t`
+                      <kd-icon slot="button" .icon="${m}"></kd-icon>
+                    `}
+              </button>
+            `}
 
-          ${this.hideArrow?null:t` <kd-icon slot="button" .icon="${p}"></kd-icon> `}
-        </button>
         <div class=${l(o)}><slot></slot></div>
       </div>
-    `}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&null!==e.relatedTarget&&(this.open=!1)}handleClick(){this.open=!this.open}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",d((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=a("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};c.styles=m,e([s({type:Boolean})],c.prototype,"open",void 0),e([s({type:Boolean})],c.prototype,"anchorLeft",void 0),e([s({type:Boolean})],c.prototype,"hideArrow",void 0),e([s({type:String})],c.prototype,"assistiveText",void 0),e([n()],c.prototype,"breakpointHit",void 0),e([r()],c.prototype,"slottedElements",void 0),c=e([i("kyn-header-flyout")],c);export{c as HeaderFlyout};
+    `}handlePointerEnter(e){"mouse"===e.pointerType&&(this.open=!0)}handlePointerLeave(e){"mouse"===e.pointerType&&null!==e.relatedTarget&&(this.open=!1)}handleClick(){this.open=!this.open}handleClickOut(e){e.composedPath().includes(this)||(this.open=!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(e=>this.handleClickOut(e))),this.testBreakpoint(),null===window||void 0===window||window.addEventListener("resize",d((()=>{this.testBreakpoint()})))}disconnectedCallback(){document.removeEventListener("click",(e=>this.handleClickOut(e))),null===window||void 0===window||window.removeEventListener("resize",d((()=>{this.testBreakpoint()}))),super.disconnectedCallback()}testBreakpoint(){const e=a("kyn-header");e&&(this.breakpointHit=e.breakpointHit)}};p.styles=c,e([s({type:Boolean})],p.prototype,"open",void 0),e([s({type:Boolean})],p.prototype,"anchorLeft",void 0),e([s({type:Boolean})],p.prototype,"hideArrow",void 0),e([s({type:String})],p.prototype,"assistiveText",void 0),e([s({type:String})],p.prototype,"href",void 0),e([n()],p.prototype,"breakpointHit",void 0),e([r()],p.prototype,"slottedElements",void 0),p=e([i("kyn-header-flyout")],p);export{p as HeaderFlyout};
 //# sourceMappingURL=headerFlyout.js.map

package/components/global/header/headerFlyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderFlyoutScss from './headerFlyout.scss';\nimport caratDownIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n  static override styles = HeaderFlyoutScss;\n\n  /** Flyout open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  hideArrow = false;\n\n  /** Button assistive text, title + aria-label. */\n  @property({ type: String })\n  assistiveText = '';\n\n  /**\n   * Determines if menu should be a small flyout or large flyout for small screens.\n   * @ignore\n   */\n  @state()\n  breakpointHit = false;\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      'breakpoint-hit': this.breakpointHit,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n      >\n        <button\n          class=\"btn interactive\"\n          title=${this.assistiveText}\n          aria-label=${this.assistiveText}\n          @click=${this.handleClick}\n          @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n        >\n          <slot name=\"button\"></slot>\n\n          ${!this.hideArrow\n            ? html` <kd-icon slot=\"button\" .icon=\"${caratDownIcon}\"></kd-icon> `\n            : null}\n        </button>\n        <div class=${classMap(contentClasses)}><slot></slot></div>\n      </div>\n    `;\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = true;\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && e.relatedTarget !== null) {\n      this.open = false;\n    }\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private testBreakpoint() {\n    const nav = querySelectorDeep('kyn-header');\n    if (nav) {\n      this.breakpointHit = nav!.breakpointHit;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","assistiveText","breakpointHit","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","caratDownIcon","pointerType","relatedTarget","handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"qhCAmBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAUE,YAAG,EAIbF,KAASG,WAAG,EAIZH,KAAaI,cAAG,GAOhBJ,KAAaK,eAAG,CAoGjB,CA3FUC,SACP,MAAMC,EAAU,CACdC,MAAM,EACN,iBAAkBR,KAAKK,cACvBJ,KAAMD,KAAKC,MAGPQ,EAAiB,CACrBC,eAAe,EACf,sBAAuBV,KAAKE,WAC5BS,QAASX,KAAKY,gBAAgBC,QAGhC,OAAOC,CAAI;;iBAEEC,EAASR;wBACDS,GAAoBhB,KAAKiB,mBAAmBD;;;;kBAInDhB,KAAKI;uBACAJ,KAAKI;mBACTJ,KAAKkB;0BACGF,GAAoBhB,KAAKmB,mBAAmBH;;;;YAI1DhB,KAAKG,UAEJ,KADAW,CAAI,kCAAkCM;;qBAG/BL,EAASN;;KAG3B,CAEOU,mBAAmBH,GACH,UAAlBA,EAAEK,cACJrB,KAAKC,MAAO,EAEf,CAEOgB,mBAAmBD,GACH,UAAlBA,EAAEK,aAA+C,OAApBL,EAAEM,gBACjCtB,KAAKC,MAAO,EAEf,CAEOiB,cACNlB,KAAKC,MAAQD,KAAKC,IACnB,CAEOsB,eAAeP,GAChBA,EAAEQ,eAAeC,SAASzB,QAC7BA,KAAKC,MAAO,EAEf,CAEQyB,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUb,GAAMhB,KAAKuB,eAAeP,KAE9DhB,KAAK8B,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQF,iBACN,SACAG,GAAS,KACPhC,KAAK8B,gBAAgB,IAG1B,CAEQG,uBACPL,SAASM,oBAAoB,SAAUlB,GAAMhB,KAAKuB,eAAeP,KAEjE,OAAAe,aAAA,IAAAA,QAAAA,OAAQG,oBACN,SACAF,GAAS,KACPhC,KAAK8B,gBAAgB,KAIzBH,MAAMM,sBACP,CAEOH,iBACN,MAAMK,EAAMC,EAAkB,cAC1BD,IACFnC,KAAKK,cAAgB8B,EAAK9B,cAE7B,GA1HeR,EAAMwC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL7C,EAAA8C,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC7C,EAAA8C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACA7C,EAAA8C,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACC/C,EAAA8C,UAAA,qBAAA,GAOnBJ,EAAA,CADCM,KACqBhD,EAAA8C,UAAA,qBAAA,GAOtBJ,EAAA,CADCO,KACoCjD,EAAA8C,UAAA,uBAAA,GA/B1B9C,EAAY0C,EAAA,CADxBQ,EAAc,sBACFlD"}
+{"version":3,"file":"headerFlyout.js","sources":["../../../../src/components/global/header/headerFlyout.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport HeaderFlyoutScss from './headerFlyout.scss';\nimport caratDownIcon from '@carbon/icons/es/caret--down/16';\n\n/**\n * Component for header flyout items.\n * @slot unnamed - Slot for flyout menu content.\n * @slot button - Slot for button/toggle content.\n */\n@customElement('kyn-header-flyout')\nexport class HeaderFlyout extends LitElement {\n  static override styles = HeaderFlyoutScss;\n\n  /** Flyout open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Anchor flyout menu to the left edge of the button instead of the right edge. */\n  @property({ type: Boolean })\n  anchorLeft = false;\n\n  /** Hides the arrow. */\n  @property({ type: Boolean })\n  hideArrow = false;\n\n  /** Button assistive text, title + aria-label. */\n  @property({ type: String })\n  assistiveText = '';\n\n  /** Turns the button into a link. */\n  @property({ type: String })\n  href = '';\n\n  /**\n   * Determines if menu should be a small flyout or large flyout for small screens.\n   * @ignore\n   */\n  @state()\n  breakpointHit = false;\n\n  /**\n   * Queries any slotted HTML elements.\n   * @ignore\n   */\n  @queryAssignedElements()\n  slottedElements!: Array<HTMLElement>;\n\n  override render() {\n    const classes = {\n      menu: true,\n      'breakpoint-hit': this.breakpointHit,\n      open: this.open,\n    };\n\n    const contentClasses = {\n      menu__content: true,\n      'menu__content--left': this.anchorLeft,\n      slotted: this.slottedElements.length,\n    };\n\n    return html`\n      <div\n        class=\"${classMap(classes)}\"\n        @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e)}\n      >\n        ${this.href !== ''\n          ? html`\n              <a\n                class=\"btn interactive\"\n                href=${this.href}\n                title=${this.assistiveText}\n                aria-label=${this.assistiveText}\n                @click=${this.handleClick}\n                @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideArrow\n                  ? html`\n                      <kd-icon slot=\"button\" .icon=\"${caratDownIcon}\"></kd-icon>\n                    `\n                  : null}\n              </a>\n            `\n          : html`\n              <button\n                class=\"btn interactive\"\n                title=${this.assistiveText}\n                aria-label=${this.assistiveText}\n                @click=${this.handleClick}\n                @pointerenter=${(e: PointerEvent) => this.handlePointerEnter(e)}\n              >\n                <slot name=\"button\"></slot>\n\n                ${!this.hideArrow\n                  ? html`\n                      <kd-icon slot=\"button\" .icon=\"${caratDownIcon}\"></kd-icon>\n                    `\n                  : null}\n              </button>\n            `}\n\n        <div class=${classMap(contentClasses)}><slot></slot></div>\n      </div>\n    `;\n  }\n\n  private handlePointerEnter(e: PointerEvent) {\n    if (e.pointerType === 'mouse') {\n      this.open = true;\n    }\n  }\n\n  private handlePointerLeave(e: PointerEvent) {\n    if (e.pointerType === 'mouse' && e.relatedTarget !== null) {\n      this.open = false;\n    }\n  }\n\n  private handleClick() {\n    this.open = !this.open;\n  }\n\n  private handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    document.addEventListener('click', (e) => this.handleClickOut(e));\n\n    this.testBreakpoint();\n    window?.addEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n  }\n\n  override disconnectedCallback() {\n    document.removeEventListener('click', (e) => this.handleClickOut(e));\n\n    window?.removeEventListener(\n      'resize',\n      debounce(() => {\n        this.testBreakpoint();\n      })\n    );\n\n    super.disconnectedCallback();\n  }\n\n  private testBreakpoint() {\n    const nav = querySelectorDeep('kyn-header');\n    if (nav) {\n      this.breakpointHit = nav!.breakpointHit;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-header-flyout': HeaderFlyout;\n  }\n}\n"],"names":["HeaderFlyout","LitElement","constructor","this","open","anchorLeft","hideArrow","assistiveText","href","breakpointHit","render","classes","menu","contentClasses","menu__content","slotted","slottedElements","length","html","classMap","e","handlePointerLeave","handleClick","handlePointerEnter","caratDownIcon","pointerType","relatedTarget","handleClickOut","composedPath","includes","connectedCallback","super","document","addEventListener","testBreakpoint","window","debounce","disconnectedCallback","removeEventListener","nav","querySelectorDeep","styles","HeaderFlyoutScss","__decorate","property","type","Boolean","prototype","String","state","queryAssignedElements","customElement"],"mappings":"qhCAmBO,IAAMA,EAAN,cAA2BC,EAA3BC,kCAKLC,KAAIC,MAAG,EAIPD,KAAUE,YAAG,EAIbF,KAASG,WAAG,EAIZH,KAAaI,cAAG,GAIhBJ,KAAIK,KAAG,GAOPL,KAAaM,eAAG,CA4HjB,CAnHUC,SACP,MAAMC,EAAU,CACdC,MAAM,EACN,iBAAkBT,KAAKM,cACvBL,KAAMD,KAAKC,MAGPS,EAAiB,CACrBC,eAAe,EACf,sBAAuBX,KAAKE,WAC5BU,QAASZ,KAAKa,gBAAgBC,QAGhC,OAAOC,CAAI;;iBAEEC,EAASR;wBACDS,GAAoBjB,KAAKkB,mBAAmBD;;UAE7C,KAAdjB,KAAKK,KACHU,CAAI;;;uBAGOf,KAAKK;wBACJL,KAAKI;6BACAJ,KAAKI;yBACTJ,KAAKmB;gCACGF,GAAoBjB,KAAKoB,mBAAmBH;;;;kBAI1DjB,KAAKG,UAIJ,KAHAY,CAAI;sDAC8BM;;;cAK1CN,CAAI;;;wBAGQf,KAAKI;6BACAJ,KAAKI;yBACTJ,KAAKmB;gCACGF,GAAoBjB,KAAKoB,mBAAmBH;;;;kBAI1DjB,KAAKG,UAIJ,KAHAY,CAAI;sDAC8BM;;;;;qBAMjCL,EAASN;;KAG3B,CAEOU,mBAAmBH,GACH,UAAlBA,EAAEK,cACJtB,KAAKC,MAAO,EAEf,CAEOiB,mBAAmBD,GACH,UAAlBA,EAAEK,aAA+C,OAApBL,EAAEM,gBACjCvB,KAAKC,MAAO,EAEf,CAEOkB,cACNnB,KAAKC,MAAQD,KAAKC,IACnB,CAEOuB,eAAeP,GAChBA,EAAEQ,eAAeC,SAAS1B,QAC7BA,KAAKC,MAAO,EAEf,CAEQ0B,oBACPC,MAAMD,oBAENE,SAASC,iBAAiB,SAAUb,GAAMjB,KAAKwB,eAAeP,KAE9DjB,KAAK+B,iBACL,OAAAC,aAAA,IAAAA,QAAAA,OAAQF,iBACN,SACAG,GAAS,KACPjC,KAAK+B,gBAAgB,IAG1B,CAEQG,uBACPL,SAASM,oBAAoB,SAAUlB,GAAMjB,KAAKwB,eAAeP,KAEjE,OAAAe,aAAA,IAAAA,QAAAA,OAAQG,oBACN,SACAF,GAAS,KACPjC,KAAK+B,gBAAgB,KAIzBH,MAAMM,sBACP,CAEOH,iBACN,MAAMK,EAAMC,EAAkB,cAC1BD,IACFpC,KAAKM,cAAgB8B,EAAK9B,cAE7B,GAtJeT,EAAMyC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL9C,EAAA+C,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC9C,EAAA+C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACA9C,EAAA+C,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACChD,EAAA+C,UAAA,qBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACRhD,EAAA+C,UAAA,YAAA,GAOVJ,EAAA,CADCM,KACqBjD,EAAA+C,UAAA,qBAAA,GAOtBJ,EAAA,CADCO,KACoClD,EAAA+C,UAAA,uBAAA,GAnC1B/C,EAAY2C,EAAA,CADxBQ,EAAc,sBACFnD"}

package/components/global/header/headerFlyout.scss.js

@@ -111,6 +111,7 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   color: var(--kd-color-text-primary);
   height: 100%;
   padding: 0 8px;
+  text-decoration: none;
 }
 @media (min-width: 42rem) {
   .btn {

package/components/global/header/headerFlyout.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"headerFlyout.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EACL,iBAAiB,EAIlB,MAAM,QAAQ,CAAC;AAGhB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsDf,OAAO,CAAC,WAAW;IAYV,OAAO,CAAC,YAAY,EAAE,cAAc;IAuC7C,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,eAAe;CAqBxB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,EACL,iBAAiB,EAIlB,MAAM,QAAQ,CAAC;AAGhB;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAkB;IAExC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,iEAAiE;IAEjE,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV,0CAA0C;IAE1C,cAAc,EAAE,iBAAiB,CAA4B;IAE7D;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAsDf,OAAO,CAAC,WAAW;IAYV,OAAO,CAAC,YAAY,EAAE,cAAc;IAwC7C,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,eAAe;CAqBxB;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/datePicker/datepicker.js

@@ -34,5 +34,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </div>
           `:null}
       ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
-    `}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")){if(this.inputEl.value=this.value,this.internals.setFormValue(this.value),this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText="",this.required&&(!this.value||""===this.value))return this.internals.setValidity({valueMissing:!0},"This field is required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.value&&""!==this.minDate&&this.validateMinDate(),""!==this.value&&""!==this.maxDate&&this.validateMaxDate()}}validateMinDate(){h.test(this.minDate)||p.test(this.minDate)||m.test(this.minDate)?this.value<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(){h.test(this.maxDate)||p.test(this.maxDate)||m.test(this.maxDate)?this.value>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}};u.styles=v,u.formAssociated=!0,t([n()],u.prototype,"internals",void 0),t([a({type:String})],u.prototype,"size",void 0),t([a({type:String})],u.prototype,"caption",void 0),t([a({type:String})],u.prototype,"value",void 0),t([a({type:String})],u.prototype,"name",void 0),t([a({type:Boolean})],u.prototype,"required",void 0),t([a({type:Boolean})],u.prototype,"disabled",void 0),t([a({type:String})],u.prototype,"invalidText",void 0),t([a({type:String})],u.prototype,"warnText",void 0),t([a({type:String})],u.prototype,"maxDate",void 0),t([a({type:String})],u.prototype,"minDate",void 0),t([a({type:String})],u.prototype,"step",void 0),t([a({type:String})],u.prototype,"datePickerType",void 0),t([l("input")],u.prototype,"inputEl",void 0),t([n()],u.prototype,"internalValidationMsg",void 0),t([n()],u.prototype,"isInvalid",void 0),u=t([s("kyn-date-picker")],u);export{u as DatePicker};
+    `}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("value")&&t.has("value")){if(this.inputEl.value=this.value,this.internals.setFormValue(this.value),this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText="",this.required&&(!this.value||""===this.value))return this.internals.setValidity({valueMissing:!0},"This field is required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.value&&""!==this.minDate&&this.validateMinDate(),""!==this.value&&""!==this.maxDate&&this.validateMaxDate()}}validateMinDate(){h.test(this.minDate)||p.test(this.minDate)||m.test(this.minDate)?this.value<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(){h.test(this.maxDate)||p.test(this.maxDate)||m.test(this.maxDate)?this.value>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}};u.styles=v,u.formAssociated=!0,t([n()],u.prototype,"internals",void 0),t([a({type:String})],u.prototype,"size",void 0),t([a({type:String})],u.prototype,"caption",void 0),t([a({type:String})],u.prototype,"value",void 0),t([a({type:String})],u.prototype,"name",void 0),t([a({type:Boolean})],u.prototype,"required",void 0),t([a({type:Boolean})],u.prototype,"disabled",void 0),t([a({type:String})],u.prototype,"invalidText",void 0),t([a({type:String})],u.prototype,"warnText",void 0),t([a({type:String})],u.prototype,"maxDate",void 0),t([a({type:String})],u.prototype,"minDate",void 0),t([a({type:String})],u.prototype,"step",void 0),t([a({type:String})],u.prototype,"datePickerType",void 0),t([l("input")],u.prototype,"inputEl",void 0),t([n()],u.prototype,"internalValidationMsg",void 0),t([n()],u.prototype,"isInvalid",void 0),u=t([s("kyn-date-picker")],u);export{u as DatePicker};
 //# sourceMappingURL=datepicker.js.map

package/components/reusable/datePicker/datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  DATE_PICKER_TYPES,\n  regexDateFormat,\n  regexDateTimeFormat,\n  regexDateTimeFormatSec,\n} from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n  static override styles = DatePickerScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  value = '';\n\n  /** Datepicker name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div\n        class=\"${classMap({\n          'input-wrapper': true,\n        })}\"\n      >\n        <input\n          class=\"${classMap({\n            'size--sm': this.size === 'sm',\n            'size--lg': this.size === 'lg',\n          })}\"\n          datePickerType=${this.datePickerType}\n          type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n            ? 'datetime-local'\n            : 'date'}\n          id=${this.name ? this.name : 'datepicker-1'}\n          name=${this.name}\n          value=${this.value}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.isInvalid}\n          min=${ifDefined(this.minDate)}\n          max=${ifDefined(this.maxDate)}\n          step=${ifDefined(this.step)}\n          @input=${(e: any) => this.handleInput(e)}\n        />\n      </div>\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      this.internals.setFormValue(this.value);\n      this.internals.setValidity({});\n      this.internalValidationMsg = '';\n      this.invalidText = '';\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.value !== '' && this.minDate !== '') {\n        this.validateMinDate();\n      }\n      // validate max\n      if (this.value !== '' && this.maxDate !== '') {\n        this.validateMaxDate();\n      }\n    }\n  }\n\n  private validateMinDate(): void {\n    if (\n      regexDateFormat.test(this.minDate) ||\n      regexDateTimeFormat.test(this.minDate) ||\n      regexDateTimeFormatSec.test(this.minDate)\n    ) {\n      if (this.value < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateMaxDate(): void {\n    if (\n      regexDateFormat.test(this.maxDate) ||\n      regexDateTimeFormat.test(this.maxDate) ||\n      regexDateTimeFormatSec.test(this.maxDate)\n    ) {\n      if (this.value > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxDate","minDate","step","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","inputEl","setFormValue","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","regexDateFormat","test","regexDateTimeFormat","regexDateTimeFormatSec","rangeUnderflow","patternMismatch","rangeOverflow","styles","DatePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
+{"version":3,"file":"datepicker.js","sources":["../../../../src/components/reusable/datePicker/datepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  DATE_PICKER_TYPES,\n  regexDateFormat,\n  regexDateTimeFormat,\n  regexDateTimeFormatSec,\n} from './defs';\nimport DatePickerScss from './datepicker.scss';\n\n/**\n * Datepicker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format. If the value isn't a possible date string in the format, then the element has no maximum date value\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-date-picker')\nexport class DatePicker extends LitElement {\n  static override styles = DatePickerScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker value in YYYY-MM-DD or YYYY-MM-DDThh:mm format. */\n  @property({ type: String })\n  value = '';\n\n  /** Datepicker name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD or YYYY-MM-DDThh:mm format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /** Date picker types. Default 'single' */\n  @property({ type: String })\n  datePickerType: DATE_PICKER_TYPES = DATE_PICKER_TYPES.SINGLE;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div\n        class=\"${classMap({\n          'input-wrapper': true,\n        })}\"\n      >\n        <input\n          class=\"${classMap({\n            'size--sm': this.size === 'sm',\n            'size--lg': this.size === 'lg',\n          })}\"\n          datePickerType=${this.datePickerType}\n          type=${this.datePickerType === DATE_PICKER_TYPES.WITHITIME\n            ? 'datetime-local'\n            : 'date'}\n          id=${this.name ? this.name : 'datepicker-1'}\n          name=${this.name}\n          value=${this.value}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.isInvalid}\n          min=${ifDefined(this.minDate)}\n          max=${ifDefined(this.maxDate)}\n          step=${ifDefined(this.step)}\n          @input=${(e: any) => this.handleInput(e)}\n        />\n      </div>\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  // calls when start date or value change\n  private handleInput(e: any) {\n    this.value = e.target.value;\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      this.internals.setFormValue(this.value);\n      this.internals.setValidity({});\n      this.internalValidationMsg = '';\n      this.invalidText = '';\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.value !== '' && this.minDate !== '') {\n        this.validateMinDate();\n      }\n      // validate max\n      if (this.value !== '' && this.maxDate !== '') {\n        this.validateMaxDate();\n      }\n    }\n  }\n\n  private validateMinDate(): void {\n    if (\n      regexDateFormat.test(this.minDate) ||\n      regexDateTimeFormat.test(this.minDate) ||\n      regexDateTimeFormatSec.test(this.minDate)\n    ) {\n      if (this.value < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateMaxDate(): void {\n    if (\n      regexDateFormat.test(this.maxDate) ||\n      regexDateTimeFormat.test(this.maxDate) ||\n      regexDateTimeFormatSec.test(this.maxDate)\n    ) {\n      if (this.value > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-picker': DatePicker;\n  }\n}\n"],"names":["DatePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxDate","minDate","step","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","setFormValue","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","regexDateFormat","test","regexDateTimeFormat","regexDateTimeFormatSec","rangeUnderflow","patternMismatch","rangeOverflow","styles","DatePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

package/components/reusable/daterangepicker/daterangepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;OAEG;IAEH,eAAe,SAAyB;IAExC;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,kDAAkD;IAElD,SAAS,SAAM;IAEf,gDAAgD;IAEhD,OAAO,SAAM;IAEb,iFAAiF;IAEjF,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAqEN,OAAO,CAAC,YAAY,EAAE,cAAc;IAgE7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,oBAAoB;CAa7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,eAAe,CAAC;KAC1C;CACF"}
+{"version":3,"file":"daterangepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAuB;IAC7C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;OAEG;IAEH,eAAe,SAAyB;IAExC;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,IAAI,SAAQ;IAEZ,kDAAkD;IAElD,SAAS,SAAM;IAEf,gDAAgD;IAEhD,OAAO,SAAM;IAEb,iFAAiF;IAEjF,IAAI,SAAM;IAEV,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,2BAA2B;IAE3B,QAAQ,UAAS;IAEjB,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,wBAAwB;IAExB,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,SAAM;IAEb;;0DAEsD;IAEtD,IAAI,SAAM;IAEV;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAqEN,OAAO,CAAC,YAAY,EAAE,cAAc;IAwE7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,oBAAoB;CAa7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,eAAe,CAAC;KAC1C;CACF"}

package/components/reusable/daterangepicker/daterangepicker.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as r}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import l from"./daterangepicker.scss.js";let o=class extends i{constructor(){super(...arguments),this.regexDateFormat=/^\d{4}-\d{2}-\d{2}$/,this.internals=this.attachInternals(),this.caption="",this.size="md",this.startDate="",this.endDate="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.internalValidationMsg="",this.isInvalid=!1}render(){var t,i,a,s;return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as d}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import l from"./daterangepicker.scss.js";let o=class extends i{constructor(){super(...arguments),this.regexDateFormat=/^\d{4}-\d{2}-\d{2}$/,this.internals=this.attachInternals(),this.caption="",this.size="md",this.startDate="",this.endDate="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.warnText="",this.maxDate="",this.minDate="",this.step="",this.internalValidationMsg="",this.isInvalid=!1}render(){var t,i,a,s;return e`
       <label
         class="datepicker-label-text"
         for=${this.name}
@@ -11,7 +11,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
       <div class="wrapper">
         <div class="input-wrapper">
           <input
-            class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             type="date"
             id="${this.name}-start"
             name="${this.name}-start"
@@ -19,9 +19,9 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             ?required=${this.required}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            min=${r(this.minDate)}
-            max=${r(null!==(i=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==i?i:"")}
-            step=${r(this.step)}
+            min=${d(this.minDate)}
+            max=${d(null!==(i=null!==(t=this.endDate)&&void 0!==t?t:this.maxDate)&&void 0!==i?i:"")}
+            step=${d(this.step)}
             @input=${t=>this.handleStartDate(t)}
           />
         </div>
@@ -29,16 +29,16 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
         <span class="range-span">—</span>
         <div class="input-wrapper">
           <input
-            class="${d({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
+            class="${r({"size--sm":"sm"===this.size,"size--lg":"lg"===this.size})}"
             type="date"
             id="${this.name}-end"
             name="${this.name}-end"
             value=${this.endDate}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            min=${r(null!==(s=null!==(a=this.startDate)&&void 0!==a?a:this.minDate)&&void 0!==s?s:"")}
-            max=${r(this.maxDate)}
-            step=${r(this.step)}
+            min=${d(null!==(s=null!==(a=this.startDate)&&void 0!==a?a:this.minDate)&&void 0!==s?s:"")}
+            max=${d(this.maxDate)}
+            step=${d(this.step)}
             @input=${t=>this.handleEndDate(t)}
           />
         </div>
@@ -51,5 +51,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             </div>
           `:null}
       ${""===this.warnText||this.isInvalid?null:e`<div class="warn">${this.warnText}</div>`}
-    `}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("startDate")){if(this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.startDate||""===this.startDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.startDate&&""!==this.minDate&&this.validateMinDate(this.startDate),""!==this.startDate&&""!==this.maxDate&&this.validateMaxDate(this.startDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}if(t.has("endDate")){if(this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.endDate||""===this.endDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.endDate&&""!==this.minDate&&this.validateMinDate(this.endDate),""!==this.endDate&&""!==this.maxDate&&this.validateMaxDate(this.endDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}}handleStartDate(t){this.startDate=t.target.value,""!==this.startDate&&this.validateAndDispatchEvent()}handleEndDate(t){this.endDate=t.target.value,""!==this.endDate&&this.validateAndDispatchEvent()}validateAndDispatchEvent(){if(this.startDate<=this.endDate){const t=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate}});this.dispatchEvent(t)}}validateMinDate(t){this.regexDateFormat.test(this.minDate)?t<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(t){this.regexDateFormat.test(this.maxDate)?t>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}validateStartEndDate(){const t=`${this.startDate}:${this.endDate}`;this.internals.setFormValue(t),this.startDate>this.endDate&&(this.internals.setValidity({patternMismatch:!0},"State date must be before end date."),this.internalValidationMsg=this.internals.validationMessage)}};o.styles=l,o.formAssociated=!0,t([n()],o.prototype,"regexDateFormat",void 0),t([n()],o.prototype,"internals",void 0),t([s({type:String})],o.prototype,"caption",void 0),t([s({type:String})],o.prototype,"size",void 0),t([s({type:String})],o.prototype,"startDate",void 0),t([s({type:String})],o.prototype,"endDate",void 0),t([s({type:String})],o.prototype,"name",void 0),t([s({type:Boolean})],o.prototype,"required",void 0),t([s({type:Boolean})],o.prototype,"disabled",void 0),t([s({type:String})],o.prototype,"invalidText",void 0),t([s({type:String})],o.prototype,"warnText",void 0),t([s({type:String})],o.prototype,"maxDate",void 0),t([s({type:String})],o.prototype,"minDate",void 0),t([s({type:String})],o.prototype,"step",void 0),t([n()],o.prototype,"internalValidationMsg",void 0),t([n()],o.prototype,"isInvalid",void 0),o=t([a("kyn-date-range-picker")],o);export{o as DateRangePicker};
+    `}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("startDate")&&t.has("startDate")){if(this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.startDate||""===this.startDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.startDate&&""!==this.minDate&&this.validateMinDate(this.startDate),""!==this.startDate&&""!==this.maxDate&&this.validateMaxDate(this.startDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}if(void 0!==t.get("endDate")&&t.has("endDate")){if(this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.endDate||""===this.endDate))return this.internals.setValidity({valueMissing:!0},"Both dates are required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.endDate&&""!==this.minDate&&this.validateMinDate(this.endDate),""!==this.endDate&&""!==this.maxDate&&this.validateMaxDate(this.endDate),""!==this.startDate&&""!==this.endDate&&this.validateStartEndDate()}}handleStartDate(t){this.startDate=t.target.value,""!==this.startDate&&this.validateAndDispatchEvent()}handleEndDate(t){this.endDate=t.target.value,""!==this.endDate&&this.validateAndDispatchEvent()}validateAndDispatchEvent(){if(this.startDate<=this.endDate){const t=new CustomEvent("on-input",{detail:{startDate:this.startDate,endDate:this.endDate}});this.dispatchEvent(t)}}validateMinDate(t){this.regexDateFormat.test(this.minDate)?t<this.minDate&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter date as min date or later."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid min date."),this.internalValidationMsg=this.internals.validationMessage)}validateMaxDate(t){this.regexDateFormat.test(this.maxDate)?t>this.maxDate&&(this.internals.setValidity({rangeOverflow:!0},"Please enter date as max date or earlier."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({patternMismatch:!0},"Please enter valid max date."),this.internalValidationMsg=this.internals.validationMessage)}validateStartEndDate(){const t=`${this.startDate}:${this.endDate}`;this.internals.setFormValue(t),this.startDate>this.endDate&&(this.internals.setValidity({patternMismatch:!0},"State date must be before end date."),this.internalValidationMsg=this.internals.validationMessage)}};o.styles=l,o.formAssociated=!0,t([n()],o.prototype,"regexDateFormat",void 0),t([n()],o.prototype,"internals",void 0),t([s({type:String})],o.prototype,"caption",void 0),t([s({type:String})],o.prototype,"size",void 0),t([s({type:String})],o.prototype,"startDate",void 0),t([s({type:String})],o.prototype,"endDate",void 0),t([s({type:String})],o.prototype,"name",void 0),t([s({type:Boolean})],o.prototype,"required",void 0),t([s({type:Boolean})],o.prototype,"disabled",void 0),t([s({type:String})],o.prototype,"invalidText",void 0),t([s({type:String})],o.prototype,"warnText",void 0),t([s({type:String})],o.prototype,"maxDate",void 0),t([s({type:String})],o.prototype,"minDate",void 0),t([s({type:String})],o.prototype,"step",void 0),t([n()],o.prototype,"internalValidationMsg",void 0),t([n()],o.prototype,"isInvalid",void 0),o=t([a("kyn-date-range-picker")],o);export{o as DateRangePicker};
 //# sourceMappingURL=daterangepicker.js.map

package/components/reusable/daterangepicker/daterangepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n  static override styles = DateRangePickerScss;\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Regex format for minDate / maxDate\n   * @ignore\n   */\n  @state()\n  regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Datepicker name. Required prop. as there could many fields into single form*/\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div class=\"wrapper\">\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-start\"\n            name=\"${this.name}-start\"\n            value=${this.startDate}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleStartDate(e)}\n          />\n        </div>\n\n        <span class=\"range-span\">—</span>\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-end\"\n            name=\"${this.name}-end\"\n            value=${this.endDate}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleEndDate(e)}\n          />\n        </div>\n      </div>\n\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('startDate')) {\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.startDate || this.startDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.startDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.startDate);\n      }\n      //validate max\n      if (this.startDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.startDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n    if (changedProps.has('endDate')) {\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.endDate || this.endDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.endDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.endDate);\n      }\n      //validate max\n      if (this.endDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.endDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n  }\n  // on-change start date\n  private handleStartDate(e: any) {\n    this.startDate = e.target.value;\n    if (this.startDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // on-change end date\n  private handleEndDate(e: any) {\n    this.endDate = e.target.value;\n    if (this.endDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // Note: dispatch (on-input) event only if both dates are valid (i.e. startDate <= endDate)\n  private validateAndDispatchEvent() {\n    if (this.startDate <= this.endDate) {\n      // emit selected start & end date value\n      const event = new CustomEvent('on-input', {\n        detail: {\n          startDate: this.startDate,\n          endDate: this.endDate,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n  // validate minDate with start & end date\n  private validateMinDate(date: String): void {\n    if (this.regexDateFormat.test(this.minDate)) {\n      if (date < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n  // validate maxDate with start & end date\n  private validateMaxDate(date: String): void {\n    if (this.regexDateFormat.test(this.maxDate)) {\n      if (date > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateStartEndDate(): void {\n    // Save combine values to form data\n    const combineVals = `${this.startDate}:${this.endDate}`;\n    this.internals.setFormValue(combineVals);\n\n    if (this.startDate > this.endDate) {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'State date must be before end date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","regexDateFormat","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","maxDate","minDate","step","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","_b","_a","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","validateStartEndDate","target","value","validateAndDispatchEvent","event","CustomEvent","detail","dispatchEvent","date","test","rangeUnderflow","patternMismatch","rangeOverflow","combineVals","setFormValue","styles","DateRangePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"daterangepicker.js","sources":["../../../../src/components/reusable/daterangepicker/daterangepicker.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport DateRangePickerScss from './daterangepicker.scss';\n\n/**\n * Date-Range picker\n * @fires on-input - Captures the input event and emits the selected values and original event details. (Only if startDate <= endDate)\n * @prop {string} minDate - Mimimum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no minimum date value.\n * @prop {string} maxDate - Maximum date in YYYY-MM-DD format. If the value isn't a possible date string in the format, then the element has no maximum date value.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-date-range-picker')\nexport class DateRangePicker extends LitElement {\n  static override styles = DateRangePickerScss;\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /** Regex format for minDate / maxDate\n   * @ignore\n   */\n  @state()\n  regexDateFormat = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Datepicker size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Datepicker Start date in YYYY-MM-DD format. */\n  @property({ type: String })\n  startDate = '';\n\n  /** Datepicker End date in YYYY-MM-DD format. */\n  @property({ type: String })\n  endDate = '';\n\n  /** Datepicker name. Required prop. as there could many fields into single form*/\n  @property({ type: String })\n  name = '';\n\n  /** Makes the date required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Date disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Date invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Date warning text */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum date in YYYY-MM-DD format.\n   * If the value isn't a possible date string in the format, then the element has no maximum date value\n   */\n  @property({ type: String })\n  maxDate = '';\n\n  /** Minimum date in YYYY-MM-DD format,\n   * If the value isn't a possible date string in the format, then the element has no minimum date value.\n   */\n  @property({ type: String })\n  minDate = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * For date inputs, the value of step is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value.\n   * The default value of step is 1, indicating 1 day.*/\n  @property({ type: String })\n  step = '';\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <label\n        class=\"datepicker-label-text\"\n        for=${this.name}\n        ?disabled=${this.disabled}\n      >\n        ${this.required ? html`<span class=\"required\">*</span>` : null}\n        <slot></slot>\n      </label>\n\n      <div class=\"wrapper\">\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-start\"\n            name=\"${this.name}-start\"\n            value=${this.startDate}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minDate)}\n            max=${ifDefined(this.endDate ?? this.maxDate ?? '')}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleStartDate(e)}\n          />\n        </div>\n\n        <span class=\"range-span\">—</span>\n        <div class=\"input-wrapper\">\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"date\"\n            id=\"${this.name}-end\"\n            name=\"${this.name}-end\"\n            value=${this.endDate}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.startDate ?? this.minDate ?? '')}\n            max=${ifDefined(this.maxDate)}\n            step=${ifDefined(this.step)}\n            @input=${(e: any) => this.handleEndDate(e)}\n          />\n        </div>\n      </div>\n\n      ${this.caption !== ''\n        ? html` <div class=\"caption\">${this.caption}</div> `\n        : null}\n      ${this.isInvalid\n        ? html`\n            <div class=\"error\">\n              ${this.invalidText || this.internalValidationMsg}\n            </div>\n          `\n        : null}\n      ${this.warnText !== '' && !this.isInvalid\n        ? html`<div class=\"warn\">${this.warnText}</div>`\n        : null}\n    `;\n  }\n\n  override updated(changedProps: PropertyValues) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (\n      changedProps.get('startDate') !== undefined &&\n      changedProps.has('startDate')\n    ) {\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.startDate || this.startDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.startDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.startDate);\n      }\n      //validate max\n      if (this.startDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.startDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n\n    if (\n      changedProps.get('endDate') !== undefined &&\n      changedProps.has('endDate')\n    ) {\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n      // set validity\n      if (this.required && (!this.endDate || this.endDate === '')) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Both dates are required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.endDate !== '' && this.minDate !== '') {\n        this.validateMinDate(this.endDate);\n      }\n      //validate max\n      if (this.endDate !== '' && this.maxDate !== '') {\n        this.validateMaxDate(this.endDate);\n      }\n      // validate start & end date\n      if (this.startDate !== '' && this.endDate !== '') {\n        this.validateStartEndDate();\n      }\n    }\n  }\n  // on-change start date\n  private handleStartDate(e: any) {\n    this.startDate = e.target.value;\n    if (this.startDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // on-change end date\n  private handleEndDate(e: any) {\n    this.endDate = e.target.value;\n    if (this.endDate !== '') {\n      this.validateAndDispatchEvent();\n    }\n  }\n  // Note: dispatch (on-input) event only if both dates are valid (i.e. startDate <= endDate)\n  private validateAndDispatchEvent() {\n    if (this.startDate <= this.endDate) {\n      // emit selected start & end date value\n      const event = new CustomEvent('on-input', {\n        detail: {\n          startDate: this.startDate,\n          endDate: this.endDate,\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n  // validate minDate with start & end date\n  private validateMinDate(date: String): void {\n    if (this.regexDateFormat.test(this.minDate)) {\n      if (date < this.minDate) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter date as min date or later.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n  // validate maxDate with start & end date\n  private validateMaxDate(date: String): void {\n    if (this.regexDateFormat.test(this.maxDate)) {\n      if (date > this.maxDate) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter date as max date or earlier.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateStartEndDate(): void {\n    // Save combine values to form data\n    const combineVals = `${this.startDate}:${this.endDate}`;\n    this.internals.setFormValue(combineVals);\n\n    if (this.startDate > this.endDate) {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'State date must be before end date.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-date-range-picker': DateRangePicker;\n  }\n}\n"],"names":["DateRangePicker","LitElement","constructor","this","regexDateFormat","internals","attachInternals","caption","size","startDate","endDate","name","required","disabled","invalidText","warnText","maxDate","minDate","step","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","_b","_a","e","handleStartDate","_d","_c","handleEndDate","updated","changedProps","has","undefined","get","setValidity","valueMissing","validationMessage","validateMinDate","validateMaxDate","validateStartEndDate","target","value","validateAndDispatchEvent","event","CustomEvent","detail","dispatchEvent","date","test","rangeUnderflow","patternMismatch","rangeOverflow","combineVals","setFormValue","styles","DateRangePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"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"}

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA6JN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBhB,iBAAiB;IA2B1B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CAyFnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;AAMnE;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,iDAAiD;IAEjD,IAAI,SAAQ;IAEZ,kCAAkC;IAElC,MAAM,UAAS;IAEf,uCAAuC;IAEvC,OAAO,SAAM;IAEb,4BAA4B;IAE5B,WAAW,SAAM;IAEjB,qBAAqB;IAErB,IAAI,SAAM;IAEV,iCAAiC;IAEjC,IAAI,UAAS;IAEb,qCAAqC;IAErC,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,mCAAmC;IAEnC,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,EAAE,GAAG,CAAM;IAEhB;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,UAAU,SAAM;IAEhB;;;OAGG;IAEH,aAAa,SAA4B;IAEzC;;;OAGG;IAEH,OAAO,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAErB;;;OAGG;IAEH,eAAe,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAE7B;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;;OAGG;IAEH,QAAQ,EAAG,WAAW,CAAC;IAEvB;;;OAGG;IAEH,SAAS,EAAG,WAAW,CAAC;IAExB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA6JN,YAAY;IAarB,OAAO,CAAC,gBAAgB;IAIxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,cAAc;IAsHtB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBhB,iBAAiB;IA2B1B,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,SAAS;IASR,OAAO,CAAC,YAAY,EAAE,GAAG;CA+FnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAC;KAC1B;CACF"}

package/components/reusable/dropdown/dropdown.js

@@ -111,5 +111,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
           ${this.assistiveText}
         </div>
       </div>
-    `}firstUpdated(){this.resetSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.searchText="",this.searchEl.value="",this.multiple||(this.value="")}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>{this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()})),this.addEventListener("on-blur",(t=>{const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}))}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")){if(this.multiple||(this.open=!1),this.multiple){const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this.internals.setFormValue(t)}else this.internals.setFormValue(this.value);if(this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value));this.text=t.text}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""))}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=r,v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
+    `}firstUpdated(){this.resetSelection(),""===this.placeholder&&(this.multiple?this.placeholder="Select items":this.placeholder="Select an option")}handleSlotChange(){this.resetSelection()}resetSelection(){const t=[];let e="";this.options.forEach((i=>{i.selected&&(this.multiple?t.push(i.value):e=i.value)})),this.multiple?this.value=t:this.value=e}handleClick(){this.disabled||(this.open=!this.open,this.searchable&&this.searchEl.focus())}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),(!t.relatedTarget||t.relatedTarget&&"kyn-dropdown-option"!==t.relatedTarget.localName)&&(this.open=!1),this.assistiveText="Dropdown menu options."}handleKeyboard(t,e,i){const s=[0,32],l=this.options.find((t=>t.highlighted)),o=this.options.find((t=>t.selected)),a=l?this.options.indexOf(l):this.options.find((t=>t.selected))?this.options.indexOf(o):0;if(s.includes(e)&&t.preventDefault(),"button"===i){(s.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[a].highlighted=!0,this.multiple||""===this.value||this.options[a].scrollIntoView({block:"nearest"}))}switch(e){case 13:return void("list"===i&&(this.updateValue(this.options[a].value,!this.options[a].selected),this.assistiveText="Selected an item."));case 40:{let t=l||o?a===this.options.length-1?0:a+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===a?this.options.length-1:a-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[a].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.searchable?this.searchEl.focus():this.buttonEl.focus(),void(this.assistiveText="Dropdown menu options.");default:return}}handleClearMultiple(t){t.stopPropagation(),this.multiple?this.value=[]:this.value="",this.emitValue()}handleTagClear(t){this.updateValue(t,!1),this.emitValue()}handleClear(t){t.stopPropagation(),this.searchText="",this.searchEl.value="",this.multiple||(this.value="")}handleSearchClick(t){t.stopPropagation(),this.open=!0}handleButtonBlur(t){var e,i;(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("search"))||(this.open=!1)}handleSearchBlur(t){var e,i;t.relatedTarget&&("kyn-dropdown-option"===t.relatedTarget.localName||(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("options"))||(null===(i=t.relatedTarget)||void 0===i?void 0:i.classList.contains("select")))||(this.open=!1)}handleSearchKeydown(t){t.stopPropagation();const e=this.options.find((t=>t.highlighted));13===t.keyCode&&e&&(this.updateValue(e.value,e.selected),this.assistiveText="Selected an item."),27===t.keyCode&&(this.open=!1,this.buttonEl.focus())}handleSearchInput(t){const e=t.target.value;this.searchText=e,this.open=!0;const i=this.options.filter((t=>t.text.toLowerCase().startsWith(e.toLowerCase())));this.options.forEach((t=>t.highlighted=!1)),""!==e&&i.length&&(i[0].highlighted=!0,i[0].scrollIntoView({block:"nearest"}))}connectedCallback(){super.connectedCallback(),this.addEventListener("on-click",(t=>{this.updateValue(t.detail.value,t.detail.selected),this.assistiveText="Selected an item.",this.emitValue()})),this.addEventListener("on-blur",(t=>{const e=t.detail.origEvent.relatedTarget;(!e||"kyn-dropdown-option"!==e.localName&&"kyn-dropdown"!==e.localName)&&(this.open=!1)}))}updateValue(t,e=!1){const i=JSON.parse(JSON.stringify(this.value));if(this.multiple){if(e)i.push(t);else{const e=i.indexOf(t);i.splice(e,1)}this.value=i}else this.value=t;this.multiple||(this.searchable?this.searchEl.focus():this.buttonEl.focus())}emitValue(){const t=new CustomEvent("on-change",{detail:{value:this.value}});this.dispatchEvent(t)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg);const e=t.get("value");if(this.multiple?t.has("value")&&void 0!==e&&""!==e:t.has("value")&&void 0!==e){if(this.multiple||(this.open=!1),this.multiple){const t=new FormData;this.value.forEach((e=>{t.append(this.name,e)})),this.internals.setFormValue(t)}else this.internals.setFormValue(this.value);if(this.options.forEach((t=>{this.multiple?t.selected=this.value.includes(t.value):t.selected=this.value===t.value})),!this.multiple){if(this.options.length&&""!==this.value){const t=this.options.find((t=>t.value===this.value));this.text=t.text}this.searchText=this.text===this.placeholder?"":this.text,this.searchEl&&(this.searchEl.value=this.searchText)}this.required&&(!this.value||this.multiple&&!this.value.length||!this.multiple&&""===this.value?(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""))}t.has("open")&&this.open&&!this.searchable&&(this.listboxEl.focus({preventScroll:!0}),this.assistiveText="Selecting items. Use up and down arrow keys to navigate."),t.has("multiple")&&this.options.forEach((t=>{t.multiple=this.multiple}))}};v.styles=r,v.formAssociated=!0,t([o()],v.prototype,"internals",void 0),t([l({type:String})],v.prototype,"size",void 0),t([l({type:Boolean})],v.prototype,"inline",void 0),t([l({type:String})],v.prototype,"caption",void 0),t([l({type:String})],v.prototype,"placeholder",void 0),t([l({type:String})],v.prototype,"name",void 0),t([l({type:Boolean})],v.prototype,"open",void 0),t([l({type:Boolean})],v.prototype,"searchable",void 0),t([l({type:Boolean})],v.prototype,"multiple",void 0),t([l({type:Boolean})],v.prototype,"required",void 0),t([l({type:Boolean})],v.prototype,"disabled",void 0),t([l({type:String})],v.prototype,"invalidText",void 0),t([o()],v.prototype,"value",void 0),t([o()],v.prototype,"text",void 0),t([o()],v.prototype,"searchText",void 0),t([o()],v.prototype,"assistiveText",void 0),t([n({selector:"kyn-dropdown-option"})],v.prototype,"options",void 0),t([n({selector:"kyn-dropdown-option[selected]"})],v.prototype,"selectedOptions",void 0),t([a(".search")],v.prototype,"searchEl",void 0),t([a(".select")],v.prototype,"buttonEl",void 0),t([a(".options")],v.prototype,"listboxEl",void 0),t([o()],v.prototype,"internalValidationMsg",void 0),t([o()],v.prototype,"isInvalid",void 0),v=t([s("kyn-dropdown")],v);export{v as Dropdown};
 //# sourceMappingURL=dropdown.js.map

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=\"Search\"\n                      value=${this.text}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    ${this.multiple\n                      ? this.placeholder\n                      : this.value === ''\n                      ? this.placeholder\n                      : this.text}\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              <slot @slotchange=${() => this.handleSlotChange()}></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const text = option.text;\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this.resetSelection();\n\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.multiple) {\n        this.placeholder = 'Select items';\n      } else {\n        this.placeholder = 'Select an option';\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  private resetSelection() {\n    // get value from selected options\n    const values: any = [];\n    let value = '';\n    this.options.forEach((option: any) => {\n      if (option.selected) {\n        if (this.multiple) {\n          values.push(option.value);\n        } else {\n          value = option.value;\n        }\n      }\n    });\n\n    // set initial values\n    if (this.multiple) {\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => {\n      // set selected value\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n\n      // emit selected value\n      this.emitValue();\n    });\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => {\n      const relatedTarget = e.detail.origEvent.relatedTarget;\n\n      if (\n        !relatedTarget ||\n        (relatedTarget.localName !== 'kyn-dropdown-option' &&\n          relatedTarget.localName !== 'kyn-dropdown')\n      ) {\n        this.open = false;\n      }\n    });\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      if (this.multiple) {\n        const entries = new FormData();\n        this.value.forEach((value: string) => {\n          entries.append(this.name, value);\n        });\n        this.internals.setFormValue(entries);\n      } else {\n        this.internals.setFormValue(this.value);\n      }\n\n      // set selected state for each option\n      this.options.forEach((option: any) => {\n        if (this.multiple) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          this.text = option.text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n\n      // set validity\n      if (this.required) {\n        if (\n          !this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')\n        ) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'This field is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","handleTagClear","firstUpdated","resetSelection","values","forEach","selected","push","focus","handleKeyboard","keyCode","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","emitValue","_a","classList","contains","_b","filter","toLowerCase","startsWith","connectedCallback","super","addEventListener","detail","origEvent","JSON","parse","stringify","index","splice","event","CustomEvent","dispatchEvent","updated","changedProps","has","entries","FormData","append","setFormValue","setValidity","valueMissing","validationMessage","listboxEl","preventScroll","styles","DropdownScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends LitElement {\n  static override styles = DropdownScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Dropdown name. */\n  @property({ type: String })\n  name = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Dropdown invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /**\n   * Selected option value.\n   * @ignore\n   */\n  @state()\n  value: any = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   * @ignore\n   */\n  @state()\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label for=${this.name} id=\"label-${this.name}\" class=\"label-text\">\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              role=\"button\"\n              aria-labelledby=\"label-${this.name}\"\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this.isInvalid}\n              tabindex=${this.searchable ? '-1' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"Clear selections\"\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=\"Search\"\n                      value=${this.text}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    ${this.multiple\n                      ? this.placeholder\n                      : this.value === ''\n                      ? this.placeholder\n                      : this.text}\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              class=${classMap({\n                options: true,\n                open: this.open,\n              })}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              <slot @slotchange=${() => this.handleSlotChange()}></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n        </div>\n\n        ${this.multiple && this.value.length\n          ? html`\n              <div class=\"tags\">\n                ${this.value.map((value: string) => {\n                  const option = this.options.find(\n                    (option) => option.value === value\n                  );\n                  const text = option.text;\n\n                  return html`\n                    <button\n                      class=\"tag\"\n                      aria-label=\"Deselect ${text}\"\n                      @click=${() => this.handleTagClear(option.value)}\n                    >\n                      ${text}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `;\n                })}\n              </div>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this.resetSelection();\n\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.multiple) {\n        this.placeholder = 'Select items';\n      } else {\n        this.placeholder = 'Select an option';\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  private resetSelection() {\n    // get value from selected options\n    const values: any = [];\n    let value = '';\n    this.options.forEach((option: any) => {\n      if (option.selected) {\n        if (this.multiple) {\n          values.push(option.value);\n        } else {\n          value = option.value;\n        }\n      }\n    });\n\n    // set initial values\n    if (this.multiple) {\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget && e.relatedTarget.localName !== 'kyn-dropdown-option')\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const highlightedEl = this.options.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = this.options.find((option: any) => option.selected);\n    const highlightedIndex = highlightedEl\n      ? this.options.indexOf(highlightedEl)\n      : this.options.find((option: any) => option.selected)\n      ? this.options.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    // open the listbox\n    if (target === 'button') {\n      const openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (openDropdown) {\n        this.open = true;\n        this.options[highlightedIndex].highlighted = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          this.options[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n\n    switch (keyCode) {\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        if (target === 'list') {\n          this.updateValue(\n            this.options[highlightedIndex].value,\n            !this.options[highlightedIndex].selected\n          );\n          this.assistiveText = 'Selected an item.';\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === this.options.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === this.options.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? this.options.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (this.options[nextIndex].disabled) {\n          nextIndex = nextIndex === 0 ? this.options.length - 1 : nextIndex - 1;\n        }\n\n        this.options[highlightedIndex].highlighted = false;\n        this.options[nextIndex].highlighted = true;\n\n        // scroll to option\n        this.options[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = this.options[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this.emitValue();\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE && option) {\n      this.updateValue(option.value, option.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    // find matches\n    const options = this.options.filter((option: any) => {\n      const text = option.text;\n      return text.toLowerCase().startsWith(value.toLowerCase());\n    });\n\n    // reset options highlighted state\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // option highlight and scroll\n    if (value !== '' && options.length) {\n      options[0].highlighted = true;\n      options[0].scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => {\n      // set selected value\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n\n      // emit selected value\n      this.emitValue();\n    });\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => {\n      const relatedTarget = e.detail.origEvent.relatedTarget;\n\n      if (\n        !relatedTarget ||\n        (relatedTarget.localName !== 'kyn-dropdown-option' &&\n          relatedTarget.localName !== 'kyn-dropdown')\n      ) {\n        this.open = false;\n      }\n    });\n  }\n\n  private updateValue(value: string, selected = false) {\n    const values = JSON.parse(JSON.stringify(this.value));\n\n    // set value\n    if (this.multiple) {\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    const oldValue = changedProps.get('value');\n    const valueChanged = this.multiple\n      ? changedProps.has('value') && oldValue !== undefined && oldValue !== ''\n      : changedProps.has('value') && oldValue !== undefined;\n\n    if (valueChanged) {\n      // close listbox\n      if (!this.multiple) {\n        this.open = false;\n      }\n\n      // set form data value\n      if (this.multiple) {\n        const entries = new FormData();\n        this.value.forEach((value: string) => {\n          entries.append(this.name, value);\n        });\n        this.internals.setFormValue(entries);\n      } else {\n        this.internals.setFormValue(this.value);\n      }\n\n      // set selected state for each option\n      this.options.forEach((option: any) => {\n        if (this.multiple) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n\n      // update selected option text\n      if (!this.multiple) {\n        if (this.options.length && this.value !== '') {\n          const option = this.options.find(\n            (option) => option.value === this.value\n          );\n          this.text = option.text;\n        }\n\n        // set search input value\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        if (this.searchEl) {\n          this.searchEl.value = this.searchText;\n        }\n      }\n\n      // set validity\n      if (this.required) {\n        if (\n          !this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')\n        ) {\n          this.internals.setValidity(\n            { valueMissing: true },\n            'This field is required.'\n          );\n          this.internalValidationMsg = this.internals.validationMessage;\n        } else {\n          this.internals.setValidity({});\n          this.internalValidationMsg = '';\n          this.invalidText = '';\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","internals","attachInternals","size","inline","caption","placeholder","name","open","searchable","multiple","required","disabled","invalidText","value","text","searchText","assistiveText","internalValidationMsg","isInvalid","render","html","classMap","wrapper","select","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","option","find","handleTagClear","firstUpdated","resetSelection","values","forEach","selected","push","focus","handleKeyboard","keyCode","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","highlightedEl","selectedEl","highlightedIndex","indexOf","includes","scrollIntoView","block","updateValue","nextIndex","buttonEl","stopPropagation","emitValue","_a","classList","contains","_b","filter","toLowerCase","startsWith","connectedCallback","super","addEventListener","detail","origEvent","JSON","parse","stringify","index","splice","event","CustomEvent","dispatchEvent","updated","changedProps","has","oldValue","get","undefined","entries","FormData","append","setFormValue","setValidity","valueMissing","validationMessage","listboxEl","preventScroll","styles","DropdownScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/components/reusable/textArea/textArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA+Cf,OAAO,CAAC,WAAW;IAaV,OAAO,CAAC,YAAY,EAAE,GAAG;CAuCnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}
+{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IA+Cf,OAAO,CAAC,WAAW;IAaV,OAAO,CAAC,YAAY,EAAE,GAAG;CAwCnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}

package/components/reusable/textArea/textArea.js

@@ -33,5 +33,5 @@ ${this.value}</textarea
               </div>
             `:null}
       </div>
-    `}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.internals.setFormValue(this.value),!this.required||this.value&&""!==this.value?this.minLength&&this.value.length<this.minLength?(this.internals.setValidity({tooShort:!0},"Too few characters."),this.internalValidationMsg=this.internals.validationMessage):this.maxLength&&this.value.length>this.maxLength?(this.internals.setValidity({tooLong:!0},"Too many characters."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage))}};d.styles=o,d.formAssociated=!0,t([n()],d.prototype,"internals",void 0),t([a({type:String})],d.prototype,"caption",void 0),t([a({type:String})],d.prototype,"value",void 0),t([a({type:String})],d.prototype,"placeholder",void 0),t([a({type:String})],d.prototype,"name",void 0),t([a({type:Boolean})],d.prototype,"required",void 0),t([a({type:Boolean})],d.prototype,"disabled",void 0),t([a({type:String})],d.prototype,"invalidText",void 0),t([a({type:Number})],d.prototype,"maxLength",void 0),t([a({type:Number})],d.prototype,"minLength",void 0),t([n()],d.prototype,"internalValidationMsg",void 0),t([n()],d.prototype,"isInvalid",void 0),d=t([s("kyn-text-area")],d);export{d as TextArea};
+    `}handleInput(t){this.value=t.target.value;const e=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(e)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("value")&&t.has("value")&&(this.internals.setFormValue(this.value),!this.required||this.value&&""!==this.value?this.minLength&&this.value.length<this.minLength?(this.internals.setValidity({tooShort:!0},"Too few characters."),this.internalValidationMsg=this.internals.validationMessage):this.maxLength&&this.value.length>this.maxLength?(this.internals.setValidity({tooLong:!0},"Too many characters."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage))}};d.styles=o,d.formAssociated=!0,t([n()],d.prototype,"internals",void 0),t([a({type:String})],d.prototype,"caption",void 0),t([a({type:String})],d.prototype,"value",void 0),t([a({type:String})],d.prototype,"placeholder",void 0),t([a({type:String})],d.prototype,"name",void 0),t([a({type:Boolean})],d.prototype,"required",void 0),t([a({type:Boolean})],d.prototype,"disabled",void 0),t([a({type:String})],d.prototype,"invalidText",void 0),t([a({type:Number})],d.prototype,"maxLength",void 0),t([a({type:Number})],d.prototype,"minLength",void 0),t([n()],d.prototype,"internalValidationMsg",void 0),t([n()],d.prototype,"isInvalid",void 0),d=t([s("kyn-text-area")],d);export{d as TextArea};
 //# sourceMappingURL=textArea.js.map

package/components/reusable/textArea/textArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength = null;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength = null;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      // set form data value\n      this.internals.setFormValue(this.value);\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.minLength && this.value.length < this.minLength) {\n        // validate min\n        this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.maxLength && this.value.length > this.maxLength) {\n        // validate max\n        this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        // clear validation\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n        this.invalidText = '';\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","maxLength","minLength","internalValidationMsg","isInvalid","render","html","ifDefined","e","handleInput","errorIcon","length","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","setFormValue","setValidity","tooShort","validationMessage","tooLong","valueMissing","styles","TextAreaScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength = null;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength = null;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n      // set form data value\n      this.internals.setFormValue(this.value);\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.minLength && this.value.length < this.minLength) {\n        // validate min\n        this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.maxLength && this.value.length > this.maxLength) {\n        // validate max\n        this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        // clear validation\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n        this.invalidText = '';\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","maxLength","minLength","internalValidationMsg","isInvalid","render","html","ifDefined","e","handleInput","errorIcon","length","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","setFormValue","setValidity","tooShort","validationMessage","tooLong","valueMissing","styles","TextAreaScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","customElement"],"mappings":"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"}

package/components/reusable/textInput/textInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,2DAA2D;IAE3D,IAAI,SAAU;IAEd,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,iCAAiC;IAEjC,OAAO,OAAQ;IAEf,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,+BAA+B;IAE/B,SAAS,UAAS;IAElB;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAgEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAKV,OAAO,CAAC,YAAY,EAAE,GAAG;IAoDzB,YAAY;IAIrB,OAAO,CAAC,kBAAkB;CAG3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}
+{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAYvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,+BAAiB;IAEvC;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,2DAA2D;IAE3D,IAAI,SAAU;IAEd,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,iCAAiC;IAEjC,OAAO,OAAQ;IAEf,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,oCAAoC;IAEpC,SAAS,OAAQ;IAEjB,+BAA+B;IAE/B,SAAS,UAAS;IAElB;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IAEH,QAAQ,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAgEf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAKV,OAAO,CAAC,YAAY,EAAE,GAAG;IAqDzB,YAAY;IAIrB,OAAO,CAAC,kBAAkB;CAG3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}

package/components/reusable/textInput/textInput.js

@@ -43,5 +43,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </div>
-    `}handleInput(t){this.value=t.target.value;const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}handleClear(){this.value="",this.inputEl.value=""}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value,this.internals.setFormValue(this.value),!this.required||this.value&&""!==this.value?this.minLength&&this.value.length<this.minLength?(this.internals.setValidity({tooShort:!0},"Too few characters."),this.internalValidationMsg=this.internals.validationMessage):this.maxLength&&this.value.length>this.maxLength?(this.internals.setValidity({tooLong:!0},"Too many characters."),this.internalValidationMsg=this.internals.validationMessage):this.pattern&&""!=this.pattern&&!new RegExp(this.pattern).test(this.value)?(this.internals.setValidity({patternMismatch:!0},"Does not match expected format."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage))}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}};c.styles=h,c.formAssociated=!0,t([o()],c.prototype,"internals",void 0),t([n({type:String})],c.prototype,"type",void 0),t([n({type:String})],c.prototype,"size",void 0),t([n({type:String})],c.prototype,"caption",void 0),t([n({type:String})],c.prototype,"value",void 0),t([n({type:String})],c.prototype,"placeholder",void 0),t([n({type:String})],c.prototype,"name",void 0),t([n({type:Boolean})],c.prototype,"required",void 0),t([n({type:Boolean})],c.prototype,"disabled",void 0),t([n({type:String})],c.prototype,"invalidText",void 0),t([n({type:String})],c.prototype,"pattern",void 0),t([n({type:Number})],c.prototype,"maxLength",void 0),t([n({type:Number})],c.prototype,"minLength",void 0),t([n({type:Boolean})],c.prototype,"iconRight",void 0),t([l("input")],c.prototype,"inputEl",void 0),t([o()],c.prototype,"iconSlotted",void 0),t([a({slot:"icon"})],c.prototype,"iconSlot",void 0),t([o()],c.prototype,"internalValidationMsg",void 0),t([o()],c.prototype,"isInvalid",void 0),c=t([s("kyn-text-input")],c);export{c as TextInput};
+    `}handleInput(t){this.value=t.target.value;const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}handleClear(){this.value="",this.inputEl.value=""}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("value")&&t.has("value")&&(this.inputEl.value=this.value,this.internals.setFormValue(this.value),!this.required||this.value&&""!==this.value?this.minLength&&this.value.length<this.minLength?(this.internals.setValidity({tooShort:!0},"Too few characters."),this.internalValidationMsg=this.internals.validationMessage):this.maxLength&&this.value.length>this.maxLength?(this.internals.setValidity({tooLong:!0},"Too many characters."),this.internalValidationMsg=this.internals.validationMessage):this.pattern&&""!=this.pattern&&!new RegExp(this.pattern).test(this.value)?(this.internals.setValidity({patternMismatch:!0},"Does not match expected format."),this.internalValidationMsg=this.internals.validationMessage):(this.internals.setValidity({}),this.internalValidationMsg="",this.invalidText=""):(this.internals.setValidity({valueMissing:!0},"This field is required."),this.internalValidationMsg=this.internals.validationMessage))}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}};c.styles=h,c.formAssociated=!0,t([o()],c.prototype,"internals",void 0),t([n({type:String})],c.prototype,"type",void 0),t([n({type:String})],c.prototype,"size",void 0),t([n({type:String})],c.prototype,"caption",void 0),t([n({type:String})],c.prototype,"value",void 0),t([n({type:String})],c.prototype,"placeholder",void 0),t([n({type:String})],c.prototype,"name",void 0),t([n({type:Boolean})],c.prototype,"required",void 0),t([n({type:Boolean})],c.prototype,"disabled",void 0),t([n({type:String})],c.prototype,"invalidText",void 0),t([n({type:String})],c.prototype,"pattern",void 0),t([n({type:Number})],c.prototype,"maxLength",void 0),t([n({type:Number})],c.prototype,"minLength",void 0),t([n({type:Boolean})],c.prototype,"iconRight",void 0),t([l("input")],c.prototype,"inputEl",void 0),t([o()],c.prototype,"iconSlotted",void 0),t([a({slot:"icon"})],c.prototype,"iconSlot",void 0),t([o()],c.prototype,"internalValidationMsg",void 0),t([o()],c.prototype,"isInvalid",void 0),c=t([s("kyn-text-input")],c);export{c as TextInput};
 //# sourceMappingURL=textInput.js.map

package/components/reusable/textInput/textInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n  static override styles = TextInputScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input type, limited to options that are \"text like\". */\n  @property({ type: String })\n  type = 'text';\n\n  /** Input size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** RegEx pattern to validate. */\n  @property({ type: String })\n  pattern = null;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength = null;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength = null;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Evaluates if an icon is slotted.\n   * @ignore\n   */\n  @state()\n  iconSlotted = false;\n\n  /**\n   * Queries any slotted icons.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  iconSlot!: Array<HTMLElement>;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"text-input\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n            'icon--left': this.iconSlotted && !this.iconRight,\n            'icon--right': this.iconSlotted && this.iconRight,\n          })}\"\n        >\n          <span class=\"context-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=${this.type}\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            pattern=${ifDefined(this.pattern)}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.value !== ''\n            ? html`\n                <button class=\"clear\" @click=${() => this.handleClear()}>\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      this.internals.setFormValue(this.value);\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.minLength && this.value.length < this.minLength) {\n        // validate min\n        this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.maxLength && this.value.length > this.maxLength) {\n        // validate max\n        this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (\n        this.pattern &&\n        this.pattern != '' &&\n        !new RegExp(this.pattern).test(this.value)\n      ) {\n        // validate pattern\n        this.internals.setValidity(\n          { patternMismatch: true },\n          'Does not match expected format.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        // clear validation\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n        this.invalidText = '';\n      }\n    }\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n  }\n\n  private determineIfSlotted() {\n    this.iconSlotted = this.iconSlot.length ? true : false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-input': TextInput;\n  }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","pattern","maxLength","minLength","iconRight","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","handleInput","errorIcon","handleClear","clearIcon","target","event","CustomEvent","detail","origEvent","dispatchEvent","inputEl","updated","changedProps","has","setFormValue","length","setValidity","tooShort","validationMessage","tooLong","RegExp","test","patternMismatch","valueMissing","firstUpdated","determineIfSlotted","iconSlot","styles","TextInputScss","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"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"}
+{"version":3,"file":"textInput.js","sources":["../../../../src/components/reusable/textInput/textInput.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TextInputScss from './textInput.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text input.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} pattern - RegEx pattern to validate.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n * @slot icon - Slot for contextual icon.\n */\n@customElement('kyn-text-input')\nexport class TextInput extends LitElement {\n  static override styles = TextInputScss;\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input type, limited to options that are \"text like\". */\n  @property({ type: String })\n  type = 'text';\n\n  /** Input size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** RegEx pattern to validate. */\n  @property({ type: String })\n  pattern = null;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength = null;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength = null;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Evaluates if an icon is slotted.\n   * @ignore\n   */\n  @state()\n  iconSlotted = false;\n\n  /**\n   * Queries any slotted icons.\n   * @ignore\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  iconSlot!: Array<HTMLElement>;\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"text-input\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n            'icon--left': this.iconSlotted && !this.iconRight,\n            'icon--right': this.iconSlotted && this.iconRight,\n          })}\"\n        >\n          <span class=\"context-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=${this.type}\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            pattern=${ifDefined(this.pattern)}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.value !== ''\n            ? html`\n                <button class=\"clear\" @click=${() => this.handleClear()}>\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      this.internals.setFormValue(this.value);\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.minLength && this.value.length < this.minLength) {\n        // validate min\n        this.internals.setValidity({ tooShort: true }, 'Too few characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (this.maxLength && this.value.length > this.maxLength) {\n        // validate max\n        this.internals.setValidity({ tooLong: true }, 'Too many characters.');\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else if (\n        this.pattern &&\n        this.pattern != '' &&\n        !new RegExp(this.pattern).test(this.value)\n      ) {\n        // validate pattern\n        this.internals.setValidity(\n          { patternMismatch: true },\n          'Does not match expected format.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      } else {\n        // clear validation\n        this.internals.setValidity({});\n        this.internalValidationMsg = '';\n        this.invalidText = '';\n      }\n    }\n  }\n\n  override firstUpdated() {\n    this.determineIfSlotted();\n  }\n\n  private determineIfSlotted() {\n    this.iconSlotted = this.iconSlot.length ? true : false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-text-input': TextInput;\n  }\n}\n"],"names":["TextInput","LitElement","constructor","this","internals","attachInternals","type","size","caption","value","placeholder","name","required","disabled","invalidText","pattern","maxLength","minLength","iconRight","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","handleInput","errorIcon","handleClear","clearIcon","target","event","CustomEvent","detail","origEvent","dispatchEvent","inputEl","updated","changedProps","has","undefined","get","setFormValue","length","setValidity","tooShort","validationMessage","tooLong","RegExp","test","patternMismatch","valueMissing","firstUpdated","determineIfSlotted","iconSlot","styles","TextInputScss","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"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"}

package/components/reusable/timepicker/timepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAoB;IAC1C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb;;0FAEsF;IAEtF,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,WAAW,SAAM;IAEjB,4BAA4B;IAE5B,QAAQ,SAAM;IAEd;gDAC4C;IAE5C,OAAO,SAAM;IAEb;kDAC8C;IAE9C,OAAO,SAAM;IAEb;;2JAEuJ;IAEvJ,IAAI,SAAM;IAEV;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IACH,mBAAmB,SAAyB;IAC5C;;;OAGG;IACH,sBAAsB,SAAmB;IAEzC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAiDf,OAAO,CAAC,WAAW;IAYV,OAAO,CAAC,YAAY,EAAE,GAAG;IAwClC,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,aAAa;CAOtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"timepicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAInE;;;;;;GAMG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAAoB;IAC1C;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,IAAI,SAAQ;IAEZ,uCAAuC;IAEvC,OAAO,SAAM;IAEb;;0FAEsF;IAEtF,KAAK,SAAM;IAEX,uBAAuB;IAEvB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,+BAA+B;IAE/B,WAAW,SAAM;IAEjB,4BAA4B;IAE5B,QAAQ,SAAM;IAEd;gDAC4C;IAE5C,OAAO,SAAM;IAEb;kDAC8C;IAE9C,OAAO,SAAM;IAEb;;2JAEuJ;IAEvJ,IAAI,SAAM;IAEV;;;OAGG;IAEH,OAAO,EAAG,gBAAgB,CAAC;IAE3B;;;OAGG;IACH,mBAAmB,SAAyB;IAC5C;;;OAGG;IACH,sBAAsB,SAAmB;IAEzC;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAET,MAAM;IAiDf,OAAO,CAAC,WAAW;IAYV,OAAO,CAAC,YAAY,EAAE,GAAG;IAyClC,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,aAAa;CAOtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/timepicker/timepicker.js

@@ -32,5 +32,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             `:null}
         ${""===this.warnText||this.isInvalid?null:i`<div class="warn">${this.warnText}</div>`}
       </div>
-    `}handleInput(t){this.value=t.target.value;const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")){if(this.inputEl.value=this.value,this.internals.setFormValue(this.value),this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.value||""===this.value))return this.internals.setValidity({valueMissing:!0},"This field is required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.value&&""!==this.minTime&&this.validateMinTime(),""!==this.value&&""!==this.maxTime&&this.validateMaxTime()}}validateMinTime(){if(this.regexPatternWithoutSec.test(this.minTime)||this.regexPatternWithSec.test(this.minTime)){this.timeToSeconds(this.value)<this.timeToSeconds(this.minTime)&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter valid time within the min range."),this.internalValidationMsg=this.internals.validationMessage)}else this.internals.setValidity({patternMismatch:!0},"Please enter valid min time."),this.internalValidationMsg=this.internals.validationMessage}validateMaxTime(){if(this.regexPatternWithoutSec.test(this.maxTime)||this.regexPatternWithSec.test(this.maxTime)){this.timeToSeconds(this.value)>this.timeToSeconds(this.maxTime)&&(this.internals.setValidity({rangeOverflow:!0},"Please enter valid time within the max range."),this.internalValidationMsg=this.internals.validationMessage)}else this.internals.setValidity({patternMismatch:!0},"Please enter valid max time."),this.internalValidationMsg=this.internals.validationMessage}timeToSeconds(t){const[i,e,s]=t.split(":"),a=s?parseInt(s,10):0;return 3600*parseInt(i,10)+60*parseInt(e,10)+a}};m.styles=[d],m.formAssociated=!0,t([n()],m.prototype,"internals",void 0),t([a({type:String})],m.prototype,"size",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"value",void 0),t([a({type:String})],m.prototype,"name",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"invalidText",void 0),t([a({type:String})],m.prototype,"warnText",void 0),t([a({type:String})],m.prototype,"maxTime",void 0),t([a({type:String})],m.prototype,"minTime",void 0),t([a({type:String})],m.prototype,"step",void 0),t([l("input")],m.prototype,"inputEl",void 0),t([n()],m.prototype,"internalValidationMsg",void 0),t([n()],m.prototype,"isInvalid",void 0),m=t([s("kyn-time-picker")],m);export{m as TimePicker};
+    `}handleInput(t){this.value=t.target.value;const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){if((t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),void 0!==t.get("value")&&t.has("value")){if(this.inputEl.value=this.value,this.internals.setFormValue(this.value),this.internals.setValidity({}),this.invalidText="",this.internalValidationMsg="",this.required&&(!this.value||""===this.value))return this.internals.setValidity({valueMissing:!0},"This field is required."),void(this.internalValidationMsg=this.internals.validationMessage);""!==this.value&&""!==this.minTime&&this.validateMinTime(),""!==this.value&&""!==this.maxTime&&this.validateMaxTime()}}validateMinTime(){if(this.regexPatternWithoutSec.test(this.minTime)||this.regexPatternWithSec.test(this.minTime)){this.timeToSeconds(this.value)<this.timeToSeconds(this.minTime)&&(this.internals.setValidity({rangeUnderflow:!0},"Please enter valid time within the min range."),this.internalValidationMsg=this.internals.validationMessage)}else this.internals.setValidity({patternMismatch:!0},"Please enter valid min time."),this.internalValidationMsg=this.internals.validationMessage}validateMaxTime(){if(this.regexPatternWithoutSec.test(this.maxTime)||this.regexPatternWithSec.test(this.maxTime)){this.timeToSeconds(this.value)>this.timeToSeconds(this.maxTime)&&(this.internals.setValidity({rangeOverflow:!0},"Please enter valid time within the max range."),this.internalValidationMsg=this.internals.validationMessage)}else this.internals.setValidity({patternMismatch:!0},"Please enter valid max time."),this.internalValidationMsg=this.internals.validationMessage}timeToSeconds(t){const[i,e,s]=t.split(":"),a=s?parseInt(s,10):0;return 3600*parseInt(i,10)+60*parseInt(e,10)+a}};m.styles=[d],m.formAssociated=!0,t([n()],m.prototype,"internals",void 0),t([a({type:String})],m.prototype,"size",void 0),t([a({type:String})],m.prototype,"caption",void 0),t([a({type:String})],m.prototype,"value",void 0),t([a({type:String})],m.prototype,"name",void 0),t([a({type:Boolean})],m.prototype,"required",void 0),t([a({type:Boolean})],m.prototype,"disabled",void 0),t([a({type:String})],m.prototype,"invalidText",void 0),t([a({type:String})],m.prototype,"warnText",void 0),t([a({type:String})],m.prototype,"maxTime",void 0),t([a({type:String})],m.prototype,"minTime",void 0),t([a({type:String})],m.prototype,"step",void 0),t([l("input")],m.prototype,"inputEl",void 0),t([n()],m.prototype,"internalValidationMsg",void 0),t([n()],m.prototype,"isInvalid",void 0),m=t([s("kyn-time-picker")],m);export{m as TimePicker};
 //# sourceMappingURL=timepicker.js.map

package/components/reusable/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport TimePickerScss from './timepicker.scss';\n\n/**\n * Time picker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minTime - Minimum Time in hh:mm format.\n * @prop {string} maxTime - Maximum Time hh:mm format.\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-time-picker')\nexport class TimePicker extends LitElement {\n  static override styles = [TimePickerScss];\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** The value of the time input is always in 24-hour format that includes leading zeros: hh:mm,\n   *  regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).\n   *  If the time includes seconds (by step attribute), the format is always hh:mm:ss */\n  @property({ type: String })\n  value = '';\n\n  /** Time input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Time input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Time input warn text. */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum time in hh:mm or hh:mm:ss format\n   * only must always greater than minTime. */\n  @property({ type: String })\n  maxTime = '';\n\n  /** Minimum time in hh:mm or hh:mm:ss format\n   *  only & must always lesser than maxTime. */\n  @property({ type: String })\n  minTime = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * It takes value that equates to the number of seconds you want to increment by;\n   * the default (60 sec.). If you specify a value of less than 60 sec., the time input will show a seconds input area alongside the hours and minutes */\n  @property({ type: String })\n  step = '';\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  regexPatternWithSec = /^\\d{2}:\\d{2}:\\d{2}$/; // hh:mm:ss\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  regexPatternWithoutSec = /^\\d{2}:\\d{2}$/; // hh:mm\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"time-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n          })}\"\n        >\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"time\"\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            step=${ifDefined(this.step)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minTime)}\n            max=${ifDefined(this.maxTime)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this.isInvalid\n          ? html`<div class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n    if (changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      //set form data value\n      this.internals.setFormValue(this.value);\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.value !== '' && this.minTime !== '') {\n        this.validateMinTime();\n      }\n      // validate max\n      if (this.value !== '' && this.maxTime !== '') {\n        this.validateMaxTime();\n      }\n    }\n  }\n\n  private validateMinTime() {\n    if (\n      this.regexPatternWithoutSec.test(this.minTime) ||\n      this.regexPatternWithSec.test(this.minTime)\n    ) {\n      const enteredTimeInSeconds = this.timeToSeconds(this.value);\n      const minTimeinSeconds = this.timeToSeconds(this.minTime);\n      if (enteredTimeInSeconds < minTimeinSeconds) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter valid time within the min range.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min time.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateMaxTime() {\n    if (\n      this.regexPatternWithoutSec.test(this.maxTime) ||\n      this.regexPatternWithSec.test(this.maxTime)\n    ) {\n      const enteredTimeInSeconds = this.timeToSeconds(this.value);\n      const maxTimeinSeconds = this.timeToSeconds(this.maxTime);\n      if (enteredTimeInSeconds > maxTimeinSeconds) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter valid time within the max range.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max time.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private timeToSeconds(timeString: String) {\n    const [hours, minutes, seconds] = timeString.split(':');\n    const setSeconds = seconds ? parseInt(seconds, 10) : 0;\n    const totalTime =\n      parseInt(hours, 10) * 3600 + parseInt(minutes, 10) * 60 + setSeconds;\n    return totalTime;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-time-picker': TimePicker;\n  }\n}\n"],"names":["TimePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxTime","minTime","step","regexPatternWithSec","regexPatternWithoutSec","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","inputEl","setFormValue","setValidity","valueMissing","validationMessage","validateMinTime","validateMaxTime","test","timeToSeconds","rangeUnderflow","patternMismatch","rangeOverflow","timeString","hours","minutes","seconds","split","setSeconds","parseInt","styles","TimePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}
+{"version":3,"file":"timepicker.js","sources":["../../../../src/components/reusable/timepicker/timepicker.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport TimePickerScss from './timepicker.scss';\n\n/**\n * Time picker.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {string} minTime - Minimum Time in hh:mm format.\n * @prop {string} maxTime - Maximum Time hh:mm format.\n * @slot unnamed - Slot for label text.\n */\n\n@customElement('kyn-time-picker')\nexport class TimePicker extends LitElement {\n  static override styles = [TimePickerScss];\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** Input size. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** The value of the time input is always in 24-hour format that includes leading zeros: hh:mm,\n   *  regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).\n   *  If the time includes seconds (by step attribute), the format is always hh:mm:ss */\n  @property({ type: String })\n  value = '';\n\n  /** Time input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Time input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Time input warn text. */\n  @property({ type: String })\n  warnText = '';\n\n  /** Maximum time in hh:mm or hh:mm:ss format\n   * only must always greater than minTime. */\n  @property({ type: String })\n  maxTime = '';\n\n  /** Minimum time in hh:mm or hh:mm:ss format\n   *  only & must always lesser than maxTime. */\n  @property({ type: String })\n  minTime = '';\n\n  /** Specifies the granularity that the value must adhere to, or the special value any,\n   * It takes value that equates to the number of seconds you want to increment by;\n   * the default (60 sec.). If you specify a value of less than 60 sec., the time input will show a seconds input area alongside the hours and minutes */\n  @property({ type: String })\n  step = '';\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  @query('input')\n  inputEl!: HTMLInputElement;\n\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  regexPatternWithSec = /^\\d{2}:\\d{2}:\\d{2}$/; // hh:mm:ss\n  /**\n   * Queries the <input> DOM element.\n   * @ignore\n   */\n  regexPatternWithoutSec = /^\\d{2}:\\d{2}$/; // hh:mm\n\n  /**\n   * Internal validation message.\n   * @ignore\n   */\n  @state()\n  internalValidationMsg = '';\n\n  /**\n   * isInvalid when internalValidationMsg or invalidText is non-empty.\n   * @ignore\n   */\n  @state()\n  isInvalid = false;\n\n  override render() {\n    return html`\n      <div class=\"time-picker\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div\n          class=\"${classMap({\n            'input-wrapper': true,\n          })}\"\n        >\n          <input\n            class=\"${classMap({\n              'size--sm': this.size === 'sm',\n              'size--lg': this.size === 'lg',\n            })}\"\n            type=\"time\"\n            id=${this.name}\n            name=${this.name}\n            value=${this.value}\n            step=${ifDefined(this.step)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            min=${ifDefined(this.minTime)}\n            max=${ifDefined(this.maxTime)}\n            @input=${(e: any) => this.handleInput(e)}\n          />\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n        ${this.warnText !== '' && !this.isInvalid\n          ? html`<div class=\"warn\">${this.warnText}</div>`\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n    // emit selected value\n    const event = new CustomEvent('on-input', {\n      detail: {\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      //check if any (internal / external )error msg. present then isInvalid is true\n      this.isInvalid =\n        this.invalidText !== '' || this.internalValidationMsg !== ''\n          ? true\n          : false;\n    }\n\n    if (changedProps.get('value') !== undefined && changedProps.has('value')) {\n      this.inputEl.value = this.value;\n      //set form data value\n      this.internals.setFormValue(this.value);\n      this.internals.setValidity({});\n      this.invalidText = '';\n      this.internalValidationMsg = '';\n\n      // set validity\n      if (this.required && (!this.value || this.value === '')) {\n        // validate required\n        this.internals.setValidity(\n          { valueMissing: true },\n          'This field is required.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n        return;\n      }\n      // validate min\n      if (this.value !== '' && this.minTime !== '') {\n        this.validateMinTime();\n      }\n      // validate max\n      if (this.value !== '' && this.maxTime !== '') {\n        this.validateMaxTime();\n      }\n    }\n  }\n\n  private validateMinTime() {\n    if (\n      this.regexPatternWithoutSec.test(this.minTime) ||\n      this.regexPatternWithSec.test(this.minTime)\n    ) {\n      const enteredTimeInSeconds = this.timeToSeconds(this.value);\n      const minTimeinSeconds = this.timeToSeconds(this.minTime);\n      if (enteredTimeInSeconds < minTimeinSeconds) {\n        this.internals.setValidity(\n          { rangeUnderflow: true },\n          'Please enter valid time within the min range.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid min time.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private validateMaxTime() {\n    if (\n      this.regexPatternWithoutSec.test(this.maxTime) ||\n      this.regexPatternWithSec.test(this.maxTime)\n    ) {\n      const enteredTimeInSeconds = this.timeToSeconds(this.value);\n      const maxTimeinSeconds = this.timeToSeconds(this.maxTime);\n      if (enteredTimeInSeconds > maxTimeinSeconds) {\n        this.internals.setValidity(\n          { rangeOverflow: true },\n          'Please enter valid time within the max range.'\n        );\n        this.internalValidationMsg = this.internals.validationMessage;\n      }\n    } else {\n      this.internals.setValidity(\n        { patternMismatch: true },\n        'Please enter valid max time.'\n      );\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n  }\n\n  private timeToSeconds(timeString: String) {\n    const [hours, minutes, seconds] = timeString.split(':');\n    const setSeconds = seconds ? parseInt(seconds, 10) : 0;\n    const totalTime =\n      parseInt(hours, 10) * 3600 + parseInt(minutes, 10) * 60 + setSeconds;\n    return totalTime;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-time-picker': TimePicker;\n  }\n}\n"],"names":["TimePicker","LitElement","constructor","this","internals","attachInternals","size","caption","value","name","required","disabled","invalidText","warnText","maxTime","minTime","step","regexPatternWithSec","regexPatternWithoutSec","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","e","handleInput","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","setFormValue","setValidity","valueMissing","validationMessage","validateMinTime","validateMaxTime","test","timeToSeconds","rangeUnderflow","patternMismatch","rangeOverflow","timeString","hours","minutes","seconds","split","setSeconds","parseInt","styles","TimePickerScss","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",