@digital-realty/ix-grid 1.3.2 → 1.4.1-alpha.2

package/src/components/IxGridNav.js

@@ -0,0 +1,103 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@digital-realty/ix-button';
+export class IxGridNavigation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.buttons = [];
+        // eslint-disable-next-line class-methods-use-this
+        this.renderButton = ({ path, text, onClick, testId, disabled, selected, }) => html `
+      <ix-button
+        ?disabled=${disabled}
+        data-testid=${ifDefined(testId)}
+        appearance=${selected ? 'filled' : 'text'}
+        href=${ifDefined(selected ? undefined : path)}
+        @click=${onClick}
+        class="button"
+        style=${selected ? 'pointer-events: none' : ''}
+        ><div class="button-text">${text}</div></ix-button
+      >
+    `;
+    }
+    render() {
+        return html `
+      <div class="container">
+        ${this.buttons.map(button => this.renderButton(button))}
+      </div>
+    `;
+    }
+}
+IxGridNavigation.styles = css `
+    :host {
+      --md-filled-button-container-color: var(
+        --grid-nav-button-container-color,
+        var(--clr-on-surface, #092241)
+      );
+      --md-filled-button-container-height: var(
+        --grid-nav-button-container-height,
+        2.5rem
+      );
+      --md-text-button-container-height: var(
+        --grid-nav-button-container-height,
+        2.5rem
+      );
+      --md-text-button-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-hover-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-pressed-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-focus-label-text-color: var(--clr-on-surface, #092241);
+    }
+
+    [disabled] {
+      --md-filled-button-disabled-container-color: var(
+        --grid-nav-button-disabled-container-color,
+        transparent
+      );
+      --md-filled-button-disabled-label-text-color: var(
+        --grid-nav-button-disabled-container-color,
+        var(--clr-on-surface, #000)
+      );
+    }
+
+    .container {
+      display: var(--grid-nav-button-group-display, flex);
+      gap: var(--grid-nav-button-group-gap, 0.5rem);
+    }
+
+    .button {
+      margin: var(--grid-nav-button-margin, 0);
+    }
+
+    .button-text {
+      text-transform: var(--grid-nav-button-text-transform, none);
+      font-size: var(--grid-nav-button-font-size, 14px);
+      font-family: var(--root-primary-font, 'sans-serif');
+      line-height: 1.5rem;
+    }
+
+    @media only screen and (max-width: 840px) {
+      .container {
+        overflow-x: auto;
+        white-space: nowrap;
+      }
+
+      .button {
+        flex: 0 0 auto;
+      }
+    }
+
+    @media only screen and (max-width: 600px) {
+      .grid-header {
+        align-items: flex-end;
+        flex-direction: row;
+      }
+      .container {
+        overflow-x: auto;
+        max-width: calc(100vw - 2rem);
+      }
+    }
+  `;
+__decorate([
+    property({ type: Array, attribute: false })
+], IxGridNavigation.prototype, "buttons", void 0);

