@digital-realty/ix-widget 1.0.1

package/dist/ix-launchpad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-launchpad.js","sourceRoot":"","sources":["../src/ix-launchpad.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport './ix-status-counter-group.js';\nimport './ix-action-list.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 { statusData, pageProps } from './assets/data.js';\nimport { columns } from './assets/columns.js';\nimport { contacts } from './assets/contacts.js';\n\nconst imgServer =\n  'https://gp-tst.digitalrealty.com/_next/image?url=https%3A%2F%2Ftst-cms-strapi.digitalrealtytrust.com';\n\n@customElement('ix-launchpad')\nexport class IxLaunchpad extends LitElement {\n  static styles = [IxLaunchpadStyles];\n\n  @property({ type: Object }) data: any = {\n    statusData,\n    columns,\n    contacts,\n    nav: {\n      header: 'Service tickets',\n      items: [\n        { name: 'Customer Support', icon: 'cutomerSupport' },\n        { name: 'Facility Access', icon: 'lock' },\n        { name: 'Remote Hands', icon: 'remoteHands' },\n        { name: 'Shipping and Receiving', icon: 'shipping' },\n      ],\n    },\n    nav2: {\n      header: 'USER MANAGEMENT',\n      items: [\n        { name: 'Add user', icon: 'addUser' },\n        { name: 'Manage users', icon: 'manageUsers' },\n      ],\n    },\n    pageProps,\n  };\n\n  /*  fetchData() {\n    fetch('./data.json')\n      .then(response => response.json())\n      .then(data => {\n        setTimeout(() => {\n          console.log(data);\n        }, 2000);\n      });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.fetchData();\n  } */\n\n  protected override render() {\n    return html`\n      <div class=\"outer\">\n        <main>\n          <div class=\"inner\">\n            <header>\n              <div>\n                <h1>Launchpad</h1>\n              </div>\n            </header>\n            <section>\n              <div class=\"container\">\n                <div class=\"content\">\n                  <ix-status-counter-group\n                    .data=${this.data.statusData}\n                  ></ix-status-counter-group>\n\n                  <ix-table-data\n                    .columns=${this.data.columns}\n                    .rows=${this.data.contacts}\n                    header=\"Ticket Updates\"\n                  >\n                  </ix-table-data>\n\n                  <ix-action-list></ix-action-list>\n\n                  <nav>\n                    <ix-nav-list .header=\"${this.data.nav.header}\">\n                      ${this.data.nav.items.map(\n                        (i: any) =>\n                          html`<ix-nav-item .icon=${i?.icon}\n                            >${i.name}</ix-nav-item\n                          >`\n                      )}\n                    </ix-nav-list>\n                    <ix-nav-list .header=\"${this.data.nav2?.header}\">\n                      ${this.data.nav2?.items.map(\n                        (i: any) =>\n                          html`<ix-nav-item .icon=${i?.icon}\n                            >${i.name}</ix-nav-item\n                          >`\n                      )}\n                    </ix-nav-list>\n                  </nav>\n\n                  <ix-news-feed\n                    header=\"What's New\"\n                    .data=${this.data.pageProps.pageProps.whatsNews}\n                  ></ix-news-feed>\n\n                  <div class=\"news-info\">\n                    <h2>Resources</h2>\n                    <div class=\"resources\">\n                      ${this.data.pageProps.pageProps.resources.map(\n                        (item: any) => html` <ix-info-card type=\"info-card-2\"\n                          ><img\n                            slot=\"image\"\n                            name=\"image\"\n                            alt=\"${item.thumbnail.alternativeText}\"\n                            src=\"${`${imgServer}${encodeURIComponent(\n                              item.thumbnail.url\n                            )}&w=3840&q=75`}\"\n                          />\n                          <div slot=\"label\">${item.topics?.[0]?.name}</div>\n                          <div slot=\"title\">${item.title}</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>`\n                      )}\n                    </div>\n\n                    <h2 class=\"\">News &amp; Promotions</h2>\n                    <div class=\"newsAndPromotions\">\n                      ${this.data.pageProps.pageProps.newsAndPromotions.map(\n                        (item: any) => html` <ix-info-card type=\"info-card\">\n                          <img\n                            slot=\"image\"\n                            name=\"image\"\n                            alt=\"${item.thumbnail.alternativeText}\"\n                            src=\"${`${imgServer}${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>`\n                      )}\n                    </div>\n                  </div>\n\n                  <ix-contacts\n                    phonenumbers=${this.data.pageProps.pageProps.contactInfo\n                      .attributes.phoneNumbers}\n                  ></ix-contacts>\n                </div>\n                <nav>\n                  <ix-nav-list .header=\"${this.data.nav.header}\">\n                    ${this.data.nav.items.map(\n                      (i: any) =>\n                        html`<ix-nav-item .icon=${i?.icon}\n                          >${i.name}</ix-nav-item\n                        >`\n                    )}\n                  </ix-nav-list>\n                  <ix-nav-list .header=\"${this.data.nav2?.header}\">\n                    ${this.data.nav2?.items.map(\n                      (i: any) =>\n                        html`<ix-nav-item .icon=${i?.icon}\n                          >${i.name}</ix-nav-item\n                        >`\n                    )}\n                  </ix-nav-list>\n                </nav>\n              </div>\n            </section>\n          </div>\n        </main>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/ix-nav-item.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+export declare class IxNavItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    icon: string;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/ix-nav-item.js

