@kyndryl-design-system/shidoka-applications 2.51.2 → 2.52.1

package/components/reusable/notification/notification.d.ts

@@ -6,6 +6,7 @@ import '../badge';
  * Notification component.
  * @slot unnamed - Slot for notification message body.
  * @slot actions - Slot for menu.
+ * @slot icon - Slot for an icon.
  * @fires on-notification-click - Emit event for clickable notification.
  * @fires on-close - Emits when an inline/toast notification closes.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,UAAU,CAAC;AAClB;;;;;;GAMG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,qCAAqC;IAErC,QAAQ,CAAC,iBAAiB,SAAM;IAEhC,uCAAuC;IAEvC,QAAQ,CAAC,oBAAoB,SAAM;IAEnC;;;OAGG;IAEH,QAAQ,CAAC,SAAS,SAAM;IAExB,qBAAqB;IAErB,QAAQ,CAAC,IAAI,SAAM;IAEnB,mGAAmG;IAEnG,QAAQ,CAAC,SAAS,SAAa;IAE/B,kIAAkI;IAElI,QAAQ,CAAC,IAAI,SAAY;IAEzB,iCAAiC;IAEjC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAKvB;IAEF,oEAAoE;IAEpE,QAAQ,CAAC,mBAAmB,SAAW;IAEvC;;;SAGK;IAEL,QAAQ,CAAC,6BAA6B,SAAM;IAE5C,6DAA6D;IAE7D,QAAQ,CAAC,gBAAgB,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAElE;;;SAGK;IAEL,QAAQ,CAAC,WAAW,SAAY;IAEhC;;OAEG;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,CAKvB;IAEF,4EAA4E;IAE5E,QAAQ,CAAC,MAAM,UAAS;IAExB,6JAA6J;IAE7J,QAAQ,CAAC,eAAe,UAAS;IAEjC,uJAAuJ;IAEvJ,QAAQ,CAAC,OAAO,SAAK;IAErB;;OAEG;IAEH,QAAQ,CAAC,0BAA0B,UAAS;IAEnC,MAAM;IAyDf,OAAO,CAAC,aAAa;IAyFZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,iBAAiB;CA4B1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,OAAO,WAAW,CAAC;AAInB,OAAO,SAAS,CAAC;AAMjB,OAAO,UAAU,CAAC;AAClB;;;;;;;GAOG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD,qCAAqC;IAErC,QAAQ,CAAC,iBAAiB,SAAM;IAEhC,uCAAuC;IAEvC,QAAQ,CAAC,oBAAoB,SAAM;IAEnC;;;OAGG;IAEH,QAAQ,CAAC,SAAS,SAAM;IAExB,qBAAqB;IAErB,QAAQ,CAAC,IAAI,SAAM;IAEnB,mGAAmG;IAEnG,QAAQ,CAAC,SAAS,SAAa;IAE/B,kIAAkI;IAElI,QAAQ,CAAC,IAAI,SAAY;IAEzB,iCAAiC;IAEjC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAKvB;IAEF,oEAAoE;IAEpE,QAAQ,CAAC,mBAAmB,SAAW;IAEvC;;;SAGK;IAEL,QAAQ,CAAC,6BAA6B,SAAM;IAE5C,6DAA6D;IAE7D,QAAQ,CAAC,gBAAgB,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IAElE;;;SAGK;IAEL,QAAQ,CAAC,WAAW,SAAY;IAEhC;;OAEG;IAEH,QAAQ,CAAC,WAAW,EAAE,GAAG,CAKvB;IAEF,4EAA4E;IAE5E,QAAQ,CAAC,MAAM,UAAS;IAExB,6JAA6J;IAE7J,QAAQ,CAAC,eAAe,UAAS;IAEjC,uJAAuJ;IAEvJ,QAAQ,CAAC,OAAO,SAAK;IAErB;;OAEG;IAEH,QAAQ,CAAC,0BAA0B,UAAS;IAEnC,MAAM;IA2Df,OAAO,CAAC,aAAa;IA2FZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAcvC,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,iBAAiB;CA4B1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAC;KAClC;CACF"}

package/components/reusable/notification/notification.js

