@digital-realty/ix-widget 2.3.1-alpha.1 → 2.3.1

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

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

@@ -1,17 +1,27 @@
 import { LitElement } from 'lit';
 import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-grid/ix-grid-nav.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: string[];
+    isLoading: boolean;
     rows: string[] | undefined;
     disabled: boolean;
     showViewAllButtonOnEmpty: boolean;
+    showHeaderViewAll: boolean;
+    showFooterViewAll: boolean;
+    viewAllText: string;
     pageSize: number;
+    showViewAll: boolean;
+    rowLimit: number;
+    totalCount: number;
     header: string;
     emptyDescription: string;
     href: string;
+    firstUpdated(): void;
+    name: string;
     renderEmptyTable(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/ix-table-data.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
 import { html, LitElement, css, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-grid/ix-grid-nav.js';
 import '@digital-realty/ix-grid/ix-grid.js';
 import './ix-widget.js';
 import { loader } from './assets/iconset.js';
@@ -9,39 +10,49 @@ let IxTableData = class IxTableData extends LitElement {
     constructor() {
         super(...arguments);
         this.columns = [];
+        this.isLoading = false;
         this.rows = [];
         this.disabled = false;
         this.showViewAllButtonOnEmpty = false;
+        this.showHeaderViewAll = false;
+        this.showFooterViewAll = false;
+        this.viewAllText = '';
         this.pageSize = 5;
+        this.showViewAll = false;
+        this.rowLimit = 0;
+        this.totalCount = 0;
         this.header = '';
         this.emptyDescription = '';
-        this.href = '/';
+        this.href = '';
+        this.name = 'table-data';
+    }
+    firstUpdated() {
+        var _a;
+        this.rowLimit = ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        this.showViewAll = !(this.rowLimit > 0 && this.rowLimit < this.totalCount);
     }
     renderEmptyTable() {
-        return html `<ix-widget class="empty" type="empty-table">
-      <div class="header">
+        return html `<ix-widget
+      class="empty"
+      type="empty-table"
+      data-testid="no-data-table"
+    >
+      <div class="header ${this.showHeaderViewAll ? 'view-all' : ''}">
         <h2>${this.header}</h2>
-        ${this.showViewAllButtonOnEmpty
-            ? html ` <ix-button
-              type="button"
-              has-icon
-              trailing-icon
-              appearance="text"
-              href=${this.href}
-            >
-              <ix-icon slot="icon">chevron_right</ix-icon>
-              View all
-            </ix-button>`
-            : nothing}
+        <slot name="tabs"></slot>
       </div>
       <div
         class=${`content ${this.showViewAllButtonOnEmpty ? 'view-all' : ''}`}
       >
         <ix-icon class="info" filled>info</ix-icon>
-        <div class="description">
+        <div
+          class="description"
+          data-testid="ix-table-empty-desc"
+          role="status"
+        >
           <p>${this.emptyDescription}</p>
         </div>
-        ${this.showViewAllButtonOnEmpty
+        ${this.showViewAllButtonOnEmpty && this.href
             ? html ` <ix-button type="button" href=${this.href}>
               View all
             </ix-button>`
@@ -50,7 +61,7 @@ let IxTableData = class IxTableData extends LitElement {
     </ix-widget>`;
     }
     render() {
-        var _a, _b;
+        var _a;
         if (this.disabled) {
             return this.renderEmptyTable();
         }
@@ -68,22 +79,76 @@ let IxTableData = class IxTableData extends LitElement {
         .columns=${this.columns}
         .rows=${this.rows}
         .pageSize=${this.pageSize}
-        .rowLimit=${((_b = this.rows) === null || _b === void 0 ? void 0 : _b.length) || 0}
+        rowLimit=${this.rowLimit}
         ?hide-filters=${true}
         add-params-to-url="false"
-        ><div slot="header" class="header">
+        session-storage-key=${this.name}
+        show-view-more
+        recordCount=${this.totalCount}
+        ?isLoading=${this.isLoading}
+        simple-pagination
+      >
+        <div
+          slot="header"
+          class="header ${this.showHeaderViewAll ? 'view-all' : ''}"
+        >
           <h2>${this.header}</h2>
-          <ix-button
-            type="button"
-            has-icon
-            trailing-icon
-            appearance="text"
-            href=${this.href}
-          >
-            <ix-icon slot="icon">chevron_right</ix-icon>
-            View all
-          </ix-button>
+          <slot name="tabs"></slot>
+          ${this.showHeaderViewAll && this.href
+            ? html `
+                <ix-button
+                  type="button"
+                  has-icon
+                  trailing-icon
+                  appearance="text"
+                  href=${this.href}
+                  data-testid="ix-table-header-view-all"
+                >
+                  <ix-icon slot="icon">chevron_right</ix-icon>
+                  View all
+                </ix-button>
+              `
+            : nothing}
         </div>
+        ${this.showFooterViewAll
+            ? html `
+              <div slot="viewMore">
+                ${this.showViewAll
+                ? html `
+                      <ix-button
+                        data-testid="grid-view-more"
+                        name="view-all-button"
+                        type="button"
+                        appearance="text"
+                        href=${this.href}
+                        has-icon
+                        trailing-icon
+                      >
+                        <ix-icon slot="icon">chevron_right</ix-icon>
+                        <span>${this.viewAllText || 'View all'}</span>
+                      </ix-button>
+                    `
+                : html `
+                      <ix-button
+                        data-testid="grid-view-more"
+                        name="view-more-button"
+                        appearance="text"
+                        @click=${() => {
+                    this.showViewAll = true;
+                    this.rowLimit = 0;
+                    this.pageSize = 10;
+                    this.dispatchEvent(new Event('show-view-more', {
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }}
+                      >
+                        <span>View more</span>
+                      </ix-button>
+                    `}
+              </div>
+            `
+            : nothing}
       </ix-grid>
     </ix-widget>`;
     }
@@ -91,19 +156,26 @@ let IxTableData = class IxTableData extends LitElement {
 IxTableData.styles = css `
     ix-widget {
       --ix-widget-padding: 0;
+      --progress-bar-top: 46px;
     }
     .empty-state {
       padding: 24px;
     }
     .header {
       display: flex;
+      flex-direction: column;
+      gap: 32px;
       -webkit-box-pack: justify;
       justify-content: space-between;
       -webkit-box-align: center;
-      align-items: center;
       width: 100%;
       width: -webkit-fill-available;
+      margin: 8px 6px 16px 8px;
+    }
+    .header.view-all {
+      flex-direction: row;
       margin: 0px -15px 9px 4px;
+      align-items: center;
     }
     h2 {
       margin: 0px;
@@ -178,6 +250,8 @@ IxTableData.styles = css `
     }
     ix-widget.empty {
       --ix-widget-padding: 1rem 11px 22px 24px;
+      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+        #e1e4e8 0px 0px 0px 1px inset;
     }
     ix-widget.empty .content {
       display: flex;
@@ -217,6 +291,9 @@ IxTableData.styles = css `
 __decorate([
     property({ type: Array })
 ], IxTableData.prototype, "columns", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxTableData.prototype, "isLoading", void 0);
 __decorate([
     property({ type: Array })
 ], IxTableData.prototype, "rows", void 0);
@@ -226,9 +303,27 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IxTableData.prototype, "showViewAllButtonOnEmpty", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'header-view-all' })
+], IxTableData.prototype, "showHeaderViewAll", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'footer-view-all' })
+], IxTableData.prototype, "showFooterViewAll", void 0);
+__decorate([
+    property({ type: String, attribute: 'view-all-text' })
+], IxTableData.prototype, "viewAllText", void 0);
 __decorate([
     property({ type: Number })
 ], IxTableData.prototype, "pageSize", void 0);
+__decorate([
+    state()
+], IxTableData.prototype, "showViewAll", void 0);
+__decorate([
+    state()
+], IxTableData.prototype, "rowLimit", void 0);
+__decorate([
+    property({ type: Number, attribute: 'total-count' })
+], IxTableData.prototype, "totalCount", void 0);
 __decorate([
     property({ type: String })
 ], IxTableData.prototype, "header", void 0);
@@ -238,6 +333,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], IxTableData.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], IxTableData.prototype, "name", void 0);
 IxTableData = __decorate([
     customElement('ix-table-data')
 ], IxTableData);

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

@@ -1 +1 @@
-{"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, nothing } 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';\nimport { loader } from './assets/iconset.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    }\n    .empty-state {\n      padding: 24px;\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      width: 100%;\n      width: -webkit-fill-available;\n      margin: 0px -15px 9px 4px;\n    }\n    h2 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n    }\n    h3 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: 1rem;\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n      text-align: center;\n      padding: 1rem;\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    .loader {\n      width: 24px;\n      height: 24px;\n      margin: 1rem auto;\n    }\n    svg {\n      stroke: var(--clr-primary, #1456e0);\n      width: 48px;\n      height: 48px;\n      animation-name: loading;\n      animation-duration: 1000ms;\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n      margin: auto;\n    }\n    @keyframes loading {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    ix-widget.empty .header {\n      margin: 0;\n    }\n    ix-widget.empty {\n      --ix-widget-padding: 1rem 11px 22px 24px;\n    }\n    ix-widget.empty .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: 22px 0 16px;\n    }\n    ix-widget.empty .content.view-all {\n      margin-bottom: 8px;\n    }\n    ix-widget.empty ix-icon.info {\n      user-select: none;\n      width: 48px;\n      height: 44px;\n      --ix-icon-font-size: 48px;\n      --ix-icon-line-height: 1;\n      color: var(--ix-sys-primary, #1456e0);\n    }\n    ix-widget.empty .description p {\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n      text-align: center;\n      margin-bottom: 24px;\n    }\n    ix-widget.empty .description p a {\n      color: var(--clr-primary, #1456e0);\n    }\n  `;\n\n  @property({ type: Array }) columns: string[] = [];\n\n  @property({ type: Array }) rows: string[] | undefined = [];\n\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Boolean }) showViewAllButtonOnEmpty = false;\n\n  @property({ type: Number }) pageSize = 5;\n\n  @property({ type: String }) header = '';\n\n  @property({ type: String }) emptyDescription = '';\n\n  @property({ type: String }) href = '/';\n\n  renderEmptyTable() {\n    return html`<ix-widget class=\"empty\" type=\"empty-table\">\n      <div class=\"header\">\n        <h2>${this.header}</h2>\n        ${this.showViewAllButtonOnEmpty\n          ? html` <ix-button\n              type=\"button\"\n              has-icon\n              trailing-icon\n              appearance=\"text\"\n              href=${this.href}\n            >\n              <ix-icon slot=\"icon\">chevron_right</ix-icon>\n              View all\n            </ix-button>`\n          : nothing}\n      </div>\n      <div\n        class=${`content ${this.showViewAllButtonOnEmpty ? 'view-all' : ''}`}\n      >\n        <ix-icon class=\"info\" filled>info</ix-icon>\n        <div class=\"description\">\n          <p>${this.emptyDescription}</p>\n        </div>\n        ${this.showViewAllButtonOnEmpty\n          ? html` <ix-button type=\"button\" href=${this.href}>\n              View all\n            </ix-button>`\n          : nothing}\n      </div>\n    </ix-widget>`;\n  }\n\n  protected override render() {\n    if (this.disabled) {\n      return this.renderEmptyTable();\n    }\n    if (!this.rows?.length) {\n      return html`<ix-widget type=\"news-feed\">\n        <div class=\"empty-state\">\n          <h2>${this.header}</h2>\n          <div class=\"loader\">${loader}</div>\n        </div>\n      </ix-widget>`;\n    }\n    return html`<ix-widget>\n      <ix-grid\n        variantClass=\"launchpad\"\n        .columns=${this.columns}\n        .rows=${this.rows}\n        .pageSize=${this.pageSize}\n        .rowLimit=${this.rows?.length || 0}\n        ?hide-filters=${true}\n        add-params-to-url=\"false\"\n        ><div slot=\"header\" class=\"header\">\n          <h2>${this.header}</h2>\n          <ix-button\n            type=\"button\"\n            has-icon\n            trailing-icon\n            appearance=\"text\"\n            href=${this.href}\n          >\n            <ix-icon slot=\"icon\">chevron_right</ix-icon>\n            View all\n          </ix-button>\n        </div>\n      </ix-grid>\n    </ix-widget>`;\n  }\n}\n"]}
+{"version":3,"file":"ix-table-data.js","sourceRoot":"","sources":["../src/ix-table-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-grid/ix-grid-nav.js';\nimport '@digital-realty/ix-grid/ix-grid.js';\nimport './ix-widget.js';\nimport { loader } from './assets/iconset.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      --progress-bar-top: 46px;\n    }\n    .empty-state {\n      padding: 24px;\n    }\n    .header {\n      display: flex;\n      flex-direction: column;\n      gap: 32px;\n      -webkit-box-pack: justify;\n      justify-content: space-between;\n      -webkit-box-align: center;\n      width: 100%;\n      width: -webkit-fill-available;\n      margin: 8px 6px 16px 8px;\n    }\n    .header.view-all {\n      flex-direction: row;\n      margin: 0px -15px 9px 4px;\n      align-items: center;\n    }\n    h2 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n    }\n    h3 {\n      margin: 0px;\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: 1rem;\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n      text-align: center;\n      padding: 1rem;\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    .loader {\n      width: 24px;\n      height: 24px;\n      margin: 1rem auto;\n    }\n    svg {\n      stroke: var(--clr-primary, #1456e0);\n      width: 48px;\n      height: 48px;\n      animation-name: loading;\n      animation-duration: 1000ms;\n      animation-iteration-count: infinite;\n      animation-timing-function: linear;\n      margin: auto;\n    }\n    @keyframes loading {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    ix-widget.empty .header {\n      margin: 0;\n    }\n    ix-widget.empty {\n      --ix-widget-padding: 1rem 11px 22px 24px;\n      box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n        #e1e4e8 0px 0px 0px 1px inset;\n    }\n    ix-widget.empty .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: 22px 0 16px;\n    }\n    ix-widget.empty .content.view-all {\n      margin-bottom: 8px;\n    }\n    ix-widget.empty ix-icon.info {\n      user-select: none;\n      width: 48px;\n      height: 44px;\n      --ix-icon-font-size: 48px;\n      --ix-icon-line-height: 1;\n      color: var(--ix-sys-primary, #1456e0);\n    }\n    ix-widget.empty .description p {\n      font-family: var(--text-heading-font, sans-serif);\n      font-size: var(--text-heading-size, 1.25rem);\n      letter-spacing: var(--text-heading-letter-spacing, 0.0075em);\n      line-height: var(--text-heading-line-height, 1.2em);\n      font-weight: var(--text-heading-weight, bold);\n      text-decoration: var(--text-heading-decoration, none);\n      text-transform: var(--text-heading-transform, none);\n      text-align: center;\n      margin-bottom: 24px;\n    }\n    ix-widget.empty .description p a {\n      color: var(--clr-primary, #1456e0);\n    }\n  `;\n\n  @property({ type: Array }) columns: string[] = [];\n\n  @property({ type: Boolean }) isLoading: boolean = false;\n\n  @property({ type: Array }) rows: string[] | undefined = [];\n\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Boolean }) showViewAllButtonOnEmpty = false;\n\n  @property({ type: Boolean, attribute: 'header-view-all' }) showHeaderViewAll =\n    false;\n\n  @property({ type: Boolean, attribute: 'footer-view-all' }) showFooterViewAll =\n    false;\n\n  @property({ type: String, attribute: 'view-all-text' }) viewAllText = '';\n\n  @property({ type: Number }) pageSize = 5;\n\n  @state() showViewAll = false;\n\n  @state() rowLimit: number = 0;\n\n  @property({ type: Number, attribute: 'total-count' }) totalCount = 0;\n\n  @property({ type: String }) header = '';\n\n  @property({ type: String }) emptyDescription = '';\n\n  @property({ type: String }) href = '';\n\n  firstUpdated() {\n    this.rowLimit = this.rows?.length || 0;\n    this.showViewAll = !(this.rowLimit > 0 && this.rowLimit < this.totalCount);\n  }\n\n  @property({ type: String }) name = 'table-data';\n\n  renderEmptyTable() {\n    return html`<ix-widget\n      class=\"empty\"\n      type=\"empty-table\"\n      data-testid=\"no-data-table\"\n    >\n      <div class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\">\n        <h2>${this.header}</h2>\n        <slot name=\"tabs\"></slot>\n      </div>\n      <div\n        class=${`content ${this.showViewAllButtonOnEmpty ? 'view-all' : ''}`}\n      >\n        <ix-icon class=\"info\" filled>info</ix-icon>\n        <div\n          class=\"description\"\n          data-testid=\"ix-table-empty-desc\"\n          role=\"status\"\n        >\n          <p>${this.emptyDescription}</p>\n        </div>\n        ${this.showViewAllButtonOnEmpty && this.href\n          ? html` <ix-button type=\"button\" href=${this.href}>\n              View all\n            </ix-button>`\n          : nothing}\n      </div>\n    </ix-widget>`;\n  }\n\n  protected override render() {\n    if (this.disabled) {\n      return this.renderEmptyTable();\n    }\n    if (!this.rows?.length) {\n      return html`<ix-widget type=\"news-feed\">\n        <div class=\"empty-state\">\n          <h2>${this.header}</h2>\n          <div class=\"loader\">${loader}</div>\n        </div>\n      </ix-widget>`;\n    }\n    return html`<ix-widget>\n      <ix-grid\n        variantClass=\"launchpad\"\n        .columns=${this.columns}\n        .rows=${this.rows}\n        .pageSize=${this.pageSize}\n        rowLimit=${this.rowLimit}\n        ?hide-filters=${true}\n        add-params-to-url=\"false\"\n        session-storage-key=${this.name}\n        show-view-more\n        recordCount=${this.totalCount}\n        ?isLoading=${this.isLoading}\n        simple-pagination\n      >\n        <div\n          slot=\"header\"\n          class=\"header ${this.showHeaderViewAll ? 'view-all' : ''}\"\n        >\n          <h2>${this.header}</h2>\n          <slot name=\"tabs\"></slot>\n          ${this.showHeaderViewAll && this.href\n            ? html`\n                <ix-button\n                  type=\"button\"\n                  has-icon\n                  trailing-icon\n                  appearance=\"text\"\n                  href=${this.href}\n                  data-testid=\"ix-table-header-view-all\"\n                >\n                  <ix-icon slot=\"icon\">chevron_right</ix-icon>\n                  View all\n                </ix-button>\n              `\n            : nothing}\n        </div>\n        ${this.showFooterViewAll\n          ? html`\n              <div slot=\"viewMore\">\n                ${this.showViewAll\n                  ? html`\n                      <ix-button\n                        data-testid=\"grid-view-more\"\n                        name=\"view-all-button\"\n                        type=\"button\"\n                        appearance=\"text\"\n                        href=${this.href}\n                        has-icon\n                        trailing-icon\n                      >\n                        <ix-icon slot=\"icon\">chevron_right</ix-icon>\n                        <span>${this.viewAllText || 'View all'}</span>\n                      </ix-button>\n                    `\n                  : html`\n                      <ix-button\n                        data-testid=\"grid-view-more\"\n                        name=\"view-more-button\"\n                        appearance=\"text\"\n                        @click=${() => {\n                          this.showViewAll = true;\n                          this.rowLimit = 0;\n                          this.pageSize = 10;\n                          this.dispatchEvent(\n                            new Event('show-view-more', {\n                              bubbles: true,\n                              composed: true,\n                            })\n                          );\n                        }}\n                      >\n                        <span>View more</span>\n                      </ix-button>\n                    `}\n              </div>\n            `\n          : nothing}\n      </ix-grid>\n    </ix-widget>`;\n  }\n}\n"]}

package/dist/ix-widget.min.js

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

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

@@ -0,0 +1,146 @@
+export declare const valid: {
+    whatsNews: {
+        id: number;
+        abstract: string;
+        behavior: string;
+        topics: {
+            code: string;
+            icon: string;
+            id: number;
+            name: string;
+        }[];
+        thumbnail: {
+            url: string;
+            alternativeText: string;
+        };
+        video: null;
+        category: {
+            icon: string;
+            image: {
+                url: string;
+                alternativeText: string;
+            };
+            showSortBy: boolean;
+            showFilterByTopic: boolean;
+            subtitle: string;
+            title: string;
+            uid: string;
+        };
+        dateAdded: string;
+        documents: null;
+        duration: null;
+        featured: boolean;
+        text: null;
+        title: string;
+        uid: string;
+    }[];
+    resources: never[];
+    newsAndPromotions: never[];
+    welcomeVideo: {
+        id: number;
+        abstract: string;
+        behavior: null;
+        topics: null;
+        thumbnail: {
+            url: string;
+            alternativeText: string;
+        };
+        video: {
+            url: string;
+        };
+        category: null;
+        dateAdded: string;
+        documents: null;
+        duration: null;
+        featured: boolean;
+        text: null;
+        title: string;
+        uid: string;
+    };
+    release: null;
+};
+export declare const invalidDate: {
+    whatsNews: ({
+        id: number;
+        abstract: string;
+        behavior: string;
+        topics: never[];
+        thumbnail: {
+            url: string;
+            alternativeText: string;
+        };
+        video: null;
+        category: {
+            icon: string;
+            image: {
+                url: string;
+                alternativeText: string;
+            };
+            showSortBy: boolean;
+            showFilterByTopic: boolean;
+            subtitle: string;
+            title: string;
+            uid: string;
+        };
+        dateAdded: string;
+        documents: null;
+        duration: null;
+        featured: boolean;
+        text: null;
+        title: string;
+        uid: string;
+    } | {
+        id: number;
+        abstract: string;
+        behavior: string;
+        topics: never[];
+        thumbnail: {
+            url: string;
+            alternativeText: string;
+        };
+        video: null;
+        category: {
+            icon: string;
+            image: {
+                url: string;
+                alternativeText: string;
+            };
+            showSortBy: boolean;
+            showFilterByTopic: boolean;
+            subtitle: string;
+            title: string;
+            uid: string;
+        };
+        dateAdded: null;
+        documents: null;
+        duration: null;
+        featured: boolean;
+        text: null;
+        title: string;
+        uid: string;
+    })[];
+    resources: never[];
+    newsAndPromotions: never[];
+    welcomeVideo: {
+        id: number;
+        abstract: null;
+        behavior: null;
+        topics: null;
+        thumbnail: {
+            url: string;
+            alternativeText: string;
+        };
+        video: {
+            url: string;
+        };
+        category: null;
+        dateAdded: string;
+        documents: null;
+        duration: number;
+        featured: boolean;
+        text: string;
+        title: string;
+        uid: string;
+    };
+    release: null;
+};