@@ -0,0 +1,98 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+import { lock, cutomerSupport, remoteHands, shipping, addUser, manageUsers, } from './assets/iconset.js';
+const iconMap = {
+    lock,
+    cutomerSupport,
+    remoteHands,
+    shipping,
+    addUser,
+    manageUsers,
+};
+let IxNavItem = class IxNavItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = 'customerSupport';
+    }
+    render() {
+        return html `<button>
+      <ix-icon>${iconMap[this.icon]}</ix-icon>
+      <h3><slot></slot></h3>
+    </button> `;
+    }
+};
+IxNavItem.styles = css `
+    button {
+      padding: 12px 43px 12px 24px;
+      -webkit-box-pack: center;
+      justify-content: center;
+      position: relative;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+      background-color: transparent;
+      outline: 0px;
+      border-width: 1px 0px 0px;
+      border-right-style: initial;
+      border-bottom-style: initial;
+      border-left-style: initial;
+      border-right-color: initial;
+      border-bottom-color: initial;
+      border-left-color: initial;
+      border-image: initial;
+      margin: 0px;
+      border-radius: 0px;
+      cursor: pointer;
+      user-select: none;
+      vertical-align: middle;
+      appearance: none;
+      text-decoration: none;
+      border-top-style: solid;
+      border-top-color: rgba(255, 255, 255, 0.25);
+      padding: 12px 24px;
+      display: flex;
+      -webkit-box-align: center;
+      align-items: center;
+      color: white;
+      width: 100%;
+    }
+    h3 {
+      margin: 0px;
+      font-family: "Red Hat Display", sans-serif;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 20px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      -webkit-box-flex: 1;
+      flex-grow: 1;
+      color: rgb(255, 255, 255);
+      text-align: left;
+    }
+    ix-icon {
+      flex-shrink: 0;
+      background-color: rgb(20, 86, 224);
+      border-radius: 50%;
+      display: flex;
+      -webkit-box-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      width: 48px;
+      height: 48px;
+      margin-right: 24px;
+    }
+    svg {
+      width: 32px;
+      margin: auto;
+    `;
+__decorate([
+    property({ type: String })
+], IxNavItem.prototype, "icon", void 0);
+IxNavItem = __decorate([
+    customElement('ix-nav-item')
+], IxNavItem);
+export { IxNavItem };
+//# sourceMappingURL=ix-nav-item.js.map

