@kyndryl-design-system/shidoka-applications 1.23.2 → 1.23.4

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,iCAkBpB;IAEF,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,mCAAmC;IAEnC,UAAU,UAAS;IAEnB,iEAAiE;IAEjE,UAAU,UAAS;IAEnB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAuFf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAInE;;;;;GAKG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,iCAkBpB;IAEF,wBAAwB;IAExB,IAAI,UAAS;IAEb,+CAA+C;IAE/C,IAAI,SAAU;IAEd,oCAAoC;IAEpC,SAAS,SAAM;IAEf,4BAA4B;IAE5B,SAAS,SAAM;IAEf,sBAAsB;IAEtB,MAAM,SAAQ;IAEd,0BAA0B;IAE1B,UAAU,SAAY;IAEtB,+EAA+E;IAE/E,WAAW,UAAS;IAEpB,mCAAmC;IAEnC,UAAU,UAAS;IAEnB,iEAAiE;IAEjE,UAAU,UAAS;IAEnB,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,4LAA4L;IAE5L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IAyFf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAUd,OAAO,CAAC,YAAY,EAAE,GAAG;CASnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAC;KACpB;CACF"}

package/components/reusable/modal/modal.js

@@ -9,25 +9,27 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
         aria-labelledby="dialogLabel"
         @cancel=${t=>this._closeModal(t,"cancel")}
       >
-        <button
-          class="close"
-          @click=${t=>this._closeModal(t,"cancel")}
-        >
-          <kd-icon .icon=${d}></kd-icon>
-        </button>
+        <form method="dialog">
+          <button
+            class="close"
+            @click=${t=>this._closeModal(t,"cancel")}
+          >
+            <kd-icon .icon=${d}></kd-icon>
+          </button>
 
-        <header>
-          <div>
-            ${""!==this.labelText?e`<span class="label">${this.labelText}</span>`:null}
-            <h1 id="dialogLabel">${this.titleText}</h1>
-          </div>
-        </header>
+          <header>
+            <div>
+              ${""!==this.labelText?e`<span class="label">${this.labelText}</span>`:null}
+              <h1 id="dialogLabel">${this.titleText}</h1>
+            </div>
+          </header>
 
-        <form method="dialog" class="body">
-          <slot></slot>
+          <div class="body">
+            <slot></slot>
+          </div>
 
           ${this.hideFooter?null:e`
-                <div class="actions">
+                <div class="footer">
                   <kd-button
                     class="action-button"
                     value="ok"

package/components/reusable/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.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 ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\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  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal 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      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <button\n          class=\"close\"\n          @click=${(e: Event) => this._closeModal(e, 'cancel')}\n        >\n          <kd-icon .icon=${closeIcon}></kd-icon>\n        </button>\n\n        <header>\n          <div>\n            ${this.labelText !== ''\n              ? html`<span class=\"label\">${this.labelText}</span>`\n              : null}\n            <h1 id=\"dialogLabel\">${this.titleText}</h1>\n          </div>\n        </header>\n\n        <form method=\"dialog\" class=\"body\">\n          <slot></slot>\n\n          ${!this.hideFooter\n            ? html`\n                <div class=\"actions\">\n                  <kd-button\n                    class=\"action-button\"\n                    value=\"ok\"\n                    ?destructive=${this.destructive}\n                    ?disabled=${this.okDisabled}\n                    @click=${(e: Event) => this._closeModal(e, 'ok')}\n                  >\n                    ${this.okText}\n                  </kd-button>\n                  ${this.showSecondaryButton\n                    ? html`\n                        <kd-button\n                          class=\"action-button\"\n                          value=\"Secondary\"\n                          kind=\"secondary\"\n                          @click=${(e: Event) =>\n                            this._closeModal(e, 'secondary')}\n                        >\n                          ${this.secondaryButtonText}\n                        </kd-button>\n                      `\n                    : null}\n                  ${this.hideCancelButton\n                    ? null\n                    : html`\n                        <kd-button\n                          class=\"action-button\"\n                          value=\"cancel\"\n                          kind=\"tertiary\"\n                          @click=${(e: Event) => this._closeModal(e, 'cancel')}\n                        >\n                          ${this.cancelText}\n                        </kd-button>\n                      `}\n                  <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                </div>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(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-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.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 ModalScss from './modal.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport closeIcon from '@carbon/icons/es/close/32';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\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  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal 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      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <button\n            class=\"close\"\n            @click=${(e: Event) => this._closeModal(e, 'cancel')}\n          >\n            <kd-icon .icon=${closeIcon}></kd-icon>\n          </button>\n\n          <header>\n            <div>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n            </div>\n          </header>\n\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n\n          ${!this.hideFooter\n            ? html`\n                <div class=\"footer\">\n                  <kd-button\n                    class=\"action-button\"\n                    value=\"ok\"\n                    ?destructive=${this.destructive}\n                    ?disabled=${this.okDisabled}\n                    @click=${(e: Event) => this._closeModal(e, 'ok')}\n                  >\n                    ${this.okText}\n                  </kd-button>\n                  ${this.showSecondaryButton\n                    ? html`\n                        <kd-button\n                          class=\"action-button\"\n                          value=\"Secondary\"\n                          kind=\"secondary\"\n                          @click=${(e: Event) =>\n                            this._closeModal(e, 'secondary')}\n                        >\n                          ${this.secondaryButtonText}\n                        </kd-button>\n                      `\n                    : null}\n                  ${this.hideCancelButton\n                    ? null\n                    : html`\n                        <kd-button\n                          class=\"action-button\"\n                          value=\"cancel\"\n                          kind=\"tertiary\"\n                          @click=${(e: Event) => this._closeModal(e, 'cancel')}\n                        >\n                          ${this.cancelText}\n                        </kd-button>\n                      `}\n                  <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                </div>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(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-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","render","classes","modal","html","_openModal","classMap","e","_closeModal","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","customElement"],"mappings":"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"}

