@digital-realty/ix-widget 1.0.1

package/dist/ix-status-counter.js

@@ -0,0 +1,163 @@
+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 { laptop, loader } from './assets/iconset.js';
+let IxStatusCounter = class IxStatusCounter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = undefined;
+        this.header = 'status';
+        this.icon = laptop;
+        this.apiUrl = undefined;
+    }
+    connectedCallback() {
+        // super.connectedCallback();
+        /* if (this.apiUrl) {
+          fetch(this.apiUrl)
+            .then((response) => response.json())
+            .then((data) => {
+              console.log(data);
+              this.value = data.value;
+              this.loading = false;
+            });
+        } */
+    }
+    render() {
+        return html `<ix-widget type="status-counter">
+      <div class="content">
+        <div class="info">
+          ${this.value ? html `<h3>${this.value.toLocaleString()}</h3>` : loader}
+          <h2>${this.header}</h2>
+        </div>
+        <ix-icon>${this.icon}</ix-icon>
+      </div>
+    </ix-widget>`;
+    }
+};
+IxStatusCounter.styles = css `
+    ix-widget {
+      --ix-widget-background: rgb(200, 223, 250);
+      --ix-widget-padding: 36.5px 20px 36.5px 24px;
+      --ix-icon-font-size: 5rem;
+      --ix-icon-line-height: 1;
+    }
+    h2 {
+      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);
+    }
+    h3 {
+      margin: 0px;
+      font-family: 'Red Hat Display', sans-serif;
+      font-style: normal;
+      font-weight: bold;
+      font-size: 34px;
+      line-height: 40px;
+      letter-spacing: 0.35px;
+      color: rgb(9, 34, 65);
+    }
+    .content {
+      display: flex;
+      -webkit-box-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    ix-icon {
+      background-color: rgb(255, 255, 255);
+      border-radius: 50%;
+      display: flex;
+      -webkit-box-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      align-items: center;
+      width: 60px;
+      height: 60px;
+      font-size: 36px;
+    }
+    .info svg {
+      stroke: blue;
+    }
+    svg {
+      width: 24px;
+      margin: auto;
+    }
+
+    @media (min-width: 1200px) {
+      svg {
+        width: 36px;
+        margin: auto;
+      }
+    }
+
+    @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: '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);
+        padding-left: 8px;
+      }
+      h3 {
+        margin: 0px;
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+        color: rgb(9, 34, 65);
+      }
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], IxStatusCounter.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], IxStatusCounter.prototype, "header", void 0);
+__decorate([
+    property({ type: Object })
+], IxStatusCounter.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], IxStatusCounter.prototype, "apiUrl", void 0);
+IxStatusCounter = __decorate([
+    customElement('ix-status-counter')
+], IxStatusCounter);
+export { IxStatusCounter };
+//# sourceMappingURL=ix-status-counter.js.map

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

@@ -0,0 +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;;QA8GuB,UAAK,GAAuB,SAAS,CAAC;QAEtC,WAAM,GAAG,QAAQ,CAAC;QAElB,SAAI,GAAG,MAAM,CAAC;QAEd,WAAM,GAAuB,SAAS,CAAC;IA0BrE,CAAC;IAxBC,iBAAiB;QACf,6BAA6B;QAC7B;;;;;;;;YAQI;IACN,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM;gBAC/D,IAAI,CAAC,MAAM;;mBAER,IAAI,CAAC,IAAI;;iBAEX,CAAC;IAChB,CAAC;;AA5IM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GlB,AA3GY,CA2GX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuC;AAEtC;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;+CAAwC;AApHxD,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA8I3B","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    }\n    h2 {\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    h3 {\n      margin: 0px;\n      font-family: 'Red Hat Display', sans-serif;\n      font-style: normal;\n      font-weight: bold;\n      font-size: 34px;\n      line-height: 40px;\n      letter-spacing: 0.35px;\n      color: rgb(9, 34, 65);\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    .info svg {\n      stroke: blue;\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    }\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: '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        padding-left: 8px;\n      }\n      h3 {\n        margin: 0px;\n        font-family: 'Open Sans', sans-serif;\n        font-style: normal;\n        font-weight: 700;\n        font-size: 14px;\n        line-height: 24px;\n        letter-spacing: 0.1px;\n        color: rgb(9, 34, 65);\n      }\n    }\n  `;\n\n  @property({ type: Number }) value: number | undefined = undefined;\n\n  @property({ type: String }) header = 'status';\n\n  @property({ type: Object }) icon = laptop;\n\n  @property({ type: String }) apiUrl: string | undefined = undefined;\n\n  connectedCallback() {\n    // super.connectedCallback();\n    /* if (this.apiUrl) {\n      fetch(this.apiUrl)\n        .then((response) => response.json())\n        .then((data) => {\n          console.log(data);\n          this.value = data.value;\n          this.loading = false; \n        }); \n    } */\n  }\n\n  protected override render() {\n    return html`<ix-widget type=\"status-counter\">\n      <div class=\"content\">\n        <div class=\"info\">\n          ${this.value ? html`<h3>${this.value.toLocaleString()}</h3>` : loader}\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-table-data.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-grid/ix-grid.js';
+import './ix-widget.js';
+export declare class IxTableData extends LitElement {
+    static styles: import("lit").CSSResult;
+    columns: never[];
+    rows: never[];
+    pageSize: number;
+    header: string;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/ix-table-data.js

@@ -0,0 +1,99 @@
+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-grid/ix-grid.js';
+import './ix-widget.js';
+let IxTableData = class IxTableData extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        this.pageSize = 5;
+        this.header = 'title';
+    }
+    render() {
+        return html `<ix-widget>
+      <ix-grid
+        .columns=${this.columns}
+        .rows=${this.rows}
+        .pageSize=${this.pageSize}
+        .rowLimit=${this.rows.length}
+        ?hide-filters=${true}
+        add-params-to-url="false"
+        ><div slot="header" class="header">
+          <h2>${this.header}</h2>
+          <ix-button type="button" has-icon trailing-icon appearance="text">
+            <ix-icon slot="icon">chevron_right</ix-icon>
+            View all
+          </ix-button>
+        </div>
+      </ix-grid>
+    </ix-widget>`;
+    }
+};
+IxTableData.styles = css `
+    ix-widget {
+      --ix-widget-padding: 0;
+      --ix-widget-border: 1px solid #e0e0e0;
+    }
+    .header {
+      height: 56px;
+      display: flex;
+      -webkit-box-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: center;
+      align-items: center;
+      padding-right: 7px;
+      width: 100%;
+    }
+    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);
+    }
+    .status {
+      display: flex;
+      flex-direction: row;
+      -webkit-box-align: center;
+      align-items: center;
+      padding: 2px 12px;
+      width: 185px;
+      height: 28px;
+      left: 0px;
+      top: 0px;
+      border-radius: 68px;
+      flex: 0 0 auto;
+      order: 0;
+      -webkit-box-flex: 0;
+      color: white;
+      -webkit-box-pack: center;
+      justify-content: center;
+      background: rgb(76, 175, 80);
+    }
+    ix-grid {
+      --_cell-padding: 0;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], IxTableData.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], IxTableData.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number })
+], IxTableData.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: String })
+], IxTableData.prototype, "header", void 0);
+IxTableData = __decorate([
+    customElement('ix-table-data')
+], IxTableData);
+export { IxTableData };
+//# sourceMappingURL=ix-table-data.js.map

package/dist/ix-table-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.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,oCAAoC,CAAC;AAC5C,OAAO,gBAAgB,CAAC;AAGjB,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAkDsB,YAAO,GAAG,EAAE,CAAC;QAEb,SAAI,GAAG,EAAE,CAAC;QAET,aAAQ,GAAG,CAAC,CAAC;QAEb,WAAM,GAAG,OAAO,CAAC;IAqB/C,CAAC;IAnBoB,MAAM;QACvB,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,IAAI,CAAC,MAAM;wBACZ,IAAI;;;gBAGZ,IAAI,CAAC,MAAM;;;;;;;iBAOV,CAAC;IAChB,CAAC;;AA3EM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ClB,AA/CY,CA+CX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAc;AAEb;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAW;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AAxDlC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA6EvB","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-grid/ix-grid.js';\nimport './ix-widget.js';\n\n@customElement('ix-table-data')\nexport class IxTableData extends LitElement {\n  static styles = css`\n    ix-widget {\n      --ix-widget-padding: 0;\n      --ix-widget-border: 1px solid #e0e0e0;\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-right: 7px;\n      width: 100%;\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    .status {\n      display: flex;\n      flex-direction: row;\n      -webkit-box-align: center;\n      align-items: center;\n      padding: 2px 12px;\n      width: 185px;\n      height: 28px;\n      left: 0px;\n      top: 0px;\n      border-radius: 68px;\n      flex: 0 0 auto;\n      order: 0;\n      -webkit-box-flex: 0;\n      color: white;\n      -webkit-box-pack: center;\n      justify-content: center;\n      background: rgb(76, 175, 80);\n    }\n    ix-grid {\n      --_cell-padding: 0;\n    }\n  `;\n\n  @property({ type: Array }) columns = [];\n\n  @property({ type: Array }) rows = [];\n\n  @property({ type: Number }) pageSize = 5;\n\n  @property({ type: String }) header = 'title';\n\n  protected override render() {\n    return html`<ix-widget>\n      <ix-grid\n        .columns=${this.columns}\n        .rows=${this.rows}\n        .pageSize=${this.pageSize}\n        .rowLimit=${this.rows.length}\n        ?hide-filters=${true}\n        add-params-to-url=\"false\"\n        ><div slot=\"header\" class=\"header\">\n          <h2>${this.header}</h2>\n          <ix-button type=\"button\" has-icon trailing-icon appearance=\"text\">\n            <ix-icon slot=\"icon\">chevron_right</ix-icon>\n            View all\n          </ix-button>\n        </div>\n      </ix-grid>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-widget.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-widget.js

@@ -0,0 +1,3 @@
+import { IxWidget } from './IxWidget.js';
+window.customElements.define('ix-widget', IxWidget);
+//# sourceMappingURL=ix-widget.js.map

package/dist/ix-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-widget.js","sourceRoot":"","sources":["../src/ix-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { IxWidget } from './IxWidget.js';\n\nwindow.customElements.define('ix-widget', IxWidget);\n"]}

package/dist/ix-widget.min.js

@@ -0,0 +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:36.5px 20px 36.5px 24px}}[type=status-counter-group].card{--ix-widget-padding:0;--ix-widget-background:transparent}@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-2].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}`,__decorate([property({type:String})],IxWidget.prototype,"type",void 0),window.customElements.define("ix-widget",IxWidget);

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

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

package/dist/styles/launchpad-styles.js

@@ -0,0 +1,221 @@
+import { css } from 'lit';
+export const IxLaunchpadStyles = css `
+  .outer {
+    height: 100vh;
+    background-color: rgb(245, 247, 255);
+  }
+  main {
+    height: 100%;
+    margin-left: 0px;
+    margin-top: 72px;
+    margin-bottom: 72px;
+    transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+  }
+  .inner {
+    height: 100%;
+    width: 100%;
+    overflow-y: overlay;
+    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;
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+    margin: 0px;
+    font-family: 'Red Hat Display', sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: 0.35px;
+    color: rgb(9, 34, 65);
+  }
+  h2 {
+    margin: 0px;
+    font-family: 'Red Hat Display', sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 24px;
+    line-height: 32px;
+    letter-spacing: 0em;
+    color: rgb(9, 34, 65);
+    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;
+  }
+  .news-info .newsAndPromotions {
+    display: flex;
+    gap: 44px;
+    flex-wrap: wrap;
+  }
+
+  @media (max-width: 1199px) {
+    ix-table-data,
+    ix-action-list,
+    .news-info {
+      display: none;
+    }
+  }
+
+  @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;
+    }
+    main {
+      margin-top: 88px;
+    }
+    .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 {
+      margin-top: -100px;
+      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;
+      overflow: auto;
+      max-height: 100vh;
+      padding-top: 120px;
+      padding-bottom: 32px;
+      padding-right: 44px;
+    }
+    .container {
+      margin-top: -100px;
+      background-image: url(/images/buildings-placeholder.png);
+      background-repeat: no-repeat;
+      background-position: right bottom;
+    }
+    main {
+      margin-top: 0px;
+      /* margin-left: 112px; */
+    }
+  }
+
+  @media (min-width: 1350px) {
+    .container {
+      display: grid;
+      grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);
+    }
+    .container > nav {
+      overflow: auto;
+      max-height: 100vh;
+      padding-top: 120px;
+      padding-bottom: 32px;
+      padding-right: 20px;
+    }
+    .container .content > nav {
+      display: none;
+    }
+  }
+
+  @media (max-width: 1349px) {
+    .container > nav {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=launchpad-styles.js.map

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NnC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxLaunchpadStyles = css`\n  .outer {\n    height: 100vh;\n    background-color: rgb(245, 247, 255);\n  }\n  main {\n    height: 100%;\n    margin-left: 0px;\n    margin-top: 72px;\n    margin-bottom: 72px;\n    transition: margin-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;\n  }\n  .inner {\n    height: 100%;\n    width: 100%;\n    overflow-y: overlay;\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    font-size: 2em;\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    margin: 0px;\n    font-family: 'Red Hat Display', sans-serif;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 34px;\n    line-height: 40px;\n    letter-spacing: 0.35px;\n    color: rgb(9, 34, 65);\n  }\n  h2 {\n    margin: 0px;\n    font-family: 'Red Hat Display', sans-serif;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 24px;\n    line-height: 32px;\n    letter-spacing: 0em;\n    color: rgb(9, 34, 65);\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  }\n  .news-info .newsAndPromotions {\n    display: flex;\n    gap: 44px;\n    flex-wrap: wrap;\n  }\n\n  @media (max-width: 1199px) {\n    ix-table-data,\n    ix-action-list,\n    .news-info {\n      display: none;\n    }\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    main {\n      margin-top: 88px;\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      margin-top: -100px;\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      overflow: auto;\n      max-height: 100vh;\n      padding-top: 120px;\n      padding-bottom: 32px;\n      padding-right: 44px;\n    }\n    .container {\n      margin-top: -100px;\n      background-image: url(/images/buildings-placeholder.png);\n      background-repeat: no-repeat;\n      background-position: right bottom;\n    }\n    main {\n      margin-top: 0px;\n      /* margin-left: 112px; */\n    }\n  }\n\n  @media (min-width: 1350px) {\n    .container {\n      display: grid;\n      grid-template-columns: minmax(760px, 1176px) minmax(310px, 584px);\n    }\n    .container > nav {\n      overflow: auto;\n      max-height: 100vh;\n      padding-top: 120px;\n      padding-bottom: 32px;\n      padding-right: 20px;\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"]}

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@digital-realty/ix-widget",
+  "description": "Webcomponent ix-widget following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./ix-action-list.js": "./dist/ix-action-list.js",
+    "./ix-contacts.js": "./dist/ix-contacts.js",
+    "./ix-info-card.js": "./dist/ix-info-card.js",
+    "./ix-launchpad.js": "./dist/ix-launchpad.js",
+    "./ix-nav-item.js": "./dist/ix-nav-item.js",
+    "./ix-nav-list.js": "./dist/ix-nav-list.js",
+    "./ix-news-feed.js": "./dist/ix-news-feed.js",
+    "./ix-status-counter-group.js": "./dist/ix-status-counter-group.js",
+    "./ix-status-counter.js": "./dist/ix-status-counter.js",
+    "./ix-table-data.js": "./dist/ix-table-data.js",
+    "./ix-widget.js": "./dist/ix-widget.js",
+    "./ix-widget.min.js": "./dist/ix-widget.min.js",
+    "./IxWidget": "./dist/react/IxWidget.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-button": "^3.2.31",
+    "@digital-realty/ix-grid": "^1.0.29",
+    "@digital-realty/ix-icon": "^1.0.36",
+    "@digital-realty/ix-list": "^1.0.7",
+    "@digital-realty/theme": "^1.0.27",
+    "@lit/react": "^1.0.2",
+    "@material/web": "1.2.0",
+    "date-fns": "^3.6.0",
+    "lit": "^2.0.2",
+    "markdown-it": "^14.1.0",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@types/markdown-it": "^14.1.1",
+    "@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/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "tslib": "^2.3.1",
+    "typescript": "^5.1.6"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "root": true,
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier",
+      "plugin:json/recommended"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "class-methods-use-this": "off",
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    },
+    "globals": {
+      "ShadowRootInit": true
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "/dist",
+    "!/dist/test",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "gitHead": "ee9b46e8efa1df8ef9dd22ec6f7235bc22c69d6d"
+}