@@ -57,26 +57,32 @@ kyn-card.notification-toast::part(card-wrapper):hover {
 
 kyn-card.notification-error::part(card-wrapper) {
   background-color: var(--kd-color-status-error-accent);
+  color: var(--kd-color-status-error-foreground);
 }
 
 kyn-card.notification-success::part(card-wrapper) {
   background-color: var(--kd-color-status-success-accent);
+  color: var(--kd-color-status-success-foreground);
 }
 
 kyn-card.notification-warning::part(card-wrapper) {
   background-color: var(--kd-color-status-warning-accent);
+  color: var(--kd-color-status-warning-foreground---dark);
 }
 
 kyn-card.notification-info::part(card-wrapper) {
   background-color: var(--kd-color-status-informational-accent);
+  color: var(--kd-color-status-informational-foreground);
 }
 
 kyn-card.notification-ai::part(card-wrapper) {
   background-color: var(--kd-color-background-container-ai-default);
+  color: var(--kd-color-icon-ai);
 }
 
 kyn-card.notification-default::part(card-wrapper) {
   background-color: var(--kd-color-status-neutral-light);
+  color: var(--kd-color-status-neutral-foreground);
 }
 
 kyn-card.notification-normal::part(card-wrapper) {
@@ -390,37 +396,7 @@ kyn-link::part(link) {
   text-indent: 200%;
   white-space: nowrap;
   width: 1px;
-}
-
-.info svg {
-  fill: var(--kd-color-status-informational-foreground);
-  display: flex;
-}
-
-.success svg {
-  fill: var(--kd-color-status-success-foreground);
-  display: flex;
-}
-
-.default svg {
-  fill: var(--kd-color-status-neutral-foreground);
-  display: flex;
-}
-
-.warning svg {
-  fill: var(--kd-color-status-warning-foreground---dark);
-  display: flex;
-}
-
-.error svg {
-  fill: var(--kd-color-status-error-foreground);
-  display: flex;
-}
-
-.ai svg {
-  fill: var(--kd-color-icon-ai);
-  display: flex;
-}`;let b=(()=>{var c,b,x,S,z,C,$,_,T,j,D,B,M,N,R,W;let E,I,L,O,U,X,q,P,Y,A,F,G,H,J,K,Q,V,Z,tt=[f("kyn-notification")],it=[],et=m,nt=[],at=[],ot=[],st=[],rt=[],lt=[],ct=[],dt=[],ft=[],ht=[],pt=[],mt=[],ut=[],gt=[],kt=[],vt=[],yt=[],wt=[],bt=[],xt=[],St=[],zt=[],Ct=[],$t=[],_t=[],Tt=[],jt=[],Dt=[],Bt=[],Mt=[],Nt=[],Rt=[];return I=class extends et{get notificationTitle(){return n(this,c,"f")}set notificationTitle(t){a(this,c,t,"f")}get notificationSubtitle(){return n(this,b,"f")}set notificationSubtitle(t){a(this,b,t,"f")}get timeStamp(){return n(this,x,"f")}set timeStamp(t){a(this,x,t,"f")}get href(){return n(this,S,"f")}set href(t){a(this,S,t,"f")}get tagStatus(){return n(this,z,"f")}set tagStatus(t){a(this,z,t,"f")}get type(){return n(this,C,"f")}set type(t){a(this,C,t,"f")}get textStrings(){return n(this,$,"f")}set textStrings(t){a(this,$,t,"f")}get closeBtnDescription(){return n(this,_,"f")}set closeBtnDescription(t){a(this,_,t,"f")}get assistiveNotificationTypeText(){return n(this,T,"f")}set assistiveNotificationTypeText(t){a(this,T,t,"f")}get notificationRole(){return n(this,j,"f")}set notificationRole(t){a(this,j,t,"f")}get statusLabel(){return n(this,D,"f")}set statusLabel(t){a(this,D,t,"f")}get _badgeColor(){return n(this,B,"f")}set _badgeColor(t){a(this,B,t,"f")}get unRead(){return n(this,M,"f")}set unRead(t){a(this,M,t,"f")}get hideCloseButton(){return n(this,N,"f")}set hideCloseButton(t){a(this,N,t,"f")}get timeout(){return n(this,R,"f")}set timeout(t){a(this,R,t,"f")}get _hasDescriptionSlotContent(){return n(this,W,"f")}set _hasDescriptionSlotContent(t){a(this,W,t,"f")}render(){const t={"notification-normal":"normal"===this.type,"notification-inline":"inline"===this.type,"notification-toast":"toast"===this.type,"notification-error":("inline"===this.type||"toast"===this.type)&&"error"===this.tagStatus,"notification-success":("inline"===this.type||"toast"===this.type)&&"success"===this.tagStatus,"notification-warning":("inline"===this.type||"toast"===this.type)&&"warning"===this.tagStatus,"notification-info":("inline"===this.type||"toast"===this.type)&&"info"===this.tagStatus,"notification-ai":"toast"===this.type&&"ai"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus,"notification-no-description":!this._hasDescriptionSlotContent};return s`
+}`;let b=(()=>{var c,b,x,S,z,C,$,_,T,j,D,B,M,N,R,W;let E,I,L,O,U,X,q,P,Y,A,F,G,H,J,K,Q,V,Z,tt=[f("kyn-notification")],it=[],et=m,nt=[],at=[],ot=[],st=[],rt=[],lt=[],ct=[],dt=[],ft=[],ht=[],pt=[],mt=[],ut=[],gt=[],kt=[],vt=[],yt=[],wt=[],bt=[],xt=[],St=[],zt=[],Ct=[],$t=[],_t=[],Tt=[],jt=[],Dt=[],Bt=[],Mt=[],Nt=[],Rt=[];return I=class extends et{get notificationTitle(){return n(this,c,"f")}set notificationTitle(t){a(this,c,t,"f")}get notificationSubtitle(){return n(this,b,"f")}set notificationSubtitle(t){a(this,b,t,"f")}get timeStamp(){return n(this,x,"f")}set timeStamp(t){a(this,x,t,"f")}get href(){return n(this,S,"f")}set href(t){a(this,S,t,"f")}get tagStatus(){return n(this,z,"f")}set tagStatus(t){a(this,z,t,"f")}get type(){return n(this,C,"f")}set type(t){a(this,C,t,"f")}get textStrings(){return n(this,$,"f")}set textStrings(t){a(this,$,t,"f")}get closeBtnDescription(){return n(this,_,"f")}set closeBtnDescription(t){a(this,_,t,"f")}get assistiveNotificationTypeText(){return n(this,T,"f")}set assistiveNotificationTypeText(t){a(this,T,t,"f")}get notificationRole(){return n(this,j,"f")}set notificationRole(t){a(this,j,t,"f")}get statusLabel(){return n(this,D,"f")}set statusLabel(t){a(this,D,t,"f")}get _badgeColor(){return n(this,B,"f")}set _badgeColor(t){a(this,B,t,"f")}get unRead(){return n(this,M,"f")}set unRead(t){a(this,M,t,"f")}get hideCloseButton(){return n(this,N,"f")}set hideCloseButton(t){a(this,N,t,"f")}get timeout(){return n(this,R,"f")}set timeout(t){a(this,R,t,"f")}get _hasDescriptionSlotContent(){return n(this,W,"f")}set _hasDescriptionSlotContent(t){a(this,W,t,"f")}render(){const t={"notification-normal":"normal"===this.type,"notification-inline":"inline"===this.type,"notification-toast":"toast"===this.type,"notification-error":("inline"===this.type||"toast"===this.type)&&"error"===this.tagStatus,"notification-success":("inline"===this.type||"toast"===this.type)&&"success"===this.tagStatus,"notification-warning":("inline"===this.type||"toast"===this.type)&&"warning"===this.tagStatus,"notification-info":("inline"===this.type||"toast"===this.type)&&"info"===this.tagStatus,"notification-ai":("inline"===this.type||"toast"===this.type)&&"ai"===this.tagStatus,"notification-default":("inline"===this.type||"toast"===this.type)&&"default"===this.tagStatus,"notification-no-description":!this._hasDescriptionSlotContent};return s`
       ${"clickable"===this.type?s`<kyn-card
             class="notification-clickable"
             ?highlight=${this.unRead}
@@ -451,11 +427,13 @@ kyn-link::part(link) {
         <div class="notification-head">
           ${"inline"===this.type||"toast"===this.type?s` <span
                 class="notification-state-icon ${this.tagStatus}"
-                slot="icon"
                 role="img"
                 aria-label=${`${this.textStrings[this.tagStatus]} icon`}
-                >${l(t[this.tagStatus])}</span
-              >`:null}
+              >
+                <slot name="icon">
+                  ${l(t[this.tagStatus])}
+                </slot>
+              </span>`:null}
 
           <div class="notification-title">${this.notificationTitle}</div>
 

package/components/reusable/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss?inline';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\n\nimport '../badge';\n/**\n * Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n */\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n  static override styles = unsafeCSS(NotificationScss);\n\n  /** Notification Title (Required). */\n  @property({ type: String })\n  accessor notificationTitle = '';\n\n  /** Notification subtitle.(optional) */\n  @property({ type: String })\n  accessor notificationSubtitle = '';\n\n  /**\n   * Timestamp of notification.\n   * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n   */\n  @property({ type: String })\n  accessor timeStamp = '';\n\n  /** Card href link */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. */\n  @property({ type: String })\n  accessor tagStatus = 'default'; // Need to change the name to badgeStatus, once old tags are removed.\n\n  /** Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel */\n  @property({ type: String })\n  accessor type = 'normal';\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  accessor textStrings: any = {\n    success: 'Success',\n    warning: 'Warning',\n    info: 'Information',\n    error: 'Error',\n  };\n\n  /** Close button description (Required to support accessibility). */\n  @property({ type: String })\n  accessor closeBtnDescription = 'Close';\n\n  /**\n   * Assistive text for notification type.\n   * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n   * */\n  @property({ type: String })\n  accessor assistiveNotificationTypeText = '';\n\n  /** Notification role (Required to support accessibility). */\n  @property({ type: String })\n  accessor notificationRole: 'alert' | 'log' | 'status' | undefined;\n\n  /**\n   * Status label (Required to support accessibility).\n   * Assign the localized string value for the word **Status**.\n   * */\n  @property({ type: String })\n  accessor statusLabel = 'Status';\n\n  /** Set badgeColor based on provided tagStatus.\n   * @internal\n   */\n  @state()\n  accessor _badgeColor: any = {\n    success: 'success',\n    warning: 'warning',\n    info: 'information',\n    error: 'error',\n  };\n\n  /** Set notification mark read prop. Required ony for `type: 'clickable'`.*/\n  @property({ type: Boolean, reflect: true })\n  accessor unRead = false;\n\n  /** Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. */\n  @property({ type: Boolean })\n  accessor hideCloseButton = false;\n\n  /** Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` */\n  @property({ type: Number })\n  accessor timeout = 8;\n\n  /** Track if slot has content to conditionally render description div\n   * @internal\n   */\n  @state()\n  accessor _hasDescriptionSlotContent = false;\n\n  override render() {\n    const cardBgClasses = {\n      'notification-normal': this.type === 'normal',\n      'notification-inline': this.type === 'inline',\n      'notification-toast': this.type === 'toast',\n      'notification-error':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'error',\n      'notification-success':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'success',\n      'notification-warning':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'warning',\n      'notification-info':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'info',\n      'notification-ai': this.type === 'toast' && this.tagStatus === 'ai',\n      'notification-default':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'default',\n      'notification-no-description': !this._hasDescriptionSlotContent,\n    };\n\n    return html`\n      ${this.type === 'clickable'\n        ? html`<kyn-card\n            class=\"notification-clickable\"\n            ?highlight=${this.unRead}\n            type=${this.type}\n            href=${this.href}\n            target=\"_blank\"\n            rel=\"noopener\"\n            @on-card-click=${(e: any) => this._handleCardClick(e)}\n            hideBorder\n            role=${ifDefined(this.notificationRole)}\n          >\n            <span id=\"notificationType\"\n              >${this.assistiveNotificationTypeText}</span\n            >\n            ${this.renderInnerUI()}\n          </kyn-card>`\n        : html` <kyn-card\n            type=${this.type}\n            role=${ifDefined(this.notificationRole)}\n            class=\"${classMap(cardBgClasses)}\"\n          >\n            ${this.type === 'inline' || this.type === 'toast'\n              ? html`<span id=\"notificationType\"\n                  >${this.assistiveNotificationTypeText}</span\n                >`\n              : null}\n            ${this.renderInnerUI()}\n          </kyn-card>`}\n    `;\n  }\n\n  private renderInnerUI() {\n    const notificationIcon: any = {\n      success: successIcon,\n      error: errorIcon,\n      warning: warningIcon,\n      info: infoIcon,\n      ai: successIcon,\n      default: successIcon,\n    };\n\n    return html`<div class=\"notification-wrapper\">\n      <div class=\"notification-title-wrap\">\n        <div class=\"notification-head\">\n          ${this.type === 'inline' || this.type === 'toast'\n            ? html` <span\n                class=\"notification-state-icon ${this.tagStatus}\"\n                slot=\"icon\"\n                role=\"img\"\n                aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n                >${unsafeSVG(notificationIcon[this.tagStatus])}</span\n              >`\n            : null}\n\n          <div class=\"notification-title\">${this.notificationTitle}</div>\n\n          ${this.notificationSubtitle !== '' &&\n          (this.type === 'normal' || this.type === 'clickable')\n            ? html`\n                <div class=\"notification-subtitle\">\n                  ${this.notificationSubtitle}\n                </div>\n              `\n            : null}\n        </div>\n\n        <div>\n          ${(this.type === 'toast' || this.type === 'inline') &&\n          !this.hideCloseButton\n            ? html` <kyn-button\n                class=\"notification-toast-close-btn\"\n                kind=\"ghost\"\n                size=\"small\"\n                description=${ifDefined(this.closeBtnDescription)}\n                @on-click=\"${() => this._handleClose()}\"\n              >\n                <span\n                  slot=\"icon\"\n                  role=\"img\"\n                  aria-label=${ifDefined(this.closeBtnDescription)}\n                  >${unsafeSVG(closeIcon)}</span\n                >\n              </kyn-button>`\n            : null}\n          <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n\n      ${this._hasDescriptionSlotContent\n        ? html`<div class=\"notification-description\">\n            <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>`\n        : html`<slot\n            @slotchange=\"${this._handleSlotChange}\"\n            style=\"display: none;\"\n          ></slot>`}\n\n      <div class=\"notification-content-wrapper\">\n        <div class=\"status-tag\">\n          ${this.tagStatus !== 'default' &&\n          (this.type === 'normal' || this.type === 'clickable')\n            ? html`\n                <span id=\"statusLabel\">${this.statusLabel}</span>\n                <kyn-badge\n                  type=${'heavy'}\n                  ?hideIcon=${true}\n                  label=${this.textStrings[this.tagStatus]}\n                  status=${this._badgeColor[this.tagStatus]}\n                ></kyn-badge>\n              `\n            : null}\n        </div>\n        <div class=\"timestamp-wrapper\">\n          <div class=\"timestamp-text\">${this.timeStamp}</div>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  override updated(changedProperties: any) {\n    // Close toast notification if timeout > 0\n    if (\n      this.type === 'toast' &&\n      changedProperties.has('timeout') &&\n      this.timeout > 0\n    ) {\n      setTimeout(() => {\n        this._close();\n      }, this.timeout * 1000);\n    }\n  }\n\n  // Remove toast from DOM\n  private _close() {\n    const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n      duration: 500,\n      easing: 'ease-in-out',\n      fill: 'forwards',\n    });\n    animation.onfinish = () => {\n      this.parentNode?.removeChild(this);\n    };\n\n    // emit on-close event\n    const event = new CustomEvent('on-close');\n    this.dispatchEvent(event);\n  }\n\n  private _handleClose() {\n    this._close();\n  }\n\n  private _handleCardClick(e: any) {\n    const event = new CustomEvent('on-notification-click', {\n      detail: e.detail.origEvent,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange(e: Event) {\n    this._checkSlotContent();\n  }\n\n  private _checkSlotContent() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name])'\n    ) as HTMLSlotElement;\n    if (!slot) {\n      this._hasDescriptionSlotContent = false;\n      return;\n    }\n\n    const assignedNodes = slot.assignedNodes();\n\n    const hasContent = assignedNodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        return true;\n      }\n      if (node.nodeType === Node.TEXT_NODE) {\n        const textContent = node.textContent;\n        return (\n          textContent !== null &&\n          textContent !== undefined &&\n          textContent.trim() !== ''\n        );\n      }\n      return false;\n    });\n\n    this._hasDescriptionSlotContent = hasContent;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-notification': Notification;\n  }\n}\n"],"names":["Notification","customElement","LitElement","_classThis","_classSuper","notificationTitle","__classPrivateFieldGet","this","_Notification_notificationTitle_accessor_storage","value","__classPrivateFieldSet","notificationSubtitle","_Notification_notificationSubtitle_accessor_storage","timeStamp","_Notification_timeStamp_accessor_storage","href","_Notification_href_accessor_storage","tagStatus","_Notification_tagStatus_accessor_storage","type","_Notification_type_accessor_storage","textStrings","_Notification_textStrings_accessor_storage","closeBtnDescription","_Notification_closeBtnDescription_accessor_storage","assistiveNotificationTypeText","_Notification_assistiveNotificationTypeText_accessor_storage","notificationRole","_Notification_notificationRole_accessor_storage","statusLabel","_Notification_statusLabel_accessor_storage","_badgeColor","_Notification__badgeColor_accessor_storage","unRead","_Notification_unRead_accessor_storage","hideCloseButton","_Notification_hideCloseButton_accessor_storage","timeout","_Notification_timeout_accessor_storage","_hasDescriptionSlotContent","_Notification__hasDescriptionSlotContent_accessor_storage","render","cardBgClasses","html","e","_handleCardClick","ifDefined","renderInnerUI","classMap","notificationIcon","success","successIcon","error","errorIcon","warning","warningIcon","info","infoIcon","ai","default","unsafeSVG","_handleClose","closeIcon","_handleSlotChange","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","_checkSlotContent","slot","shadowRoot","querySelector","hasContent","assignedNodes","some","node","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","set","__runInitializers","_notificationTitle_initializers","_notificationTitle_extraInitializers","_notificationSubtitle_initializers","_notificationSubtitle_extraInitializers","_timeStamp_initializers","_timeStamp_extraInitializers","_href_initializers","_href_extraInitializers","_tagStatus_initializers","_tagStatus_extraInitializers","_type_initializers","_type_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","_closeBtnDescription_initializers","_closeBtnDescription_extraInitializers","_assistiveNotificationTypeText_initializers","_assistiveNotificationTypeText_extraInitializers","_notificationRole_initializers","_notificationRole_extraInitializers","_statusLabel_initializers","_statusLabel_extraInitializers","__badgeColor_initializers","__badgeColor_extraInitializers","_unRead_initializers","_unRead_extraInitializers","_hideCloseButton_initializers","_hideCloseButton_extraInitializers","_timeout_initializers","_timeout_extraInitializers","__hasDescriptionSlotContent_initializers","_notificationTitle_decorators","property","String","_notificationSubtitle_decorators","_timeStamp_decorators","_href_decorators","_tagStatus_decorators","_type_decorators","_textStrings_decorators","Object","_closeBtnDescription_decorators","_assistiveNotificationTypeText_decorators","_notificationRole_decorators","_statusLabel_decorators","__badgeColor_decorators","state","Boolean","reflect","_hideCloseButton_decorators","_timeout_decorators","Number","__hasDescriptionSlotContent_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_unRead_decorators","__hasDescriptionSlotContent_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","NotificationScss"],"mappings":"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"}
+{"version":3,"file":"notification.js","sources":["../../../../src/components/reusable/notification/notification.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../button';\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport NotificationScss from './notification.scss?inline';\nimport '../card';\nimport successIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';\nimport warningIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport infoIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/information-filled.svg';\n\nimport '../badge';\n/**\n * Notification component.\n * @slot unnamed - Slot for notification message body.\n * @slot actions - Slot for menu.\n * @slot icon - Slot for an icon.\n * @fires on-notification-click - Emit event for clickable notification.\n * @fires on-close - Emits when an inline/toast notification closes.\n */\n\n@customElement('kyn-notification')\nexport class Notification extends LitElement {\n  static override styles = unsafeCSS(NotificationScss);\n\n  /** Notification Title (Required). */\n  @property({ type: String })\n  accessor notificationTitle = '';\n\n  /** Notification subtitle.(optional) */\n  @property({ type: String })\n  accessor notificationSubtitle = '';\n\n  /**\n   * Timestamp of notification.\n   * It is recommended to add the context along with the timestamp. Example: `Updated 2 mins ago`.\n   */\n  @property({ type: String })\n  accessor timeStamp = '';\n\n  /** Card href link */\n  @property({ type: String })\n  accessor href = '';\n\n  /** Notification status / tag type. `'default'`, `'info'`, `'warning'`, `'success'` & `'error'`. */\n  @property({ type: String })\n  accessor tagStatus = 'default'; // Need to change the name to badgeStatus, once old tags are removed.\n\n  /** Notification type. `'normal'`, `'inline'`, `'toast'` and `'clickable'`. Clickable type can be use inside notification panel */\n  @property({ type: String })\n  accessor type = 'normal';\n\n  /** Customizable text strings. */\n  @property({ type: Object })\n  accessor textStrings: any = {\n    success: 'Success',\n    warning: 'Warning',\n    info: 'Information',\n    error: 'Error',\n  };\n\n  /** Close button description (Required to support accessibility). */\n  @property({ type: String })\n  accessor closeBtnDescription = 'Close';\n\n  /**\n   * Assistive text for notification type.\n   * Required for `'clickable'`, `'inline'` and `'toast'` notification types.\n   * */\n  @property({ type: String })\n  accessor assistiveNotificationTypeText = '';\n\n  /** Notification role (Required to support accessibility). */\n  @property({ type: String })\n  accessor notificationRole: 'alert' | 'log' | 'status' | undefined;\n\n  /**\n   * Status label (Required to support accessibility).\n   * Assign the localized string value for the word **Status**.\n   * */\n  @property({ type: String })\n  accessor statusLabel = 'Status';\n\n  /** Set badgeColor based on provided tagStatus.\n   * @internal\n   */\n  @state()\n  accessor _badgeColor: any = {\n    success: 'success',\n    warning: 'warning',\n    info: 'information',\n    error: 'error',\n  };\n\n  /** Set notification mark read prop. Required ony for `type: 'clickable'`.*/\n  @property({ type: Boolean, reflect: true })\n  accessor unRead = false;\n\n  /** Hide close (x) button. Useful only for `type='toast'`. This required `timeout > 0` otherwise toast remain as it is when `hideCloseButton` is set true. */\n  @property({ type: Boolean })\n  accessor hideCloseButton = false;\n\n  /** Timeout (Default 8 seconds for Toast). Specify an optional duration the toast notification should be closed in. Only apply with `type = 'toast'` */\n  @property({ type: Number })\n  accessor timeout = 8;\n\n  /** Track if slot has content to conditionally render description div\n   * @internal\n   */\n  @state()\n  accessor _hasDescriptionSlotContent = false;\n\n  override render() {\n    const cardBgClasses = {\n      'notification-normal': this.type === 'normal',\n      'notification-inline': this.type === 'inline',\n      'notification-toast': this.type === 'toast',\n      'notification-error':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'error',\n      'notification-success':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'success',\n      'notification-warning':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'warning',\n      'notification-info':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'info',\n      'notification-ai':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'ai',\n      'notification-default':\n        (this.type === 'inline' || this.type === 'toast') &&\n        this.tagStatus === 'default',\n      'notification-no-description': !this._hasDescriptionSlotContent,\n    };\n\n    return html`\n      ${this.type === 'clickable'\n        ? html`<kyn-card\n            class=\"notification-clickable\"\n            ?highlight=${this.unRead}\n            type=${this.type}\n            href=${this.href}\n            target=\"_blank\"\n            rel=\"noopener\"\n            @on-card-click=${(e: any) => this._handleCardClick(e)}\n            hideBorder\n            role=${ifDefined(this.notificationRole)}\n          >\n            <span id=\"notificationType\"\n              >${this.assistiveNotificationTypeText}</span\n            >\n            ${this.renderInnerUI()}\n          </kyn-card>`\n        : html` <kyn-card\n            type=${this.type}\n            role=${ifDefined(this.notificationRole)}\n            class=\"${classMap(cardBgClasses)}\"\n          >\n            ${this.type === 'inline' || this.type === 'toast'\n              ? html`<span id=\"notificationType\"\n                  >${this.assistiveNotificationTypeText}</span\n                >`\n              : null}\n            ${this.renderInnerUI()}\n          </kyn-card>`}\n    `;\n  }\n\n  private renderInnerUI() {\n    const notificationIcon: any = {\n      success: successIcon,\n      error: errorIcon,\n      warning: warningIcon,\n      info: infoIcon,\n      ai: successIcon,\n      default: successIcon,\n    };\n\n    return html`<div class=\"notification-wrapper\">\n      <div class=\"notification-title-wrap\">\n        <div class=\"notification-head\">\n          ${this.type === 'inline' || this.type === 'toast'\n            ? html` <span\n                class=\"notification-state-icon ${this.tagStatus}\"\n                role=\"img\"\n                aria-label=${`${this.textStrings[this.tagStatus]} icon`}\n              >\n                <slot name=\"icon\">\n                  ${unsafeSVG(notificationIcon[this.tagStatus])}\n                </slot>\n              </span>`\n            : null}\n\n          <div class=\"notification-title\">${this.notificationTitle}</div>\n\n          ${this.notificationSubtitle !== '' &&\n          (this.type === 'normal' || this.type === 'clickable')\n            ? html`\n                <div class=\"notification-subtitle\">\n                  ${this.notificationSubtitle}\n                </div>\n              `\n            : null}\n        </div>\n\n        <div>\n          ${(this.type === 'toast' || this.type === 'inline') &&\n          !this.hideCloseButton\n            ? html` <kyn-button\n                class=\"notification-toast-close-btn\"\n                kind=\"ghost\"\n                size=\"small\"\n                description=${ifDefined(this.closeBtnDescription)}\n                @on-click=\"${() => this._handleClose()}\"\n              >\n                <span\n                  slot=\"icon\"\n                  role=\"img\"\n                  aria-label=${ifDefined(this.closeBtnDescription)}\n                  >${unsafeSVG(closeIcon)}</span\n                >\n              </kyn-button>`\n            : null}\n          <!-- actions slot could be an overflow menu, close icon (for other notification types) etc. -->\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n\n      ${this._hasDescriptionSlotContent\n        ? html`<div class=\"notification-description\">\n            <slot @slotchange=\"${this._handleSlotChange}\"></slot>\n          </div>`\n        : html`<slot\n            @slotchange=\"${this._handleSlotChange}\"\n            style=\"display: none;\"\n          ></slot>`}\n\n      <div class=\"notification-content-wrapper\">\n        <div class=\"status-tag\">\n          ${this.tagStatus !== 'default' &&\n          (this.type === 'normal' || this.type === 'clickable')\n            ? html`\n                <span id=\"statusLabel\">${this.statusLabel}</span>\n                <kyn-badge\n                  type=${'heavy'}\n                  ?hideIcon=${true}\n                  label=${this.textStrings[this.tagStatus]}\n                  status=${this._badgeColor[this.tagStatus]}\n                ></kyn-badge>\n              `\n            : null}\n        </div>\n        <div class=\"timestamp-wrapper\">\n          <div class=\"timestamp-text\">${this.timeStamp}</div>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  override updated(changedProperties: any) {\n    // Close toast notification if timeout > 0\n    if (\n      this.type === 'toast' &&\n      changedProperties.has('timeout') &&\n      this.timeout > 0\n    ) {\n      setTimeout(() => {\n        this._close();\n      }, this.timeout * 1000);\n    }\n  }\n\n  // Remove toast from DOM\n  private _close() {\n    const animation = this.animate([{ opacity: '1' }, { opacity: '0' }], {\n      duration: 500,\n      easing: 'ease-in-out',\n      fill: 'forwards',\n    });\n    animation.onfinish = () => {\n      this.parentNode?.removeChild(this);\n    };\n\n    // emit on-close event\n    const event = new CustomEvent('on-close');\n    this.dispatchEvent(event);\n  }\n\n  private _handleClose() {\n    this._close();\n  }\n\n  private _handleCardClick(e: any) {\n    const event = new CustomEvent('on-notification-click', {\n      detail: e.detail.origEvent,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _handleSlotChange(e: Event) {\n    this._checkSlotContent();\n  }\n\n  private _checkSlotContent() {\n    const slot = this.shadowRoot?.querySelector(\n      'slot:not([name])'\n    ) as HTMLSlotElement;\n    if (!slot) {\n      this._hasDescriptionSlotContent = false;\n      return;\n    }\n\n    const assignedNodes = slot.assignedNodes();\n\n    const hasContent = assignedNodes.some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        return true;\n      }\n      if (node.nodeType === Node.TEXT_NODE) {\n        const textContent = node.textContent;\n        return (\n          textContent !== null &&\n          textContent !== undefined &&\n          textContent.trim() !== ''\n        );\n      }\n      return false;\n    });\n\n    this._hasDescriptionSlotContent = hasContent;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-notification': Notification;\n  }\n}\n"],"names":["Notification","customElement","LitElement","_classThis","_classSuper","notificationTitle","__classPrivateFieldGet","this","_Notification_notificationTitle_accessor_storage","value","__classPrivateFieldSet","notificationSubtitle","_Notification_notificationSubtitle_accessor_storage","timeStamp","_Notification_timeStamp_accessor_storage","href","_Notification_href_accessor_storage","tagStatus","_Notification_tagStatus_accessor_storage","type","_Notification_type_accessor_storage","textStrings","_Notification_textStrings_accessor_storage","closeBtnDescription","_Notification_closeBtnDescription_accessor_storage","assistiveNotificationTypeText","_Notification_assistiveNotificationTypeText_accessor_storage","notificationRole","_Notification_notificationRole_accessor_storage","statusLabel","_Notification_statusLabel_accessor_storage","_badgeColor","_Notification__badgeColor_accessor_storage","unRead","_Notification_unRead_accessor_storage","hideCloseButton","_Notification_hideCloseButton_accessor_storage","timeout","_Notification_timeout_accessor_storage","_hasDescriptionSlotContent","_Notification__hasDescriptionSlotContent_accessor_storage","render","cardBgClasses","html","e","_handleCardClick","ifDefined","renderInnerUI","classMap","notificationIcon","success","successIcon","error","errorIcon","warning","warningIcon","info","infoIcon","ai","default","unsafeSVG","_handleClose","closeIcon","_handleSlotChange","updated","changedProperties","has","setTimeout","_close","animate","opacity","duration","easing","fill","onfinish","_a","parentNode","removeChild","event","CustomEvent","dispatchEvent","detail","origEvent","_checkSlotContent","slot","shadowRoot","querySelector","hasContent","assignedNodes","some","node","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","set","__runInitializers","_notificationTitle_initializers","_notificationTitle_extraInitializers","_notificationSubtitle_initializers","_notificationSubtitle_extraInitializers","_timeStamp_initializers","_timeStamp_extraInitializers","_href_initializers","_href_extraInitializers","_tagStatus_initializers","_tagStatus_extraInitializers","_type_initializers","_type_extraInitializers","_textStrings_initializers","_textStrings_extraInitializers","_closeBtnDescription_initializers","_closeBtnDescription_extraInitializers","_assistiveNotificationTypeText_initializers","_assistiveNotificationTypeText_extraInitializers","_notificationRole_initializers","_notificationRole_extraInitializers","_statusLabel_initializers","_statusLabel_extraInitializers","__badgeColor_initializers","__badgeColor_extraInitializers","_unRead_initializers","_unRead_extraInitializers","_hideCloseButton_initializers","_hideCloseButton_extraInitializers","_timeout_initializers","_timeout_extraInitializers","__hasDescriptionSlotContent_initializers","_notificationTitle_decorators","property","String","_notificationSubtitle_decorators","_timeStamp_decorators","_href_decorators","_tagStatus_decorators","_type_decorators","_textStrings_decorators","Object","_closeBtnDescription_decorators","_assistiveNotificationTypeText_decorators","_notificationRole_decorators","_statusLabel_decorators","__badgeColor_decorators","state","Boolean","reflect","_hideCloseButton_decorators","_timeout_decorators","Number","__hasDescriptionSlotContent_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_unRead_decorators","__hasDescriptionSlotContent_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","NotificationScss"],"mappings":"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"}