package/src/components/IxGridNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AAWnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QAwE5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE,CACnB,IAAI,CAAA;;oBAEY,QAAQ;sBACN,SAAS,CAAC,MAAM,CAAC;qBAClB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;iBACpC,OAAO;;gBAER,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;oCAClB,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AAlGM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoElB,CAAC;AAtE2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n  testId?: string;\n  path?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n  static styles = css`\n    :host {\n      --md-filled-button-container-color: var(\n        --grid-nav-button-container-color,\n        var(--clr-on-surface, #092241)\n      );\n      --md-filled-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-hover-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-pressed-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-focus-label-text-color: var(--clr-on-surface, #092241);\n    }\n\n    [disabled] {\n      --md-filled-button-disabled-container-color: var(\n        --grid-nav-button-disabled-container-color,\n        transparent\n      );\n      --md-filled-button-disabled-label-text-color: var(\n        --grid-nav-button-disabled-container-color,\n        var(--clr-on-surface, #000)\n      );\n    }\n\n    .container {\n      display: var(--grid-nav-button-group-display, flex);\n      gap: var(--grid-nav-button-group-gap, 0.5rem);\n    }\n\n    .button {\n      margin: var(--grid-nav-button-margin, 0);\n    }\n\n    .button-text {\n      text-transform: var(--grid-nav-button-text-transform, none);\n      font-size: var(--grid-nav-button-font-size, 14px);\n      font-family: var(--root-primary-font, 'sans-serif');\n      line-height: 1.5rem;\n    }\n\n    @media only screen and (max-width: 840px) {\n      .container {\n        overflow-x: auto;\n        white-space: nowrap;\n      }\n\n      .button {\n        flex: 0 0 auto;\n      }\n    }\n\n    @media only screen and (max-width: 600px) {\n      .grid-header {\n        align-items: flex-end;\n        flex-direction: row;\n      }\n      .container {\n        overflow-x: auto;\n        max-width: calc(100vw - 2rem);\n      }\n    }\n  `;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderButton = ({\n    path,\n    text,\n    onClick,\n    testId,\n    disabled,\n    selected,\n  }: IGridNavButton) =>\n    html`\n      <ix-button\n        ?disabled=${disabled}\n        data-testid=${ifDefined(testId)}\n        appearance=${selected ? 'filled' : 'text'}\n        href=${ifDefined(selected ? undefined : path)}\n        @click=${onClick}\n        class=\"button\"\n        style=${selected ? 'pointer-events: none' : ''}\n        ><div class=\"button-text\">${text}</div></ix-button\n      >\n    `;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => this.renderButton(button))}\n      </div>\n    `;\n  }\n}\n"]}

package/src/components/IxGridNoRows.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+export declare class IxGridNoRows extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: 'warning' | 'info' | 'error';
+    icon: string;
+    message: string;
+    iconFontSize: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/components/IxGridNoRows.js

@@ -0,0 +1,74 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+export class IxGridNoRows extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'error';
+        this.icon = 'error';
+        this.message = 'No data to display';
+        this.iconFontSize = '3rem';
+    }
+    render() {
+        return html `
+      <div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
+        <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
+        <h2 class="dlr-text-heading">${this.message}</h2>
+      </div>
+    `;
+    }
+}
+IxGridNoRows.styles = css `
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+      padding: 2.5rem 0;
+    }
+    .icon {
+      user-select: none;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      font-size: 1.5rem;
+      color: rgb(255, 152, 0);
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .warning,
+    .error {
+      user-select: none;
+      color: var(--clr-warning, #ff9800);
+    }
+    .critical {
+      color: var(--clr-critical, #db0028);
+    }
+    h2 {
+      font-family: var(--ix-font-family, 'Red Hat Display');
+    }
+    h2.dlr-text-heading {
+      margin: 0.5rem 0 0;
+      font-family: 'Red Hat Display', sans-serif;
+      font-style: normal;
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: 0em;
+      color: rgb(9, 34, 65);
+      text-align: center;
+      font-weight: 700;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "message", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "iconFontSize", void 0);

package/src/components/IxGridNoRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA2C8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;QAEvC,iBAAY,GAAW,MAAM,CAAC;IAU5D,CAAC;IARC,MAAM;QACJ,OAAO,IAAI,CAAA;2DAC4C,IAAI,CAAC,YAAY;+BAC7C,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;uCACf,IAAI,CAAC,OAAO;;KAE9C,CAAC;IACJ,CAAC;;AAzDM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      text-align: center;\n      padding: 2.5rem 0;\n    }\n    .icon {\n      user-select: none;\n      display: inline-block;\n      fill: currentcolor;\n      flex-shrink: 0;\n      font-size: 1.5rem;\n      color: rgb(255, 152, 0);\n      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    .warning,\n    .error {\n      user-select: none;\n      color: var(--clr-warning, #ff9800);\n    }\n    .critical {\n      color: var(--clr-critical, #db0028);\n    }\n    h2 {\n      font-family: var(--ix-font-family, 'Red Hat Display');\n    }\n    h2.dlr-text-heading {\n      margin: 0.5rem 0 0;\n      font-family: 'Red Hat Display', sans-serif;\n      font-style: normal;\n      font-size: 1.5rem;\n      line-height: 2rem;\n      letter-spacing: 0em;\n      color: rgb(9, 34, 65);\n      text-align: center;\n      font-weight: 700;\n    }\n  `;\n\n  @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';\n\n  @property({ type: String }) icon: string = 'error';\n\n  @property({ type: String }) message: string = 'No data to display';\n\n  @property({ type: String }) iconFontSize: string = '3rem';\n\n  render() {\n    return html`\n      <div class=\"container\" style=\"--ix-icon-font-size: ${this.iconFontSize};\">\n        <ix-icon class=\"icon ${this.type}\">${this.icon}</ix-icon>\n        <h2 class=\"dlr-text-heading\">${this.message}</h2>\n      </div>\n    `;\n  }\n}\n"]}

package/src/components/IxGridRowFilter.d.ts

@@ -0,0 +1,55 @@
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-date/ix-date.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { LitElement } from 'lit';
+import type { Column, DataType } from '../IxGrid.js';
+export interface Filter {
+    columnField: string;
+    operatorValue: string;
+    dataType?: DataType;
+    value: string;
+}
+export declare class IxGridRowFilter extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    columns: Column[];
+    filterValueChangeDebounceTime: number;
+    readParamsFromURL: boolean;
+    maxDate: string;
+    private isDropdownVisible;
+    private filters;
+    private filterableColumns;
+    private filterColumns;
+    private activeFilters;
+    private mapSelect;
+    private fromDateErrorText?;
+    private oldValueLength;
+    private debounceEvent;
+    private debouncedOnFilterValueChange;
+    updateActiveFilters(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    get filterNames(): string[];
+    get unselectedFilters(): string[];
+    closeOnOuterClick: (e: Event) => void;
+    parseFilterQueryString(): Filter[];
+    dispatchUpdate(resetPage?: boolean): void;
+    addFilter(): void;
+    clearFilters(): void;
+    removeFilter(index: number): void;
+    private handlePopState;
+    private onfilterColumnChange;
+    private onfilterOperatorChange;
+    private onDatefilterValueChange;
+    private onfilterValueChange;
+    formatCamelCaseToEnglish(text: string): string;
+    renderToolTip(): string | import("lit-html").TemplateResult<1>;
+    private renderStringInput;
+    private renderDateInput;
+    private renderFilterInputControl;
+    renderFilterInput(value: Filter, index: number): import("lit-html").TemplateResult<1>;
+    renderDropdown(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}