@kyndryl-design-system/shidoka-applications 1.6.0 → 1.6.2

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,this._validate(!0,!1);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("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h as DatePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);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("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,e){const i=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(i,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};h.styles=p,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([a({type:String})],h.prototype,"size",void 0),t([a({type:String})],h.prototype,"caption",void 0),t([a({type:String})],h.prototype,"value",void 0),t([a({type:String})],h.prototype,"name",void 0),t([a({type:Boolean})],h.prototype,"required",void 0),t([a({type:Boolean})],h.prototype,"disabled",void 0),t([a({type:String})],h.prototype,"invalidText",void 0),t([a({type:String})],h.prototype,"warnText",void 0),t([a({type:String})],h.prototype,"maxDate",void 0),t([a({type:String})],h.prototype,"minDate",void 0),t([a({type:String})],h.prototype,"step",void 0),t([a({type:String})],h.prototype,"datePickerType",void 0),t([l("input")],h.prototype,"inputEl",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),h=t([s("kyn-date-picker")],h);export{h 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 { DATE_PICKER_TYPES } 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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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!: string;\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!: string;\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!: string;\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\n    this._validate(true, false);\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: 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 (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\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      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","minDate","maxDate","step","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","inputEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","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 { DATE_PICKER_TYPES } 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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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!: string;\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!: string;\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!: string;\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\n    this._validate(true, false);\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: 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 (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\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      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","datePickerType","DATE_PICKER_TYPES","SINGLE","internalValidationMsg","isInvalid","render","html","classMap","WITHITIME","ifDefined","minDate","maxDate","step","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","DatePickerScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","query","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAkBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAuEf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}
+{"version":3,"file":"sideDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAGnE;;;;;GAKG;AAEH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,iCAiBpB;IAEF;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,SAAQ;IAErB;;OAEG;IAEH,aAAa,SAAY;IAEzB,mCAAmC;IAEnC,iBAAiB,UAAS;IAE1B,qCAAqC;IAErC,UAAU,UAAS;IAEnB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAuEf,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;KAC/B;CACF"}

package/components/reusable/sideDrawer/sideDrawer.js

@@ -58,7 +58,6 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
       @supports (transition-behavior: allow-discrete) {
         @starting-style {
           dialog[open] {
-            right: -100%;
             transform: translateX(100%);
           }
         }

package/components/reusable/sideDrawer/sideDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n  static override styles = [\n    SideDrawerScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            right: -100%;\n            transform: translateX(100%);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Drawer open state.\n   */\n  @property({ type: Boolean })\n  open = false;\n\n  /**\n   * Drawer size. `'md'`, or `'sm'`.\n   */\n  @property({ type: String })\n  size = 'md';\n\n  /**\n   * Title / Heading text, required.\n   */\n  @property({ type: String })\n  titleText = '';\n\n  /**\n   * Label text, optional.\n   */\n  @property({ type: String })\n  labelText = '';\n\n  /**\n   * Submit button text.\n   */\n  @property({ type: String })\n  submitBtnText = 'Ok';\n\n  /**\n   * Cancel button text.\n   */\n  @property({ type: String })\n  cancelBtnText = 'Cancel';\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  submitBtnDisabled = false;\n\n  /** Determine whether needs footer */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      modal: true,\n      dialog: true,\n      'size--md': this.size === 'md',\n      'size--sm': this.size === 'sm',\n    };\n\n    return html`\n      <button class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </button>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <div class=\"drawer-content-wrapper\">\n          <!--  Header -->\n          <header>\n            <div class=\"header-label-title\">\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n            </div>\n            <div class=\"close-wrapper\">\n              <button\n                class=\"close\"\n                @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n              >\n                <kd-icon .icon=${closeIcon}></kd-icon>\n              </button>\n            </div>\n          </header>\n          <!-- Body -->\n          <div>\n            <slot></slot>\n          </div>\n        </div>\n        <!-- footer -->\n        ${!this.hideFooter\n          ? html`\n              <div class=\"dialog-footer\">\n                <div class=\"actions\">\n                  <kd-button\n                    value=\"Ok\"\n                    ?disabled=${this.submitBtnDisabled}\n                    ?destructive=${this.destructive}\n                    @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n                  >\n                    ${this.submitBtnText}\n                  </kd-button>\n\n                  <kd-button\n                    value=\"Cancel\"\n                    kind=\"secondary\"\n                    @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n                  >\n                    ${this.cancelBtnText}\n                  </kd-button>\n                </div>\n              </div>\n            `\n          : null}\n      </dialog>\n    `;\n  }\n\n  private _openDrawer() {\n    this.open = true;\n  }\n\n  private _closeDrawer(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-side-drawer': SideDrawer;\n  }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","submitBtnDisabled","hideFooter","destructive","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"qhCAiBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAyBLC,KAAIC,MAAG,EAMPD,KAAIE,KAAG,KAMPF,KAASG,UAAG,GAMZH,KAASI,UAAG,GAMZJ,KAAaK,cAAG,KAMhBL,KAAaM,cAAG,SAIhBN,KAAiBO,mBAAG,EAIpBP,KAAUQ,YAAG,EAIbR,KAAWS,aAAG,CAqHf,CAzGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;sCACuBd,KAAKe;;;;;iBAK1BC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;;gBAMlB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;qCACmBJ,KAAKG;;;;;yBAKhBc,GAAajB,KAAKkB,aAAaD,EAAG;;iCAE3BE;;;;;;;;;;UAUtBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEOS,cACNf,KAAKC,MAAO,CACb,CAEOiB,aAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GAtLepC,EAAAqC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;;OAsBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAMbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACN7C,EAAA4C,UAAA,YAAA,GAMZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACG7C,EAAA4C,UAAA,qBAAA,GAMrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACO7C,EAAA4C,UAAA,qBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACQ3C,EAAA4C,UAAA,yBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3C,EAAA4C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA9C,EAAA4C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO/C,EAAA4C,UAAA,eAAA,GA7EH5C,EAAUwC,EAAA,CADtBQ,EAAc,oBACFhD"}
+{"version":3,"file":"sideDrawer.js","sources":["../../../../src/components/reusable/sideDrawer/sideDrawer.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport SideDrawerScss from './sideDrawer.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Side Drawer.\n * @slot unnamed - Slot for drawer body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the drawer close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n\n@customElement('kyn-side-drawer')\nexport class SideDrawer extends LitElement {\n  static override styles = [\n    SideDrawerScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            transform: translateX(100%);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Drawer open state.\n   */\n  @property({ type: Boolean })\n  open = false;\n\n  /**\n   * Drawer size. `'md'`, or `'sm'`.\n   */\n  @property({ type: String })\n  size = 'md';\n\n  /**\n   * Title / Heading text, required.\n   */\n  @property({ type: String })\n  titleText = '';\n\n  /**\n   * Label text, optional.\n   */\n  @property({ type: String })\n  labelText = '';\n\n  /**\n   * Submit button text.\n   */\n  @property({ type: String })\n  submitBtnText = 'Ok';\n\n  /**\n   * Cancel button text.\n   */\n  @property({ type: String })\n  cancelBtnText = 'Cancel';\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  submitBtnDisabled = false;\n\n  /** Determine whether needs footer */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Function to execute before the Drawer can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  override render() {\n    const classes = {\n      modal: true,\n      dialog: true,\n      'size--md': this.size === 'md',\n      'size--sm': this.size === 'sm',\n    };\n\n    return html`\n      <button class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </button>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <div class=\"drawer-content-wrapper\">\n          <!--  Header -->\n          <header>\n            <div class=\"header-label-title\">\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n            </div>\n            <div class=\"close-wrapper\">\n              <button\n                class=\"close\"\n                @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n              >\n                <kd-icon .icon=${closeIcon}></kd-icon>\n              </button>\n            </div>\n          </header>\n          <!-- Body -->\n          <div>\n            <slot></slot>\n          </div>\n        </div>\n        <!-- footer -->\n        ${!this.hideFooter\n          ? html`\n              <div class=\"dialog-footer\">\n                <div class=\"actions\">\n                  <kd-button\n                    value=\"Ok\"\n                    ?disabled=${this.submitBtnDisabled}\n                    ?destructive=${this.destructive}\n                    @click=${(e: Event) => this._closeDrawer(e, 'ok')}\n                  >\n                    ${this.submitBtnText}\n                  </kd-button>\n\n                  <kd-button\n                    value=\"Cancel\"\n                    kind=\"secondary\"\n                    @click=${(e: Event) => this._closeDrawer(e, 'cancel')}\n                  >\n                    ${this.cancelBtnText}\n                  </kd-button>\n                </div>\n              </div>\n            `\n          : null}\n      </dialog>\n    `;\n  }\n\n  private _openDrawer() {\n    this.open = true;\n  }\n\n  private _closeDrawer(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-side-drawer': SideDrawer;\n  }\n}\n"],"names":["SideDrawer","LitElement","constructor","this","open","size","titleText","labelText","submitBtnText","cancelBtnText","submitBtnDisabled","hideFooter","destructive","render","classes","modal","dialog","html","_openDrawer","classMap","e","_closeDrawer","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","SideDrawerScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"qhCAiBO,IAAMA,EAAN,cAAyBC,EAAzBC,kCAwBLC,KAAIC,MAAG,EAMPD,KAAIE,KAAG,KAMPF,KAASG,UAAG,GAMZH,KAASI,UAAG,GAMZJ,KAAaK,cAAG,KAMhBL,KAAaM,cAAG,SAIhBN,KAAiBO,mBAAG,EAIpBP,KAAUQ,YAAG,EAIbR,KAAWS,aAAG,CAqHf,CAzGUC,SACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;sCACuBd,KAAKe;;;;;iBAK1BC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;;gBAMlB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;qCACmBJ,KAAKG;;;;;yBAKhBc,GAAajB,KAAKkB,aAAaD,EAAG;;iCAE3BE;;;;;;;;;;UAUtBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEOS,cACNf,KAAKC,MAAO,CACb,CAEOiB,aAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEOM,gBAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQK,QAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GArLepC,EAAAqC,OAAS,CACvBC,EACAC,CAAG;;;;;;;;;;;;;;OAqBLC,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACL3C,EAAA4C,UAAA,YAAA,GAMbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACN7C,EAAA4C,UAAA,YAAA,GAMZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACH7C,EAAA4C,UAAA,iBAAA,GAMfJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACG7C,EAAA4C,UAAA,qBAAA,GAMrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,UACO7C,EAAA4C,UAAA,qBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACQ3C,EAAA4C,UAAA,yBAAA,GAI1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACC3C,EAAA4C,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,WACE3C,EAAA4C,UAAA,mBAAA,GAIpBJ,EAAA,CADCC,EAAS,CAAEK,WAAW,KACA9C,EAAA4C,UAAA,mBAAA,GAMvBJ,EAAA,CADCO,EAAM,WACO/C,EAAA4C,UAAA,eAAA,GA5EH5C,EAAUwC,EAAA,CADtBQ,EAAc,oBACFhD"}

package/components/reusable/sideDrawer/sideDrawer.scss.js

@@ -1,4 +1,4 @@
-import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as i}from'./../../../external/@lit/reactive-element/css-tag.js';var e=i`*,
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var i=e`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -217,7 +217,6 @@ h1 {
 @supports (transition-behavior: allow-discrete) {
   dialog {
     transition: right 400ms ease, transform 400ms ease, overlay 400ms ease allow-discrete, display 400ms ease allow-discrete;
-    right: -100%;
     transform: translateX(100%);
   }
   dialog::backdrop {
@@ -226,7 +225,6 @@ h1 {
   }
   dialog[open] {
     animation: none;
-    right: 0;
     transform: translateX(0);
   }
   dialog[open]::backdrop {
@@ -235,16 +233,10 @@ h1 {
 }
 @keyframes dialog-in {
   0% {
-    right: -100%;
     transform: translateX(100%);
   }
-  50% {
-    right: -50%;
-    transform: translateX(50%);
-  }
   100% {
-    right: 0;
     transform: translateX(0);
   }
-}`;export{e as default};
+}`;export{i as default};
 //# sourceMappingURL=sideDrawer.scss.js.map

package/components/reusable/sideDrawer/sideDrawer.scss.js.map

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

package/components/reusable/textInput/textInput.js

@@ -50,5 +50,5 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
               </div>
             `:null}
       </div>
-    `}_handleInput(t){this.value=t.target.value,this._validate(!0,!1),this._emitValue(t)}_handleClear(){this.value="",this.inputEl.value="",this._validate(!0,!1),this._emitValue()}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0)}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};c.styles=h,c.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},c.formAssociated=!0,t([n()],c.prototype,"internals",void 0),t([o({type:String})],c.prototype,"type",void 0),t([o({type:String})],c.prototype,"size",void 0),t([o({type:String})],c.prototype,"caption",void 0),t([o({type:String})],c.prototype,"value",void 0),t([o({type:String})],c.prototype,"placeholder",void 0),t([o({type:String})],c.prototype,"name",void 0),t([o({type:Boolean})],c.prototype,"required",void 0),t([o({type:Boolean})],c.prototype,"disabled",void 0),t([o({type:String})],c.prototype,"invalidText",void 0),t([o({type:String})],c.prototype,"pattern",void 0),t([o({type:Number})],c.prototype,"maxLength",void 0),t([o({type:Number})],c.prototype,"minLength",void 0),t([o({type:Boolean})],c.prototype,"iconRight",void 0),t([o({type:Boolean})],c.prototype,"hideLabel",void 0),t([a("input")],c.prototype,"inputEl",void 0),t([n()],c.prototype,"iconSlotted",void 0),t([l({slot:"icon"})],c.prototype,"iconSlot",void 0),t([n()],c.prototype,"internalValidationMsg",void 0),t([n()],c.prototype,"isInvalid",void 0),c=t([s("kyn-text-input")],c);export{c as TextInput};
+    `}_handleInput(t){this.value=t.target.value,this._validate(!0,!1),this._emitValue(t)}_handleClear(){this.value="",this.inputEl.value="",this._validate(!0,!1),this._emitValue()}_emitValue(t){const i={value:this.value};t&&(i.origEvent=t);const e=new CustomEvent("on-input",{detail:i});this.dispatchEvent(e)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0)}firstUpdated(){this.determineIfSlotted()}determineIfSlotted(){this.iconSlotted=!!this.iconSlot.length}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};c.styles=h,c.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},c.formAssociated=!0,t([n()],c.prototype,"internals",void 0),t([o({type:String})],c.prototype,"type",void 0),t([o({type:String})],c.prototype,"size",void 0),t([o({type:String})],c.prototype,"caption",void 0),t([o({type:String})],c.prototype,"value",void 0),t([o({type:String})],c.prototype,"placeholder",void 0),t([o({type:String})],c.prototype,"name",void 0),t([o({type:Boolean})],c.prototype,"required",void 0),t([o({type:Boolean})],c.prototype,"disabled",void 0),t([o({type:String})],c.prototype,"invalidText",void 0),t([o({type:String})],c.prototype,"pattern",void 0),t([o({type:Number})],c.prototype,"maxLength",void 0),t([o({type:Number})],c.prototype,"minLength",void 0),t([o({type:Boolean})],c.prototype,"iconRight",void 0),t([o({type:Boolean})],c.prototype,"hideLabel",void 0),t([a("input")],c.prototype,"inputEl",void 0),t([n()],c.prototype,"iconSlotted",void 0),t([l({slot:"icon"})],c.prototype,"iconSlot",void 0),t([n()],c.prototype,"internalValidationMsg",void 0),t([n()],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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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!: string;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = 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\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\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            '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\n                  ?disabled=${this.disabled}\n                  class=\"clear\"\n                  @click=${() => this._handleClear()}\n                >\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    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n\n    this._validate(true, false);\n    this._emitValue();\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\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.has('value')) {\n      // this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\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  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","pattern","minLength","maxLength","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_validate","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","firstUpdated","determineIfSlotted","iconSlot","length","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","shadowRootOptions","delegatesFocus","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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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!: string;\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** Place icon on the right. */\n  @property({ type: Boolean })\n  iconRight = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = 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\n          class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\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            '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\n                  ?disabled=${this.disabled}\n                  class=\"clear\"\n                  @click=${() => this._handleClear()}\n                >\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    this._validate(true, false);\n    this._emitValue(e);\n  }\n\n  private _handleClear() {\n    this.value = '';\n    this.inputEl.value = '';\n\n    this._validate(true, false);\n    this._emitValue();\n  }\n\n  private _emitValue(e?: any) {\n    const Detail: any = {\n      value: this.value,\n    };\n    if (e) {\n      Detail.origEvent = e;\n    }\n\n    const event = new CustomEvent('on-input', {\n      detail: Detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\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.has('value')) {\n      this.inputEl.value = this.value;\n      // set form data value\n      // this.internals.setFormValue(this.value);\n\n      this._validate(false, false);\n    }\n\n    if (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\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  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","iconRight","hideLabel","iconSlotted","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","pattern","minLength","maxLength","e","_handleInput","errorIcon","_handleClear","clearIcon","target","_validate","_emitValue","inputEl","Detail","origEvent","event","CustomEvent","detail","dispatchEvent","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","updated","changedProps","has","undefined","get","firstUpdated","determineIfSlotted","iconSlot","length","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextInputScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","Number","query","queryAssignedElements","slot","customElement"],"mappings":"2pCA0BO,IAAMA,EAAN,cAAwBC,EAAxBC,kCAmBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,OAIPH,KAAII,KAAG,KAIPJ,KAAOK,QAAG,GAIVL,KAAKM,MAAG,GAIRN,KAAWO,YAAG,GAIdP,KAAIQ,KAAG,GAIPR,KAAQS,UAAG,EAIXT,KAAQU,UAAG,EAIXV,KAAWW,YAAG,GAgBdX,KAASY,WAAG,EAIZZ,KAASa,WAAG,EAcZb,KAAWc,aAAG,EAcdd,KAAqBe,sBAAG,GAOxBf,KAASgB,WAAG,CAuMb,CArMUC,SACP,OAAOC,CAAI;0CAC2BlB,KAAKU;;8BAEjBV,KAAKa,UAAY,UAAY;gBAC3Cb,KAAKQ;;YAETR,KAAKS,SAAWS,CAAI,kCAAoC;;;;;mBAKjDC,EAAS,CAChB,iBAAiB,EACjB,aAAcnB,KAAKc,cAAgBd,KAAKY,UACxC,cAAeZ,KAAKc,aAAed,KAAKY;;;;;;;qBAQ/BO,EAAS,CAChB,WAA0B,OAAdnB,KAAKI,KACjB,WAA0B,OAAdJ,KAAKI;mBAEZJ,KAAKG;iBACPH,KAAKQ;mBACHR,KAAKQ;oBACJR,KAAKM;0BACCN,KAAKO;wBACPP,KAAKS;wBACLT,KAAKU;uBACNV,KAAKgB;sBACNI,EAAUpB,KAAKqB;wBACbD,EAAUpB,KAAKsB;wBACfF,EAAUpB,KAAKuB;qBACjBC,GAAWxB,KAAKyB,aAAaD;;;YAGvCxB,KAAKgB,UACHE,CAAI,sCAAsCQ,gBAC1C;YACa,KAAf1B,KAAKM,MACHY,CAAI;;8BAEYlB,KAAKU;;2BAER,IAAMV,KAAK2B;;mCAEHC;;gBAGrB;;;UAGa,KAAjB5B,KAAKK,QACHa,CAAI,yBAAyBlB,KAAKK,iBAClC;UACFL,KAAKgB,UACHE,CAAI;;kBAEElB,KAAKW,aAAeX,KAAKe;;cAG/B;;KAGT,CAEOU,aAAaD,GACnBxB,KAAKM,MAAQkB,EAAEK,OAAOvB,MAEtBN,KAAK8B,WAAU,GAAM,GACrB9B,KAAK+B,WAAWP,EACjB,CAEOG,eACN3B,KAAKM,MAAQ,GACbN,KAAKgC,QAAQ1B,MAAQ,GAErBN,KAAK8B,WAAU,GAAM,GACrB9B,KAAK+B,YACN,CAEOA,WAAWP,GACjB,MAAMS,EAAc,CAClB3B,MAAON,KAAKM,OAEVkB,IACFS,EAAOC,UAAYV,GAGrB,MAAMW,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQJ,IAEVjC,KAAKsC,cAAcH,EACpB,CAEOL,UAAUS,EAAqBC,GAErC,MAAMC,EACiB,KAArBzC,KAAKW,YACD,IAAKX,KAAKgC,QAAQU,SAAUC,aAAa,GACzC3C,KAAKgC,QAAQU,SAEbE,EACiB,KAArB5C,KAAKW,YACDX,KAAKW,YACLX,KAAKgC,QAAQa,kBAGnB7C,KAAKC,UAAU6C,YAAYL,EAAUG,EAAmB5C,KAAKgC,SAGzDO,IACFvC,KAAKe,sBAAwBf,KAAKC,UAAU4C,mBAI1CL,GACFxC,KAAKC,UAAU8C,gBAElB,CAEQC,QAAQC,IAEbA,EAAaC,IAAI,gBACjBD,EAAaC,IAAI,4BAGjBlD,KAAKgB,UACkB,KAArBhB,KAAKW,aAAqD,KAA/BX,KAAKe,uBAKhCkC,EAAaC,IAAI,WACnBlD,KAAKgC,QAAQ1B,MAAQN,KAAKM,MAI1BN,KAAK8B,WAAU,GAAO,IAItBmB,EAAaC,IAAI,qBACmBC,IAApCF,EAAaG,IAAI,gBAEjBpD,KAAK8B,WAAU,GAAO,EAEzB,CAEQuB,eACPrD,KAAKsD,oBACN,CAEOA,qBACNtD,KAAKc,cAAcd,KAAKuD,SAASC,MAClC,CAEOC,gBAAgBjC,GACtBA,EAAEkC,SAASC,OAAO3D,KAAKQ,KAAMR,KAAKM,MACnC,CAEOsD,iBACN5D,KAAKe,sBAAwBf,KAAKC,UAAU4C,iBAC7C,CAEQgB,oBACPC,MAAMD,oBAEF7D,KAAKC,UAAU8D,OACjB/D,KAAKC,UAAU8D,KAAKC,iBAAiB,YAAaxC,GAChDxB,KAAKyD,gBAAgBjC,KAGvBxB,KAAKgE,iBAAiB,WAAW,KAC/BhE,KAAK4D,gBAAgB,IAG1B,CAEQK,uBACHjE,KAAKC,UAAU8D,OACjB/D,KAAKC,UAAU8D,KAAKG,oBAAoB,YAAa1C,GACnDxB,KAAKyD,gBAAgBjC,KAGvBxB,KAAKkE,oBAAoB,WAAW,KAClClE,KAAK4D,gBAAgB,KAIzBE,MAAMG,sBACP,GAnTepE,EAAMsE,OAAGC,EAETvE,EAAAwE,kBAAoB,IAC/BvE,EAAWuE,kBACdC,gBAAgB,GAOXzE,EAAc0E,gBAAG,EAOxBC,EAAA,CADCC,KACkC5E,EAAA6E,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACJ/E,EAAA6E,UAAA,YAAA,GAIdF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACN/E,EAAA6E,UAAA,YAAA,GAIZF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACL/E,EAAA6E,UAAA,eAAA,GAIbF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACP/E,EAAA6E,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACR/E,EAAA6E,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACDhF,EAAA6E,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACDhF,EAAA6E,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,mBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAMyE,UACD/E,EAAA6E,UAAA,eAAA,GAIjBF,EAAA,CADCG,EAAS,CAAExE,KAAM2E,UACCjF,EAAA6E,UAAA,iBAAA,GAInBF,EAAA,CADCG,EAAS,CAAExE,KAAM2E,UACCjF,EAAA6E,UAAA,iBAAA,GAInBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACAhF,EAAA6E,UAAA,iBAAA,GAIlBF,EAAA,CADCG,EAAS,CAAExE,KAAM0E,WACAhF,EAAA6E,UAAA,iBAAA,GAOlBF,EAAA,CADCO,EAAM,UACoBlF,EAAA6E,UAAA,eAAA,GAO3BF,EAAA,CADCC,KACmB5E,EAAA6E,UAAA,mBAAA,GAOpBF,EAAA,CADCQ,EAAsB,CAAEC,KAAM,UACDpF,EAAA6E,UAAA,gBAAA,GAO9BF,EAAA,CADCC,KAC0B5E,EAAA6E,UAAA,6BAAA,GAO3BF,EAAA,CADCC,KACiB5E,EAAA6E,UAAA,iBAAA,GA9GP7E,EAAS2E,EAAA,CADrBU,EAAc,mBACFrF"}

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,this._validate(!0,!1);const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&this._validate(!1,!1)}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};p.styles=[r],p.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},p.formAssociated=!0,t([n()],p.prototype,"internals",void 0),t([a({type:String})],p.prototype,"size",void 0),t([a({type:String})],p.prototype,"caption",void 0),t([a({type:String})],p.prototype,"value",void 0),t([a({type:String})],p.prototype,"name",void 0),t([a({type:Boolean})],p.prototype,"required",void 0),t([a({type:Boolean})],p.prototype,"disabled",void 0),t([a({type:String})],p.prototype,"invalidText",void 0),t([a({type:String})],p.prototype,"warnText",void 0),t([a({type:String})],p.prototype,"maxTime",void 0),t([a({type:String})],p.prototype,"minTime",void 0),t([a({type:String})],p.prototype,"step",void 0),t([l("input")],p.prototype,"inputEl",void 0),t([n()],p.prototype,"internalValidationMsg",void 0),t([n()],p.prototype,"isInvalid",void 0),p=t([s("kyn-time-picker")],p);export{p as TimePicker};
+    `}handleInput(t){this.value=t.target.value,this._validate(!0,!1);const i=new CustomEvent("on-input",{detail:{value:t.target.value,origEvent:t}});this.dispatchEvent(i)}updated(t){(t.has("invalidText")||t.has("internalValidationMsg"))&&(this.isInvalid=""!==this.invalidText||""!==this.internalValidationMsg),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!0),t.has("value")&&(this.inputEl.value=this.value,this._validate(!1,!1))}_validate(t,i){const e=""!==this.invalidText?{...this.inputEl.validity,customError:!0}:this.inputEl.validity,s=""!==this.invalidText?this.invalidText:this.inputEl.validationMessage;this.internals.setValidity(e,s,this.inputEl),t&&(this.internalValidationMsg=this.internals.validationMessage),i&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this.internalValidationMsg=this.internals.validationMessage}connectedCallback(){super.connectedCallback(),this.internals.form&&(this.internals.form.addEventListener("formdata",(t=>this._handleFormdata(t))),this.addEventListener("invalid",(()=>{this._handleInvalid()})))}disconnectedCallback(){this.internals.form&&(this.internals.form.removeEventListener("formdata",(t=>this._handleFormdata(t))),this.removeEventListener("invalid",(()=>{this._handleInvalid()}))),super.disconnectedCallback()}};p.styles=[r],p.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},p.formAssociated=!0,t([n()],p.prototype,"internals",void 0),t([a({type:String})],p.prototype,"size",void 0),t([a({type:String})],p.prototype,"caption",void 0),t([a({type:String})],p.prototype,"value",void 0),t([a({type:String})],p.prototype,"name",void 0),t([a({type:Boolean})],p.prototype,"required",void 0),t([a({type:Boolean})],p.prototype,"disabled",void 0),t([a({type:String})],p.prototype,"invalidText",void 0),t([a({type:String})],p.prototype,"warnText",void 0),t([a({type:String})],p.prototype,"maxTime",void 0),t([a({type:String})],p.prototype,"minTime",void 0),t([a({type:String})],p.prototype,"step",void 0),t([l("input")],p.prototype,"inputEl",void 0),t([n()],p.prototype,"internalValidationMsg",void 0),t([n()],p.prototype,"isInvalid",void 0),p=t([s("kyn-time-picker")],p);export{p 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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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 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!: string;\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!: string;\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!: string;\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      <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\n    this._validate(true, false);\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 (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\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      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","step","minTime","maxTime","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","inputEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TimePickerScss","shadowRootOptions","delegatesFocus","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  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\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 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!: string;\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!: string;\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!: string;\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      <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\n    this._validate(true, false);\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 (\n      changedProps.has('invalidText') &&\n      changedProps.get('invalidText') !== undefined\n    ) {\n      this._validate(false, true);\n    }\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      this._validate(false, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.inputEl.validity, customError: true }\n        : this.inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this.internals.setValidity(Validity, ValidationMessage, this.inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.internals.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this.internals.reportValidity();\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    e.formData.append(this.name, this.value);\n  }\n\n  private _handleInvalid() {\n    this.internalValidationMsg = this.internals.validationMessage;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.internals.form) {\n      this.internals.form.addEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.addEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n\n      this.removeEventListener('invalid', () => {\n        this._handleInvalid();\n      });\n    }\n\n    super.disconnectedCallback();\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","internalValidationMsg","isInvalid","render","html","classMap","ifDefined","step","minTime","maxTime","e","handleInput","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","inputEl","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TimePickerScss","shadowRootOptions","delegatesFocus","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.6.0",
+  "version": "1.6.2",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",