package/components/reusable/modal/modal.scss.js

@@ -44,6 +44,7 @@ dialog {
   max-height: calc(100% - 32px);
 }
 dialog[open] {
+  display: flex;
   animation: dialog-in 400ms ease-out;
 }
 dialog::backdrop {
@@ -56,6 +57,12 @@ dialog.size--lg {
   width: 711px;
 }
 
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
 @supports (transition-behavior: allow-discrete) {
   dialog {
     transition: opacity 400ms ease-out, transform 400ms ease-out, overlay 400ms ease-out allow-discrete, display 400ms ease-out allow-discrete;
@@ -193,7 +200,7 @@ h1 {
   }
 }
 
-.actions {
+.footer {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -201,7 +208,7 @@ h1 {
   margin-top: 32px;
 }
 @media (max-width: 42rem) {
-  .actions kd-button {
+  .footer kd-button {
     width: 100%;
     flex-grow: 1;
   }
@@ -216,5 +223,11 @@ h1 {
 
 .action-button:nth-child(3) {
   margin-left: auto;
+}
+
+.body {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding-right: 24px;
 }`;export{e as default};
 //# sourceMappingURL=modal.scss.js.map

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

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

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

@@ -39,6 +39,12 @@ export declare class SideDrawer extends LitElement {
     hideFooter: boolean;
     /** Changes the primary button styles to indicate the action is destructive. */
     destructive: boolean;
+    /** Secondary button text. */
+    secondaryButtonText: string;
+    /** Hides the secondary button. */
+    showSecondaryButton: boolean;
+    /** Hides the cancel button. */
+    hideCancelButton: boolean;
     /** 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`. */
     beforeClose: Function;
     /** The dialog element

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,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;IAwEf,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,6BAA6B;IAE7B,mBAAmB,SAAe;IAElC,kCAAkC;IAElC,mBAAmB,UAAS;IAE5B,+BAA+B;IAE/B,gBAAgB,UAAS;IAEzB,6LAA6L;IAE7L,WAAW,EAAG,QAAQ,CAAC;IAEvB;;OAEG;IAEH,OAAO,EAAG,GAAG,CAAC;IAEL,MAAM;IA8Ff,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

@@ -1,61 +1,77 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import a from"./sideDrawer.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import n from'./../../../external/@carbon/icons/es/close/32.js';import{css as d}from'./../../../external/@lit/reactive-element/css-tag.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1}render(){const e={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--sm":"sm"===this.size};return t`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as s}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../../external/lit-html/directives/class-map.js';import r from"./sideDrawer.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import a from'./../../../external/@carbon/icons/es/close/32.js';import{css as d}from'./../../../external/@lit/reactive-element/css-tag.js';let c=class extends o{constructor(){super(...arguments),this.open=!1,this.size="md",this.titleText="",this.labelText="",this.submitBtnText="Ok",this.cancelBtnText="Cancel",this.submitBtnDisabled=!1,this.hideFooter=!1,this.destructive=!1,this.secondaryButtonText="Secondary",this.showSecondaryButton=!1,this.hideCancelButton=!1}render(){const t={modal:!0,dialog:!0,"size--md":"md"===this.size,"size--sm":"sm"===this.size};return e`
       <span class="anchor" @click=${this._openDrawer}>
         <slot name="anchor"></slot>
       </span>
 
       <dialog
-        class="${r(e)}"
+        class="${n(t)}"
         autofocus
         aria-labelledby="dialogLabel"
-        @cancel=${e=>this._closeDrawer(e,"cancel")}
+        @cancel=${t=>this._closeDrawer(t,"cancel")}
       >
-        <!--  Header -->
-        <header>
-          <div class="header-label-title">
-            ${""!==this.labelText?t`<span class="label">${this.labelText}</span>`:null}
-            <h1 id="dialogLabel">${this.titleText}</h1>
-          </div>
+        <form method="dialog">
+          <!--  Header -->
+          <header>
+            <div class="header-label-title">
+              ${""!==this.labelText?e`<span class="label">${this.labelText}</span>`:null}
+              <h1 id="dialogLabel">${this.titleText}</h1>
+            </div>
 
-          <div class="close-wrapper">
-            <button
-              class="close"
-              @click=${e=>this._closeDrawer(e,"cancel")}
-            >
-              <kd-icon .icon=${n}></kd-icon>
-            </button>
-          </div>
-        </header>
+            <div class="close-wrapper">
+              <button
+                class="close"
+                @click=${t=>this._closeDrawer(t,"cancel")}
+              >
+                <kd-icon .icon=${a}></kd-icon>
+              </button>
+            </div>
+          </header>
 
-        <!-- Body -->
-        <div class="body">
-          <slot></slot>
-        </div>
+          <!-- Body -->
+          <div class="body">
+            <slot></slot>
+          </div>
 
-        <!-- footer -->
-        ${this.hideFooter?null:t`
-              <div class="dialog-footer">
-                <div class="actions">
-                  <kd-button
-                    value="Ok"
-                    ?disabled=${this.submitBtnDisabled}
-                    ?destructive=${this.destructive}
-                    @click=${e=>this._closeDrawer(e,"ok")}
-                  >
-                    ${this.submitBtnText}
-                  </kd-button>
+          <!-- footer -->
+          ${this.hideFooter?null:e`
+                <div class="dialog-footer">
+                  <div class="actions">
+                    <kd-button
+                      class="action-button"
+                      value="Ok"
+                      ?disabled=${this.submitBtnDisabled}
+                      ?destructive=${this.destructive}
+                      @click=${t=>this._closeDrawer(t,"ok")}
+                    >
+                      ${this.submitBtnText}
+                    </kd-button>
 
-                  <kd-button
-                    value="Cancel"
-                    kind="secondary"
-                    @click=${e=>this._closeDrawer(e,"cancel")}
-                  >
-                    ${this.cancelBtnText}
-                  </kd-button>
+                    ${this.showSecondaryButton?e`
+                          <kd-button
+                            class="action-button"
+                            value="Secondary"
+                            kind="secondary"
+                            @click=${t=>this._closeDrawer(t,"secondary")}
+                          >
+                            ${this.secondaryButtonText}
+                          </kd-button>
+                        `:null}
+                    ${this.hideCancelButton?null:e`
+                          <kd-button
+                            class="action-button"
+                            value="Cancel"
+                            kind="tertiary"
+                            @click=${t=>this._closeDrawer(t,"cancel")}
+                          >
+                            ${this.cancelBtnText}
+                          </kd-button>
+                        `}
+                  </div>
                 </div>
-              </div>
-            `}
+              `}
+        </form>
       </dialog>
-    `}_openDrawer(){this.open=!0}_closeDrawer(e,t){(!this.beforeClose||this.beforeClose&&this.beforeClose(t))&&(this.open=!1,this._dialog.returnValue=t,this._emitCloseEvent(e))}_emitCloseEvent(e){const t=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};c.styles=[a,d`
+    `}_openDrawer(){this.open=!0}_closeDrawer(t,e){(!this.beforeClose||this.beforeClose&&this.beforeClose(e))&&(this.open=!1,this._dialog.returnValue=e,this._emitCloseEvent(t))}_emitCloseEvent(t){const e=new CustomEvent("on-close",{detail:{returnValue:this._dialog.returnValue,origEvent:t}});this.dispatchEvent(e)}updated(t){t.has("open")&&(this.open?this._dialog.showModal():this._dialog.close())}};c.styles=[r,d`
       @supports (transition-behavior: allow-discrete) {
         @starting-style {
           dialog[open] {
@@ -69,5 +85,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           }
         }
       }
-    `],e([i({type:Boolean})],c.prototype,"open",void 0),e([i({type:String})],c.prototype,"size",void 0),e([i({type:String})],c.prototype,"titleText",void 0),e([i({type:String})],c.prototype,"labelText",void 0),e([i({type:String})],c.prototype,"submitBtnText",void 0),e([i({type:String})],c.prototype,"cancelBtnText",void 0),e([i({type:Boolean})],c.prototype,"submitBtnDisabled",void 0),e([i({type:Boolean})],c.prototype,"hideFooter",void 0),e([i({type:Boolean})],c.prototype,"destructive",void 0),e([i({attribute:!1})],c.prototype,"beforeClose",void 0),e([l("dialog")],c.prototype,"_dialog",void 0),c=e([s("kyn-side-drawer")],c);export{c as SideDrawer};
+    `],t([i({type:Boolean})],c.prototype,"open",void 0),t([i({type:String})],c.prototype,"size",void 0),t([i({type:String})],c.prototype,"titleText",void 0),t([i({type:String})],c.prototype,"labelText",void 0),t([i({type:String})],c.prototype,"submitBtnText",void 0),t([i({type:String})],c.prototype,"cancelBtnText",void 0),t([i({type:Boolean})],c.prototype,"submitBtnDisabled",void 0),t([i({type:Boolean})],c.prototype,"hideFooter",void 0),t([i({type:Boolean})],c.prototype,"destructive",void 0),t([i({type:String})],c.prototype,"secondaryButtonText",void 0),t([i({type:Boolean})],c.prototype,"showSecondaryButton",void 0),t([i({type:Boolean})],c.prototype,"hideCancelButton",void 0),t([i({attribute:!1})],c.prototype,"beforeClose",void 0),t([l("dialog")],c.prototype,"_dialog",void 0),c=t([s("kyn-side-drawer")],c);export{c as SideDrawer};
 //# sourceMappingURL=sideDrawer.js.map

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            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      <span class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\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\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\n        <!-- Body -->\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n\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,EAAzB,WAAAC,uBAwBLC,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,CAsHf,CA1GU,MAAAC,GACP,MAAMC,EAAU,CACdC,OAAO,EACPC,QAAQ,EACR,WAA0B,OAAdb,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,MAGnB,OAAOY,CAAI;oCACqBd,KAAKe;;;;;iBAKxBC,EAASL;;;kBAGPM,GAAajB,KAAKkB,aAAaD,EAAG;;;;;cAKpB,KAAnBjB,KAAKI,UACHU,CAAI,uBAAuBd,KAAKI,mBAChC;mCACmBJ,KAAKG;;;;;;uBAMhBc,GAAajB,KAAKkB,aAAaD,EAAG;;+BAE3BE;;;;;;;;;;;UAWpBnB,KAAKQ,WAuBJ,KAtBAM,CAAI;;;;;gCAKgBd,KAAKO;mCACFP,KAAKS;6BACVQ,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKK;;;;;;6BAMGY,GAAajB,KAAKkB,aAAaD,EAAG;;sBAE1CjB,KAAKM;;;;;;KAQxB,CAEO,WAAAS,GACNf,KAAKC,MAAO,CACb,CAEO,YAAAiB,CAAaD,EAAUG,KAE1BpB,KAAKqB,aACLrB,KAAKqB,aAAerB,KAAKqB,YAAYD,MAEtCpB,KAAKC,MAAO,EACZD,KAAKsB,QAAQF,YAAcA,EAC3BpB,KAAKuB,gBAAgBN,GAExB,CAEO,eAAAM,CAAgBN,GACtB,MAAMO,EAAQ,IAAIC,YAAY,WAAY,CACxCC,OAAQ,CACNN,YAAapB,KAAKsB,QAAQF,YAC1BO,UAAWV,KAGfjB,KAAK4B,cAAcJ,EACpB,CAEQ,OAAAK,CAAQC,GACXA,EAAaC,IAAI,UACf/B,KAAKC,KACPD,KAAKsB,QAAQU,YAEbhC,KAAKsB,QAAQW,QAGlB,GAtLepC,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"}
+{"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  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = 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      <span class=\"anchor\" @click=${this._openDrawer}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        autofocus\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeDrawer(e, 'cancel')}\n      >\n        <form method=\"dialog\">\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\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\n          <!-- Body -->\n          <div class=\"body\">\n            <slot></slot>\n          </div>\n\n          <!-- footer -->\n          ${!this.hideFooter\n            ? html`\n                <div class=\"dialog-footer\">\n                  <div class=\"actions\">\n                    <kd-button\n                      class=\"action-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                    ${this.showSecondaryButton\n                      ? html`\n                          <kd-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=\"secondary\"\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kd-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kd-button\n                            class=\"action-button\"\n                            value=\"Cancel\"\n                            kind=\"tertiary\"\n                            @click=${(e: Event) =>\n                              this._closeDrawer(e, 'cancel')}\n                          >\n                            ${this.cancelBtnText}\n                          </kd-button>\n                        `}\n                  </div>\n                </div>\n              `\n            : null}\n        </form>\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","secondaryButtonText","showSecondaryButton","hideCancelButton","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":"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"}

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

@@ -33,8 +33,6 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
 }
 
 dialog {
-  display: none;
-  flex-direction: column;
   margin: 0;
   padding: 0;
   color: inherit;
@@ -48,7 +46,6 @@ dialog {
   max-height: 100vh;
 }
 dialog[open] {
-  display: flex;
   animation: dialog-in 400ms forwards;
 }
 dialog::backdrop {
@@ -99,9 +96,17 @@ header {
   padding: 32px;
 }
 
+form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .body {
-  padding: 0 32px;
+  margin: 0 32px;
+  padding-right: 24px;
   flex-grow: 1;
+  overflow-y: auto;
 }
 
 .header-label-title {
@@ -209,6 +214,11 @@ h1 {
   }
 }
 
+.size--sm kd-button {
+  width: 100%;
+  flex-grow: 1;
+}
+
 .custom-actions {
   margin-left: auto;
   display: flex;
@@ -216,6 +226,10 @@ h1 {
   gap: 16px;
 }
 
+.action-button:nth-child(3) {
+  margin-left: auto;
+}
+
 @supports (transition-behavior: allow-discrete) {
   dialog {
     transition: right 400ms ease, transform 400ms ease, overlay 400ms ease allow-discrete, display 400ms ease allow-discrete;

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/textArea/textArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,iEAAiE;IAEjE,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,UAAU,EAAG,mBAAmB,CAAC;IAExB,MAAM;IAgDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,GAAG;IA2BlC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}
+{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,2DAA2D,CAAC;AAGnE;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,uCAAuC;IAEvC,OAAO,SAAM;IAEb,mBAAmB;IAEnB,KAAK,SAAM;IAEX,yBAAyB;IAEzB,WAAW,SAAM;IAEjB,kBAAkB;IAElB,IAAI,SAAM;IAEV,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,WAAW,SAAM;IAEjB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,oCAAoC;IAEpC,SAAS,EAAG,MAAM,CAAC;IAEnB,iEAAiE;IAEjE,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,qBAAqB,SAAM;IAE3B;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,UAAU,EAAG,mBAAmB,CAAC;IAExB,MAAM;IAgDf,OAAO,CAAC,WAAW;IAeV,OAAO,CAAC,YAAY,EAAE,GAAG;IA4BlC,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAIb,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;CAatC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}

package/components/reusable/textArea/textArea.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as o}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as l}from'./../../../external/lit-html/directives/if-defined.js';import r from"./textArea.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/warning--filled/24.js';let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.caption="",this.value="",this.placeholder="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
+import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../../external/@lit/reactive-element/decorators/query.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as o}from'./../../../external/lit-html/directives/if-defined.js';import r from"./textArea.scss.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import d from'./../../../external/@carbon/icons/es/warning--filled/24.js';let h=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.caption="",this.value="",this.placeholder="",this.name="",this.required=!1,this.disabled=!1,this.invalidText="",this.internalValidationMsg="",this.isInvalid=!1}render(){return e`
       <div class="text-area" ?disabled=${this.disabled}>
         <label class="label-text" for=${this.name}>
           ${this.required?e`<span class="required">*</span>`:null}
@@ -13,8 +13,8 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
             ?required=${this.required}
             ?disabled=${this.disabled}
             ?invalid=${this.isInvalid}
-            minlength=${l(this.minLength)}
-            maxlength=${l(this.maxLength)}
+            minlength=${o(this.minLength)}
+            maxlength=${o(this.maxLength)}
             rows=${this.rows}
             @input=${t=>this.handleInput(t)}
           >
@@ -34,5 +34,5 @@ ${this.value}</textarea
               </div>
             `:null}
       </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("value")&&this._validate(!1,!1),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.textareaEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}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=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([s({type:Number})],h.prototype,"rows",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([o("textarea")],h.prototype,"textareaEl",void 0),h=t([a("kyn-text-area")],h);export{h as TextArea};
+    `}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("value")&&(this.textareaEl.value=this.value,this._validate(!1,!1)),t.has("invalidText")&&void 0!==t.get("invalidText")&&this._validate(!1,!1)}_validate(t,e){const i=""!==this.invalidText?{...this.textareaEl.validity,customError:!0}:this.textareaEl.validity,a=""!==this.invalidText?this.invalidText:this.textareaEl.validationMessage;this.internals.setValidity(i,a,this.textareaEl),t&&(this.internalValidationMsg=this.textareaEl.validationMessage),e&&this.internals.reportValidity()}_handleFormdata(t){t.formData.append(this.name,this.value)}_handleInvalid(){this._validate(!0,!1)}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=r,h.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},h.formAssociated=!0,t([n()],h.prototype,"internals",void 0),t([s({type:String})],h.prototype,"caption",void 0),t([s({type:String})],h.prototype,"value",void 0),t([s({type:String})],h.prototype,"placeholder",void 0),t([s({type:String})],h.prototype,"name",void 0),t([s({type:Boolean})],h.prototype,"required",void 0),t([s({type:Boolean})],h.prototype,"disabled",void 0),t([s({type:String})],h.prototype,"invalidText",void 0),t([s({type:Number})],h.prototype,"maxLength",void 0),t([s({type:Number})],h.prototype,"minLength",void 0),t([s({type:Number})],h.prototype,"rows",void 0),t([n()],h.prototype,"internalValidationMsg",void 0),t([n()],h.prototype,"isInvalid",void 0),t([l("textarea")],h.prototype,"textareaEl",void 0),h=t([a("kyn-text-area")],h);export{h as TextArea};
 //# sourceMappingURL=textArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  /** @ignore */\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  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** textarea rows attribute. The number of visible text lines. */\n  @property({ type: Number })\n  rows!: number;\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  /**\n   * Queries the <textarea> DOM element.\n   * @ignore\n   */\n  @query('textarea')\n  textareaEl!: HTMLTextAreaElement;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            rows=${this.rows}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    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 (changedProps.has('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, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from textareaEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.textareaEl.validity, customError: true }\n        : this.textareaEl.validity;\n    // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.textareaEl.validationMessage;\n\n    // set validity on custom element, anchor to textareaEl\n    this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.textareaEl.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._validate(true, false);\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\n    this.addEventListener('invalid', () => {\n      this._handleInvalid();\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-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","rows","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","undefined","get","interacted","report","Validity","textareaEl","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}
+{"version":3,"file":"textArea.js","sources":["../../../../src/components/reusable/textArea/textArea.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport TextAreaScss from './textArea.scss';\n\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/24';\n\n/**\n * Text area.\n * @fires on-input - Captures the input event and emits the selected value and original event details.\n * @prop {number} minLength - Minimum number of characters.\n * @prop {number} maxLength - Maximum number of characters.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-text-area')\nexport class TextArea extends LitElement {\n  static override styles = TextAreaScss;\n\n  /** @ignore */\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  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Input placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Input name. */\n  @property({ type: String })\n  name = '';\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Input disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Input invalid text. */\n  @property({ type: String })\n  invalidText = '';\n\n  /** Maximum number of characters. */\n  @property({ type: Number })\n  maxLength!: number;\n\n  /** Minimum number of characters. */\n  @property({ type: Number })\n  minLength!: number;\n\n  /** textarea rows attribute. The number of visible text lines. */\n  @property({ type: Number })\n  rows!: number;\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  /**\n   * Queries the <textarea> DOM element.\n   * @ignore\n   */\n  @query('textarea')\n  textareaEl!: HTMLTextAreaElement;\n\n  override render() {\n    return html`\n      <div class=\"text-area\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          ${this.required ? html`<span class=\"required\">*</span>` : null}\n          <slot></slot>\n        </label>\n\n        <div class=\"input-wrapper\">\n          <textarea\n            id=${this.name}\n            name=${this.name}\n            placeholder=${this.placeholder}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?invalid=${this.isInvalid}\n            minlength=${ifDefined(this.minLength)}\n            maxlength=${ifDefined(this.maxLength)}\n            rows=${this.rows}\n            @input=${(e: any) => this.handleInput(e)}\n          >\n${this.value}</textarea\n          >\n\n          ${this.isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n          ${this.maxLength\n            ? html`\n                <div class=\"count\">${this.value.length}/${this.maxLength}</div>\n              `\n            : null}\n        </div>\n\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this.isInvalid\n          ? html`\n              <div class=\"error\">\n                ${this.invalidText || this.internalValidationMsg}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  private handleInput(e: any) {\n    this.value = e.target.value;\n\n    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 (changedProps.has('value')) {\n      this.textareaEl.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, false);\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from textareaEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this.textareaEl.validity, customError: true }\n        : this.textareaEl.validity;\n    // set validationMessage to invalidText if present, otherwise use textareaEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this.textareaEl.validationMessage;\n\n    // set validity on custom element, anchor to textareaEl\n    this.internals.setValidity(Validity, ValidationMessage, this.textareaEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this.internalValidationMsg = this.textareaEl.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._validate(true, false);\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\n    this.addEventListener('invalid', () => {\n      this._handleInvalid();\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-area': TextArea;\n  }\n}\n"],"names":["TextArea","LitElement","constructor","this","internals","attachInternals","caption","value","placeholder","name","required","disabled","invalidText","internalValidationMsg","isInvalid","render","html","ifDefined","minLength","maxLength","rows","e","handleInput","errorIcon","length","target","_validate","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","textareaEl","undefined","get","interacted","report","Validity","validity","customError","ValidationMessage","validationMessage","setValidity","reportValidity","_handleFormdata","formData","append","_handleInvalid","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","TextAreaScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","Number","query","customElement"],"mappings":"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"}

package/components/reusable/textInput/textInput.scss.js

@@ -70,11 +70,14 @@ import'./../../../external/@lit/reactive-element/reactive-element.js';import'./.
   }
 }
 .label-text.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
+  border: 0;
+  clip: rect(0, 0, 0, 0);
   height: 1px;
+  margin: -1px;
   overflow: hidden;
+  padding: 0;
   position: absolute;
+  text-indent: 200%;
   white-space: nowrap;
   width: 1px;
 }

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

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

package/components/reusable/toggleButton/toggleButton.d.ts

@@ -38,6 +38,8 @@ export declare class ToggleButton extends LitElement {
     disabled: boolean;
     /** Reverse UI element order, label on the left. */
     reverse: boolean;
+    /** Hides the label visually. */
+    hideLabel: boolean;
     render(): import("lit-html").TemplateResult<1>;
     private handleChange;
     updated(changedProps: any): void;

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

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,kBAAkB;IAElB,IAAI,SAAM;IAEV,mBAAmB;IAEnB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,OAAO,UAAS;IAEP,MAAM;IA4Bf,OAAO,CAAC,YAAY;IAaX,OAAO,CAAC,YAAY,EAAE,GAAG;IAOlC,OAAO,CAAC,eAAe;IAMd,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
+{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,+BAAoB;IAE1C,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,kBAAkB;IAElB,IAAI,SAAM;IAEV,mBAAmB;IAEnB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,OAAO,UAAS;IAEhB,gCAAgC;IAEhC,SAAS,UAAS;IAET,MAAM;IA+Bf,OAAO,CAAC,YAAY;IAaX,OAAO,CAAC,YAAY,EAAE,GAAG;IAOlC,OAAO,CAAC,eAAe;IAMd,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;CAStC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

package/components/reusable/toggleButton/toggleButton.js

@@ -1,6 +1,9 @@
-import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./toggleButton.scss.js";let n=class extends s{constructor(){super(...arguments),this.internals=this.attachInternals(),this.name="",this.value="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1}render(){return t`
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as o}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as a}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as i}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import l from"./toggleButton.scss.js";let d=class extends s{constructor(){super(...arguments),this.internals=this.attachInternals(),this.name="",this.value="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1,this.hideLabel=!1}render(){return t`
       <div class="toggle-button" ?disabled=${this.disabled}>
-        <label class="label-text" for=${this.name}>
+        <label
+          class="label-text  ${this.hideLabel?"sr-only":""}"
+          for=${this.name}
+        >
           <slot></slot>
         </label>
 
@@ -22,5 +25,5 @@ import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../exter
           </span>
         </div>
       </div>
-    `}handleChange(e){this.checked=e.target.checked;const t=new CustomEvent("on-change",{detail:{checked:e.target.checked,value:this.value,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("checked")}_handleFormdata(e){this.checked&&e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};n.styles=l,n.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0},n.formAssociated=!0,e([i()],n.prototype,"internals",void 0),e([a({type:String})],n.prototype,"name",void 0),e([a({type:String})],n.prototype,"value",void 0),e([a({type:Boolean})],n.prototype,"checked",void 0),e([a({type:String})],n.prototype,"checkedText",void 0),e([a({type:String})],n.prototype,"uncheckedText",void 0),e([a({type:Boolean})],n.prototype,"small",void 0),e([a({type:Boolean})],n.prototype,"disabled",void 0),e([a({type:Boolean})],n.prototype,"reverse",void 0),n=e([o("kyn-toggle-button")],n);export{n as ToggleButton};
+    `}handleChange(e){this.checked=e.target.checked;const t=new CustomEvent("on-change",{detail:{checked:e.target.checked,value:this.value,origEvent:e}});this.dispatchEvent(t)}updated(e){e.has("checked")}_handleFormdata(e){this.checked&&e.formData.append(this.name,this.value)}connectedCallback(){super.connectedCallback(),this.internals.form&&this.internals.form.addEventListener("formdata",(e=>this._handleFormdata(e)))}disconnectedCallback(){this.internals.form&&this.internals.form.removeEventListener("formdata",(e=>this._handleFormdata(e))),super.disconnectedCallback()}};d.styles=l,d.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0},d.formAssociated=!0,e([i()],d.prototype,"internals",void 0),e([a({type:String})],d.prototype,"name",void 0),e([a({type:String})],d.prototype,"value",void 0),e([a({type:Boolean})],d.prototype,"checked",void 0),e([a({type:String})],d.prototype,"checkedText",void 0),e([a({type:String})],d.prototype,"uncheckedText",void 0),e([a({type:Boolean})],d.prototype,"small",void 0),e([a({type:Boolean})],d.prototype,"disabled",void 0),e([a({type:Boolean})],d.prototype,"reverse",void 0),e([a({type:Boolean})],d.prototype,"hideLabel",void 0),d=e([o("kyn-toggle-button")],d);export{d as ToggleButton};
 //# sourceMappingURL=toggleButton.js.map

package/components/reusable/toggleButton/toggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends LitElement {\n  static override styles = ToggleButtonScss;\n\n  /** @ignore */\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 name. */\n  @property({ type: String })\n  name = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Checkbox checked state. */\n  @property({ type: Boolean })\n  checked = false;\n\n  /** Checked state text. */\n  @property({ type: String })\n  checkedText = 'On';\n\n  /** Unchecked state text. */\n  @property({ type: String })\n  uncheckedText = 'Off';\n\n  /** Option to use small size. */\n  @property({ type: Boolean })\n  small = false;\n\n  /** Checkbox disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Reverse UI element order, label on the left. */\n  @property({ type: Boolean })\n  reverse = false;\n\n  override render() {\n    return html`\n      <div class=\"toggle-button\" ?disabled=${this.disabled}>\n        <label class=\"label-text\" for=${this.name}>\n          <slot></slot>\n        </label>\n\n        <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n          <input\n            class=\"${this.small ? 'size--sm' : ''}\"\n            type=\"checkbox\"\n            name=${this.name}\n            id=${this.name}\n            value=${this.value}\n            .checked=${this.checked}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${(e: any) => this.handleChange(e)}\n          />\n\n          <span class=\"status-text\">\n            ${this.checked ? this.checkedText : this.uncheckedText}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleChange(e: any) {\n    this.checked = e.target.checked;\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-change', {\n      detail: {\n        checked: e.target.checked,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('checked')) {\n      // set form data value\n      // this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    if (this.checked) {\n      e.formData.append(this.name, this.value);\n    }\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  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-toggle-button': ToggleButton;\n  }\n}\n"],"names":["ToggleButton","LitElement","constructor","this","internals","attachInternals","name","value","checked","checkedText","uncheckedText","small","disabled","reverse","render","html","e","handleChange","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","ToggleButtonScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"grBAUO,IAAMA,EAAN,cAA2BC,EAA3B,WAAAC,uBAoBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,GAIPH,KAAKI,MAAG,GAIRJ,KAAOK,SAAG,EAIVL,KAAWM,YAAG,KAIdN,KAAaO,cAAG,MAIhBP,KAAKQ,OAAG,EAIRR,KAAQS,UAAG,EAIXT,KAAOU,SAAG,CA2EX,CAzEU,MAAAC,GACP,OAAOC,CAAI;6CAC8BZ,KAAKS;wCACVT,KAAKG;;;;8BAIfH,KAAKU,QAAU,UAAY;;qBAEpCV,KAAKQ,MAAQ,WAAa;;mBAE5BR,KAAKG;iBACPH,KAAKG;oBACFH,KAAKI;uBACFJ,KAAKK;uBACLL,KAAKK;wBACJL,KAAKS;sBACNI,GAAWb,KAAKc,aAAaD;;;;cAItCb,KAAKK,QAAUL,KAAKM,YAAcN,KAAKO;;;;KAKlD,CAEO,YAAAO,CAAaD,GACnBb,KAAKK,QAAUQ,EAAEE,OAAOV,QAExB,MAAMW,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNb,QAASQ,EAAEE,OAAOV,QAClBD,MAAOJ,KAAKI,MACZe,UAAWN,KAGfb,KAAKoB,cAAcJ,EACpB,CAEQ,OAAAK,CAAQC,GACXA,EAAaC,IAAI,UAItB,CAEO,eAAAC,CAAgBX,GAClBb,KAAKK,SACPQ,EAAEY,SAASC,OAAO1B,KAAKG,KAAMH,KAAKI,MAErC,CAEQ,iBAAAuB,GACPC,MAAMD,oBAEF3B,KAAKC,UAAU4B,MACjB7B,KAAKC,UAAU4B,KAAKC,iBAAiB,YAAajB,GAChDb,KAAKwB,gBAAgBX,IAG1B,CAEQ,oBAAAkB,GACH/B,KAAKC,UAAU4B,MACjB7B,KAAKC,UAAU4B,KAAKG,oBAAoB,YAAanB,GACnDb,KAAKwB,gBAAgBX,KAIzBe,MAAMG,sBACP,GA7HelC,EAAMoC,OAAGC,EAGTrC,EAAAsC,kBAAoB,IAC/BrC,EAAWqC,kBACdC,gBAAgB,GAOXvC,EAAcwC,gBAAG,EAOxBC,EAAA,CADCC,KACkC1C,EAAA2C,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACR9C,EAAA2C,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACP9C,EAAA2C,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACF/C,EAAA2C,UAAA,eAAA,GAIhBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACC9C,EAAA2C,UAAA,mBAAA,GAInBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACI9C,EAAA2C,UAAA,qBAAA,GAItBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACJ/C,EAAA2C,UAAA,aAAA,GAIdF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACD/C,EAAA2C,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACF/C,EAAA2C,UAAA,eAAA,GApDL3C,EAAYyC,EAAA,CADxBO,EAAc,sBACFhD"}
+{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends LitElement {\n  static override styles = ToggleButtonScss;\n\n  /** @ignore */\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 name. */\n  @property({ type: String })\n  name = '';\n\n  /** Input value. */\n  @property({ type: String })\n  value = '';\n\n  /** Checkbox checked state. */\n  @property({ type: Boolean })\n  checked = false;\n\n  /** Checked state text. */\n  @property({ type: String })\n  checkedText = 'On';\n\n  /** Unchecked state text. */\n  @property({ type: String })\n  uncheckedText = 'Off';\n\n  /** Option to use small size. */\n  @property({ type: Boolean })\n  small = false;\n\n  /** Checkbox disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Reverse UI element order, label on the left. */\n  @property({ type: Boolean })\n  reverse = false;\n\n  /** Hides the label visually. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  override render() {\n    return html`\n      <div class=\"toggle-button\" ?disabled=${this.disabled}>\n        <label\n          class=\"label-text  ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\n        >\n          <slot></slot>\n        </label>\n\n        <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n          <input\n            class=\"${this.small ? 'size--sm' : ''}\"\n            type=\"checkbox\"\n            name=${this.name}\n            id=${this.name}\n            value=${this.value}\n            .checked=${this.checked}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${(e: any) => this.handleChange(e)}\n          />\n\n          <span class=\"status-text\">\n            ${this.checked ? this.checkedText : this.uncheckedText}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleChange(e: any) {\n    this.checked = e.target.checked;\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-change', {\n      detail: {\n        checked: e.target.checked,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('checked')) {\n      // set form data value\n      // this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  private _handleFormdata(e: any) {\n    if (this.checked) {\n      e.formData.append(this.name, this.value);\n    }\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  }\n\n  override disconnectedCallback(): void {\n    if (this.internals.form) {\n      this.internals.form.removeEventListener('formdata', (e) =>\n        this._handleFormdata(e)\n      );\n    }\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-toggle-button': ToggleButton;\n  }\n}\n"],"names":["ToggleButton","LitElement","constructor","this","internals","attachInternals","name","value","checked","checkedText","uncheckedText","small","disabled","reverse","hideLabel","render","html","e","handleChange","target","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProps","has","_handleFormdata","formData","append","connectedCallback","super","form","addEventListener","disconnectedCallback","removeEventListener","styles","ToggleButtonScss","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","type","String","Boolean","customElement"],"mappings":"grBAUO,IAAMA,EAAN,cAA2BC,EAA3B,WAAAC,uBAoBLC,KAAAC,UAAYD,KAAKE,kBAIjBF,KAAIG,KAAG,GAIPH,KAAKI,MAAG,GAIRJ,KAAOK,SAAG,EAIVL,KAAWM,YAAG,KAIdN,KAAaO,cAAG,MAIhBP,KAAKQ,OAAG,EAIRR,KAAQS,UAAG,EAIXT,KAAOU,SAAG,EAIVV,KAASW,WAAG,CA8Eb,CA5EU,MAAAC,GACP,OAAOC,CAAI;6CAC8Bb,KAAKS;;+BAEnBT,KAAKW,UAAY,UAAY;gBAC5CX,KAAKG;;;;;8BAKSH,KAAKU,QAAU,UAAY;;qBAEpCV,KAAKQ,MAAQ,WAAa;;mBAE5BR,KAAKG;iBACPH,KAAKG;oBACFH,KAAKI;uBACFJ,KAAKK;uBACLL,KAAKK;wBACJL,KAAKS;sBACNK,GAAWd,KAAKe,aAAaD;;;;cAItCd,KAAKK,QAAUL,KAAKM,YAAcN,KAAKO;;;;KAKlD,CAEO,YAAAQ,CAAaD,GACnBd,KAAKK,QAAUS,EAAEE,OAAOX,QAExB,MAAMY,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNd,QAASS,EAAEE,OAAOX,QAClBD,MAAOJ,KAAKI,MACZgB,UAAWN,KAGfd,KAAKqB,cAAcJ,EACpB,CAEQ,OAAAK,CAAQC,GACXA,EAAaC,IAAI,UAItB,CAEO,eAAAC,CAAgBX,GAClBd,KAAKK,SACPS,EAAEY,SAASC,OAAO3B,KAAKG,KAAMH,KAAKI,MAErC,CAEQ,iBAAAwB,GACPC,MAAMD,oBAEF5B,KAAKC,UAAU6B,MACjB9B,KAAKC,UAAU6B,KAAKC,iBAAiB,YAAajB,GAChDd,KAAKyB,gBAAgBX,IAG1B,CAEQ,oBAAAkB,GACHhC,KAAKC,UAAU6B,MACjB9B,KAAKC,UAAU6B,KAAKG,oBAAoB,YAAanB,GACnDd,KAAKyB,gBAAgBX,KAIzBe,MAAMG,sBACP,GApIenC,EAAMqC,OAAGC,EAGTtC,EAAAuC,kBAAoB,IAC/BtC,EAAWsC,kBACdC,gBAAgB,GAOXxC,EAAcyC,gBAAG,EAOxBC,EAAA,CADCC,KACkC3C,EAAA4C,UAAA,iBAAA,GAInCF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACR/C,EAAA4C,UAAA,YAAA,GAIVF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACP/C,EAAA4C,UAAA,aAAA,GAIXF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACFhD,EAAA4C,UAAA,eAAA,GAIhBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACC/C,EAAA4C,UAAA,mBAAA,GAInBF,EAAA,CADCG,EAAS,CAAEC,KAAMC,UACI/C,EAAA4C,UAAA,qBAAA,GAItBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACJhD,EAAA4C,UAAA,aAAA,GAIdF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACDhD,EAAA4C,UAAA,gBAAA,GAIjBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACFhD,EAAA4C,UAAA,eAAA,GAIhBF,EAAA,CADCG,EAAS,CAAEC,KAAME,WACAhD,EAAA4C,UAAA,iBAAA,GAxDP5C,EAAY0C,EAAA,CADxBO,EAAc,sBACFjD"}

package/components/reusable/toggleButton/toggleButton.scss.js

@@ -86,6 +86,18 @@ label {
     line-height: var(--kd-line-height-utility-2-max);
   }
 }
+.label-text.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-indent: 200%;
+  white-space: nowrap;
+  width: 1px;
+}
 [disabled] .label-text {
   color: var(--kd-color-text-disabled);
 }

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

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

package/components/reusable/widget/sample-layout.d.ts

@@ -6,6 +6,20 @@ declare const _default: {
         h: number;
         id: string;
     }[];
+    xl: {
+        minW: number;
+        minH: number;
+        w: number;
+        h: number;
+        id: string;
+    }[];
+    lg: {
+        minW: number;
+        minH: number;
+        w: number;
+        h: number;
+        id: string;
+    }[];
     md: {
         minW: number;
         minH: number;

package/components/reusable/widget/sample-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sample-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/sample-layout.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAmNE"}
+{"version":3,"file":"sample-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/sample-layout.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAmNE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.23.2",
+  "version": "1.23.4",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -36,7 +36,7 @@
     "query-selector-shadow-dom": "^1.0.1"
   },
   "peerDependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^1.6.5"
+    "@kyndryl-design-system/shidoka-foundation": "^1.6.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -49,7 +49,7 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@custom-elements-manifest/analyzer": "^0.9.4",
     "@kyndryl-design-system/shidoka-charts": "^1.6.2",
-    "@kyndryl-design-system/shidoka-foundation": "^1.6.5",
+    "@kyndryl-design-system/shidoka-foundation": "^1.6.6",
     "@open-wc/testing": "^3.1.7",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",