package/components/reusable/widget/widgetGridstack.d.ts

@@ -55,6 +55,10 @@ export declare class WidgetGridstack extends LitElement {
      * property `--kd-current-breakpoint`.
      */
     private _setBreakpoint;
+    /**
+     * The private `_setMargin` function adjusts the margin of a grid based on a breakpoint value.
+     */
+    private _setMargin;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/reusable/widget/widgetGridstack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widgetGridstack.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAQlD;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAE3C,6EAA6E;IAE7E,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAM;IAE1B,+BAA+B;IAE/B,QAAQ,CAAC,eAAe,EAAG,GAAG,CAAC;IAE/B;mBACe;IAEf,QAAQ,CAAC,gBAAgB,EAAG,GAAG,CAAC;IAEhC,0BAA0B;IAE1B,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAa;IAEpC,+BAA+B;IAE/B,QAAQ,CAAC,IAAI,EAAG,GAAG,CAAC;IAEpB,0EAA0E;IAE1E,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,oBAAoB,UAAS;IAEtC;;OAEG;IAEH,QAAQ,CAAC,WAAW,SAAM;IAEjB,MAAM;IAQN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IA2BrC;;;OAGG;IACH,OAAO,CAAC,WAAW;IAuBnB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAsCb,OAAO,CAAC,YAAY,EAAE,GAAG;IAalC;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,aAAa;IAarB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAEpB;IAEM,iBAAiB;IAMjB,oBAAoB;IAM7B;;;OAGG;IACH,OAAO,CAAC,cAAc;CAMvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,eAAe,CAAC;KACzC;CACF"}
+{"version":3,"file":"widgetGridstack.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAQlD;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAqB;IAE3C,6EAA6E;IAE7E,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAM;IAE1B,+BAA+B;IAE/B,QAAQ,CAAC,eAAe,EAAG,GAAG,CAAC;IAE/B;mBACe;IAEf,QAAQ,CAAC,gBAAgB,EAAG,GAAG,CAAC;IAEhC,0BAA0B;IAE1B,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAa;IAEpC,+BAA+B;IAE/B,QAAQ,CAAC,IAAI,EAAG,GAAG,CAAC;IAEpB,0EAA0E;IAE1E,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,oBAAoB,UAAS;IAEtC;;OAEG;IAEH,QAAQ,CAAC,WAAW,SAAM;IAEjB,MAAM;IAQN,YAAY;IAIZ,UAAU,CAAC,YAAY,EAAE,GAAG;IA2BrC;;;OAGG;IACH,OAAO,CAAC,WAAW;IAuBnB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAyCb,OAAO,CAAC,YAAY,EAAE,GAAG;IAalC;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,aAAa;IAarB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAGpB;IAEM,iBAAiB;IAMjB,oBAAoB;IAM7B;;;OAGG;IACH,OAAO,CAAC,cAAc;IAOtB;;OAEG;IACH,OAAO,CAAC,UAAU;CASnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,eAAe,CAAC;KACzC;CACF"}

package/components/reusable/widget/widgetGridstack.js

@@ -13,13 +13,18 @@ import{_ as t,a as e,b as i,c as a,d as s}from"../../../vendor/tslib-Ac8XvvSX.js
 }
 
 .grid-wrapper {
-  margin: -16px;
-}
-.grid-wrapper.compact {
   margin: -8px;
-}`;let f=(()=>{var r,f,b,v,w,y,_,C;let W,S,j,D,E,M,x,z,L,B,q=[n("kyn-widget-gridstack")],A=[],G=h,O=[],R=[],P=[],U=[],H=[],V=[],$=[],F=[],I=[],J=[],K=[],N=[],Q=[],T=[],X=[],Y=[];return S=class extends G{constructor(){super(...arguments),r.set(this,i(this,O,{})),f.set(this,(i(this,R),i(this,P,void 0))),b.set(this,(i(this,U),i(this,H,void 0))),v.set(this,(i(this,V),i(this,$,k))),w.set(this,(i(this,F),i(this,I,void 0))),y.set(this,(i(this,J),i(this,K,!1))),_.set(this,(i(this,N),i(this,Q,!1))),C.set(this,(i(this,T),i(this,X,""))),this._debounceResize=(i(this,Y),p((()=>{this._setBreakpoint()})))}get layout(){return a(this,r,"f")}set layout(t){s(this,r,t,"f")}get gridstackConfig(){return a(this,f,"f")}set gridstackConfig(t){s(this,f,t,"f")}get _gridstackConfig(){return a(this,b,"f")}set _gridstackConfig(t){s(this,b,t,"f")}get gridStack(){return a(this,v,"f")}set gridStack(t){s(this,v,t,"f")}get grid(){return a(this,w,"f")}set grid(t){s(this,w,t,"f")}get compact(){return a(this,y,"f")}set compact(t){s(this,y,t,"f")}get wholeWidgetDraggable(){return a(this,_,"f")}set wholeWidgetDraggable(t){s(this,_,t,"f")}get _breakpoint(){return a(this,C,"f")}set _breakpoint(t){s(this,C,t,"f")}render(){return g`
+}
+@media (min-width: 42rem) {
+  .grid-wrapper {
+    margin: -16px;
+  }
+  .grid-wrapper.compact {
+    margin: -8px;
+  }
+}`;let f=(()=>{var r,f,b,w,v,y,_,C;let W,S,j,M,D,x,E,z,L,B,q=[n("kyn-widget-gridstack")],A=[],G=h,O=[],R=[],P=[],U=[],H=[],V=[],$=[],F=[],I=[],J=[],K=[],N=[],Q=[],T=[],X=[],Y=[];return S=class extends G{constructor(){super(...arguments),r.set(this,i(this,O,{})),f.set(this,(i(this,R),i(this,P,void 0))),b.set(this,(i(this,U),i(this,H,void 0))),w.set(this,(i(this,V),i(this,$,k))),v.set(this,(i(this,F),i(this,I,void 0))),y.set(this,(i(this,J),i(this,K,!1))),_.set(this,(i(this,N),i(this,Q,!1))),C.set(this,(i(this,T),i(this,X,""))),this._debounceResize=(i(this,Y),p((()=>{this._setBreakpoint(),this._setMargin()})))}get layout(){return a(this,r,"f")}set layout(t){s(this,r,t,"f")}get gridstackConfig(){return a(this,f,"f")}set gridstackConfig(t){s(this,f,t,"f")}get _gridstackConfig(){return a(this,b,"f")}set _gridstackConfig(t){s(this,b,t,"f")}get gridStack(){return a(this,w,"f")}set gridStack(t){s(this,w,t,"f")}get grid(){return a(this,v,"f")}set grid(t){s(this,v,t,"f")}get compact(){return a(this,y,"f")}set compact(t){s(this,y,t,"f")}get wholeWidgetDraggable(){return a(this,_,"f")}set wholeWidgetDraggable(t){s(this,_,t,"f")}get _breakpoint(){return a(this,C,"f")}set _breakpoint(t){s(this,C,t,"f")}render(){return g`
       <div class="grid-wrapper ${this.compact?"compact":""}">
         <slot></slot>
       </div>
