@digital-realty/ix-grid 1.0.38 → 2.0.0-alpha.0

package/dist/components/IxGridColumnFilter.d.ts

@@ -1,28 +1,28 @@
-import { LitElement } from 'lit';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-import '@digital-realty/ix-switch/ix-switch.js';
-import type { Column } from '../IxGrid.js';
-export declare class IxGridColumnFilter extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
-    columns: Column[];
-    localStorageID: string | undefined;
-    private isDropdownVisible;
-    disabledColumns: string[];
-    dragEvent: {
-        sourceEl: HTMLElement | null;
-        startId: number;
-        targetId: number;
-    };
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    outerInteraction: (e: Event) => void;
-    initializeLocalStorage(): void;
-    toggleColumn(id: number): void;
-    updateColumn(e: Event, id: number): void;
-    dispatchUpdate(columns?: Column[]): void;
-    dragstart(e: DragEvent): void;
-    dragend(): void;
-    dragenter(e: DragEvent): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-switch/ix-switch.js';
+import type { Column } from '../IxGrid.js';
+export declare class IxGridColumnFilter extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    columns: Column[];
+    localStorageID: string | undefined;
+    private isDropdownVisible;
+    disabledColumns: string[];
+    dragEvent: {
+        sourceEl: HTMLElement | null;
+        startId: number;
+        targetId: number;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    outerInteraction: (e: Event) => void;
+    initializeLocalStorage(): void;
+    toggleColumn(id: number): void;
+    updateColumn(e: Event, id: number): void;
+    dispatchUpdate(columns?: Column[]): void;
+    dragstart(e: DragEvent): void;
+    dragend(): void;
+    dragenter(e: DragEvent): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/IxGridColumnFilter.js

@@ -1,139 +1,139 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-import '@digital-realty/ix-switch/ix-switch.js';
-import { IxGridViewStyles } from '../grid-view-styles.js';
-import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
-const triggerKeys = [' ', 'Enter'];
-let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.columns = [];
-        this.localStorageID = undefined;
-        this.isDropdownVisible = false;
-        this.disabledColumns = [];
-        this.dragEvent = {
-            sourceEl: null,
-            startId: -1,
-            targetId: -1,
-        };
-        this.outerInteraction = (e) => {
-            if (!e.composedPath().includes(this)) {
-                this.isDropdownVisible = false;
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('click', this.outerInteraction);
-        this.initializeLocalStorage();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('click', this.outerInteraction);
-    }
-    initializeLocalStorage() {
-        if (this.localStorageID) {
-            const storedDisabledColumns = localStorage.getItem(this.localStorageID);
-            if (storedDisabledColumns) {
-                const disabledColumns = JSON.parse(storedDisabledColumns);
-                this.columns.forEach((column, id) => {
-                    if (disabledColumns.includes(column.name)) {
-                        this.columns[id].hidden = true;
-                    }
-                });
-            }
-            this.dispatchUpdate();
-        }
-    }
-    toggleColumn(id) {
-        this.columns[id].hidden = !this.columns[id].hidden;
-        this.disabledColumns = this.columns
-            .filter((column) => column.hidden)
-            .map((column) => column.name);
-        if (this.localStorageID !== undefined) {
-            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
-        }
-        this.dispatchUpdate();
-    }
-    updateColumn(e, id) {
-        var _a;
-        const input = e.target;
-        const el = (_a = input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-        this.columns[id].hidden = !(el === null || el === void 0 ? void 0 : el.checked);
-        this.disabledColumns = this.columns
-            .filter((column) => column.hidden)
-            .map((column) => column.name);
-        if (this.localStorageID !== undefined) {
-            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
-        }
-        this.dispatchUpdate();
-    }
-    dispatchUpdate(columns = this.columns) {
-        this.dispatchEvent(new CustomEvent('columnFilter', {
-            detail: {
-                columns,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    dragstart(e) {
-        const el = e.target;
-        this.dragEvent.sourceEl = el;
-        el.style.opacity = '0.3';
-        const id = Number(el.getAttribute('data-id'));
-        this.dragEvent.startId = id;
-    }
-    dragend() {
-        var _a;
-        if (this.dragEvent.startId !== this.dragEvent.targetId) {
-            const reorderedColumns = [...this.columns];
-            const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
-            reorderedColumns.splice(this.dragEvent.targetId, 0, el);
-            this.dispatchEvent(new CustomEvent('reorderColumns', {
-                detail: {
-                    reorderedColumns,
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        (_a = this.dragEvent.sourceEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('opacity');
-        this.dragEvent = {
-            sourceEl: null,
-            startId: -1,
-            targetId: -1,
-        };
-    }
-    dragenter(e) {
-        const el = e.target;
-        if (el.classList.contains('drag-target')) {
-            const target = Number(el.getAttribute('data-id'));
-            this.dragEvent.targetId = target;
-        }
-    }
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-switch/ix-switch.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
+const triggerKeys = [' ', 'Enter'];
+let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.localStorageID = undefined;
+        this.isDropdownVisible = false;
+        this.disabledColumns = [];
+        this.dragEvent = {
+            sourceEl: null,
+            startId: -1,
+            targetId: -1,
+        };
+        this.outerInteraction = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this.isDropdownVisible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.outerInteraction);
+        this.initializeLocalStorage();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.outerInteraction);
+    }
+    initializeLocalStorage() {
+        if (this.localStorageID) {
+            const storedDisabledColumns = localStorage.getItem(this.localStorageID);
+            if (storedDisabledColumns) {
+                const disabledColumns = JSON.parse(storedDisabledColumns);
+                this.columns.forEach((column, id) => {
+                    if (disabledColumns.includes(column.name)) {
+                        this.columns[id].hidden = true;
+                    }
+                });
+            }
+            this.dispatchUpdate();
+        }
+    }
+    toggleColumn(id) {
+        this.columns[id].hidden = !this.columns[id].hidden;
+        this.disabledColumns = this.columns
+            .filter((column) => column.hidden)
+            .map((column) => column.name);
+        if (this.localStorageID !== undefined) {
+            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        }
+        this.dispatchUpdate();
+    }
+    updateColumn(e, id) {
+        var _a;
+        const input = e.target;
+        const el = (_a = input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        this.columns[id].hidden = !(el === null || el === void 0 ? void 0 : el.checked);
+        this.disabledColumns = this.columns
+            .filter((column) => column.hidden)
+            .map((column) => column.name);
+        if (this.localStorageID !== undefined) {
+            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        }
+        this.dispatchUpdate();
+    }
+    dispatchUpdate(columns = this.columns) {
+        this.dispatchEvent(new CustomEvent('columnFilter', {
+            detail: {
+                columns,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dragstart(e) {
+        const el = e.target;
+        this.dragEvent.sourceEl = el;
+        el.style.opacity = '0.3';
+        const id = Number(el.getAttribute('data-id'));
+        this.dragEvent.startId = id;
+    }
+    dragend() {
+        var _a;
+        if (this.dragEvent.startId !== this.dragEvent.targetId) {
+            const reorderedColumns = [...this.columns];
+            const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
+            reorderedColumns.splice(this.dragEvent.targetId, 0, el);
+            this.dispatchEvent(new CustomEvent('reorderColumns', {
+                detail: {
+                    reorderedColumns,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        (_a = this.dragEvent.sourceEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('opacity');
+        this.dragEvent = {
+            sourceEl: null,
+            startId: -1,
+            targetId: -1,
+        };
+    }
+    dragenter(e) {
+        const el = e.target;
+        if (el.classList.contains('drag-target')) {
+            const target = Number(el.getAttribute('data-id'));
+            this.dragEvent.targetId = target;
+        }
+    }
+    render() {
         return html `<div class="grid-menu">
       <span
-        @click=${() => {
-            this.isDropdownVisible = true;
+        @click=${() => {
+            this.isDropdownVisible = true;
         }}
-        @keyDown=${(e) => {
-            if (triggerKeys.includes(e.key)) {
-                this.isDropdownVisible = true;
-            }
+        @keyDown=${(e) => {
+            if (triggerKeys.includes(e.key)) {
+                this.isDropdownVisible = true;
+            }
         }}
         class="list list-dropdown"
       >
         <ix-icon-button appearance="default" icon="list"></ix-icon-button>
-        ${this.disabledColumns.length > 0
-            ? html `<div class="active"></div>`
+        ${this.disabledColumns.length > 0
+            ? html `<div class="active"></div>`
             : nothing}
-        ${this.isDropdownVisible
+        ${this.isDropdownVisible
             ? html ` <div
               class="dropdown-content"
               @dragover=${(e) => e.preventDefault()}
@@ -158,30 +158,30 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
                     <ix-icon class="draggable">drag_handle</ix-icon>
                   </label>
                 </div>`)}
-            </div>`
+            </div>`
             : nothing}
       </span>
-    </div>`;
-    }
-};
-IxGridColumnFilter.styles = [IxGridViewStyles, IxGridColumnFilterStyles];
-__decorate([
-    property({ type: Array })
-], IxGridColumnFilter.prototype, "columns", void 0);
-__decorate([
-    property({ type: String })
-], IxGridColumnFilter.prototype, "localStorageID", void 0);
-__decorate([
-    state()
-], IxGridColumnFilter.prototype, "isDropdownVisible", void 0);
-__decorate([
-    state()
-], IxGridColumnFilter.prototype, "disabledColumns", void 0);
-__decorate([
-    state()
-], IxGridColumnFilter.prototype, "dragEvent", void 0);
-IxGridColumnFilter = __decorate([
-    customElement('ix-grid-column-filter')
-], IxGridColumnFilter);
-export { IxGridColumnFilter };
+    </div>`;
+    }
+};
+IxGridColumnFilter.styles = [IxGridViewStyles, IxGridColumnFilterStyles];
+__decorate([
+    property({ type: Array })
+], IxGridColumnFilter.prototype, "columns", void 0);
+__decorate([
+    property({ type: String })
+], IxGridColumnFilter.prototype, "localStorageID", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "isDropdownVisible", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "disabledColumns", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "dragEvent", void 0);
+IxGridColumnFilter = __decorate([
+    customElement('ix-grid-column-filter')
+], IxGridColumnFilter);
+export { IxGridColumnFilter };
 //# sourceMappingURL=IxGridColumnFilter.js.map

package/dist/components/IxGridDownloadMenu.d.ts

@@ -1,12 +1,12 @@
-import { LitElement } from 'lit';
-import { IxMenu } from '@digital-realty/ix-menu';
-import '@digital-realty/ix-menu/ix-menu.js';
-import '@digital-realty/ix-menu/ix-menu-item.js';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-export declare class IxGridDownloadMenu extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
-    downloadMenu: IxMenu;
-    downloadMenuAnchor: HTMLElement;
-    toggleMenu(): void;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import { IxMenu } from '@digital-realty/ix-menu';
+import '@digital-realty/ix-menu/ix-menu.js';
+import '@digital-realty/ix-menu/ix-menu-item.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+export declare class IxGridDownloadMenu extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    downloadMenu: IxMenu;
+    downloadMenuAnchor: HTMLElement;
+    toggleMenu(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/IxGridDownloadMenu.js

@@ -1,16 +1,16 @@
-import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import '@digital-realty/ix-menu/ix-menu.js';
-import '@digital-realty/ix-menu/ix-menu-item.js';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import { IxGridViewStyles } from '../grid-view-styles.js';
-import { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';
-let IxGridDownloadMenu = class IxGridDownloadMenu extends LitElement {
-    toggleMenu() {
-        this.downloadMenu.open = !this.downloadMenu.open;
-    }
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import '@digital-realty/ix-menu/ix-menu.js';
+import '@digital-realty/ix-menu/ix-menu-item.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';
+let IxGridDownloadMenu = class IxGridDownloadMenu extends LitElement {
+    toggleMenu() {
+        this.downloadMenu.open = !this.downloadMenu.open;
+    }
+    render() {
         return html ` <div style="position: relative">
       <ix-icon-button
         icon="download"
@@ -19,36 +19,36 @@ let IxGridDownloadMenu = class IxGridDownloadMenu extends LitElement {
       ></ix-icon-button>
       <ix-menu id="menu" anchor="anchor" has-overflow>
         <ix-menu-item
-          @click=${() => this.dispatchEvent(new CustomEvent('download', {
-            detail: 'all',
-            bubbles: true,
-            composed: true,
+          @click=${() => this.dispatchEvent(new CustomEvent('download', {
+            detail: 'all',
+            bubbles: true,
+            composed: true,
         }))}
         >
           <div slot="headline">Download All Records</div>
         </ix-menu-item>
         <ix-menu-item
-          @click=${() => this.dispatchEvent(new CustomEvent('download', {
-            detail: 'filter',
-            bubbles: true,
-            composed: true,
+          @click=${() => this.dispatchEvent(new CustomEvent('download', {
+            detail: 'filter',
+            bubbles: true,
+            composed: true,
         }))}
         >
           <div slot="headline">Download Current Filter</div>
         </ix-menu-item>
       </ix-menu>
-    </div>`;
-    }
-};
-IxGridDownloadMenu.styles = [IxGridViewStyles, IxGridDownloadMenuStyles];
-__decorate([
-    query('#menu')
-], IxGridDownloadMenu.prototype, "downloadMenu", void 0);
-__decorate([
-    query('#anchor')
-], IxGridDownloadMenu.prototype, "downloadMenuAnchor", void 0);
-IxGridDownloadMenu = __decorate([
-    customElement('ix-grid-download-menu')
-], IxGridDownloadMenu);
-export { IxGridDownloadMenu };
+    </div>`;
+    }
+};
+IxGridDownloadMenu.styles = [IxGridViewStyles, IxGridDownloadMenuStyles];
+__decorate([
+    query('#menu')
+], IxGridDownloadMenu.prototype, "downloadMenu", void 0);
+__decorate([
+    query('#anchor')
+], IxGridDownloadMenu.prototype, "downloadMenuAnchor", void 0);
+IxGridDownloadMenu = __decorate([
+    customElement('ix-grid-download-menu')
+], IxGridDownloadMenu);
+export { IxGridDownloadMenu };
 //# sourceMappingURL=IxGridDownloadMenu.js.map

package/dist/components/IxGridNav.d.ts

@@ -1,15 +1,15 @@
-import { LitElement } from 'lit';
-import '@digital-realty/ix-button';
-export interface IGridNavButton {
-    path?: string;
-    selected?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
-    text: string;
-}
-export declare class IxGridNavigation extends LitElement {
-    buttons: IGridNavButton[];
-    static styles: import("lit").CSSResult;
-    renderButton: ({ path, text, onClick, disabled, selected, }: IGridNavButton) => import("lit").TemplateResult<1>;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@digital-realty/ix-button';
+export interface IGridNavButton {
+    path?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    text: string;
+}
+export declare class IxGridNavigation extends LitElement {
+    buttons: IGridNavButton[];
+    static styles: import("lit").CSSResult;
+    renderButton: ({ path, text, onClick, disabled, selected, }: IGridNavButton) => import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/IxGridNav.js

@@ -1,13 +1,13 @@
-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
+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, disabled, selected, }) => html `
       <ix-button
         ?disabled=${disabled}
@@ -17,16 +17,16 @@ export class IxGridNavigation extends LitElement {
         class="button"
         ><div class="button-text">${text}</div></ix-button
       >
-    `;
-    }
-    render() {
+    `;
+    }
+    render() {
         return html `
       <div class="container">
         ${this.buttons.map(button => this.renderButton(button))}
       </div>
-    `;
-    }
-}
+    `;
+    }
+}
 IxGridNavigation.styles = css `
     :host {
       --md-filled-button-container-color: var(
@@ -70,8 +70,8 @@ IxGridNavigation.styles = css `
     .button-text {
       text-transform: var(--grid-nav-button-text-transform, none);
     }
-  `;
-__decorate([
-    property({ type: Array, attribute: false })
-], IxGridNavigation.prototype, "buttons", void 0);
+  `;
+__decorate([
+    property({ type: Array, attribute: false })
+], IxGridNavigation.prototype, "buttons", void 0);
 //# sourceMappingURL=IxGridNav.js.map