@digital-realty/ix-widget 2.1.69 → 2.1.71

package/dist/IxWidget.js

@@ -26,14 +26,8 @@ IxWidget.styles = css `
       --ix-widget-padding: 1rem;
     }
 
-    @media (min-width: 1350px) {
-      [type='status-counter'].card {
-        --ix-widget-padding: 33px 20px 33px 24px;
-      }
-    }
-
     [type='status-counter-group'].card {
-      --ix-widget-padding: 0;
+      --ix-widget-padding: 1rem;
       --ix-widget-background: transparent;
     }
 
@@ -41,16 +35,6 @@ IxWidget.styles = css `
       --ix-widget-padding: 0 11px 16px 24px;
     }
 
-    @media (max-width: 1349px) {
-      [type='status-counter-group'].card {
-        --ix-widget-padding: 1rem;
-        --ix-widget-background: white;
-        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
-          rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
-          rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
-      }
-    }
-
     [type='info-card'].card {
       display: block;
       max-width: 348px;
@@ -83,6 +67,16 @@ IxWidget.styles = css `
       padding-bottom: 11px;
     }
 
+    @media (min-width: 600px) {
+      [type='status-counter'].card {
+        --ix-widget-padding: 33px 20px 33px 24px;
+      }
+
+      [type='status-counter-group'].card {
+        padding: 0;
+      }
+    }
+
     @media (max-width: 600px) {
       [type='status-counter-group'].card {
         background: #c8dffa;

package/dist/IxWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAsF8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AA3FM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFlB,AAnFY,CAmFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class IxWidget extends LitElement {\n  static styles = css`\n    .card {\n      border-radius: 0.75rem;\n      background: var(--ix-widget-background, white);\n      padding: var(--ix-widget-padding, 16px 24px 32px);\n      border: var(--ix-widget-border, none);\n    }\n\n    [type='status-counter'].card {\n      margin-bottom: 0;\n      --ix-widget-padding: 0;\n      --ix-widget-padding: 1rem;\n    }\n\n    @media (min-width: 1350px) {\n      [type='status-counter'].card {\n        --ix-widget-padding: 33px 20px 33px 24px;\n      }\n    }\n\n    [type='status-counter-group'].card {\n      --ix-widget-padding: 0;\n      --ix-widget-background: transparent;\n    }\n\n    [type='action-list'].card {\n      --ix-widget-padding: 0 11px 16px 24px;\n    }\n\n    @media (max-width: 1349px) {\n      [type='status-counter-group'].card {\n        --ix-widget-padding: 1rem;\n        --ix-widget-background: white;\n        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n          rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,\n          rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n      }\n    }\n\n    [type='info-card'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: auto;\n      aspect-ratio: 1 / 1.47;\n    }\n    [type='info-card-resources'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: hidden;\n      aspect-ratio: 1 / 0.85;\n    }\n    [type='action-list'].card {\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n        rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n    }\n    [type='news-feed'].card {\n      display: flex;\n      flex-direction: column;\n      background: rgb(255, 255, 255);\n      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n        rgb(225, 228, 232) 0px 0px 0px 1px inset;\n      border-radius: 12px;\n      padding-bottom: 11px;\n    }\n\n    @media (max-width: 600px) {\n      [type='status-counter-group'].card {\n        background: #c8dffa;\n        padding-left: 0;\n        padding-right: 0;\n      }\n      [type='status-counter'].card {\n        --ix-widget-padding: 0;\n        background: transparent;\n        border-radius: 0;\n      }\n    }\n  `;\n\n  @property({ type: String }) type = 'default';\n\n  protected override render() {\n    return html`<div class=\"card\" type=${this.type}>\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"IxWidget.js","sourceRoot":"","sources":["../src/IxWidget.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAgF8B,SAAI,GAAG,SAAS,CAAC;IAO/C,CAAC;IALoB,MAAM;QACvB,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,IAAI;;WAEvC,CAAC;IACV,CAAC;;AArFM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ElB,AA7EY,CA6EX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class IxWidget extends LitElement {\n  static styles = css`\n    .card {\n      border-radius: 0.75rem;\n      background: var(--ix-widget-background, white);\n      padding: var(--ix-widget-padding, 16px 24px 32px);\n      border: var(--ix-widget-border, none);\n    }\n\n    [type='status-counter'].card {\n      margin-bottom: 0;\n      --ix-widget-padding: 0;\n      --ix-widget-padding: 1rem;\n    }\n\n    [type='status-counter-group'].card {\n      --ix-widget-padding: 1rem;\n      --ix-widget-background: transparent;\n    }\n\n    [type='action-list'].card {\n      --ix-widget-padding: 0 11px 16px 24px;\n    }\n\n    [type='info-card'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: auto;\n      aspect-ratio: 1 / 1.47;\n    }\n    [type='info-card-resources'].card {\n      display: block;\n      max-width: 348px;\n      border-radius: 0.5rem;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      overflow: hidden;\n      aspect-ratio: 1 / 0.85;\n    }\n    [type='action-list'].card {\n      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,\n        rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;\n    }\n    [type='news-feed'].card {\n      display: flex;\n      flex-direction: column;\n      background: rgb(255, 255, 255);\n      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n        rgb(225, 228, 232) 0px 0px 0px 1px inset;\n      border-radius: 12px;\n      padding-bottom: 11px;\n    }\n\n    @media (min-width: 600px) {\n      [type='status-counter'].card {\n        --ix-widget-padding: 33px 20px 33px 24px;\n      }\n\n      [type='status-counter-group'].card {\n        padding: 0;\n      }\n    }\n\n    @media (max-width: 600px) {\n      [type='status-counter-group'].card {\n        background: #c8dffa;\n        padding-left: 0;\n        padding-right: 0;\n      }\n      [type='status-counter'].card {\n        --ix-widget-padding: 0;\n        background: transparent;\n        border-radius: 0;\n      }\n    }\n  `;\n\n  @property({ type: String }) type = 'default';\n\n  protected override render() {\n    return html`<div class=\"card\" type=${this.type}>\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/ix-news-feed.js

@@ -247,7 +247,7 @@ IxNewsFeed.styles = css `
       display: block;
     }
 
-    @media only screen and (max-width: 600px) {
+    @media only screen and (max-width: 1200px) {
       ix-accordion {
         display: block;
         --md-icon-button-icon-color: var(--clr-on-surface-primary);

package/dist/ix-news-feed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-news-feed.js","sourceRoot":"","sources":["../src/ix-news-feed.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAgNuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAU,EAAE,CAAC;QAEhB,SAAI,GAAG,GAAG,CAAC;QAE9B,SAAI,GAAG,KAAK,CAAC;IA+DxB,CAAC;IA7DC,aAAa;;QACX,OAAO,IAAI,CAAA,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACrD,MAAM,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,GAAG,GAAG,EACT,SAAS,GAAG,EAAE,GACf,GAAG,IAAI,CAAC;YACT,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,EAAE;gBACrE,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO,IAAI,CAAA;kBACC,GAAG,aAAa,EAAE;8BACN,MAAM;;+BAEL,KAAK;qCACC,QAAQ;oCACT,UAAU;;kCAEZ,UAAU;;;;YAIhC,CAAC;QACT,CAAC,CAAC,EAAE,CAAC;IACP,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;;;;;;aAMF,IAAI,CAAC,IAAI;;;;iBAIL,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;kBACG,IAAI,CAAC,IAAI;uBACJ,SAAS;;;;;2BAKL,IAAI,CAAC,MAAM;UAC5B,IAAI,CAAC,aAAa,EAAE;8BACA,IAAI,CAAC,aAAa,EAAE;;;;gBAIlC,IAAI,CAAC,MAAM;YACf,IAAI,CAAC,aAAa,EAAE;;UAEtB,IAAI,CAAC,aAAa,EAAE;mBACX,CAAC;IAClB,CAAC;;AAnRM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6MlB,AA7MY,CA6MX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AAE9B;IAAR,KAAK,EAAE;wCAAc;AAtNX,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAqRtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\n\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { startOfToday } from 'date-fns/startOfToday.js';\nimport { ticket } from './assets/iconset.js';\n\n@customElement('ix-news-feed')\nexport class IxNewsFeed extends LitElement {\n  static styles = css`\n    :host {\n      --ix-widget-padding: 0;\n    }\n    .header {\n      display: flex;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      align-items: center;\n      padding: 16px 11px 16px 24px;\n    }\n    h6 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n    }\n    li {\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      vertical-align: middle;\n      appearance: none;\n      color: inherit;\n      display: flex;\n      -webkit-box-pack: start;\n      justify-content: flex-start;\n      -webkit-box-align: center;\n      align-items: center;\n      position: relative;\n      text-decoration: none;\n      width: 100%;\n      box-sizing: border-box;\n      text-align: left;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      padding: 0px;\n    }\n    li:hover {\n      text-decoration: none;\n      background-color: rgba(0, 0, 0, 0.04);\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      vertical-align: middle;\n      appearance: none;\n      color: inherit;\n      display: flex;\n      -webkit-box-pack: start;\n      justify-content: flex-start;\n      -webkit-box-align: center;\n      align-items: center;\n      position: relative;\n      text-decoration: none;\n      width: 100%;\n      box-sizing: border-box;\n      text-align: left;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      padding: 0px;\n      text-decoration: none;\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n    a {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      padding: 12px 24px 12px 20px;\n      -webkit-box-align: center;\n\n      -webkit-box-pack: center;\n      justify-content: center;\n      position: relative;\n      box-sizing: border-box;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      appearance: none;\n      text-decoration: none;\n      color: inherit;\n      -webkit-box-flex: 1;\n      flex-grow: 1;\n      align-items: center;\n      gap: 20px;\n      text-align: start;\n    }\n\n    .icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      -webkit-box-pack: center;\n      justify-content: center;\n      -webkit-box-align: center;\n      align-items: center;\n      min-width: 48px;\n      width: 48px;\n      height: 48px;\n      font-size: 20px;\n      border-radius: 8px;\n      color: var(--clr-on-primary, #fff);\n      background-color: var(--clr-primary, #1456e0);\n    }\n    svg {\n      user-select: none;\n      width: 1em;\n      height: 1em;\n      display: inline-block;\n      fill: currentcolor;\n      flex-shrink: 0;\n      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      font-size: 1.5rem;\n    }\n    .details {\n      gap: 0;\n      min-width: 0px;\n      display: flex;\n      flex-direction: column;\n    }\n    .title {\n      margin: 0;\n    }\n    .description {\n      overflow-wrap: break-word;\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--text-small-size, 0.875rem);\n      letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n      line-height: var(--text-small-line-height, 1.42857143em);\n      font-weight: var(--text-small-weight, normal);\n      font-family: var(--root-primary-font, sans-serif);\n      text-decoration: var(--text-small-decoration, none);\n      text-transform: var(--text-small-transform, none);\n    }\n    .caption {\n      margin: 0px;\n      font-family: var(--text-caption-font, sans-serif);\n      font-size: var(--text-caption-size, 0.75rem);\n      letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n      line-height: var(--text-caption-line-height, 1.33333333em);\n      font-weight: var(--text-caption-weight, normal);\n      text-transform: var(--text-caption-transform, none);\n      text-decoration: var(--text-caption-decoration, none);\n      color: rgba(9, 34, 65, 0.7);\n    }\n    .ripple {\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      z-index: 0;\n      inset: 0px;\n      border-radius: inherit;\n    }\n    ix-accordion {\n      display: none;\n    }\n    ix-widget {\n      display: block;\n    }\n\n    @media only screen and (max-width: 600px) {\n      ix-accordion {\n        display: block;\n        --md-icon-button-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-hover-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-focus-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-icon-size: 2rem;\n        --ix-accordion-padding: 8px 12px 8px 20px;\n        --ix-accordion-border-radius: 0.75rem;\n      }\n      ix-widget,\n      a > .caption {\n        display: none;\n      }\n      .description {\n        margin-bottom: 0.5rem;\n      }\n      ix-button {\n        display: inline-block;\n      }\n      .footer {\n        margin-top: 1rem;\n        padding-top: 1rem;\n        border-top: 1px solid var(--cp-neutral-blue-12p, #0922411f);\n      }\n      a {\n        padding: 1rem 0.5rem 0 0;\n      }\n    }\n  `;\n\n  @property({ type: String }) header = 'title';\n\n  @property({ type: Array }) data: any[] = [];\n\n  @property({ type: String }) href = '#';\n\n  @state() open = false;\n\n  renderStories() {\n    return html`${this.data?.map((item: any, id: number) => {\n      const {\n        title = 'date',\n        abstract = '...',\n        uid = '#',\n        dateAdded = '',\n      } = item;\n      const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {\n        addSuffix: true,\n      });\n      return html`<li>\n        <a href=${uid} tabindex=${id}>\n          <div class=\"icon\">${ticket}</div>\n          <div class=\"details\">\n            <p class=\"title\">${title}</p>\n            <p class=\"description\">${abstract}</p>\n            <span class=\"caption\">${dateOffset}</span>\n          </div>\n          <span class=\"caption\">${dateOffset}</span>\n          <span class=\"ripple\"></span>\n        </a>\n        <span class=\"ripple\"></span>\n      </li>`;\n    })}`;\n  }\n\n  renderViewAll() {\n    return html` <ix-button\n      slot=\"cta\"\n      type=\"button\"\n      has-icon\n      trailing-icon\n      appearance=\"text\"\n      href=${this.href}\n    >\n      <ix-icon slot=\"icon\">chevron_right</ix-icon>\n      View All\n    </ix-button>`;\n  }\n\n  protected override render() {\n    return html` <ix-accordion\n        ?isOpen=${this.open}\n        .accordionId=${'f.label'}\n        chevronRight\n        iconOpen=\"keyboard_arrow_down\"\n        iconClose=\"keyboard_arrow_up\"\n      >\n        <h6 slot=\"title\">${this.header}</h6>\n        ${this.renderStories()}\n        <div class=\"footer\">${this.renderViewAll()}</div>\n      </ix-accordion>\n      <ix-widget type=\"news-feed\">\n        <div class=\"header\">\n          <h6>${this.header}</h6>\n          ${this.renderViewAll()}\n        </div>\n        ${this.renderStories()}\n      </ix-widget>`;\n  }\n}\n"]}
+{"version":3,"file":"ix-news-feed.js","sourceRoot":"","sources":["../src/ix-news-feed.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAgNuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAU,EAAE,CAAC;QAEhB,SAAI,GAAG,GAAG,CAAC;QAE9B,SAAI,GAAG,KAAK,CAAC;IA+DxB,CAAC;IA7DC,aAAa;;QACX,OAAO,IAAI,CAAA,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACrD,MAAM,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,GAAG,GAAG,EACT,SAAS,GAAG,EAAE,GACf,GAAG,IAAI,CAAC;YACT,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,YAAY,EAAE,EAAE;gBACrE,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO,IAAI,CAAA;kBACC,GAAG,aAAa,EAAE;8BACN,MAAM;;+BAEL,KAAK;qCACC,QAAQ;oCACT,UAAU;;kCAEZ,UAAU;;;;YAIhC,CAAC;QACT,CAAC,CAAC,EAAE,CAAC;IACP,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;;;;;;aAMF,IAAI,CAAC,IAAI;;;;iBAIL,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;kBACG,IAAI,CAAC,IAAI;uBACJ,SAAS;;;;;2BAKL,IAAI,CAAC,MAAM;UAC5B,IAAI,CAAC,aAAa,EAAE;8BACA,IAAI,CAAC,aAAa,EAAE;;;;gBAIlC,IAAI,CAAC,MAAM;YACf,IAAI,CAAC,aAAa,EAAE;;UAEtB,IAAI,CAAC,aAAa,EAAE;mBACX,CAAC;IAClB,CAAC;;AAnRM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6MlB,AA7MY,CA6MX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AAE9B;IAAR,KAAK,EAAE;wCAAc;AAtNX,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAqRtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\n\nimport { formatDistance } from 'date-fns/formatDistance.js';\nimport { parseISO } from 'date-fns/parseISO.js';\nimport { startOfToday } from 'date-fns/startOfToday.js';\nimport { ticket } from './assets/iconset.js';\n\n@customElement('ix-news-feed')\nexport class IxNewsFeed extends LitElement {\n  static styles = css`\n    :host {\n      --ix-widget-padding: 0;\n    }\n    .header {\n      display: flex;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      align-items: center;\n      padding: 16px 11px 16px 24px;\n    }\n    h6 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n    }\n    li {\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      vertical-align: middle;\n      appearance: none;\n      color: inherit;\n      display: flex;\n      -webkit-box-pack: start;\n      justify-content: flex-start;\n      -webkit-box-align: center;\n      align-items: center;\n      position: relative;\n      text-decoration: none;\n      width: 100%;\n      box-sizing: border-box;\n      text-align: left;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      padding: 0px;\n    }\n    li:hover {\n      text-decoration: none;\n      background-color: rgba(0, 0, 0, 0.04);\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      vertical-align: middle;\n      appearance: none;\n      color: inherit;\n      display: flex;\n      -webkit-box-pack: start;\n      justify-content: flex-start;\n      -webkit-box-align: center;\n      align-items: center;\n      position: relative;\n      text-decoration: none;\n      width: 100%;\n      box-sizing: border-box;\n      text-align: left;\n      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      padding: 0px;\n      text-decoration: none;\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n    a {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      padding: 12px 24px 12px 20px;\n      -webkit-box-align: center;\n\n      -webkit-box-pack: center;\n      justify-content: center;\n      position: relative;\n      box-sizing: border-box;\n      -webkit-tap-highlight-color: transparent;\n      background-color: transparent;\n      outline: 0px;\n      border: 0px;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      appearance: none;\n      text-decoration: none;\n      color: inherit;\n      -webkit-box-flex: 1;\n      flex-grow: 1;\n      align-items: center;\n      gap: 20px;\n      text-align: start;\n    }\n\n    .icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      -webkit-box-pack: center;\n      justify-content: center;\n      -webkit-box-align: center;\n      align-items: center;\n      min-width: 48px;\n      width: 48px;\n      height: 48px;\n      font-size: 20px;\n      border-radius: 8px;\n      color: var(--clr-on-primary, #fff);\n      background-color: var(--clr-primary, #1456e0);\n    }\n    svg {\n      user-select: none;\n      width: 1em;\n      height: 1em;\n      display: inline-block;\n      fill: currentcolor;\n      flex-shrink: 0;\n      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      font-size: 1.5rem;\n    }\n    .details {\n      gap: 0;\n      min-width: 0px;\n      display: flex;\n      flex-direction: column;\n    }\n    .title {\n      margin: 0;\n    }\n    .description {\n      overflow-wrap: break-word;\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      margin: 0;\n      font-size: var(--text-small-size, 0.875rem);\n      letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n      line-height: var(--text-small-line-height, 1.42857143em);\n      font-weight: var(--text-small-weight, normal);\n      font-family: var(--root-primary-font, sans-serif);\n      text-decoration: var(--text-small-decoration, none);\n      text-transform: var(--text-small-transform, none);\n    }\n    .caption {\n      margin: 0px;\n      font-family: var(--text-caption-font, sans-serif);\n      font-size: var(--text-caption-size, 0.75rem);\n      letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n      line-height: var(--text-caption-line-height, 1.33333333em);\n      font-weight: var(--text-caption-weight, normal);\n      text-transform: var(--text-caption-transform, none);\n      text-decoration: var(--text-caption-decoration, none);\n      color: rgba(9, 34, 65, 0.7);\n    }\n    .ripple {\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      z-index: 0;\n      inset: 0px;\n      border-radius: inherit;\n    }\n    ix-accordion {\n      display: none;\n    }\n    ix-widget {\n      display: block;\n    }\n\n    @media only screen and (max-width: 1200px) {\n      ix-accordion {\n        display: block;\n        --md-icon-button-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-hover-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-focus-icon-color: var(--clr-on-surface-primary);\n        --md-icon-button-icon-size: 2rem;\n        --ix-accordion-padding: 8px 12px 8px 20px;\n        --ix-accordion-border-radius: 0.75rem;\n      }\n      ix-widget,\n      a > .caption {\n        display: none;\n      }\n      .description {\n        margin-bottom: 0.5rem;\n      }\n      ix-button {\n        display: inline-block;\n      }\n      .footer {\n        margin-top: 1rem;\n        padding-top: 1rem;\n        border-top: 1px solid var(--cp-neutral-blue-12p, #0922411f);\n      }\n      a {\n        padding: 1rem 0.5rem 0 0;\n      }\n    }\n  `;\n\n  @property({ type: String }) header = 'title';\n\n  @property({ type: Array }) data: any[] = [];\n\n  @property({ type: String }) href = '#';\n\n  @state() open = false;\n\n  renderStories() {\n    return html`${this.data?.map((item: any, id: number) => {\n      const {\n        title = 'date',\n        abstract = '...',\n        uid = '#',\n        dateAdded = '',\n      } = item;\n      const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {\n        addSuffix: true,\n      });\n      return html`<li>\n        <a href=${uid} tabindex=${id}>\n          <div class=\"icon\">${ticket}</div>\n          <div class=\"details\">\n            <p class=\"title\">${title}</p>\n            <p class=\"description\">${abstract}</p>\n            <span class=\"caption\">${dateOffset}</span>\n          </div>\n          <span class=\"caption\">${dateOffset}</span>\n          <span class=\"ripple\"></span>\n        </a>\n        <span class=\"ripple\"></span>\n      </li>`;\n    })}`;\n  }\n\n  renderViewAll() {\n    return html` <ix-button\n      slot=\"cta\"\n      type=\"button\"\n      has-icon\n      trailing-icon\n      appearance=\"text\"\n      href=${this.href}\n    >\n      <ix-icon slot=\"icon\">chevron_right</ix-icon>\n      View All\n    </ix-button>`;\n  }\n\n  protected override render() {\n    return html` <ix-accordion\n        ?isOpen=${this.open}\n        .accordionId=${'f.label'}\n        chevronRight\n        iconOpen=\"keyboard_arrow_down\"\n        iconClose=\"keyboard_arrow_up\"\n      >\n        <h6 slot=\"title\">${this.header}</h6>\n        ${this.renderStories()}\n        <div class=\"footer\">${this.renderViewAll()}</div>\n      </ix-accordion>\n      <ix-widget type=\"news-feed\">\n        <div class=\"header\">\n          <h6>${this.header}</h6>\n          ${this.renderViewAll()}\n        </div>\n        ${this.renderStories()}\n      </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-status-counter-group.js

@@ -19,7 +19,8 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
     }
     render() {
         var _a;
-        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length)) {
+        const dataLength = (_a = this.data) === null || _a === void 0 ? void 0 : _a.length;
+        if (!dataLength) {
             return html ``;
         }
         return html `<ix-widget type="status-counter-group">
@@ -28,7 +29,7 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
           ${this.data.map((item, index) => {
             const { value, header, icon, target } = item;
             return html `<ix-status-counter
-              class="b${index + 1}"
+              class="block b${index + 1}  l${dataLength} l5"
               .value=${value}
               .header=${header}
               .icon=${iconMap[icon]}
@@ -45,123 +46,35 @@ let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
 IxStatusCounterGroup.styles = css `
     .layout {
       display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-    @media (min-width: 1350px) {
+    .block {
+      grid-column: span 3 / span 3;
+    }
+    @media (min-width: 600px) {
       .layout {
-        grid-gap: 44px 32px;
-      }
-      .layout .b1 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-      }
-      .layout .b2 {
-        grid-column-start: 2;
-        grid-column-end: 4;
+        grid-gap: 16px 32px;
       }
-      .layout .b3 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-      }
-      .layout .b4 {
-        grid-column-start: 2;
-        grid-column-end: 4;
+
+      .b5 {
+        grid-column: span 6 / span 6;
       }
 
       ix-status-counter {
         --ix-widget-padding: 1rem;
       }
-
-      .layout.x5 {
-        grid-gap: 44px 32px;
-      }
-      .layout.x5 .b1 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-      }
-      .layout.x5 .b2 {
-        grid-column-start: 2;
-        grid-column-end: 4;
-      }
-      .layout.x5 .b3 {
-        grid-column-start: 4;
-        grid-column-end: 6;
-      }
-      .layout.x5 .b4 {
-        grid-column-start: 1;
-        grid-column-end: 3;
-      }
-      .layout.x5 .b5 {
-        grid-column-start: 3;
-        grid-column-end: 6;
-      }
     }
-
-    @media (max-width: 1349px) {
-      .layout {
-        grid-gap: 0 24px;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        background: linear-gradient(
-          90deg,
-          rgba(0, 0, 0, 0) calc(50% - 1px),
-          rgba(9, 34, 65, 0.12) calc(50%),
-          rgba(0, 0, 0, 0) calc(50% + 1px)
-        );
-      }
-      .layout .b1 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 1;
-      }
-      .layout .b2 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 2;
-      }
-      .layout .b3 {
-        grid-column-start: 2;
-        grid-column-end: 3;
-        grid-row-start: 1;
-      }
-      .layout .b4 {
-        grid-column-start: 2;
-        grid-column-end: 3;
-        grid-row-start: 2;
+    @media (min-width: 1024px) {
+      .block {
+        grid-column: span 2 / span 2;
       }
 
-      .layout.x5 {
-        grid-gap: 0 24px;
-        background: linear-gradient(
-          90deg,
-          rgba(0, 0, 0, 0) calc(50% - 1px),
-          rgba(9, 34, 65, 0.12) calc(50%),
-          rgba(0, 0, 0, 0) calc(50% + 1px)
-        );
+      .b4.l5 {
+        grid-column: span 3 / span 3;
       }
-      .layout.x5 .b1 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 1;
-      }
-      .layout.x5 .b2 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 2;
-      }
-      .layout.x5 .b3 {
-        grid-column-start: 1;
-        grid-column-end: 2;
-        grid-row-start: 3;
-      }
-      .layout.x5 .b4 {
-        grid-column-start: 2;
-        grid-column-end: 3;
-        grid-row-start: 1;
-      }
-      .layout.x5 .b5 {
-        grid-column-start: 2;
-        grid-column-end: 3;
-        grid-row-start: 2;
+
+      .b5.l5 {
+        grid-column: span 3 / span 3;
       }
     }
     @media (max-width: 600px) {

package/dist/ix-status-counter-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QA8IsB,SAAI,GAAG,EAAE,CAAC;IAyBvC,CAAC;IAvBoB,MAAM;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7C,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;uBACV,KAAK;wBACJ,MAAM;sBACR,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;gCACE,eAAe,CAAC,MAAM,CAAC;;iCAEtB,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AArKM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2IlB,AA3IY,CA2IX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AA9I1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAuKhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport { laptop, users, mySites, dcim, locations } from './assets/iconset.js';\nimport { testIdTransform } from './utils/testIdTransform.js';\n\nconst iconMap = {\n  laptop,\n  users,\n  mySites,\n  dcim,\n  locations,\n};\n\n@customElement('ix-status-counter-group')\nexport class IxStatusCounterGroup extends LitElement {\n  static styles = css`\n    .layout {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n    @media (min-width: 1350px) {\n      .layout {\n        grid-gap: 44px 32px;\n      }\n      .layout .b1 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n      }\n      .layout .b2 {\n        grid-column-start: 2;\n        grid-column-end: 4;\n      }\n      .layout .b3 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n      }\n      .layout .b4 {\n        grid-column-start: 2;\n        grid-column-end: 4;\n      }\n\n      ix-status-counter {\n        --ix-widget-padding: 1rem;\n      }\n\n      .layout.x5 {\n        grid-gap: 44px 32px;\n      }\n      .layout.x5 .b1 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n      }\n      .layout.x5 .b2 {\n        grid-column-start: 2;\n        grid-column-end: 4;\n      }\n      .layout.x5 .b3 {\n        grid-column-start: 4;\n        grid-column-end: 6;\n      }\n      .layout.x5 .b4 {\n        grid-column-start: 1;\n        grid-column-end: 3;\n      }\n      .layout.x5 .b5 {\n        grid-column-start: 3;\n        grid-column-end: 6;\n      }\n    }\n\n    @media (max-width: 1349px) {\n      .layout {\n        grid-gap: 0 24px;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        background: linear-gradient(\n          90deg,\n          rgba(0, 0, 0, 0) calc(50% - 1px),\n          rgba(9, 34, 65, 0.12) calc(50%),\n          rgba(0, 0, 0, 0) calc(50% + 1px)\n        );\n      }\n      .layout .b1 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 1;\n      }\n      .layout .b2 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 2;\n      }\n      .layout .b3 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 1;\n      }\n      .layout .b4 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 2;\n      }\n\n      .layout.x5 {\n        grid-gap: 0 24px;\n        background: linear-gradient(\n          90deg,\n          rgba(0, 0, 0, 0) calc(50% - 1px),\n          rgba(9, 34, 65, 0.12) calc(50%),\n          rgba(0, 0, 0, 0) calc(50% + 1px)\n        );\n      }\n      .layout.x5 .b1 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 1;\n      }\n      .layout.x5 .b2 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 2;\n      }\n      .layout.x5 .b3 {\n        grid-column-start: 1;\n        grid-column-end: 2;\n        grid-row-start: 3;\n      }\n      .layout.x5 .b4 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 1;\n      }\n      .layout.x5 .b5 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 2;\n      }\n    }\n    @media (max-width: 600px) {\n      .layout {\n        display: block;\n        background: none;\n      }\n      ix-status-counter {\n        display: block;\n        border-bottom: 1px solid #b1c6f5;\n      }\n      ix-status-counter:first-child {\n        margin-top: -0.5rem;\n      }\n      ix-status-counter:last-child {\n        border-bottom: none;\n        margin-bottom: -0.5rem;\n      }\n    }\n  `;\n\n  @property({ type: Array }) data = [];\n\n  protected override render() {\n    if (!this.data?.length) {\n      return html``;\n    }\n    return html`<ix-widget type=\"status-counter-group\">\n      <div class=\"content\">\n        <div class=\"layout\">\n          ${this.data.map((item, index) => {\n            const { value, header, icon, target } = item;\n            return html`<ix-status-counter\n              class=\"b${index + 1}\"\n              .value=${value}\n              .header=${header}\n              .icon=${iconMap[icon]}\n              .target=${target}\n              data-testid=\"lp-${testIdTransform(header)}\"\n            >\n            </ix-status-counter>`;\n          })}\n        </div>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}
+{"version":3,"file":"ix-status-counter-group.js","sourceRoot":"","sources":["../src/ix-status-counter-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAsDsB,SAAI,GAAG,EAAE,CAAC;IA2BvC,CAAC;IAzBoB,MAAM;;QACvB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC;QAErC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QACD,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7C,OAAO,IAAI,CAAA;8BACO,KAAK,GAAG,CAAC,MAAM,UAAU;uBAChC,KAAK;wBACJ,MAAM;sBACR,OAAO,CAAC,IAAI,CAAC;wBACX,MAAM;gCACE,eAAe,CAAC,MAAM,CAAC;;iCAEtB,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AA/EM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDlB,AAnDY,CAmDX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AAtD1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAiFhC","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './IxWidget.js';\nimport './ix-status-counter.js';\nimport { laptop, users, mySites, dcim, locations } from './assets/iconset.js';\nimport { testIdTransform } from './utils/testIdTransform.js';\n\nconst iconMap = {\n  laptop,\n  users,\n  mySites,\n  dcim,\n  locations,\n};\n\n@customElement('ix-status-counter-group')\nexport class IxStatusCounterGroup extends LitElement {\n  static styles = css`\n    .layout {\n      display: grid;\n      grid-template-columns: repeat(6, minmax(0, 1fr));\n    }\n    .block {\n      grid-column: span 3 / span 3;\n    }\n    @media (min-width: 600px) {\n      .layout {\n        grid-gap: 16px 32px;\n      }\n\n      .b5 {\n        grid-column: span 6 / span 6;\n      }\n\n      ix-status-counter {\n        --ix-widget-padding: 1rem;\n      }\n    }\n    @media (min-width: 1024px) {\n      .block {\n        grid-column: span 2 / span 2;\n      }\n\n      .b4.l5 {\n        grid-column: span 3 / span 3;\n      }\n\n      .b5.l5 {\n        grid-column: span 3 / span 3;\n      }\n    }\n    @media (max-width: 600px) {\n      .layout {\n        display: block;\n        background: none;\n      }\n      ix-status-counter {\n        display: block;\n        border-bottom: 1px solid #b1c6f5;\n      }\n      ix-status-counter:first-child {\n        margin-top: -0.5rem;\n      }\n      ix-status-counter:last-child {\n        border-bottom: none;\n        margin-bottom: -0.5rem;\n      }\n    }\n  `;\n\n  @property({ type: Array }) data = [];\n\n  protected override render() {\n    const dataLength = this.data?.length;\n\n    if (!dataLength) {\n      return html``;\n    }\n    return html`<ix-widget type=\"status-counter-group\">\n      <div class=\"content\">\n        <div class=\"layout\">\n          ${this.data.map((item, index) => {\n            const { value, header, icon, target } = item;\n            return html`<ix-status-counter\n              class=\"block b${index + 1}  l${dataLength} l5\"\n              .value=${value}\n              .header=${header}\n              .icon=${iconMap[icon]}\n              .target=${target}\n              data-testid=\"lp-${testIdTransform(header)}\"\n            >\n            </ix-status-counter>`;\n          })}\n        </div>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-status-counter.js

@@ -132,52 +132,6 @@ IxStatusCounter.styles = css `
       }
     }
 
-    @media (max-width: 1349px) {
-      .content {
-        display: flex;
-        flex-direction: row-reverse;
-        -webkit-box-align: center;
-        align-items: center;
-        justify-content: left;
-      }
-      ix-icon {
-        width: 24px;
-        height: 24px;
-      }
-
-      ix-widget {
-        --ix-widget-background: white;
-      }
-      .info {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        flex-direction: row-reverse;
-      }
-      h2 {
-        margin: 0px;
-        font-family: var(--text-default-font, sans-serif);
-        font-size: var(--text-default-size, 16px);
-        letter-spacing: var(--text-default-letter-spacing, 0.0275em);
-        line-height: var(--text-default-line-height, 1.75em);
-        font-weight: var(--text-default-weight, normal);
-        text-transform: var(--text-default-decoration, none);
-        text-decoration: var(--text-default-transform, none);
-        padding-left: 8px;
-      }
-      h3 {
-        margin: 0px;
-        font-family: var(--root-primary-font, sans-serif);
-        font-size: var(--text-small-size, 0.875rem);
-        letter-spacing: var(--text-small-letter-spacing, 0.0275em);
-        line-height: var(--text-small-line-height, 1.42857143em);
-        font-weight: bold;
-        text-decoration: var(--text-small-decoration, none);
-        text-transform: var(--text-small-transform, none);
-      }
-    }
-
     @media (max-width: 600px) {
       .info {
         flex-direction: row;

package/dist/ix-status-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG9C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA8JuB,UAAK,GAAgC,SAAS,CAAC;QAE/C,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAG,GAAG,CAAC;QAEzC,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IA4BJ,CAAC;IA1BoB,MAAM;QACvB,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,QAAQ;iBACX,CAAC,CAAgB,EAAE,EAAE;YAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;;;;;YAKK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAC9B,CAAC,CAAC,IAAI,CAAA;kBACA,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC9B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;oBACV;YACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,SAAS;gBACzC,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AAxMM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2JlB,AA3JY,CA2JX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AApK9B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0M3B","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { laptop, loader } from './assets/iconset.js';\n\n@customElement('ix-status-counter')\nexport class IxStatusCounter extends LitElement {\n  static styles = css`\n    ix-widget {\n      --ix-widget-background: rgb(200, 223, 250);\n      --ix-widget-padding: 36.5px 20px 36.5px 24px;\n      --ix-icon-font-size: 5rem;\n      --ix-icon-line-height: 1;\n      cursor: pointer;\n    }\n    h2 {\n      margin: 0px;\n      font-family: var(--text-default-font, sans-serif);\n      font-size: var(--text-default-size, 16px);\n      letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n      line-height: var(--text-default-line-height, 1.75em);\n      font-weight: var(--text-default-weight, normal);\n      text-transform: var(--text-default-decoration, none);\n      text-decoration: var(--text-default-transform, none);\n    }\n    h3 {\n      margin: 0px;\n      font-family: var(--text-page-title-font, sans-serif);\n      font-size: var(--text-page-title-size, 2.125rem);\n      letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n      line-height: var(--text-page-title-line-height, 1.17647059em);\n      font-weight: var(--text-page-title-weight, bold);\n      text-decoration: var(--text-page-title-decoration, none);\n      text-transform: var(--text-page-title-transform, none);\n    }\n    .content {\n      display: flex;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      align-items: center;\n      cursor: pointer;\n    }\n    ix-icon {\n      background-color: rgb(255, 255, 255);\n      border-radius: 50%;\n      display: flex;\n      -webkit-box-pack: center;\n      justify-content: center;\n      -webkit-box-align: center;\n      align-items: center;\n      width: 60px;\n      height: 60px;\n      font-size: 36px;\n    }\n    .loader {\n      width: 24px;\n      height: 24px;\n    }\n    .info svg {\n      stroke: var(--clr-primary, #1456e0);\n      width: 24px;\n      height: 24px;\n      animation-name: loading;\n      animation-duration: 1000ms;\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n    }\n    @keyframes loading {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    svg {\n      width: 24px;\n      margin: auto;\n    }\n\n    @media (min-width: 1200px) {\n      svg {\n        width: 36px;\n        margin: auto;\n      }\n      .info svg {\n        width: 36px;\n        height: 36px;\n      }\n    }\n\n    @media (max-width: 1349px) {\n      .content {\n        display: flex;\n        flex-direction: row-reverse;\n        -webkit-box-align: center;\n        align-items: center;\n        justify-content: left;\n      }\n      ix-icon {\n        width: 24px;\n        height: 24px;\n      }\n\n      ix-widget {\n        --ix-widget-background: white;\n      }\n      .info {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\n        flex-direction: row-reverse;\n      }\n      h2 {\n        margin: 0px;\n        font-family: var(--text-default-font, sans-serif);\n        font-size: var(--text-default-size, 16px);\n        letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n        line-height: var(--text-default-line-height, 1.75em);\n        font-weight: var(--text-default-weight, normal);\n        text-transform: var(--text-default-decoration, none);\n        text-decoration: var(--text-default-transform, none);\n        padding-left: 8px;\n      }\n      h3 {\n        margin: 0px;\n        font-family: var(--root-primary-font, sans-serif);\n        font-size: var(--text-small-size, 0.875rem);\n        letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n        line-height: var(--text-small-line-height, 1.42857143em);\n        font-weight: bold;\n        text-decoration: var(--text-small-decoration, none);\n        text-transform: var(--text-small-transform, none);\n      }\n    }\n\n    @media (max-width: 600px) {\n      .info {\n        flex-direction: row;\n        justify-content: start;\n      }\n      .content {\n        flex-direction: row;\n        padding: 0.5rem 1.5rem;\n      }\n      .content.last-item {\n        border-bottom: none;\n      }\n      .content h2 {\n        font-size: 16px;\n      }\n      .content h3 {\n        font-size: 20px;\n      }\n      ix-icon {\n        width: 42px;\n        height: 42px;\n      }\n    }\n  `;\n\n  @property({ type: String }) value: number | undefined | string = undefined;\n\n  @property({ type: String }) header = 'status';\n\n  @property({ type: Object }) icon = laptop;\n\n  @property({ type: String }) target = '/';\n\n  navigate = () => {\n    this.dispatchEvent(\n      new CustomEvent('route', {\n        detail: { route: this.target },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  protected override render() {\n    return html`<ix-widget\n      @click=${this.navigate}\n      @keydown=${(e: KeyboardEvent) => {\n        const selectionKeys = [' ', 'Enter'];\n        if (selectionKeys.includes(e.key)) {\n          this.navigate();\n        }\n      }}\n      type=\"status-counter\"\n    >\n      <div class=\"content\">\n        <div class=\"info\">\n          ${this.value || this.value === 0\n            ? html`<h3>\n                ${typeof this.value === 'number'\n                  ? this.value.toLocaleString()\n                  : this.value}\n              </h3>`\n            : html`<span class=\"loader\">${loader}</span>`}\n          <h2>${this.header}</h2>\n        </div>\n        <ix-icon>${this.icon}</ix-icon>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}
+{"version":3,"file":"ix-status-counter.js","sourceRoot":"","sources":["../src/ix-status-counter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG9C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAgHuB,UAAK,GAAgC,SAAS,CAAC;QAE/C,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAG,GAAG,CAAC;QAEzC,aAAQ,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IA4BJ,CAAC;IA1BoB,MAAM;QACvB,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,QAAQ;iBACX,CAAC,CAAgB,EAAE,EAAE;YAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;;;;;YAKK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAC9B,CAAC,CAAC,IAAI,CAAA;kBACA,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC9B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;oBACV;YACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,SAAS;gBACzC,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AA1JM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GlB,AA7GY,CA6GX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AAtH9B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4J3B","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './IxWidget.js';\nimport { laptop, loader } from './assets/iconset.js';\n\n@customElement('ix-status-counter')\nexport class IxStatusCounter extends LitElement {\n  static styles = css`\n    ix-widget {\n      --ix-widget-background: rgb(200, 223, 250);\n      --ix-widget-padding: 36.5px 20px 36.5px 24px;\n      --ix-icon-font-size: 5rem;\n      --ix-icon-line-height: 1;\n      cursor: pointer;\n    }\n    h2 {\n      margin: 0px;\n      font-family: var(--text-default-font, sans-serif);\n      font-size: var(--text-default-size, 16px);\n      letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n      line-height: var(--text-default-line-height, 1.75em);\n      font-weight: var(--text-default-weight, normal);\n      text-transform: var(--text-default-decoration, none);\n      text-decoration: var(--text-default-transform, none);\n    }\n    h3 {\n      margin: 0px;\n      font-family: var(--text-page-title-font, sans-serif);\n      font-size: var(--text-page-title-size, 2.125rem);\n      letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n      line-height: var(--text-page-title-line-height, 1.17647059em);\n      font-weight: var(--text-page-title-weight, bold);\n      text-decoration: var(--text-page-title-decoration, none);\n      text-transform: var(--text-page-title-transform, none);\n    }\n    .content {\n      display: flex;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      align-items: center;\n      cursor: pointer;\n    }\n    ix-icon {\n      background-color: rgb(255, 255, 255);\n      border-radius: 50%;\n      display: flex;\n      -webkit-box-pack: center;\n      justify-content: center;\n      -webkit-box-align: center;\n      align-items: center;\n      width: 60px;\n      height: 60px;\n      font-size: 36px;\n    }\n    .loader {\n      width: 24px;\n      height: 24px;\n    }\n    .info svg {\n      stroke: var(--clr-primary, #1456e0);\n      width: 24px;\n      height: 24px;\n      animation-name: loading;\n      animation-duration: 1000ms;\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n    }\n    @keyframes loading {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    svg {\n      width: 24px;\n      margin: auto;\n    }\n\n    @media (min-width: 1200px) {\n      svg {\n        width: 36px;\n        margin: auto;\n      }\n      .info svg {\n        width: 36px;\n        height: 36px;\n      }\n    }\n\n    @media (max-width: 600px) {\n      .info {\n        flex-direction: row;\n        justify-content: start;\n      }\n      .content {\n        flex-direction: row;\n        padding: 0.5rem 1.5rem;\n      }\n      .content.last-item {\n        border-bottom: none;\n      }\n      .content h2 {\n        font-size: 16px;\n      }\n      .content h3 {\n        font-size: 20px;\n      }\n      ix-icon {\n        width: 42px;\n        height: 42px;\n      }\n    }\n  `;\n\n  @property({ type: String }) value: number | undefined | string = undefined;\n\n  @property({ type: String }) header = 'status';\n\n  @property({ type: Object }) icon = laptop;\n\n  @property({ type: String }) target = '/';\n\n  navigate = () => {\n    this.dispatchEvent(\n      new CustomEvent('route', {\n        detail: { route: this.target },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  protected override render() {\n    return html`<ix-widget\n      @click=${this.navigate}\n      @keydown=${(e: KeyboardEvent) => {\n        const selectionKeys = [' ', 'Enter'];\n        if (selectionKeys.includes(e.key)) {\n          this.navigate();\n        }\n      }}\n      type=\"status-counter\"\n    >\n      <div class=\"content\">\n        <div class=\"info\">\n          ${this.value || this.value === 0\n            ? html`<h3>\n                ${typeof this.value === 'number'\n                  ? this.value.toLocaleString()\n                  : this.value}\n              </h3>`\n            : html`<span class=\"loader\">${loader}</span>`}\n          <h2>${this.header}</h2>\n        </div>\n        <ix-icon>${this.icon}</ix-icon>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-widget.min.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}@media (min-width:1350px){[type=status-counter].card{--ix-widget-padding:33px 20px 33px 24px}}[type=status-counter-group].card{--ix-widget-padding:0;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}@media (max-width:1349px){[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:white;box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}@media (max-width:600px){[type=status-counter-group].card{background:#c8dffa;padding-left:0;padding-right:0}[type=status-counter].card{--ix-widget-padding:0;background:0 0;border-radius:0}}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);
+import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property}from"lit/decorators.js";class IxWidget extends LitElement{constructor(){super(...arguments),this.type="default"}render(){return html`<div class="card" type="${this.type}"><slot></slot></div>`}}IxWidget.styles=css`.card{border-radius:.75rem;background:var(--ix-widget-background,#fff);padding:var(--ix-widget-padding,16px 24px 32px);border:var(--ix-widget-border,none)}[type=status-counter].card{margin-bottom:0;--ix-widget-padding:0;--ix-widget-padding:1rem}[type=status-counter-group].card{--ix-widget-padding:1rem;--ix-widget-background:transparent}[type=action-list].card{--ix-widget-padding:0 11px 16px 24px}[type=info-card].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:auto;aspect-ratio:1/1.47}[type=info-card-resources].card{display:block;max-width:348px;border-radius:.5rem;border:1px solid #e0e0e0;position:relative;overflow:hidden;aspect-ratio:1/.85}[type=action-list].card{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}[type=news-feed].card{display:flex;flex-direction:column;background:#fff;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;border-radius:12px;padding-bottom:11px}@media (min-width:600px){[type=status-counter].card{--ix-widget-padding:33px 20px 33px 24px}[type=status-counter-group].card{padding:0}}@media (max-width:600px){[type=status-counter-group].card{background:#c8dffa;padding-left:0;padding-right:0}[type=status-counter].card{--ix-widget-padding:0;background:0 0;border-radius:0}}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-widget following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "2.1.69",
+  "version": "2.1.71",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,12 +38,12 @@
   },
   "dependencies": {
     "@adobe/lit-mobx": "^2.2.2",
-    "@digital-realty/ix-accordion": "^1.1.8",
-    "@digital-realty/ix-button": "^3.3.7",
-    "@digital-realty/ix-dialog": "^1.1.19",
-    "@digital-realty/ix-grid": "^1.2.37",
-    "@digital-realty/ix-icon": "^1.1.7",
-    "@digital-realty/ix-list": "^1.1.6",
+    "@digital-realty/ix-accordion": "^1.1.9",
+    "@digital-realty/ix-button": "^3.3.8",
+    "@digital-realty/ix-dialog": "^1.1.20",
+    "@digital-realty/ix-grid": "^1.2.39",
+    "@digital-realty/ix-icon": "^1.1.8",
+    "@digital-realty/ix-list": "^1.1.7",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "date-fns": "^4.1.0",
@@ -60,9 +60,9 @@
     "@types/react": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "@web/dev-server": "^0.1.34",
+    "@web/dev-server": "^0.4.6",
     "@web/dev-server-import-maps": "^0.2.1",
-    "@web/test-runner": "^0.14.0",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "concurrently": "^9.1.0",
     "eslint": "^8.31.0",
@@ -130,5 +130,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "982f9d825797aa893457b96a388708758ca43abb"
+  "gitHead": "efb86e89e9bfdb5a9a797dd223331ad6455b692c"
 }

package/dist/ix-launchpad.d.ts

@@ -1,68 +0,0 @@
-import { LitElement } from 'lit';
-import './ix-status-counter-group.js';
-import './ix-contacts.js';
-import './ix-info-card.js';
-import './ix-news-feed.js';
-import './ix-table-data.js';
-import './ix-nav-item.js';
-import './ix-nav-list.js';
-import '@digital-realty/ix-dialog/ix-dialog.js';
-export interface NavItem {
-    icon: string;
-    target: string;
-    name: string;
-}
-export interface NavList {
-    header: string;
-    items: NavItem[];
-}
-export interface Topic {
-    name: string;
-}
-export interface InfoCardItem {
-    thumbnail: {
-        alternativeText: string;
-        url: string;
-    };
-    topics: Topic[];
-    title: string;
-    abstract: string;
-    uid: string;
-    video?: {
-        url: string;
-    };
-}
-export interface TableDataItem {
-    columns: string[];
-    rows?: string[];
-    header: string;
-    href: string;
-    disabled?: boolean;
-    isAuthorizedToView?: boolean;
-}
-export declare class IxLaunchpad extends LitElement {
-    static styles: import("lit").CSSResult[];
-    data: {};
-    status: never[];
-    nav: never[];
-    news: InfoCardItem[];
-    contacts: any;
-    resources: InfoCardItem[];
-    promotions: InfoCardItem[];
-    kbImgBaseUrl: string;
-    kbVideoBaseUrl: string;
-    kbLinkBaseUrl: string;
-    kbNewsViewAllUrl: string;
-    knowledgebase: string;
-    updates: TableDataItem;
-    actions: TableDataItem;
-    showVideoModal: boolean;
-    videoUrl: string;
-    videoTitle: string;
-    handleResourceOpen: (videoUrl: string | undefined, videoTitle?: string) => (e: Event) => void;
-    handleResourceClosed: () => void;
-    renderNavigation: () => import("lit-html").TemplateResult<1>;
-    renderTicketUpdatesGrid: () => import("lit-html").TemplateResult<1>;
-    renderActionsRequiredGrid: () => import("lit-html").TemplateResult<1>;
-    protected render(): import("lit-html").TemplateResult<1>;
-}

package/dist/ix-launchpad.js

@@ -1,294 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import './ix-status-counter-group.js';
-import './ix-contacts.js';
-import './ix-info-card.js';
-import './ix-news-feed.js';
-import './ix-table-data.js';
-import './ix-nav-item.js';
-import './ix-nav-list.js';
-import { IxLaunchpadStyles } from './styles/launchpad-styles.js';
-import { testIdTransform } from './utils/testIdTransform.js';
-import '@digital-realty/ix-dialog/ix-dialog.js';
-let IxLaunchpad = class IxLaunchpad extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.data = {};
-        this.status = [];
-        this.nav = [];
-        this.news = [];
-        this.contacts = {};
-        this.resources = [];
-        this.promotions = [];
-        this.kbImgBaseUrl = '';
-        this.kbVideoBaseUrl = '';
-        this.kbLinkBaseUrl = '';
-        this.kbNewsViewAllUrl = '/knowledge-base/category/whats-new/';
-        this.knowledgebase = '';
-        this.updates = {
-            columns: [],
-            rows: [],
-            header: '',
-            href: '',
-        };
-        this.actions = {
-            columns: [],
-            rows: [],
-            header: '',
-            href: '',
-            disabled: true,
-        };
-        this.showVideoModal = false;
-        this.videoUrl = '';
-        this.videoTitle = '';
-        this.handleResourceOpen = (videoUrl, videoTitle = '') => (e) => {
-            if (!videoUrl)
-                return;
-            e.preventDefault();
-            this.videoUrl = `${this.kbVideoBaseUrl}${encodeURIComponent(videoUrl)}`;
-            this.videoTitle = videoTitle;
-            this.showVideoModal = true;
-        };
-        this.handleResourceClosed = () => {
-            this.showVideoModal = false;
-        };
-        this.renderNavigation = () => html `
-    ${this.nav.map((nav) => html ` <ix-nav-list
-        .header="${nav.header}"
-        data-testid=${`lp-navigation-${testIdTransform(nav.header)}`}
-      >
-        ${nav.items.map((item) => html `<ix-nav-item .icon=${item === null || item === void 0 ? void 0 : item.icon} .target=${item === null || item === void 0 ? void 0 : item.target}
-              >${item.name}</ix-nav-item
-            >`)}
-      </ix-nav-list>`)}
-  `;
-        this.renderTicketUpdatesGrid = () => html `<ix-table-data
-    .columns=${this.updates.columns}
-    .rows=${this.updates.rows}
-    .header=${this.updates.header}
-    .href=${this.updates.href}
-    ?disabled=${this.updates.disabled}
-    emptyDescription="No Recent Service Ticket Updates"
-    showViewAllButtonOnEmpty
-    data-testid="lp-ticketUpdates"
-  >
-  </ix-table-data>`;
-        this.renderActionsRequiredGrid = () => html `<ix-table-data
-    .columns=${this.actions.columns}
-    .rows=${this.actions.rows}
-    .header=${this.actions.header}
-    .href=${this.actions.href}
-    ?disabled=${this.actions.disabled}
-    emptyDescription="No Pending Actions"
-    data-testid="lp-yourActionRequired"
-  >
-  </ix-table-data>`;
-    }
-    render() {
-        var _a, _b, _c;
-        return html `
-      ${this.showVideoModal
-            ? html `<ix-dialog open @close=${this.handleResourceClosed}>
-            <div id="videoPlayer" class="headline" slot="headline">
-              <span class="title">${this.videoTitle}</span>
-              <ix-icon-button @click=${this.handleResourceClosed} icon="close">
-              </ix-icon-button>
-            </div>
-            <div slot="content">
-              <video
-                src=${this.videoUrl}
-                controls=""
-                autoplay=""
-                controlslist="nodownload"
-              ></video>
-            </div>
-          </ix-dialog>`
-            : nothing}
-      <main class="wrapper">
-        <section>
-          <div class="container">
-            <div class="content">
-              <ix-status-counter-group
-                .data=${this.status}
-              ></ix-status-counter-group>
-
-              <nav>${this.renderNavigation()}</nav>
-
-              ${this.actions.isAuthorizedToView
-            ? this.renderActionsRequiredGrid()
-            : nothing}
-              ${this.updates.isAuthorizedToView
-            ? this.renderTicketUpdatesGrid()
-            : nothing}
-              ${this.knowledgebase !== ''
-            ? html ` <iframe
-                    class="knowledge-base"
-                    title="knowledge base"
-                    .src=${this.knowledgebase}
-                  ></iframe>`
-            : nothing}
-              ${((_a = this.news) === null || _a === void 0 ? void 0 : _a.length)
-            ? html `<ix-news-feed
-                    header="What's New"
-                    .data=${this.news.map(item => ({
-                ...item,
-                uid: `${this.kbLinkBaseUrl}${item.uid}`,
-            }))}
-                    .href=${this.kbNewsViewAllUrl}
-                    data-testid="lp-newsFeed"
-                  ></ix-news-feed>`
-            : nothing}
-              ${((_b = this.resources) === null || _b === void 0 ? void 0 : _b.length)
-            ? html `<div class="news-info">
-                    <h2>Resources</h2>
-                    <div class="resources">
-                      ${this.resources.map(item => {
-                var _a, _b, _c, _d;
-                return html ` <a
-                          href=${`${this.kbLinkBaseUrl}${item.uid}`}
-                          data-testid="lp-resourceItem"
-                          @click=${this.handleResourceOpen((_a = item.video) === null || _a === void 0 ? void 0 : _a.url, item.title)}
-                          ><ix-info-card type="info-card-resources"
-                            ><img
-                              slot="image"
-                              name="image"
-                              alt=${((_b = item === null || item === void 0 ? void 0 : item.thumbnail) === null || _b === void 0 ? void 0 : _b.alternativeText) || ''}
-                              src="${`${this.kbImgBaseUrl}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
-                            />
-                            ${((_d = (_c = item.topics) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name)
-                    ? html `<div slot="label">
-                                  ${item.topics[0].name}
-                                </div>`
-                    : nothing}
-                            <div slot="title">${item.title}</div>
-                            ${item.abstract
-                    ? html `<div
-                                  slot="description"
-                                  class="news-item-description"
-                                >
-                                  ${item.abstract}
-                                </div>`
-                    : nothing}
-                            <ix-button
-                              slot="cta"
-                              type="button"
-                              has-icon
-                              trailing-icon
-                              appearance="text"
-                            >
-                              <ix-icon slot="icon">chevron_right</ix-icon>
-                              Learn more
-                            </ix-button>
-                          </ix-info-card></a
-                        >`;
-            })}
-                    </div>
-
-                    <h2 class="">News &amp; Promotions</h2>
-                    <div class="newsAndPromotions">
-                      ${this.promotions.map(item => html ` <a
-                          href=${`${this.kbLinkBaseUrl}${item.uid}`}
-                          data-testid="lp-newsPromotionsItem"
-                          ><ix-info-card type="info-card">
-                            <img
-                              slot="image"
-                              name="image"
-                              alt="${item.thumbnail.alternativeText}"
-                              src="${`${this.kbImgBaseUrl}${encodeURIComponent(item.thumbnail.url)}&w=3840&q=75`}"
-                            />
-                            <div slot="title">${item.title}</div>
-                            <div slot="description">${item.abstract}</div>
-                            <ix-button
-                              slot="cta"
-                              type="button"
-                              has-icon
-                              trailing-icon
-                              appearance="text"
-                            >
-                              <ix-icon slot="icon">chevron_right</ix-icon>
-                              Learn more
-                            </ix-button>
-                          </ix-info-card></a
-                        >`)}
-                    </div>
-                  </div>`
-            : nothing}
-              ${((_c = this.contacts) === null || _c === void 0 ? void 0 : _c.email)
-            ? html `<ix-contacts
-                    .contacts=${this.contacts}
-                    data-testid="lp-contacts"
-                  ></ix-contacts>`
-            : nothing}
-            </div>
-            <nav>
-              <div
-                class="side-nav"
-                style="top:calc(var(--header-height) + var(--intraportal-nav-height, 0px));"
-              >
-                ${this.renderNavigation()}
-              </div>
-            </nav>
-          </div>
-        </section>
-      </main>
-    `;
-    }
-};
-IxLaunchpad.styles = [IxLaunchpadStyles];
-__decorate([
-    property({ type: Object })
-], IxLaunchpad.prototype, "data", void 0);
-__decorate([
-    property({ type: Array })
-], IxLaunchpad.prototype, "status", void 0);
-__decorate([
-    property({ type: Array })
-], IxLaunchpad.prototype, "nav", void 0);
-__decorate([
-    property({ type: Array })
-], IxLaunchpad.prototype, "news", void 0);
-__decorate([
-    property({ type: Object })
-], IxLaunchpad.prototype, "contacts", void 0);
-__decorate([
-    property({ type: Array })
-], IxLaunchpad.prototype, "resources", void 0);
-__decorate([
-    property({ type: Array })
-], IxLaunchpad.prototype, "promotions", void 0);
-__decorate([
-    property({ type: String, attribute: 'kb-img-base-url' })
-], IxLaunchpad.prototype, "kbImgBaseUrl", void 0);
-__decorate([
-    property({ type: String, attribute: 'kb-video-base-url' })
-], IxLaunchpad.prototype, "kbVideoBaseUrl", void 0);
-__decorate([
-    property({ type: String, attribute: 'kb-link-base-url' })
-], IxLaunchpad.prototype, "kbLinkBaseUrl", void 0);
-__decorate([
-    property({ type: String, attribute: 'kb-news-view-all-url' })
-], IxLaunchpad.prototype, "kbNewsViewAllUrl", void 0);
-__decorate([
-    property({ type: String })
-], IxLaunchpad.prototype, "knowledgebase", void 0);
-__decorate([
-    property({ type: Object })
-], IxLaunchpad.prototype, "updates", void 0);
-__decorate([
-    property({ type: Object })
-], IxLaunchpad.prototype, "actions", void 0);
-__decorate([
-    state()
-], IxLaunchpad.prototype, "showVideoModal", void 0);
-__decorate([
-    state()
-], IxLaunchpad.prototype, "videoUrl", void 0);
-__decorate([
-    state()
-], IxLaunchpad.prototype, "videoTitle", void 0);
-IxLaunchpad = __decorate([
-    customElement('ix-launchpad')
-], IxLaunchpad);
-export { IxLaunchpad };
-//# sourceMappingURL=ix-launchpad.js.map

package/dist/ix-launchpad.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport './ix-status-counter-group.js';\nimport './ix-contacts.js';\nimport './ix-info-card.js';\nimport './ix-news-feed.js';\nimport './ix-table-data.js';\nimport './ix-nav-item.js';\nimport './ix-nav-list.js';\nimport { IxLaunchpadStyles } from './styles/launchpad-styles.js';\nimport { testIdTransform } from './utils/testIdTransform.js';\nimport '@digital-realty/ix-dialog/ix-dialog.js';\n\nexport interface NavItem {\n  icon: string;\n  target: string;\n  name: string;\n}\n\nexport interface NavList {\n  header: string;\n  items: NavItem[];\n}\n\nexport interface Topic {\n  name: string;\n}\n\nexport interface InfoCardItem {\n  thumbnail: {\n    alternativeText: string;\n    url: string;\n  };\n  topics: Topic[];\n  title: string;\n  abstract: string;\n  uid: string;\n  video?: {\n    url: string;\n  };\n}\n\nexport interface TableDataItem {\n  columns: string[];\n  rows?: string[];\n  header: string;\n  href: string;\n  disabled?: boolean;\n  isAuthorizedToView?: boolean;\n}\n\n@customElement('ix-launchpad')\nexport class IxLaunchpad extends LitElement {\n  static styles = [IxLaunchpadStyles];\n\n  @property({ type: Object }) data = {};\n\n  @property({ type: Array }) status = [];\n\n  @property({ type: Array }) nav = [];\n\n  @property({ type: Array }) news: InfoCardItem[] = [];\n\n  @property({ type: Object }) contacts: any = {};\n\n  @property({ type: Array }) resources: InfoCardItem[] = [];\n\n  @property({ type: Array }) promotions: InfoCardItem[] = [];\n\n  @property({ type: String, attribute: 'kb-img-base-url' }) kbImgBaseUrl = '';\n\n  @property({ type: String, attribute: 'kb-video-base-url' }) kbVideoBaseUrl =\n    '';\n\n  @property({ type: String, attribute: 'kb-link-base-url' }) kbLinkBaseUrl = '';\n\n  @property({ type: String, attribute: 'kb-news-view-all-url' })\n  kbNewsViewAllUrl = '/knowledge-base/category/whats-new/';\n\n  @property({ type: String }) knowledgebase = '';\n\n  @property({ type: Object }) updates: TableDataItem = {\n    columns: [],\n    rows: [],\n    header: '',\n    href: '',\n  };\n\n  @property({ type: Object }) actions: TableDataItem = {\n    columns: [],\n    rows: [],\n    header: '',\n    href: '',\n    disabled: true,\n  };\n\n  @state() showVideoModal = false;\n\n  @state() videoUrl = '';\n\n  @state() videoTitle = '';\n\n  handleResourceOpen =\n    (videoUrl: string | undefined, videoTitle: string = '') =>\n    (e: Event) => {\n      if (!videoUrl) return;\n      e.preventDefault();\n      this.videoUrl = `${this.kbVideoBaseUrl}${encodeURIComponent(videoUrl)}`;\n      this.videoTitle = videoTitle;\n      this.showVideoModal = true;\n    };\n\n  handleResourceClosed = () => {\n    this.showVideoModal = false;\n  };\n\n  renderNavigation = () => html`\n    ${this.nav.map(\n      (nav: NavList) => html` <ix-nav-list\n        .header=\"${nav.header}\"\n        data-testid=${`lp-navigation-${testIdTransform(nav.header)}`}\n      >\n        ${nav.items.map(\n          (item: NavItem) =>\n            html`<ix-nav-item .icon=${item?.icon} .target=${item?.target}\n              >${item.name}</ix-nav-item\n            >`\n        )}\n      </ix-nav-list>`\n    )}\n  `;\n\n  renderTicketUpdatesGrid = () => html`<ix-table-data\n    .columns=${this.updates.columns}\n    .rows=${this.updates.rows}\n    .header=${this.updates.header}\n    .href=${this.updates.href}\n    ?disabled=${this.updates.disabled}\n    emptyDescription=\"No Recent Service Ticket Updates\"\n    showViewAllButtonOnEmpty\n    data-testid=\"lp-ticketUpdates\"\n  >\n  </ix-table-data>`;\n\n  renderActionsRequiredGrid = () => html`<ix-table-data\n    .columns=${this.actions.columns}\n    .rows=${this.actions.rows}\n    .header=${this.actions.header}\n    .href=${this.actions.href}\n    ?disabled=${this.actions.disabled}\n    emptyDescription=\"No Pending Actions\"\n    data-testid=\"lp-yourActionRequired\"\n  >\n  </ix-table-data>`;\n\n  protected override render() {\n    return html`\n      ${this.showVideoModal\n        ? html`<ix-dialog open @close=${this.handleResourceClosed}>\n            <div id=\"videoPlayer\" class=\"headline\" slot=\"headline\">\n              <span class=\"title\">${this.videoTitle}</span>\n              <ix-icon-button @click=${this.handleResourceClosed} icon=\"close\">\n              </ix-icon-button>\n            </div>\n            <div slot=\"content\">\n              <video\n                src=${this.videoUrl}\n                controls=\"\"\n                autoplay=\"\"\n                controlslist=\"nodownload\"\n              ></video>\n            </div>\n          </ix-dialog>`\n        : nothing}\n      <main class=\"wrapper\">\n        <section>\n          <div class=\"container\">\n            <div class=\"content\">\n              <ix-status-counter-group\n                .data=${this.status}\n              ></ix-status-counter-group>\n\n              <nav>${this.renderNavigation()}</nav>\n\n              ${this.actions.isAuthorizedToView\n                ? this.renderActionsRequiredGrid()\n                : nothing}\n              ${this.updates.isAuthorizedToView\n                ? this.renderTicketUpdatesGrid()\n                : nothing}\n              ${this.knowledgebase !== ''\n                ? html` <iframe\n                    class=\"knowledge-base\"\n                    title=\"knowledge base\"\n                    .src=${this.knowledgebase}\n                  ></iframe>`\n                : nothing}\n              ${this.news?.length\n                ? html`<ix-news-feed\n                    header=\"What's New\"\n                    .data=${this.news.map(item => ({\n                      ...item,\n                      uid: `${this.kbLinkBaseUrl}${item.uid}`,\n                    }))}\n                    .href=${this.kbNewsViewAllUrl}\n                    data-testid=\"lp-newsFeed\"\n                  ></ix-news-feed>`\n                : nothing}\n              ${this.resources?.length\n                ? html`<div class=\"news-info\">\n                    <h2>Resources</h2>\n                    <div class=\"resources\">\n                      ${this.resources.map(\n                        item => html` <a\n                          href=${`${this.kbLinkBaseUrl}${item.uid}`}\n                          data-testid=\"lp-resourceItem\"\n                          @click=${this.handleResourceOpen(\n                            item.video?.url,\n                            item.title\n                          )}\n                          ><ix-info-card type=\"info-card-resources\"\n                            ><img\n                              slot=\"image\"\n                              name=\"image\"\n                              alt=${item?.thumbnail?.alternativeText || ''}\n                              src=\"${`${this.kbImgBaseUrl}${encodeURIComponent(\n                                item.thumbnail.url\n                              )}&w=3840&q=75`}\"\n                            />\n                            ${item.topics?.[0]?.name\n                              ? html`<div slot=\"label\">\n                                  ${item.topics[0].name}\n                                </div>`\n                              : nothing}\n                            <div slot=\"title\">${item.title}</div>\n                            ${item.abstract\n                              ? html`<div\n                                  slot=\"description\"\n                                  class=\"news-item-description\"\n                                >\n                                  ${item.abstract}\n                                </div>`\n                              : nothing}\n                            <ix-button\n                              slot=\"cta\"\n                              type=\"button\"\n                              has-icon\n                              trailing-icon\n                              appearance=\"text\"\n                            >\n                              <ix-icon slot=\"icon\">chevron_right</ix-icon>\n                              Learn more\n                            </ix-button>\n                          </ix-info-card></a\n                        >`\n                      )}\n                    </div>\n\n                    <h2 class=\"\">News &amp; Promotions</h2>\n                    <div class=\"newsAndPromotions\">\n                      ${this.promotions.map(\n                        item => html` <a\n                          href=${`${this.kbLinkBaseUrl}${item.uid}`}\n                          data-testid=\"lp-newsPromotionsItem\"\n                          ><ix-info-card type=\"info-card\">\n                            <img\n                              slot=\"image\"\n                              name=\"image\"\n                              alt=\"${item.thumbnail.alternativeText}\"\n                              src=\"${`${this.kbImgBaseUrl}${encodeURIComponent(\n                                item.thumbnail.url\n                              )}&w=3840&q=75`}\"\n                            />\n                            <div slot=\"title\">${item.title}</div>\n                            <div slot=\"description\">${item.abstract}</div>\n                            <ix-button\n                              slot=\"cta\"\n                              type=\"button\"\n                              has-icon\n                              trailing-icon\n                              appearance=\"text\"\n                            >\n                              <ix-icon slot=\"icon\">chevron_right</ix-icon>\n                              Learn more\n                            </ix-button>\n                          </ix-info-card></a\n                        >`\n                      )}\n                    </div>\n                  </div>`\n                : nothing}\n              ${this.contacts?.email\n                ? html`<ix-contacts\n                    .contacts=${this.contacts}\n                    data-testid=\"lp-contacts\"\n                  ></ix-contacts>`\n                : nothing}\n            </div>\n            <nav>\n              <div\n                class=\"side-nav\"\n                style=\"top:calc(var(--header-height) + var(--intraportal-nav-height, 0px));\"\n              >\n                ${this.renderNavigation()}\n              </div>\n            </nav>\n          </div>\n        </section>\n      </main>\n    `;\n  }\n}\n"]}

package/dist/styles/launchpad-styles.d.ts

@@ -1 +0,0 @@
-export declare const IxLaunchpadStyles: import("lit").CSSResult;

package/dist/styles/launchpad-styles.js

@@ -1,229 +0,0 @@
-import { css } from 'lit';
-export const IxLaunchpadStyles = css `
-  .wrapper {
-    margin-left: 0px;
-    transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-    display: flex;
-    flex-direction: column;
-  }
-  header {
-    min-height: 60px;
-    background-color: rgba(245, 247, 255, 0.85);
-    backdrop-filter: blur(6px);
-    display: flex;
-    flex-flow: column-reverse wrap;
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    gap: 20px;
-    padding: 16px 24px 16px 7px;
-    position: sticky;
-    top: 0px;
-    right: 0px;
-    z-index: 1000;
-  }
-  header > div {
-    margin-right: auto;
-    display: flex;
-    -webkit-box-pack: start;
-    justify-content: start;
-    -webkit-box-align: center;
-    align-items: center;
-  }
-  header > div > h1 {
-    display: block;
-    margin-block-start: 0.67em;
-    margin-block-end: 0.67em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: bold;
-    font-family: var(--text-page-title-font, sans-serif);
-    font-size: var(--text-page-title-size, 2.125rem);
-    letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);
-    line-height: var(--text-page-title-line-height, 1.17647059em);
-    font-weight: var(--text-page-title-weight, bold);
-    text-decoration: var(--text-page-title-decoration, none);
-    text-transform: var(--text-page-title-transform, none);
-  }
-  h2 {
-    margin: 0px;
-    font-family: var(--text-heading-font, sans-serif);
-    font-size: 24px;
-    letter-spacing: var(--text-heading-letter-spacing, 0.0075em);
-    line-height: var(--text-heading-line-height, 1.2em);
-    font-weight: normal;
-    text-decoration: var(--text-heading-decoration, none);
-    text-transform: var(--text-heading-transform, none);
-    margin-bottom: 24px;
-  }
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-  nav {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-  section {
-    flex: 1 1 0%;
-    padding-right: 0px;
-    padding-left: 0px;
-    padding-bottom: 64px;
-  }
-  .container {
-    display: flex;
-    flex-direction: column;
-    padding-top: 0px;
-    padding-left: 16px;
-    padding-right: 16px;
-    gap: 32px;
-  }
-
-  .resources {
-    margin-bottom: 44px;
-    cursor: pointer;
-  }
-
-  .resources ix-button {
-    pointer-events: none;
-  }
-
-  .news-info .newsAndPromotions,
-  .news-info .resources {
-    display: flex;
-    gap: 44px;
-    flex-wrap: wrap;
-  }
-
-  .news-info a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  .news-item-description {
-    margin: 10px 0 0;
-    font-family: var(--root-primary-font);
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 28px;
-    letter-spacing: 0.44px;
-    position: relative;
-    color: white;
-  }
-
-  ix-info-card {
-    width: 348px;
-  }
-
-  #videoPlayer.headline {
-    justify-content: space-between;
-  }
-
-  video {
-    max-width: 100%;
-    height: calc(100vh - 10rem);
-  }
-
-  @media (min-width: 800px) and (max-width: 1349px) {
-    nav {
-      display: flex;
-      align-items: flex-start;
-      gap: 32px;
-    }
-    nav > * {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  @media (min-width: 600px) {
-    header {
-      min-height: 100px;
-      flex-direction: row;
-      -webkit-box-align: center;
-      align-items: center;
-      gap: 21px;
-    }
-    .container {
-      padding: 0px;
-    }
-  }
-  @media (min-width: 900px) {
-    .content {
-      gap: 32px;
-    }
-    main {
-      margin-left: 0px;
-      margin-bottom: 0px;
-    }
-    header {
-      padding-top: 12px;
-      min-height: 92px;
-      padding-bottom: 8px;
-    }
-    section {
-      padding-right: 32px;
-      padding-bottom: 48px;
-    }
-  }
-  @media (min-width: 1200px) {
-    header {
-      min-height: 100px;
-      padding-bottom: 16px;
-      padding-top: 27px;
-    }
-    .container {
-      /* background-image: url(/images/buildings-placeholder.png); */
-      background-repeat: no-repeat;
-      background-position: right bottom;
-    }
-    section {
-      padding-right: 0px;
-      padding-bottom: 0px;
-    }
-    .content {
-      gap: 44px;
-    }
-  }
-
-  @media (min-width: 1350px) {
-    .side-nav {
-      position: sticky;
-      top: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-    .container {
-      display: grid;
-      grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);
-    }
-    .container .content > nav {
-      display: none;
-    }
-  }
-
-  @media (max-width: 1349px) {
-    .container > nav {
-      display: none;
-    }
-  }
-
-  .knowledge-base {
-    border: none;
-    height: 1700px;
-    margin: -2rem;
-  }
-
-  @media (max-width: 600px) {
-    .news-info {
-      display: none;
-    }
-  }
-`;
-//# sourceMappingURL=launchpad-styles.js.map

package/dist/styles/launchpad-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"launchpad-styles.js","sourceRoot":"","sources":["../../src/styles/launchpad-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxLaunchpadStyles = css`\n  .wrapper {\n    margin-left: 0px;\n    transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;\n    display: flex;\n    flex-direction: column;\n  }\n  header {\n    min-height: 60px;\n    background-color: rgba(245, 247, 255, 0.85);\n    backdrop-filter: blur(6px);\n    display: flex;\n    flex-flow: column-reverse wrap;\n    -webkit-box-pack: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    align-items: center;\n    gap: 20px;\n    padding: 16px 24px 16px 7px;\n    position: sticky;\n    top: 0px;\n    right: 0px;\n    z-index: 1000;\n  }\n  header > div {\n    margin-right: auto;\n    display: flex;\n    -webkit-box-pack: start;\n    justify-content: start;\n    -webkit-box-align: center;\n    align-items: center;\n  }\n  header > div > h1 {\n    display: block;\n    margin-block-start: 0.67em;\n    margin-block-end: 0.67em;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    font-weight: bold;\n    font-family: var(--text-page-title-font, sans-serif);\n    font-size: var(--text-page-title-size, 2.125rem);\n    letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n    line-height: var(--text-page-title-line-height, 1.17647059em);\n    font-weight: var(--text-page-title-weight, bold);\n    text-decoration: var(--text-page-title-decoration, none);\n    text-transform: var(--text-page-title-transform, none);\n  }\n  h2 {\n    margin: 0px;\n    font-family: var(--text-heading-font, sans-serif);\n    font-size: 24px;\n    letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n    line-height: var(--text-heading-line-height, 1.2em);\n    font-weight: normal;\n    text-decoration: var(--text-heading-decoration, none);\n    text-transform: var(--text-heading-transform, none);\n    margin-bottom: 24px;\n  }\n  .content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n  nav {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n  section {\n    flex: 1 1 0%;\n    padding-right: 0px;\n    padding-left: 0px;\n    padding-bottom: 64px;\n  }\n  .container {\n    display: flex;\n    flex-direction: column;\n    padding-top: 0px;\n    padding-left: 16px;\n    padding-right: 16px;\n    gap: 32px;\n  }\n\n  .resources {\n    margin-bottom: 44px;\n    cursor: pointer;\n  }\n\n  .resources ix-button {\n    pointer-events: none;\n  }\n\n  .news-info .newsAndPromotions,\n  .news-info .resources {\n    display: flex;\n    gap: 44px;\n    flex-wrap: wrap;\n  }\n\n  .news-info a {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .news-item-description {\n    margin: 10px 0 0;\n    font-family: var(--root-primary-font);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 28px;\n    letter-spacing: 0.44px;\n    position: relative;\n    color: white;\n  }\n\n  ix-info-card {\n    width: 348px;\n  }\n\n  #videoPlayer.headline {\n    justify-content: space-between;\n  }\n\n  video {\n    max-width: 100%;\n    height: calc(100vh - 10rem);\n  }\n\n  @media (min-width: 800px) and (max-width: 1349px) {\n    nav {\n      display: flex;\n      align-items: flex-start;\n      gap: 32px;\n    }\n    nav > * {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  @media (min-width: 600px) {\n    header {\n      min-height: 100px;\n      flex-direction: row;\n      -webkit-box-align: center;\n      align-items: center;\n      gap: 21px;\n    }\n    .container {\n      padding: 0px;\n    }\n  }\n  @media (min-width: 900px) {\n    .content {\n      gap: 32px;\n    }\n    main {\n      margin-left: 0px;\n      margin-bottom: 0px;\n    }\n    header {\n      padding-top: 12px;\n      min-height: 92px;\n      padding-bottom: 8px;\n    }\n    section {\n      padding-right: 32px;\n      padding-bottom: 48px;\n    }\n  }\n  @media (min-width: 1200px) {\n    header {\n      min-height: 100px;\n      padding-bottom: 16px;\n      padding-top: 27px;\n    }\n    .container {\n      /* background-image: url(/images/buildings-placeholder.png); */\n      background-repeat: no-repeat;\n      background-position: right bottom;\n    }\n    section {\n      padding-right: 0px;\n      padding-bottom: 0px;\n    }\n    .content {\n      gap: 44px;\n    }\n  }\n\n  @media (min-width: 1350px) {\n    .side-nav {\n      position: sticky;\n      top: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2rem;\n    }\n    .container {\n      display: grid;\n      grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\n    }\n    .container .content > nav {\n      display: none;\n    }\n  }\n\n  @media (max-width: 1349px) {\n    .container > nav {\n      display: none;\n    }\n  }\n\n  .knowledge-base {\n    border: none;\n    height: 1700px;\n    margin: -2rem;\n  }\n\n  @media (max-width: 600px) {\n    .news-info {\n      display: none;\n    }\n  }\n`;\n"]}