@digital-realty/ix-widget 1.0.1

package/dist/ix-action-list.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-button/ix-button.js';
+import './IxWidget.js';
+let IxActionList = class IxActionList extends LitElement {
+    render() {
+        return html `<ix-widget type="action-list">
+      <div class="header">
+        <h2>0 Pending Facility Access Requests</h2>
+        <ix-button
+          slot="cta"
+          type="button"
+          has-icon
+          trailing-icon
+          appearance="text"
+        >
+          <ix-icon slot="icon">chevron_right</ix-icon>
+          Learn more
+        </ix-button>
+      </div>
+      <div class="content">
+        <svg
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-sfpjfh"
+          focusable="false"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          data-testid="InfoIcon"
+        >
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+          ></path>
+        </svg>
+        <div class="description">
+          No Facility Access requests pending approval
+        </div>
+        <ix-button>View All</ix-button>
+      </div>
+    </ix-widget>`;
+    }
+};
+IxActionList.styles = css `
+    .content {
+      display: flex;
+      flex-direction: column;
+      -webkit-box-align: center;
+      align-items: center;
+      -webkit-box-pack: start;
+      justify-content: start;
+      margin: 24px;
+    }
+    svg {
+      user-select: none;
+      width: 48px;
+      height: 48px;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      font-size: inherit;
+      margin-left: 5px;
+      margin-top: 2px;
+      color: rgb(20, 86, 224);
+    }
+    ix-button {
+      display: inline-block;
+    }
+    .header {
+      height: 56px;
+      display: flex;
+      -webkit-box-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      align-items: center;
+      padding-left: 24px;
+      padding-right: 7px;
+    }
+    h2 {
+      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);
+    }
+    .description {
+      margin: 0 0 8px;
+      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);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 24px;
+    }
+  `;
+IxActionList = __decorate([
+    customElement('ix-action-list')
+], IxActionList);
+export { IxActionList };
+//# sourceMappingURL=ix-action-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-action-list.js","sourceRoot":"","sources":["../src/ix-action-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IA+DvB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BE,CAAC;IAChB,CAAC;;AA/FM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,AA5DY,CA4DX;AA7DS,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAiGxB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\n\n@customElement('ix-action-list')\nexport class IxActionList extends LitElement {\n  static styles = css`\n    .content {\n      display: flex;\n      flex-direction: column;\n      -webkit-box-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      justify-content: start;\n      margin: 24px;\n    }\n    svg {\n      user-select: none;\n      width: 48px;\n      height: 48px;\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: inherit;\n      margin-left: 5px;\n      margin-top: 2px;\n      color: rgb(20, 86, 224);\n    }\n    ix-button {\n      display: inline-block;\n    }\n    .header {\n      height: 56px;\n      display: flex;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      align-items: center;\n      padding-left: 24px;\n      padding-right: 7px;\n    }\n    h2 {\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    .description {\n      margin: 0 0 8px;\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      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-top: 24px;\n    }\n  `;\n\n  protected override render() {\n    return html`<ix-widget type=\"action-list\">\n      <div class=\"header\">\n        <h2>0 Pending Facility Access Requests</h2>\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      </div>\n      <div class=\"content\">\n        <svg\n          class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-sfpjfh\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          data-testid=\"InfoIcon\"\n        >\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n          ></path>\n        </svg>\n        <div class=\"description\">\n          No Facility Access requests pending approval\n        </div>\n        <ix-button>View All</ix-button>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-contacts.d.ts

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

package/dist/ix-contacts.js