package/dist/ix-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-nav-item.js","sourceRoot":"","sources":["../src/ix-nav-item.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,EACL,IAAI,EACJ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,GAAQ;IACnB,IAAI;IACJ,cAAc;IACd,WAAW;IACX,QAAQ;IACR,OAAO;IACP,WAAW;CACZ,CAAC;AAGK,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkEuB,SAAI,GAAG,iBAAiB,CAAC;IAQvD,CAAC;IANoB,MAAM;QACvB,OAAO,IAAI,CAAA;iBACE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;eAEpB,CAAC;IACd,CAAC;;AAxEM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DhB,AA/DU,CA+DT;AAEwB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA0B;AAlE1C,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA0ErB","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 {\n  lock,\n  cutomerSupport,\n  remoteHands,\n  shipping,\n  addUser,\n  manageUsers,\n} from './assets/iconset.js';\n\nconst iconMap: any = {\n  lock,\n  cutomerSupport,\n  remoteHands,\n  shipping,\n  addUser,\n  manageUsers,\n};\n\n@customElement('ix-nav-item')\nexport class IxNavItem extends LitElement {\n  static styles = css`\n    button {\n      padding: 12px 43px 12px 24px;\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-width: 1px 0px 0px;\n      border-right-style: initial;\n      border-bottom-style: initial;\n      border-left-style: initial;\n      border-right-color: initial;\n      border-bottom-color: initial;\n      border-left-color: initial;\n      border-image: initial;\n      margin: 0px;\n      border-radius: 0px;\n      cursor: pointer;\n      user-select: none;\n      vertical-align: middle;\n      appearance: none;\n      text-decoration: none;\n      border-top-style: solid;\n      border-top-color: rgba(255, 255, 255, 0.25);\n      padding: 12px 24px;\n      display: flex;\n      -webkit-box-align: center;\n      align-items: center;\n      color: white;\n      width: 100%;\n    }\n    h3 {\n      margin: 0px;\n      font-family: \"Red Hat Display\", sans-serif;\n      font-style: normal;\n      font-weight: bold;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: 0.15px;\n      -webkit-box-flex: 1;\n      flex-grow: 1;\n      color: rgb(255, 255, 255);\n      text-align: left;\n    }\n    ix-icon {\n      flex-shrink: 0;\n      background-color: rgb(20, 86, 224);\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: 48px;\n      height: 48px;\n      margin-right: 24px;\n    }\n    svg {\n      width: 32px;\n      margin: auto;\n    `;\n\n  @property({ type: String }) icon = 'customerSupport';\n\n  protected override render() {\n    return html`<button>\n      <ix-icon>${iconMap[this.icon]}</ix-icon>\n      <h3><slot></slot></h3>\n    </button> `;\n  }\n}\n"]}

package/dist/ix-nav-list.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+export declare class IxNavList extends LitElement {
+    static styles: import("lit").CSSResult;
+    header: string;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/ix-nav-list.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+let IxNavList = class IxNavList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.header = 'title';
+    }
+    render() {
+        return html `<ix-widget type="nav-list">
+      <h2>${this.header}</h2>
+      <slot></slot>
+    </ix-widget>`;
+    }
+};
+IxNavList.styles = css `
+    ix-widget {
+      --ix-widget-background: rgb(7, 20, 84);
+      --ix-widget-padding: 0 0 1rem;
+    }
+    h2 {
+      margin: 0px;
+      font-family: 'Red Hat Display', sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      font-size: 14px;
+      line-height: 18.52px;
+      letter-spacing: 1.25px;
+      text-transform: uppercase;
+      color: rgba(255, 255, 255, 0.6);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+      padding: 20px 24px 12px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], IxNavList.prototype, "header", void 0);
+IxNavList = __decorate([
+    customElement('ix-nav-list')
+], IxNavList);
+export { IxNavList };
+//# sourceMappingURL=ix-nav-list.js.map

package/dist/ix-nav-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-nav-list.js","sourceRoot":"","sources":["../src/ix-nav-list.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;AAGhB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqBuB,WAAM,GAAG,OAAO,CAAC;IAQ/C,CAAC;IANoB,MAAM;QACvB,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,MAAM;;iBAEN,CAAC;IAChB,CAAC;;AA3BM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBlB,AAlBY,CAkBX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AArBlC,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA6BrB","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';\n\n@customElement('ix-nav-list')\nexport class IxNavList extends LitElement {\n  static styles = css`\n    ix-widget {\n      --ix-widget-background: rgb(7, 20, 84);\n      --ix-widget-padding: 0 0 1rem;\n    }\n    h2 {\n      margin: 0px;\n      font-family: 'Red Hat Display', sans-serif;\n      font-weight: 700;\n      font-style: normal;\n      font-size: 14px;\n      line-height: 18.52px;\n      letter-spacing: 1.25px;\n      text-transform: uppercase;\n      color: rgba(255, 255, 255, 0.6);\n      border-bottom: 1px solid rgba(255, 255, 255, 0.25);\n      padding: 20px 24px 12px;\n    }\n  `;\n\n  @property({ type: String }) header = 'title';\n\n  protected override render() {\n    return html`<ix-widget type=\"nav-list\">\n      <h2>${this.header}</h2>\n      <slot></slot>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-news-feed.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+export declare class IxNewsFeed extends LitElement {
+    static styles: import("lit").CSSResult;
+    header: string;
+    data: never[];
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/ix-news-feed.js

