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

package/src/components/IxGridNav.js

@@ -1,103 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,10 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,55 +0,0 @@
-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>;
-}