@@ -0,0 +1,137 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-button/ix-button.js';
+import './IxWidget.js';
+import markdownit from 'markdown-it';
+import { phone, question, email } from './assets/iconset.js';
+let IxContacts = class IxContacts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.phoneNumbers = '';
+    }
+    render() {
+        const md = markdownit();
+        const result = md.render(this.phoneNumbers);
+        return html `<ix-widget>
+      <div class="content customer-support">
+        <h2>Customer Support</h2>
+        <div class="c2">
+          <div class="column">
+            <div class="header">
+              ${question}
+              <h3>Contact us</h3>
+            </div>
+            <p>Please fill out <a href="#">this form</a></p>
+            <div class="header">
+              ${email}
+              <h3>Email</h3>
+            </div>
+            <a class="" href="mailto:GlobalPortal@digitalrealty.com"
+              >GlobalPortal@digitalrealty.com</a
+            >
+          </div>
+          <div>
+            <div class="header">
+              ${phone}
+              <h3>Phone</h3>
+            </div>
+            ${unsafeHTML(result)}
+          </div>
+        </div>
+      </div>
+    </ix-widget>`;
+    }
+};
+IxContacts.styles = [
+    css `
+      .c2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+      }
+      .c3 {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        gap: 2rem;
+      }
+      .customer-support h2 {
+        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);
+        height: 56px;
+      }
+      .customer-support h3 {
+        margin: 0px;
+        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);
+      }
+      .customer-support 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;
+        color: rgb(7, 20, 84);
+      }
+      .customer-support p {
+        margin: 0px;
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 28px;
+        letter-spacing: 0.44px;
+        color: rgb(9, 34, 65);
+      }
+      .customer-support a {
+        margin: 0px;
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 28px;
+        letter-spacing: 0.44px;
+        color: rgb(20, 86, 224);
+        text-decoration: underline rgba(20, 86, 224, 0.4);
+      }
+      .customer-support .column {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        white-space: pre-wrap;
+      }
+      p {
+        white-space: pre-wrap;
+      }
+      .header {
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        gap: 8px;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], IxContacts.prototype, "phoneNumbers", void 0);
+IxContacts = __decorate([
+    customElement('ix-contacts')
+], IxContacts);
+export { IxContacts };
+//# sourceMappingURL=ix-contacts.js.map

package/dist/ix-contacts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-contacts.js","sourceRoot":"","sources":["../src/ix-contacts.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,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAoFuB,iBAAY,GAAG,EAAE,CAAC;IAkChD,CAAC;IAhCoB,MAAM;QACvB,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;;;gBAMC,QAAQ;;;;;gBAKR,KAAK;;;;;;;;;gBASL,KAAK;;;cAGP,UAAU,CAAC,MAAM,CAAC;;;;iBAIf,CAAC;IAChB,CAAC;;AApHM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;CACF,AAjFY,CAiFX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AApFnC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsHtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\nimport markdownit from 'markdown-it';\nimport { phone, question, email } from './assets/iconset.js';\n\n@customElement('ix-contacts')\nexport class IxContacts extends LitElement {\n  static styles = [\n    css`\n      .c2 {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 2rem;\n      }\n      .c3 {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        gap: 2rem;\n      }\n      .customer-support h2 {\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        height: 56px;\n      }\n      .customer-support h3 {\n        margin: 0px;\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      .customer-support 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        color: rgb(7, 20, 84);\n      }\n      .customer-support p {\n        margin: 0px;\n        font-family: 'Open Sans', sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 16px;\n        line-height: 28px;\n        letter-spacing: 0.44px;\n        color: rgb(9, 34, 65);\n      }\n      .customer-support a {\n        margin: 0px;\n        font-family: 'Open Sans', sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 16px;\n        line-height: 28px;\n        letter-spacing: 0.44px;\n        color: rgb(20, 86, 224);\n        text-decoration: underline rgba(20, 86, 224, 0.4);\n      }\n      .customer-support .column {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        white-space: pre-wrap;\n      }\n      p {\n        white-space: pre-wrap;\n      }\n      .header {\n        display: flex;\n        -webkit-box-align: center;\n        align-items: center;\n        gap: 8px;\n      }\n    `,\n  ];\n\n  @property({ type: String }) phoneNumbers = '';\n\n  protected override render() {\n    const md = markdownit();\n    const result = md.render(this.phoneNumbers);\n    return html`<ix-widget>\n      <div class=\"content customer-support\">\n        <h2>Customer Support</h2>\n        <div class=\"c2\">\n          <div class=\"column\">\n            <div class=\"header\">\n              ${question}\n              <h3>Contact us</h3>\n            </div>\n            <p>Please fill out <a href=\"#\">this form</a></p>\n            <div class=\"header\">\n              ${email}\n              <h3>Email</h3>\n            </div>\n            <a class=\"\" href=\"mailto:GlobalPortal@digitalrealty.com\"\n              >GlobalPortal@digitalrealty.com</a\n            >\n          </div>\n          <div>\n            <div class=\"header\">\n              ${phone}\n              <h3>Phone</h3>\n            </div>\n            ${unsafeHTML(result)}\n          </div>\n        </div>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-info-card.d.ts

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

package/dist/ix-info-card.js

@@ -0,0 +1,164 @@
+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 '@digital-realty/ix-button/ix-button.js';
+import './IxWidget.js';
+let IxInfoCard = class IxInfoCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'resources';
+        this.img = '';
+    }
+    render() {
+        return html `<ix-widget type=${this.type}>
+      <slot name="image"></slot>
+      <div class="content">
+        <div class="overlay"></div>
+        <slot name="label"></slot>
+        <slot name="title"></slot>
+        <slot name="description"></slot>
+        <slot name="cta"></slot>
+      </div>
+    </ix-widget>`;
+    }
+};
+IxInfoCard.styles = [
+    css `
+      :host {
+        --ix-widget-padding: 0;
+        display: block;
+      }
+      :host[type='info-card-2'] {
+        aspect-ratio: 1 / 1;
+      }
+      [type='info-card-2'] ::slotted([slot='image']) {
+        position: absolute;
+        inset: 0px;
+        box-sizing: border-box;
+        padding: 0px;
+        border: none;
+        margin: auto;
+        display: block;
+        width: 0px;
+        height: 0px;
+        min-width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        max-height: 100%;
+        object-fit: cover;
+      }
+      [type='info-card-2'] .overlay {
+        position: absolute;
+        z-index: 0;
+        inset: 0px;
+        background: rgba(21, 25, 30, 0.66);
+      }
+
+      [type='info-card-2'] ::slotted([slot='title']) {
+        position: relative;
+        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(255, 255, 255);
+        z-index: 2;
+      }
+      [type='info-card-2'] ::slotted([slot='cta']) {
+        position: absolute;
+        bottom: 1rem;
+        left: 0;
+        --md-text-button-label-text-color: white;
+        --md-text-button-icon-color: white;
+      }
+      [type='info-card-2'] ::slotted([slot='label']) {
+        position: relative;
+        max-width: 100%;
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+        display: inline-flex;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        color: rgb(255, 255, 255);
+        background-color: rgb(20, 86, 224);
+        border-radius: 16px;
+        white-space: nowrap;
+        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+          box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        cursor: default;
+        outline: 0px;
+        text-decoration: none;
+        border: 0px;
+        padding-left: 4px;
+        padding-right: 4px;
+        vertical-align: middle;
+        box-sizing: border-box;
+        font-size: 8px;
+        font-weight: 700;
+        line-height: 11px;
+        letter-spacing: 0px;
+        text-align: center;
+        height: 12px;
+        margin-bottom: 5px;
+      }
+      [type='info-card-2'] .image {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-position: center;
+        background-size: cover;
+      }
+      [type='info-card'] ::slotted([slot='image']) {
+        object-fit: cover;
+        width: 100%;
+        max-height: 200px;
+        overflow: hidden;
+      }
+      [type='info-card'] ::slotted([slot='title']) {
+        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(20, 86, 224);
+      }
+      [type='info-card'] ::slotted([slot='description']) {
+        margin: 10px 0 0;
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 28px;
+        letter-spacing: 0.44px;
+        color: inherit;
+      }
+      [type='info-card'] ::slotted([slot='cta']) {
+        position: absolute;
+        bottom: 1rem;
+        left: 0.5rem;
+      }
+      .content {
+        padding: 16px 24px;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], IxInfoCard.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], IxInfoCard.prototype, "img", void 0);
+IxInfoCard = __decorate([
+    customElement('ix-info-card')
+], IxInfoCard);
+export { IxInfoCard };
+//# sourceMappingURL=ix-info-card.js.map

package/dist/ix-info-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-info-card.js","sourceRoot":"","sources":["../src/ix-info-card.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,wCAAwC,CAAC;AAChD,OAAO,eAAe,CAAC;AAGhB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAkIuB,SAAI,GAAG,WAAW,CAAC;QAEnB,QAAG,GAAG,EAAE,CAAC;IAcvC,CAAC;IAZoB,MAAM;QACvB,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI;;;;;;;;;iBAS1B,CAAC;IAChB,CAAC;;AAhJM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6HF;CACF,AA/HY,CA+HX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AApI1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAkJtB","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport './IxWidget.js';\n\n@customElement('ix-info-card')\nexport class IxInfoCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        --ix-widget-padding: 0;\n        display: block;\n      }\n      :host[type='info-card-2'] {\n        aspect-ratio: 1 / 1;\n      }\n      [type='info-card-2'] ::slotted([slot='image']) {\n        position: absolute;\n        inset: 0px;\n        box-sizing: border-box;\n        padding: 0px;\n        border: none;\n        margin: auto;\n        display: block;\n        width: 0px;\n        height: 0px;\n        min-width: 100%;\n        max-width: 100%;\n        min-height: 100%;\n        max-height: 100%;\n        object-fit: cover;\n      }\n      [type='info-card-2'] .overlay {\n        position: absolute;\n        z-index: 0;\n        inset: 0px;\n        background: rgba(21, 25, 30, 0.66);\n      }\n\n      [type='info-card-2'] ::slotted([slot='title']) {\n        position: relative;\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(255, 255, 255);\n        z-index: 2;\n      }\n      [type='info-card-2'] ::slotted([slot='cta']) {\n        position: absolute;\n        bottom: 1rem;\n        left: 0;\n        --md-text-button-label-text-color: white;\n        --md-text-button-icon-color: white;\n      }\n      [type='info-card-2'] ::slotted([slot='label']) {\n        position: relative;\n        max-width: 100%;\n        font-family: Roboto, Helvetica, Arial, sans-serif;\n        display: inline-flex;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        color: rgb(255, 255, 255);\n        background-color: rgb(20, 86, 224);\n        border-radius: 16px;\n        white-space: nowrap;\n        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n          box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        cursor: default;\n        outline: 0px;\n        text-decoration: none;\n        border: 0px;\n        padding-left: 4px;\n        padding-right: 4px;\n        vertical-align: middle;\n        box-sizing: border-box;\n        font-size: 8px;\n        font-weight: 700;\n        line-height: 11px;\n        letter-spacing: 0px;\n        text-align: center;\n        height: 12px;\n        margin-bottom: 5px;\n      }\n      [type='info-card-2'] .image {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-position: center;\n        background-size: cover;\n      }\n      [type='info-card'] ::slotted([slot='image']) {\n        object-fit: cover;\n        width: 100%;\n        max-height: 200px;\n        overflow: hidden;\n      }\n      [type='info-card'] ::slotted([slot='title']) {\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(20, 86, 224);\n      }\n      [type='info-card'] ::slotted([slot='description']) {\n        margin: 10px 0 0;\n        font-family: 'Open Sans', sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 16px;\n        line-height: 28px;\n        letter-spacing: 0.44px;\n        color: inherit;\n      }\n      [type='info-card'] ::slotted([slot='cta']) {\n        position: absolute;\n        bottom: 1rem;\n        left: 0.5rem;\n      }\n      .content {\n        padding: 16px 24px;\n      }\n    `,\n  ];\n\n  @property({ type: String }) type = 'resources';\n\n  @property({ type: String }) img = '';\n\n  protected override render() {\n    return html`<ix-widget type=${this.type}>\n      <slot name=\"image\"></slot>\n      <div class=\"content\">\n        <div class=\"overlay\"></div>\n        <slot name=\"label\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"description\"></slot>\n        <slot name=\"cta\"></slot>\n      </div>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-launchpad.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import './ix-status-counter-group.js';
+import './ix-action-list.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';
+export declare class IxLaunchpad extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: any;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/ix-launchpad.js

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