@@ -0,0 +1,243 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+import { formatDistance, parseISO, startOfToday } from 'date-fns';
+import { ticket } from './assets/iconset.js';
+// import { enUS, es, pt } from "date-fns/locale";
+let IxNewsFeed = class IxNewsFeed extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.header = 'title';
+        this.data = [];
+    }
+    render() {
+        return html `<ix-widget type="news-feed">
+      <div class="header">
+        <h6>${this.header}</h6>
+        <ix-button
+          slot="cta"
+          type="button"
+          has-icon
+          trailing-icon
+          appearance="text"
+        >
+          <ix-icon slot="icon">chevron_right</ix-icon>
+          View All
+        </ix-button>
+      </div>
+      ${this.data.map((item, id) => {
+            const { title = 'date', abstract = '...', uid = '#', dateAdded = '', } = item;
+            const dateOffset = formatDistance(parseISO(dateAdded), startOfToday(), {
+                addSuffix: true,
+            });
+            return html `<li>
+          <a href=${uid} tabindex=${id}>
+            <div class="icon">${ticket}</div>
+            <div class="details">
+              <p class="title">${title}</p>
+              <p class="description">${abstract}</p>
+            </div>
+            <span class="caption">${dateOffset}</span>
+            <span class="ripple"></span>
+          </a>
+          <span class="ripple"></span>
+        </li>`;
+        })}
+    </ix-widget>`;
+    }
+};
+IxNewsFeed.styles = css `
+    :host {
+      --ix-widget-padding: 0;
+    }
+    .header {
+      display: flex;
+      -webkit-box-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      align-items: center;
+      padding: 10px 16px 10px 20px;
+    }
+    h6 {
+      margin: 0px;
+      font-family: 'Red Hat Display', sans-serif;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 20px;
+      line-height: 24px;
+      letter-spacing: 0.15px;
+      color: rgb(9, 34, 65);
+    }
+    li {
+      -webkit-tap-highlight-color: transparent;
+      background-color: transparent;
+      outline: 0px;
+      border: 0px;
+      margin: 0px;
+      border-radius: 0px;
+      cursor: pointer;
+      user-select: none;
+      vertical-align: middle;
+      appearance: none;
+      color: inherit;
+      display: flex;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      -webkit-box-align: center;
+      align-items: center;
+      position: relative;
+      text-decoration: none;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: left;
+      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      padding: 0px;
+    }
+    li:hover {
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.04);
+      -webkit-tap-highlight-color: transparent;
+      background-color: transparent;
+      outline: 0px;
+      border: 0px;
+      margin: 0px;
+      border-radius: 0px;
+      cursor: pointer;
+      user-select: none;
+      vertical-align: middle;
+      appearance: none;
+      color: inherit;
+      display: flex;
+      -webkit-box-pack: start;
+      justify-content: flex-start;
+      -webkit-box-align: center;
+      align-items: center;
+      position: relative;
+      text-decoration: none;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: left;
+      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      padding: 0px;
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+    a {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      padding: 12px 24px 12px 20px;
+      -webkit-box-align: center;
+
+      -webkit-box-pack: center;
+      justify-content: center;
+      position: relative;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+      background-color: transparent;
+      outline: 0px;
+      border: 0px;
+      margin: 0px;
+      border-radius: 0px;
+      cursor: pointer;
+      user-select: none;
+      appearance: none;
+      text-decoration: none;
+      color: inherit;
+      -webkit-box-flex: 1;
+      flex-grow: 1;
+      align-items: center;
+      gap: 20px;
+      text-align: start;
+    }
+    aa {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      padding: 8px 20px;
+    }
+    .icon {
+      flex-shrink: 0;
+      display: inline-flex;
+      -webkit-box-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      min-width: 48px;
+      width: 48px;
+      height: 48px;
+      font-size: 20px;
+      border-radius: 8px;
+      color: rgb(255, 255, 255);
+      background-color: rgb(20, 86, 224);
+    }
+    svg {
+      user-select: none;
+      width: 1em;
+      height: 1em;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      font-size: 1.5rem;
+    }
+    .details {
+      gap: 0;
+      min-width: 0px;
+      display: flex;
+      flex-direction: column;
+    }
+    .title {
+      margin: 0;
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: 0.15px;
+      color: rgb(9, 34, 65);
+    }
+    .description {
+      overflow-wrap: break-word;
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      letter-spacing: 0.25px;
+      color: rgb(9, 34, 65);
+    }
+    .caption {
+      margin: 0px;
+      font-family: 'Open Sans', sans-serif;
+      font-weight: 400;
+      font-style: normal;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.4px;
+      color: rgba(9, 34, 65, 0.7);
+    }
+    .ripple {
+      overflow: hidden;
+      pointer-events: none;
+      position: absolute;
+      z-index: 0;
+      inset: 0px;
+      border-radius: inherit;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], IxNewsFeed.prototype, "header", void 0);
+__decorate([
+    property({ type: Array })
+], IxNewsFeed.prototype, "data", void 0);
+IxNewsFeed = __decorate([
+    customElement('ix-news-feed')
+], IxNewsFeed);
+export { IxNewsFeed };
+//# sourceMappingURL=ix-news-feed.js.map

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

@@ -0,0 +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,MAAM,mBAAmB,CAAC;AAC5D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,kDAAkD;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAwLuB,WAAM,GAAG,OAAO,CAAC;QAElB,SAAI,GAAG,EAAE,CAAC;IA0CvC,CAAC;IAxCoB,MAAM;QACvB,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,MAAM;;;;;;;;;;;;QAYjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAU,EAAE,EAAE;YACxC,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;oBACC,GAAG,aAAa,EAAE;gCACN,MAAM;;iCAEL,KAAK;uCACC,QAAQ;;oCAEX,UAAU;;;;cAIhC,CAAC;QACT,CAAC,CAAC;iBACS,CAAC;IAChB,CAAC;;AAlOM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqLlB,AArLY,CAqLX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkB;AAElB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAW;AA1L1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAoOtB","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 { formatDistance, parseISO, startOfToday } from 'date-fns';\nimport { ticket } from './assets/iconset.js';\n// import { enUS, es, pt } from \"date-fns/locale\";\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: 10px 16px 10px 20px;\n    }\n    h6 {\n      margin: 0px;\n      font-family: 'Red Hat Display', sans-serif;\n      font-style: normal;\n      font-weight: bold;\n      font-size: 20px;\n      line-height: 24px;\n      letter-spacing: 0.15px;\n      color: rgb(9, 34, 65);\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    aa {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      padding: 8px 20px;\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: rgb(255, 255, 255);\n      background-color: rgb(20, 86, 224);\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      font-family: 'Open Sans', sans-serif;\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      line-height: 20px;\n      letter-spacing: 0.15px;\n      color: rgb(9, 34, 65);\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-family: 'Open Sans', sans-serif;\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 24px;\n      letter-spacing: 0.25px;\n      color: rgb(9, 34, 65);\n    }\n    .caption {\n      margin: 0px;\n      font-family: 'Open Sans', sans-serif;\n      font-weight: 400;\n      font-style: normal;\n      font-size: 12px;\n      line-height: 16px;\n      letter-spacing: 0.4px;\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  `;\n\n  @property({ type: String }) header = 'title';\n\n  @property({ type: Array }) data = [];\n\n  protected override render() {\n    return html`<ix-widget type=\"news-feed\">\n      <div class=\"header\">\n        <h6>${this.header}</h6>\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          View All\n        </ix-button>\n      </div>\n      ${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            </div>\n            <span class=\"caption\">${dateOffset}</span>\n            <span class=\"ripple\"></span>\n          </a>\n          <span class=\"ripple\"></span>\n        </li>`;\n      })}\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-status-counter-group.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import './IxWidget.js';
+import './ix-status-counter.js';
+export declare class IxStatusCounterGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    data: never[];
+    protected render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,115 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './IxWidget.js';
+import './ix-status-counter.js';
+import { laptop, users, mySites, dcim, locations } from './assets/iconset.js';
+const iconMap = {
+    laptop,
+    users,
+    mySites,
+    dcim,
+    locations,
+};
+let IxStatusCounterGroup = class IxStatusCounterGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+    }
+    render() {
+        return html `<ix-widget type="status-counter-group">
+      <div class="content">
+        <div class="layout">
+          ${this.data.map((item, index) => {
+            const { value = 0, header = 'status', icon } = item;
+            return html `<ix-status-counter
+              class="b${index + 1}"
+              value=${value}
+              header=${header}
+              .icon=${iconMap[icon]}
+            >
+            </ix-status-counter>`;
+        })}
+        </div>
+      </div>
+    </ix-widget>`;
+    }
+};
+IxStatusCounterGroup.styles = css `
+    .layout {
+      display: grid;
+    }
+    @media (min-width: 1350px) {
+      .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;
+      }
+      .layout .b3 {
+        grid-column-start: 4;
+        grid-column-end: 6;
+      }
+      .layout .b4 {
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+      .layout .b5 {
+        grid-column-start: 3;
+        grid-column-end: 6;
+      }
+      ix-status-counter {
+        --ix-widget-padding: 1rem;
+      }
+    }
+
+    @media (max-width: 1349px) {
+      .layout {
+        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)
+        );
+      }
+      .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: 1;
+        grid-column-end: 2;
+        grid-row-start: 3;
+      }
+      .layout .b4 {
+        grid-column-start: 2;
+        grid-column-end: 3;
+        grid-row-start: 1;
+      }
+      .layout .b5 {
+        grid-column-start: 2;
+        grid-column-end: 3;
+        grid-row-start: 2;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], IxStatusCounterGroup.prototype, "data", void 0);
+IxStatusCounterGroup = __decorate([
+    customElement('ix-status-counter-group')
+], IxStatusCounterGroup);
+export { IxStatusCounterGroup };
+//# sourceMappingURL=ix-status-counter-group.js.map

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

@@ -0,0 +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;AAE9E,MAAM,OAAO,GAAG;IACd,MAAM;IACN,KAAK;IACL,OAAO;IACP,IAAI;IACJ,SAAS;CACV,CAAC;AAGK,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAwEsB,SAAI,GAAG,EAAE,CAAC;IAoBvC,CAAC;IAlBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YACpD,OAAO,IAAI,CAAA;wBACC,KAAK,GAAG,CAAC;sBACX,KAAK;uBACJ,MAAM;sBACP,OAAO,CAAC,IAAI,CAAC;;iCAEF,CAAC;QACxB,CAAC,CAAC;;;iBAGK,CAAC;IAChB,CAAC;;AA1FM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqElB,AArEY,CAqEX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAW;AAxE1B,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA4FhC","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';\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    }\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: 4;\n        grid-column-end: 6;\n      }\n      .layout .b4 {\n        grid-column-start: 1;\n        grid-column-end: 3;\n      }\n      .layout .b5 {\n        grid-column-start: 3;\n        grid-column-end: 6;\n      }\n      ix-status-counter {\n        --ix-widget-padding: 1rem;\n      }\n    }\n\n    @media (max-width: 1349px) {\n      .layout {\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 .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: 1;\n        grid-column-end: 2;\n        grid-row-start: 3;\n      }\n      .layout .b4 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 1;\n      }\n      .layout .b5 {\n        grid-column-start: 2;\n        grid-column-end: 3;\n        grid-row-start: 2;\n      }\n    }\n  `;\n\n  @property({ type: Array }) data = [];\n\n  protected override render() {\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 = 0, header = 'status', icon } = item;\n            return html`<ix-status-counter\n              class=\"b${index + 1}\"\n              value=${value}\n              header=${header}\n              .icon=${iconMap[icon]}\n            >\n            </ix-status-counter>`;\n          })}\n        </div>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-status-counter.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './IxWidget.js';
+export declare class IxStatusCounter extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: number | undefined;
+    header: string;
+    icon: import("lit").TemplateResult<2>;
+    apiUrl: string | undefined;
+    connectedCallback(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}