-    `}firstUpdated(){this._setBreakpoint()}willUpdate(t){(t.has("compact")||t.has("wholeWidgetDraggable"))&&(this._gridstackConfig=this.gridstackConfig||m(this.compact,this.wholeWidgetDraggable)),this.layout&&this._breakpoint&&(t.has("_breakpoint")||t.has("layout"))&&this._updateLayout()}_saveLayout(){let t=this.grid.save(!1);t=t.map((t=>({...t,w:t.w||t.minW,h:t.h||t.minH}))),this.layout[this._breakpoint]=t;const e=new CustomEvent("on-grid-save",{detail:{layout:this.layout}});this.dispatchEvent(e)}_initGridstack(){this.grid&&this.grid.destroy(!1);const t=this.querySelector(".grid-stack");this.grid=this.gridStack.init(this._gridstackConfig,t),this.grid.on("dragstart",(t=>{const e=t.target;l("kyn-widget",e).dragActive=!0})),this.grid.on("dragstop",(t=>{const e=t.target;l("kyn-widget",e).dragActive=!1,this._saveLayout()})),this.grid.on("resizestop",(()=>{this._saveLayout()}));const e=new CustomEvent("on-grid-init",{detail:{grid:this.grid,gridStack:this.gridStack}});this.dispatchEvent(e)}updated(t){(t.has("gridstackConfig")||t.has("_gridstackConfig"))&&this._initGridstack(),t.has("compact")&&this._updateWidgetsDensity()}_updateWidgetsDensity(){this.querySelectorAll("kyn-widget").forEach((t=>{t.compact=this.compact}))}_updateLayout(){const t=this.layout[this._breakpoint]||this.layout.max;this.grid&&(this.grid.load(t),this.grid.setAnimation(!0))}connectedCallback(){super.connectedCallback(),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}_setBreakpoint(){this._breakpoint=getComputedStyle(document.documentElement).getPropertyValue("--kd-current-breakpoint")}},r=new WeakMap,f=new WeakMap,b=new WeakMap,v=new WeakMap,w=new WeakMap,y=new WeakMap,_=new WeakMap,C=new WeakMap,t(S,"WidgetGridstack"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=G[Symbol.metadata])&&void 0!==t?t:null):void 0;j=[c({type:Object})],D=[c({type:Object})],E=[o()],M=[c({attribute:!1})],x=[c({attribute:!1})],z=[c({type:Boolean})],L=[c({type:Boolean})],B=[o()],e(S,null,j,{kind:"accessor",name:"layout",static:!1,private:!1,access:{has:t=>"layout"in t,get:t=>t.layout,set:(t,e)=>{t.layout=e}},metadata:i},O,R),e(S,null,D,{kind:"accessor",name:"gridstackConfig",static:!1,private:!1,access:{has:t=>"gridstackConfig"in t,get:t=>t.gridstackConfig,set:(t,e)=>{t.gridstackConfig=e}},metadata:i},P,U),e(S,null,E,{kind:"accessor",name:"_gridstackConfig",static:!1,private:!1,access:{has:t=>"_gridstackConfig"in t,get:t=>t._gridstackConfig,set:(t,e)=>{t._gridstackConfig=e}},metadata:i},H,V),e(S,null,M,{kind:"accessor",name:"gridStack",static:!1,private:!1,access:{has:t=>"gridStack"in t,get:t=>t.gridStack,set:(t,e)=>{t.gridStack=e}},metadata:i},$,F),e(S,null,x,{kind:"accessor",name:"grid",static:!1,private:!1,access:{has:t=>"grid"in t,get:t=>t.grid,set:(t,e)=>{t.grid=e}},metadata:i},I,J),e(S,null,z,{kind:"accessor",name:"compact",static:!1,private:!1,access:{has:t=>"compact"in t,get:t=>t.compact,set:(t,e)=>{t.compact=e}},metadata:i},K,N),e(S,null,L,{kind:"accessor",name:"wholeWidgetDraggable",static:!1,private:!1,access:{has:t=>"wholeWidgetDraggable"in t,get:t=>t.wholeWidgetDraggable,set:(t,e)=>{t.wholeWidgetDraggable=e}},metadata:i},Q,T),e(S,null,B,{kind:"accessor",name:"_breakpoint",static:!1,private:!1,access:{has:t=>"_breakpoint"in t,get:t=>t._breakpoint,set:(t,e)=>{t._breakpoint=e}},metadata:i},X,Y),e(null,W={value:S},q,{kind:"class",name:S.name,metadata:i},null,A),S=W.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=d(u),i(S,A),S})();export{f as WidgetGridstack};
+    `}firstUpdated(){this._setBreakpoint()}willUpdate(t){(t.has("compact")||t.has("wholeWidgetDraggable"))&&(this._gridstackConfig=this.gridstackConfig||m(this.compact,this.wholeWidgetDraggable)),this.layout&&this._breakpoint&&(t.has("_breakpoint")||t.has("layout"))&&this._updateLayout()}_saveLayout(){let t=this.grid.save(!1);t=t.map((t=>({...t,w:t.w||t.minW,h:t.h||t.minH}))),this.layout[this._breakpoint]=t;const e=new CustomEvent("on-grid-save",{detail:{layout:this.layout}});this.dispatchEvent(e)}_initGridstack(){this.grid&&this.grid.destroy(!1);const t=this.querySelector(".grid-stack");this.grid=this.gridStack.init(this._gridstackConfig,t),this._setMargin(),this.grid.on("dragstart",(t=>{const e=t.target;l("kyn-widget",e).dragActive=!0})),this.grid.on("dragstop",(t=>{const e=t.target;l("kyn-widget",e).dragActive=!1,this._saveLayout()})),this.grid.on("resizestop",(()=>{this._saveLayout()}));const e=new CustomEvent("on-grid-init",{detail:{grid:this.grid,gridStack:this.gridStack}});this.dispatchEvent(e)}updated(t){(t.has("gridstackConfig")||t.has("_gridstackConfig"))&&this._initGridstack(),t.has("compact")&&this._updateWidgetsDensity()}_updateWidgetsDensity(){this.querySelectorAll("kyn-widget").forEach((t=>{t.compact=this.compact}))}_updateLayout(){const t=this.layout[this._breakpoint]||this.layout.max;this.grid&&(this.grid.load(t),this.grid.setAnimation(!0))}connectedCallback(){super.connectedCallback(),null===window||void 0===window||window.addEventListener("resize",this._debounceResize)}disconnectedCallback(){null===window||void 0===window||window.removeEventListener("resize",this._debounceResize),super.disconnectedCallback()}_setBreakpoint(){this._breakpoint=getComputedStyle(document.documentElement).getPropertyValue("--kd-current-breakpoint")}_setMargin(){this.gridstackConfig||this.compact||("sm"===this._breakpoint?this.grid.margin("8"):this.grid.margin("16"))}},r=new WeakMap,f=new WeakMap,b=new WeakMap,w=new WeakMap,v=new WeakMap,y=new WeakMap,_=new WeakMap,C=new WeakMap,t(S,"WidgetGridstack"),(()=>{var t;const i="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=G[Symbol.metadata])&&void 0!==t?t:null):void 0;j=[c({type:Object})],M=[c({type:Object})],D=[o()],x=[c({attribute:!1})],E=[c({attribute:!1})],z=[c({type:Boolean})],L=[c({type:Boolean})],B=[o()],e(S,null,j,{kind:"accessor",name:"layout",static:!1,private:!1,access:{has:t=>"layout"in t,get:t=>t.layout,set:(t,e)=>{t.layout=e}},metadata:i},O,R),e(S,null,M,{kind:"accessor",name:"gridstackConfig",static:!1,private:!1,access:{has:t=>"gridstackConfig"in t,get:t=>t.gridstackConfig,set:(t,e)=>{t.gridstackConfig=e}},metadata:i},P,U),e(S,null,D,{kind:"accessor",name:"_gridstackConfig",static:!1,private:!1,access:{has:t=>"_gridstackConfig"in t,get:t=>t._gridstackConfig,set:(t,e)=>{t._gridstackConfig=e}},metadata:i},H,V),e(S,null,x,{kind:"accessor",name:"gridStack",static:!1,private:!1,access:{has:t=>"gridStack"in t,get:t=>t.gridStack,set:(t,e)=>{t.gridStack=e}},metadata:i},$,F),e(S,null,E,{kind:"accessor",name:"grid",static:!1,private:!1,access:{has:t=>"grid"in t,get:t=>t.grid,set:(t,e)=>{t.grid=e}},metadata:i},I,J),e(S,null,z,{kind:"accessor",name:"compact",static:!1,private:!1,access:{has:t=>"compact"in t,get:t=>t.compact,set:(t,e)=>{t.compact=e}},metadata:i},K,N),e(S,null,L,{kind:"accessor",name:"wholeWidgetDraggable",static:!1,private:!1,access:{has:t=>"wholeWidgetDraggable"in t,get:t=>t.wholeWidgetDraggable,set:(t,e)=>{t.wholeWidgetDraggable=e}},metadata:i},Q,T),e(S,null,B,{kind:"accessor",name:"_breakpoint",static:!1,private:!1,access:{has:t=>"_breakpoint"in t,get:t=>t._breakpoint,set:(t,e)=>{t._breakpoint=e}},metadata:i},X,Y),e(null,W={value:S},q,{kind:"class",name:S.name,metadata:i},null,A),S=W.value,i&&Object.defineProperty(S,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:i})})(),S.styles=d(u),i(S,A),S})();export{f as WidgetGridstack};
 //# sourceMappingURL=widgetGridstack.js.map

package/components/reusable/widget/widgetGridstack.js.map

@@ -1 +1 @@
-{"version":3,"file":"widgetGridstack.js","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport Styles from './widgetGridstack.scss?inline';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport { GetConfig } from '../../../common/helpers/gridstack';\nimport { GridStack } from 'gridstack';\n\n/**\n * GridStack wrapper that includes Shidoka default config and styles.\n * @fires on-grid-init - Emits after GridStack initializes.\n * @fires on-grid-save - Emits the GridStack save() method results (new layout) on dragstop and resizestop.\n * @slot unnamed - Slot for .grid-stack container element.\n */\n@customElement('kyn-widget-gridstack')\nexport class WidgetGridstack extends LitElement {\n  static override styles = unsafeCSS(Styles);\n\n  /** GridStack layout/widget size/position definitions for each breakpoint. */\n  @property({ type: Object })\n  accessor layout: any = {};\n\n  /** Custom GridStack config. */\n  @property({ type: Object })\n  accessor gridstackConfig!: any;\n\n  /** Final config passed to gridstack.\n   * @internal */\n  @state()\n  accessor _gridstackConfig!: any;\n\n  /** GridStack instance. */\n  @property({ attribute: false })\n  accessor gridStack: any = GridStack;\n\n  /** GridStack grid instance. */\n  @property({ attribute: false })\n  accessor grid!: any;\n\n  /** Use compact grid config. Ignored in case of custom gridstackConfig. */\n  @property({ type: Boolean })\n  accessor compact = false;\n\n  /** Make entire widget draggable. Ignored in case of custom gridstackConfig. */\n  @property({ type: Boolean })\n  accessor wholeWidgetDraggable = false;\n\n  /** Current breakpoint.\n   * @internal\n   */\n  @state()\n  accessor _breakpoint = '';\n\n  override render() {\n    return html`\n      <div class=\"grid-wrapper ${this.compact ? 'compact' : ''}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this._setBreakpoint();\n  }\n\n  override willUpdate(changedProps: any) {\n    /* This part of the code is checking if the properties `compact` or `wholeWidgetDraggable` have\n    changed. If either of these properties has changed, it updates the `_gridstackConfig` property\n    based on the current values of `compact` and `wholeWidgetDraggable`. */\n    if (\n      changedProps.has('compact') ||\n      changedProps.has('wholeWidgetDraggable')\n    ) {\n      this._gridstackConfig =\n        this.gridstackConfig ||\n        GetConfig(this.compact, this.wholeWidgetDraggable);\n    }\n\n    /* This part of the code is checking if the properties `layout` and `_breakpoint` are truthy and if\n    either `_breakpoint` or `layout` properties have changed. If these conditions are met, it calls\n    the `_updateLayout()` method to update the gridstack size and position of each widget when there\n    is a change in the breakpoint or layout. */\n    if (\n      this.layout &&\n      this._breakpoint &&\n      (changedProps.has('_breakpoint') || changedProps.has('layout'))\n    ) {\n      // update the gridstack size/position of each widget when breakpoint or layout changes\n      this._updateLayout();\n    }\n  }\n\n  /**\n   * The private `_saveLayout` function saves the grid layout by updating each widget's properties and\n   * emitting a custom event with the new layout.\n   */\n  private _saveLayout() {\n    // get new grid layout\n    let NewLayout = this.grid.save(false);\n\n    // manually update each widget's properties because GridStack drops \"w\" or \"h\" if they match their respective min values and freezes the browser\n    NewLayout = NewLayout.map((Widget: any) => {\n      return {\n        ...Widget,\n        w: Widget.w || Widget.minW,\n        h: Widget.h || Widget.minH,\n      };\n    });\n\n    // update layout for current breakpoint\n    this.layout[this._breakpoint] = NewLayout;\n\n    // emit save event with new layout in detail\n    const event = new CustomEvent('on-grid-save', {\n      detail: { layout: this.layout },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * The function `_initGridstack` initializes a GridStack layout with event listeners for drag, resize,\n   * and saving layout changes.\n   */\n  private _initGridstack() {\n    // destory grid if already exists\n    if (this.grid) {\n      this.grid.destroy(false);\n    }\n\n    // initialize the GridStack with Shidoka default options\n    const GridstackEl: any = this.querySelector('.grid-stack');\n    this.grid = this.gridStack.init(this._gridstackConfig, GridstackEl);\n\n    // set widget drag state on dragstart\n    this.grid.on('dragstart', (e: Event) => {\n      const El: any = e.target;\n      const Widget: any = querySelectorDeep('kyn-widget', El);\n      Widget.dragActive = true;\n    });\n\n    // unset widget drag state and save layout on dragstop\n    this.grid.on('dragstop', (e: Event) => {\n      const El: any = e.target;\n      const Widget: any = querySelectorDeep('kyn-widget', El);\n      Widget.dragActive = false;\n\n      this._saveLayout();\n    });\n\n    // save layout on resizestop\n    this.grid.on('resizestop', () => {\n      this._saveLayout();\n    });\n\n    // emit init event\n    const event = new CustomEvent('on-grid-init', {\n      detail: { grid: this.grid, gridStack: this.gridStack },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('gridstackConfig') ||\n      changedProps.has('_gridstackConfig')\n    ) {\n      this._initGridstack();\n    }\n\n    if (changedProps.has('compact')) {\n      this._updateWidgetsDensity();\n    }\n  }\n\n  /**\n   * The function `_updateWidgetsDensity` iterates through all `kyn-widget` elements and sets their\n   * `compact` property based on the parent element's `compact` property.\n   */\n  private _updateWidgetsDensity() {\n    this.querySelectorAll('kyn-widget').forEach((widget: any) => {\n      widget.compact = this.compact;\n    });\n  }\n\n  private _updateLayout() {\n    // get layout for current breakpoint\n    const Layout = this.layout[this._breakpoint] || this.layout['max'];\n\n    if (this.grid) {\n      // load grid layout\n      this.grid.load(Layout);\n\n      // enable gridstack animations\n      this.grid.setAnimation(true);\n    }\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._setBreakpoint();\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n\n  /**\n   * The function `_setBreakpoint` retrieves and sets the current breakpoint value from the CSS custom\n   * property `--kd-current-breakpoint`.\n   */\n  private _setBreakpoint() {\n    // get and set current breakpoint variable\n    this._breakpoint = getComputedStyle(\n      document.documentElement\n    ).getPropertyValue('--kd-current-breakpoint');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-widget-gridstack': WidgetGridstack;\n  }\n}\n"],"names":["WidgetGridstack","customElement","LitElement","_classThis","_classSuper","_WidgetGridstack_layout_accessor_storage","set","this","__runInitializers","_layout_initializers","_WidgetGridstack_gridstackConfig_accessor_storage","_layout_extraInitializers","_gridstackConfig_initializers","_WidgetGridstack__gridstackConfig_accessor_storage","_gridstackConfig_extraInitializers","__gridstackConfig_initializers","_WidgetGridstack_gridStack_accessor_storage","__gridstackConfig_extraInitializers","_gridStack_initializers","GridStack","_WidgetGridstack_grid_accessor_storage","_gridStack_extraInitializers","_grid_initializers","_WidgetGridstack_compact_accessor_storage","_grid_extraInitializers","_compact_initializers","_WidgetGridstack_wholeWidgetDraggable_accessor_storage","_compact_extraInitializers","_wholeWidgetDraggable_initializers","_WidgetGridstack__breakpoint_accessor_storage","_wholeWidgetDraggable_extraInitializers","__breakpoint_initializers","_debounceResize","__breakpoint_extraInitializers","debounce","_setBreakpoint","layout","__classPrivateFieldGet","value","__classPrivateFieldSet","gridstackConfig","_gridstackConfig","gridStack","grid","compact","wholeWidgetDraggable","_breakpoint","render","html","firstUpdated","willUpdate","changedProps","has","GetConfig","_updateLayout","_saveLayout","NewLayout","save","map","Widget","w","minW","h","minH","event","CustomEvent","detail","dispatchEvent","_initGridstack","destroy","GridstackEl","querySelector","init","on","e","El","target","querySelectorDeep","dragActive","updated","_updateWidgetsDensity","querySelectorAll","forEach","widget","Layout","load","setAnimation","connectedCallback","super","window","addEventListener","disconnectedCallback","removeEventListener","getComputedStyle","document","documentElement","getPropertyValue","_layout_decorators","property","type","Object","_gridstackConfig_decorators","__gridstackConfig_decorators","state","_gridStack_decorators","attribute","_grid_decorators","_compact_decorators","Boolean","_wholeWidgetDraggable_decorators","__breakpoint_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","Styles"],"mappings":"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"}
+{"version":3,"file":"widgetGridstack.js","sources":["../../../../src/components/reusable/widget/widgetGridstack.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport Styles from './widgetGridstack.scss?inline';\nimport { querySelectorDeep } from 'query-selector-shadow-dom';\nimport { debounce } from '../../../common/helpers/helpers';\nimport { GetConfig } from '../../../common/helpers/gridstack';\nimport { GridStack } from 'gridstack';\n\n/**\n * GridStack wrapper that includes Shidoka default config and styles.\n * @fires on-grid-init - Emits after GridStack initializes.\n * @fires on-grid-save - Emits the GridStack save() method results (new layout) on dragstop and resizestop.\n * @slot unnamed - Slot for .grid-stack container element.\n */\n@customElement('kyn-widget-gridstack')\nexport class WidgetGridstack extends LitElement {\n  static override styles = unsafeCSS(Styles);\n\n  /** GridStack layout/widget size/position definitions for each breakpoint. */\n  @property({ type: Object })\n  accessor layout: any = {};\n\n  /** Custom GridStack config. */\n  @property({ type: Object })\n  accessor gridstackConfig!: any;\n\n  /** Final config passed to gridstack.\n   * @internal */\n  @state()\n  accessor _gridstackConfig!: any;\n\n  /** GridStack instance. */\n  @property({ attribute: false })\n  accessor gridStack: any = GridStack;\n\n  /** GridStack grid instance. */\n  @property({ attribute: false })\n  accessor grid!: any;\n\n  /** Use compact grid config. Ignored in case of custom gridstackConfig. */\n  @property({ type: Boolean })\n  accessor compact = false;\n\n  /** Make entire widget draggable. Ignored in case of custom gridstackConfig. */\n  @property({ type: Boolean })\n  accessor wholeWidgetDraggable = false;\n\n  /** Current breakpoint.\n   * @internal\n   */\n  @state()\n  accessor _breakpoint = '';\n\n  override render() {\n    return html`\n      <div class=\"grid-wrapper ${this.compact ? 'compact' : ''}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    this._setBreakpoint();\n  }\n\n  override willUpdate(changedProps: any) {\n    /* This part of the code is checking if the properties `compact` or `wholeWidgetDraggable` have\n    changed. If either of these properties has changed, it updates the `_gridstackConfig` property\n    based on the current values of `compact` and `wholeWidgetDraggable`. */\n    if (\n      changedProps.has('compact') ||\n      changedProps.has('wholeWidgetDraggable')\n    ) {\n      this._gridstackConfig =\n        this.gridstackConfig ||\n        GetConfig(this.compact, this.wholeWidgetDraggable);\n    }\n\n    /* This part of the code is checking if the properties `layout` and `_breakpoint` are truthy and if\n    either `_breakpoint` or `layout` properties have changed. If these conditions are met, it calls\n    the `_updateLayout()` method to update the gridstack size and position of each widget when there\n    is a change in the breakpoint or layout. */\n    if (\n      this.layout &&\n      this._breakpoint &&\n      (changedProps.has('_breakpoint') || changedProps.has('layout'))\n    ) {\n      // update the gridstack size/position of each widget when breakpoint or layout changes\n      this._updateLayout();\n    }\n  }\n\n  /**\n   * The private `_saveLayout` function saves the grid layout by updating each widget's properties and\n   * emitting a custom event with the new layout.\n   */\n  private _saveLayout() {\n    // get new grid layout\n    let NewLayout = this.grid.save(false);\n\n    // manually update each widget's properties because GridStack drops \"w\" or \"h\" if they match their respective min values and freezes the browser\n    NewLayout = NewLayout.map((Widget: any) => {\n      return {\n        ...Widget,\n        w: Widget.w || Widget.minW,\n        h: Widget.h || Widget.minH,\n      };\n    });\n\n    // update layout for current breakpoint\n    this.layout[this._breakpoint] = NewLayout;\n\n    // emit save event with new layout in detail\n    const event = new CustomEvent('on-grid-save', {\n      detail: { layout: this.layout },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * The function `_initGridstack` initializes a GridStack layout with event listeners for drag, resize,\n   * and saving layout changes.\n   */\n  private _initGridstack() {\n    // destory grid if already exists\n    if (this.grid) {\n      this.grid.destroy(false);\n    }\n\n    // initialize the GridStack with Shidoka default options\n    const GridstackEl: any = this.querySelector('.grid-stack');\n    this.grid = this.gridStack.init(this._gridstackConfig, GridstackEl);\n\n    // set the grid's margin based on breakpoint\n    this._setMargin();\n\n    // set widget drag state on dragstart\n    this.grid.on('dragstart', (e: Event) => {\n      const El: any = e.target;\n      const Widget: any = querySelectorDeep('kyn-widget', El);\n      Widget.dragActive = true;\n    });\n\n    // unset widget drag state and save layout on dragstop\n    this.grid.on('dragstop', (e: Event) => {\n      const El: any = e.target;\n      const Widget: any = querySelectorDeep('kyn-widget', El);\n      Widget.dragActive = false;\n\n      this._saveLayout();\n    });\n\n    // save layout on resizestop\n    this.grid.on('resizestop', () => {\n      this._saveLayout();\n    });\n\n    // emit init event\n    const event = new CustomEvent('on-grid-init', {\n      detail: { grid: this.grid, gridStack: this.gridStack },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (\n      changedProps.has('gridstackConfig') ||\n      changedProps.has('_gridstackConfig')\n    ) {\n      this._initGridstack();\n    }\n\n    if (changedProps.has('compact')) {\n      this._updateWidgetsDensity();\n    }\n  }\n\n  /**\n   * The function `_updateWidgetsDensity` iterates through all `kyn-widget` elements and sets their\n   * `compact` property based on the parent element's `compact` property.\n   */\n  private _updateWidgetsDensity() {\n    this.querySelectorAll('kyn-widget').forEach((widget: any) => {\n      widget.compact = this.compact;\n    });\n  }\n\n  private _updateLayout() {\n    // get layout for current breakpoint\n    const Layout = this.layout[this._breakpoint] || this.layout['max'];\n\n    if (this.grid) {\n      // load grid layout\n      this.grid.load(Layout);\n\n      // enable gridstack animations\n      this.grid.setAnimation(true);\n    }\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._setBreakpoint();\n    this._setMargin();\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    window?.addEventListener('resize', this._debounceResize);\n  }\n\n  override disconnectedCallback() {\n    window?.removeEventListener('resize', this._debounceResize);\n\n    super.disconnectedCallback();\n  }\n\n  /**\n   * The function `_setBreakpoint` retrieves and sets the current breakpoint value from the CSS custom\n   * property `--kd-current-breakpoint`.\n   */\n  private _setBreakpoint() {\n    // get and set current breakpoint variable\n    this._breakpoint = getComputedStyle(\n      document.documentElement\n    ).getPropertyValue('--kd-current-breakpoint');\n  }\n\n  /**\n   * The private `_setMargin` function adjusts the margin of a grid based on a breakpoint value.\n   */\n  private _setMargin() {\n    if (!this.gridstackConfig && !this.compact) {\n      if (this._breakpoint === 'sm') {\n        this.grid.margin('8');\n      } else {\n        this.grid.margin('16');\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-widget-gridstack': WidgetGridstack;\n  }\n}\n"],"names":["WidgetGridstack","customElement","LitElement","_classThis","_classSuper","_WidgetGridstack_layout_accessor_storage","set","this","__runInitializers","_layout_initializers","_WidgetGridstack_gridstackConfig_accessor_storage","_layout_extraInitializers","_gridstackConfig_initializers","_WidgetGridstack__gridstackConfig_accessor_storage","_gridstackConfig_extraInitializers","__gridstackConfig_initializers","_WidgetGridstack_gridStack_accessor_storage","__gridstackConfig_extraInitializers","_gridStack_initializers","GridStack","_WidgetGridstack_grid_accessor_storage","_gridStack_extraInitializers","_grid_initializers","_WidgetGridstack_compact_accessor_storage","_grid_extraInitializers","_compact_initializers","_WidgetGridstack_wholeWidgetDraggable_accessor_storage","_compact_extraInitializers","_wholeWidgetDraggable_initializers","_WidgetGridstack__breakpoint_accessor_storage","_wholeWidgetDraggable_extraInitializers","__breakpoint_initializers","_debounceResize","__breakpoint_extraInitializers","debounce","_setBreakpoint","_setMargin","layout","__classPrivateFieldGet","value","__classPrivateFieldSet","gridstackConfig","_gridstackConfig","gridStack","grid","compact","wholeWidgetDraggable","_breakpoint","render","html","firstUpdated","willUpdate","changedProps","has","GetConfig","_updateLayout","_saveLayout","NewLayout","save","map","Widget","w","minW","h","minH","event","CustomEvent","detail","dispatchEvent","_initGridstack","destroy","GridstackEl","querySelector","init","on","e","El","target","querySelectorDeep","dragActive","updated","_updateWidgetsDensity","querySelectorAll","forEach","widget","Layout","load","setAnimation","connectedCallback","super","window","addEventListener","disconnectedCallback","removeEventListener","getComputedStyle","document","documentElement","getPropertyValue","margin","_layout_decorators","property","type","Object","_gridstackConfig_decorators","__gridstackConfig_decorators","state","_gridStack_decorators","attribute","_grid_decorators","_compact_decorators","Boolean","_wholeWidgetDraggable_decorators","__breakpoint_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","Styles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.51.2",
+  "version": "2.52.1",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",
@@ -28,7 +28,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.4.16",
+    "@kyndryl-design-system/shidoka-foundation": "^2.4.18",
     "@kyndryl-design-system/shidoka-icons": "^2.12.2",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",