@digital-realty/ix-grid 1.0.50 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{react/IxGridNav.d.ts → IxGridNav.d.ts} +1 -1
- package/dist/{react/IxGridNav.js → IxGridNav.js} +1 -1
- package/dist/IxGridNav.js.map +1 -0
- package/dist/components/IxGridNoRows.js +1 -1
- package/dist/components/IxGridNoRows.js.map +1 -1
- package/dist/components/grid-row-filter-styles.js +1 -1
- package/dist/components/grid-row-filter-styles.js.map +1 -1
- package/dist/ix-grid-nav.js +3 -0
- package/dist/ix-grid-nav.js.map +1 -0
- package/dist/ix-grid-no-rows.d.ts +1 -0
- package/dist/ix-grid-no-rows.js +3 -0
- package/dist/ix-grid-no-rows.js.map +1 -0
- package/dist/ix-grid.min.js +1 -1
- package/dist/test/ix-grid.test.d.ts +1 -1
- package/dist/test/ix-grid.test.js +1 -1
- package/dist/test/ix-grid.test.js.map +1 -1
- package/package.json +6 -6
- package/src/{react/IxGridNav.ts → IxGridNav.ts} +1 -1
- package/src/components/IxGridNoRows.ts +1 -1
- package/src/components/grid-row-filter-styles.ts +1 -1
- package/src/{components/ix-grid-nav.ts → ix-grid-nav.ts} +1 -1
- package/src/ix-grid-no-rows.ts +3 -0
- package/src/test/ix-grid.test.ts +1 -1
- package/dist/components/ix-grid-nav.js +0 -3
- package/dist/components/ix-grid-nav.js.map +0 -1
- package/dist/react/IxGridNav.js.map +0 -1
- /package/dist/{components/ix-grid-nav.d.ts → ix-grid-nav.d.ts} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IxGridNavigation } from '
|
|
1
|
+
import { IxGridNavigation } from './components/IxGridNav.js';
|
|
2
2
|
export declare const IxGridNav: import("@lit/react").ReactWebComponent<IxGridNavigation, {}>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxGridNavigation } from '
|
|
3
|
+
import { IxGridNavigation } from './components/IxGridNav.js';
|
|
4
4
|
export const IxGridNav = createComponent({
|
|
5
5
|
tagName: 'ix-grid-nav',
|
|
6
6
|
elementClass: IxGridNavigation,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../src/IxGridNav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { IxGridNavigation } from './components/IxGridNav.js';\n\nexport const IxGridNav = createComponent({\n tagName: 'ix-grid-nav',\n elementClass: IxGridNavigation,\n react: React,\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/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: 3.125rem 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:
|
|
1
|
+
{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/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: 3.125rem 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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-row-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-row-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAubvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridRowFilterStyles = css`\n .slot-wrap {\n display: flex;\n }\n\n .slot-wrap ix-icon {\n --ix-icon-font-size: 24px;\n color: rgb(20, 86, 224);\n margin-right: 5px;\n }\n\n .grid-menu ix-button .filter {\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n margin-top: 2px;\n }\n\n .filter-form {\n white-space: nowrap;\n padding: 9px;\n font-family: 'Open Sans', sans-serif;\n color: #5d6d82;\n }\n\n .filter-form-column {\n display: inline-block;\n vertical-align: middle;\n }\n\n .filter-remove span {\n margin-right: 0px;\n color: #5d6d82;\n }\n\n .filter-dropdown-content {\n position: absolute;\n display: inline;\n right: 0;\n top: 78%;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 3;\n transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n background-color: #ffffff;\n }\n\n .filter-form input,\n .filter-form select,\n .filter-form option {\n border-radius: 0px;\n cursor: pointer;\n letter-spacing: 1.44px;\n line-height: 1.4375em;\n box-sizing: content-box;\n background: none;\n height: 1.4375em;\n margin: 0px;\n animation-name: mui-auto-fill-cancel;\n animation-duration: 10ms;\n border: none;\n border-image: initial;\n font-size: 16px;\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n color: currentcolor;\n -webkit-tap-highlight-color: transparent;\n display: block;\n min-width: 0px;\n width: 100%;\n font-family: 'Open Sans', sans-serif;\n height: 25px;\n border-bottom: 1px solid black;\n }\n\n .filter-form option {\n -webkit-tap-highlight-color: #9ca6b2;\n }\n\n .filter-form input:hover,\n .filter-form select:hover {\n outline: none !important;\n border-bottom: 2px solid black;\n }\n\n .filter-form input:focus,\n .filter-form select:focus {\n outline: none !important;\n border-bottom: 2px solid #1456e0;\n }\n\n .filter-form select:focus {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: 'Open Sans', sans-serif;\n }\n\n .form-group label {\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.4375em;\n letter-spacing: 0.44px;\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label span {\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.4375em;\n letter-spacing: 0.44px;\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label:focus-within span {\n color: #1456e0;\n }\n\n .filter-form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: 'Open Sans', sans-serif;\n }\n\n option {\n font-weight: normal;\n display: block;\n min-height: 1.2em;\n padding: 0px 2px 1px;\n white-space: nowrap;\n }\n\n .add-filter-button .add {\n margin-right: 0px;\n margin-left: -6px;\n }\n\n .filter-footer {\n margin-top: auto;\n display: flex;\n align-items: left;\n padding: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n width: 100%;\n }\n\n .filter-footer button {\n align-items: center !important;\n margin-left: 0px;\n }\n\n .filter-footer .add {\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n }\n\n .filter-footer .clear {\n margin-left: auto !important;\n }\n\n .form-group .close {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.25rem;\n font-weight: lighter;\n }\n\n .no-display {\n display: none;\n }\n\n .filter-local-operator-empty {\n width: 54px;\n border: none;\n }\n\n .grid-menu span.filter-superscript {\n position: absolute;\n top: 6px;\n left: 14px;\n z-index: 98;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n padding: 0;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background-color: #1456e0;\n color: #ffffff;\n }\n\n .filterlist {\n width: 40px;\n }\n\n .filterColumnField {\n width: 150px;\n }\n\n .filterValueField {\n width: 190px;\n }\n\n .filterOperatorField {\n width: 120px;\n }\n\n .add-filter-button.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n select:hover {\n cursor: pointer;\n }\n\n input:hover {\n cursor: text;\n }\n\n .tooltip-container {\n position: relative;\n display: inline-block;\n }\n\n .tool-tip {\n color: #ffffff;\n overflow-wrap: break-word;\n border-radius: 3px;\n background-color: #071454;\n padding: 5px 8px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n position: absolute;\n top: 42px;\n right: 0;\n z-index: 3;\n white-space: nowrap;\n display: none;\n }\n\n .filter-button:hover ~ .tool-tip {\n display: block;\n }\n\n .tool-tip li {\n margin-left: -21px;\n color: #ffffff;\n overflow-wrap: break-word;\n border-radius: 3px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n max-width: 250px;\n min-width: 200px;\n white-space: wrap;\n }\n\n .tool-tip p {\n margin: 0;\n padding: 0;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n }\n\n .add-filter-button {\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #ffffff;\n min-width: 64px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n border-radius: 100px;\n background-color: unset;\n }\n\n .add-filter-button:disabled,\n .clear:disabled {\n opacity: 0.25;\n cursor: not-allowed;\n }\n\n button {\n -webkit-box-align: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #ffffff;\n min-width: 64px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n border-radius: 100px;\n background-color: unset;\n }\n\n ix-button.filter-button {\n padding-inline: 0;\n }\n\n .grid-menu ix-button {\n align-items: center;\n display: flex;\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"grid-row-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-row-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAubvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridRowFilterStyles = css`\n .slot-wrap {\n display: flex;\n }\n\n .slot-wrap ix-icon {\n --ix-icon-font-size: 24px;\n color: rgb(20, 86, 224);\n margin-right: 5px;\n }\n\n .grid-menu ix-button .filter {\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n margin-top: 2px;\n }\n\n .filter-form {\n white-space: nowrap;\n padding: 9px;\n font-family: 'Open Sans', sans-serif;\n color: #5d6d82;\n }\n\n .filter-form-column {\n display: inline-block;\n vertical-align: middle;\n }\n\n .filter-remove span {\n margin-right: 0px;\n color: #5d6d82;\n }\n\n .filter-dropdown-content {\n position: absolute;\n display: inline;\n right: 0;\n top: 78%;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 3;\n transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n background-color: #ffffff;\n }\n\n .filter-form input,\n .filter-form select,\n .filter-form option {\n border-radius: 0px;\n cursor: pointer;\n letter-spacing: 1.44px;\n line-height: 1.4375em;\n box-sizing: content-box;\n background: none;\n height: 1.4375em;\n margin: 0px;\n animation-name: mui-auto-fill-cancel;\n animation-duration: 10ms;\n border: none;\n border-image: initial;\n font-size: 16px;\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n color: currentcolor;\n -webkit-tap-highlight-color: transparent;\n display: block;\n min-width: 0px;\n width: 100%;\n font-family: 'Open Sans', sans-serif;\n height: 25px;\n border-bottom: 1px solid black;\n }\n\n .filter-form option {\n -webkit-tap-highlight-color: #9ca6b2;\n }\n\n .filter-form input:hover,\n .filter-form select:hover {\n outline: none !important;\n border-bottom: 2px solid black;\n }\n\n .filter-form input:focus,\n .filter-form select:focus {\n outline: none !important;\n border-bottom: 2px solid #1456e0;\n }\n\n .filter-form select:focus {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: 'Open Sans', sans-serif;\n }\n\n .form-group label {\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.4375em;\n letter-spacing: 0.44px;\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label span {\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n line-height: 1.4375em;\n letter-spacing: 0.44px;\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label:focus-within span {\n color: #1456e0;\n }\n\n .filter-form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: 'Open Sans', sans-serif;\n }\n\n option {\n font-weight: normal;\n display: block;\n min-height: 1.2em;\n padding: 0px 2px 1px;\n white-space: nowrap;\n }\n\n .add-filter-button .add {\n margin-right: 0px;\n margin-left: -6px;\n }\n\n .filter-footer {\n margin-top: auto;\n display: flex;\n align-items: left;\n padding: 0px;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n width: 100%;\n }\n\n .filter-footer button {\n align-items: center !important;\n margin-left: 0px;\n }\n\n .filter-footer .add {\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n }\n\n .filter-footer .clear {\n margin-left: auto !important;\n }\n\n .form-group .close {\n user-select: none;\n width: 1em;\n height: 1em;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n font-size: 1.25rem;\n font-weight: lighter;\n }\n\n .no-display {\n display: none;\n }\n\n .filter-local-operator-empty {\n width: 54px;\n border: none;\n }\n\n .grid-menu span.filter-superscript {\n position: absolute;\n top: 6px;\n left: 14px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n padding: 0;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background-color: #1456e0;\n color: #ffffff;\n }\n\n .filterlist {\n width: 40px;\n }\n\n .filterColumnField {\n width: 150px;\n }\n\n .filterValueField {\n width: 190px;\n }\n\n .filterOperatorField {\n width: 120px;\n }\n\n .add-filter-button.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n select:hover {\n cursor: pointer;\n }\n\n input:hover {\n cursor: text;\n }\n\n .tooltip-container {\n position: relative;\n display: inline-block;\n }\n\n .tool-tip {\n color: #ffffff;\n overflow-wrap: break-word;\n border-radius: 3px;\n background-color: #071454;\n padding: 5px 8px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n position: absolute;\n top: 42px;\n right: 0;\n z-index: 3;\n white-space: nowrap;\n display: none;\n }\n\n .filter-button:hover ~ .tool-tip {\n display: block;\n }\n\n .tool-tip li {\n margin-left: -21px;\n color: #ffffff;\n overflow-wrap: break-word;\n border-radius: 3px;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n max-width: 250px;\n min-width: 200px;\n white-space: wrap;\n }\n\n .tool-tip p {\n margin: 0;\n padding: 0;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n letter-spacing: 0.4px;\n }\n\n .add-filter-button {\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #ffffff;\n min-width: 64px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n border-radius: 100px;\n background-color: unset;\n }\n\n .add-filter-button:disabled,\n .clear:disabled {\n opacity: 0.25;\n cursor: not-allowed;\n }\n\n button {\n -webkit-box-align: center;\n -webkit-box-pack: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: 0px;\n border: 0px;\n margin: 0px;\n cursor: pointer;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n text-decoration: none;\n font-family: 'Red Hat Display', sans-serif;\n font-weight: 700;\n font-style: normal;\n font-size: 14px;\n line-height: 18.52px;\n letter-spacing: 1.25px;\n text-transform: uppercase;\n color: #ffffff;\n min-width: 64px;\n transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n box-shadow: none;\n min-height: 36px;\n border-radius: 100px;\n background-color: unset;\n }\n\n ix-button.filter-button {\n padding-inline: 0;\n }\n\n .grid-menu ix-button {\n align-items: center;\n display: flex;\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ix-grid-nav.js","sourceRoot":"","sources":["../src/ix-grid-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["import { IxGridNavigation } from './components/IxGridNav.js';\n\nwindow.customElements.define('ix-grid-nav', IxGridNavigation);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ix-grid-no-rows.js","sourceRoot":"","sources":["../src/ix-grid-no-rows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { IxGridNoRows } from './components/IxGridNoRows.js';\n\nwindow.customElements.define('ix-grid-no-rows', IxGridNoRows);\n"]}
|
package/dist/ix-grid.min.js
CHANGED
|
@@ -3,6 +3,6 @@ import{__decorate}from"tslib";import{css,LitElement,html,svg,nothing}from"lit";i
|
|
|
3
3
|
12px
|
|
4
4
|
)}.pagination{display:flex;align-items:center;justify-content:end;gap:0;font-size:12px;margin:1rem}.pagination-nav{display:flex;margin-left:2rem}.rows-per-page{color:var(--ix-text-dark-second,rgba(9,34,65,.6))}ix-icon-button{--md-icon-button-icon-color:black;--md-icon-button-hover-icon-color:black;--md-icon-button-pressed-icon-color:black;--md-icon-button-focus-icon-color:black;--ix-icon-line-height:1}ix-select{--md-menu-container-color:#fff;--md-filled-select-text-field-container-color:#fff;--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:rgb(20, 86, 224);--md-filled-select-text-field-focus-active-indicator-color:var(
|
|
5
5
|
--md-filled-select-text-field-focus-trailing-icon-color
|
|
6
|
-
)}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`),copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"},IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}},IxGridColumnFilterStyles=(IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination),css`.dropdown-content{position:absolute;background-color:#fff;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--md-sys-color-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:0 0 0 6px;--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;--md-switch-selected-handle-width:20px;--md-switch-selected-handle-height:20px;display:flex;width:48px}.list{position:relative}`),triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(e=>e.hidden).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><div class="draggable">${handleIcon}</div></label></div>`)}</div>`:nothing}</span></div>`}},IxGridRowFilterStyles=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",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),css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:98;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`),IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var i=[];for(let[t,e]of new URLSearchParams(window.location.search)){var o=(null==(o=this.filterableColumns.find(e=>e.name===t))?void 0:o.filterOperators)||["contains"];this.filterColumns.includes(t)&&i.push({columnField:t,operatorValue:o[0],value:e})}return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){let e,t=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var i=(null==(e=this.filterableColumns.find(e=>e.name===t))?void 0:e.filterOperators)||["contains"];this.filters=[...this.filters,{columnField:t,operatorValue:i[0],value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target.value,t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){let e,o,r=[t.columnField,...this.unselectedFilters];var l=this.filterableColumns.filter(e=>r.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
|
|
6
|
+
)}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`),copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"},IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}},IxGridColumnFilterStyles=(IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination),css`.dropdown-content{position:absolute;background-color:#fff;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--md-sys-color-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:0 0 0 6px;--md-switch-selected-handle-color:var(--ix-sys-primary);--md-switch-selected-pressed-handle-color:var(--ix-sys-primary);--md-switch-selected-hover-handle-color:var(--ix-sys-primary);--md-switch-selected-focus-handle-color:var(--ix-sys-primary);--md-switch-selected-track-color:#7ba0ee;--md-switch-selected-pressed-track-color:#7ba0ee;--md-switch-selected-hover-track-color:#7ba0ee;--md-switch-selected-focus-track-color:#7ba0ee;--md-switch-track-height:14px;--md-switch-track-width:36px;--md-switch-track-outline-width:0;--md-switch-handle-color:white;--md-switch-pressed-handle-color:white;--md-switch-hover-handle-color:white;--md-switch-focus-handle-color:white;--md-switch-handle-width:20px;--md-switch-handle-height:20px;--md-switch-selected-handle-width:20px;--md-switch-selected-handle-height:20px;display:flex;width:48px}.list{position:relative}`),triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(e=>e.hidden).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><div class="draggable">${handleIcon}</div></label></div>`)}</div>`:nothing}</span></div>`}},IxGridRowFilterStyles=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",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),css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`),IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var i=[];for(let[t,e]of new URLSearchParams(window.location.search)){var o=(null==(o=this.filterableColumns.find(e=>e.name===t))?void 0:o.filterOperators)||["contains"];this.filterColumns.includes(t)&&i.push({columnField:t,operatorValue:o[0],value:e})}return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){let e,t=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var i=(null==(e=this.filterableColumns.find(e=>e.name===t))?void 0:e.filterOperators)||["contains"];this.filters=[...this.filters,{columnField:t,operatorValue:i[0],value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target.value,t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){let e,o,r=[t.columnField,...this.unselectedFilters];var l=this.filterableColumns.filter(e=>r.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
|
|
7
7
|
`)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${l.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${l.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
|
|
8
8
|
`)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(l,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(o=null==(e=l.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?o:["contains"],e=>html`<option value="${e}" ?selected="${e===t.columnField}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),this.variantClass="",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.downloadMenuItems=[],this.addParamsToURL=!0,this.filters=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=e=>html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="header">${e.header} ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`,this.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this.arrangedColumns}" columnsLocalStorageKey="${ifDefined(this.columnsLocalStorageKey)}" @columnFilter="${e=>this.handleOnColumnFilter(e)}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu .items="${this.downloadMenuItems}"></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this.columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon></ix-button></div>`,this.renderPaginationControls=()=>html`<ix-pagination .page="${this.page}" .pageSize="${this.pageSize}" .pageSizes="${this.pageSizes}" .recordCount="${this.recordCount}" @updatePagination="${e=>{this.page=e.detail.page,this.pageSize=e.detail.pageSize,this.updatePage()}}"></ix-pagination>`}get isPersistable(){return!!this.localStorageID}get columnNames(){return this.columns.map(e=>e.name)}get columnsLocalStorageKey(){return`ix-grid-${this.localStorageID}-columns`}get arrangedColumns(){let e=[];var t;return(e=0===(e=this.isPersistable&&0<(t=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]")).length?t.map(t=>({...this.columns.find(e=>e.name===t.name),hidden:t.hidden,frozenToEnd:t.frozenToEnd,width:t.width||void 0})):e).length?[...this.columns]:e).filter(e=>e).map(e=>({...e,width:e.width||void 0}))}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}setColumnsToLocalStorage(e){this.isPersistable&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify(e))}async reorderColumnsFromTable(){var t=this.arrangedColumns.filter(e=>!0!==e.hidden),o=this.arrangedColumns.filter(e=>!0===e.hidden),r=this.arrangedColumns.filter(e=>!0===e.frozenToEnd);let l=[...t.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r];t=Array.from((null==(t=null==(t=this.grid)?void 0:t.shadowRoot)?void 0:t.querySelectorAll("th"))||[]);if(t.length){let i=t.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);let e=[];i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>l[e]),this.columns=[...e.filter(e=>!0!==e.hidden&&!0!==(null==e?void 0:e.frozenToEnd)),...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r],this.isLoading=!0,await this.updateComplete,this.isLoading=!1),this.setColumnsToLocalStorage(0<e.length?[...this.columns]:[...l])}}async reorderColumnsFromFilter(e){this.columns=[...e.detail.reorderedColumns],this.setColumnsToLocalStorage([...this.columns]),this.isLoading=!0,await this.updateComplete,this.isLoading=!1}handleOnColumnFilter(e){e.detail.columns.forEach((e,t)=>{this.columns[t].hidden=null==e?void 0:e.hidden}),this.updatePage()}renderColumns(){return 0<this.arrangedColumns.length?html`${this.arrangedColumns.map(e=>!0===e.hidden?nothing:html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}" path="${e.name}"></vaadin-grid-column>`)}`:html`<vaadin-grid-column></vaadin-grid-column>`}render(){return html`<div class="${`grid-container ${this.isLoading?"loading":""} `+this.variantClass}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows}" all-rows-visible column-reordering-allowed theme="no-border" @mouseup="${this.reorderColumnsFromTable}">${this.renderColumns()}</vaadin-grid>${0!==this.rows.length||this.isLoading?nothing:html`<slot name="no-rows"></slot>`}`} ${0<this.rowLimit?this.renderRowLimitControls():this.renderPaginationControls()}<slot name="footer"></slot></div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",void 0),__decorate([property({type:String})],IxGrid.prototype,"variantClass",void 0),__decorate([property({type:Array})],IxGrid.prototype,"columns",void 0),__decorate([property({type:Array})],IxGrid.prototype,"rows",void 0),__decorate([property({type:String})],IxGrid.prototype,"defaultEmptyText",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortedColumn",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortDirection",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideHeader",void 0),__decorate([property({type:Boolean,attribute:"hide-filters"})],IxGrid.prototype,"hideFilters",void 0),__decorate([property({type:Number})],IxGrid.prototype,"rowLimit",void 0),__decorate([property({type:Number})],IxGrid.prototype,"page",void 0),__decorate([property({type:Number})],IxGrid.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxGrid.prototype,"pageSizes",void 0),__decorate([property({type:Number})],IxGrid.prototype,"recordCount",void 0),__decorate([property({type:String})],IxGrid.prototype,"localStorageID",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showDownload",void 0),__decorate([property({type:Array})],IxGrid.prototype,"downloadMenuItems",void 0),__decorate([property({type:Boolean,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"isLoading",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),window.customElements.define("ix-grid",IxGrid);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import '../
|
|
1
|
+
import '../ix-grid-no-rows.js';
|
|
2
2
|
import '../ix-grid.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,
|
|
1
|
+
{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,IAAI;gBACF,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,EAAE;;gBAEA,CAAC,CAAC;QAEd,MAAM,MAAM,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACpE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../ix-grid-no-rows.js';\nimport '../ix-grid.js';\n\nconst rows = [\n {\n name: 'one',\n },\n {\n name: 'two',\n },\n {\n name: 'three',\n },\n];\n\nconst columns = [\n {\n name: 'one',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n {\n name: 'two',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n {\n name: 'three',\n header: 'one',\n bodyRenderer: row => html` <span>${row.name}</span>`,\n },\n];\n\ndescribe('IxGrid', () => {\n it('renders a grid', async () => {\n const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n expect(el).to.not.be.null;\n });\n\n it('renders the correct number of rows', async () => {\n const el = await fixture<IxGrid>(html`<ix-grid\n .columns=${columns}\n .rows=${rows}\n ></ix-grid>`);\n\n expect(rows.length).to.equal(3);\n\n expect(el).to.not.be.null;\n });\n\n it('renders no rows component state', async () => {\n const el = await fixture<IxGrid>(html`<ix-grid\n .columns=${columns}\n .rows=${[]}\n ><ix-grid-no-rows slot=\"no-rows\"></ix-grid-no-rows\n ></ix-grid>`);\n\n const noRows = el.shadowRoot?.querySelector('slot[name=\"no-rows\"]');\n expect(noRows).to.not.be.null;\n });\n});\n"]}
|
package/package.json
CHANGED
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
"description": "Webcomponent ix-grid following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.52",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./ix-grid.js": "./dist/ix-grid.js",
|
|
13
|
-
"./ix-grid-nav.js": "./dist/
|
|
13
|
+
"./ix-grid-nav.js": "./dist/ix-grid-nav.js",
|
|
14
14
|
"./ix-grid.min.js": "./dist/ix-grid.min.js",
|
|
15
|
-
"./ix-grid-no-rows.js": "./dist/
|
|
16
|
-
"./IxGridNav": "./dist/
|
|
15
|
+
"./ix-grid-no-rows.js": "./dist/ix-grid-no-rows.js",
|
|
16
|
+
"./IxGridNav": "./dist/IxGridNav.js"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@digital-realty/ix-button": "^3.2.31",
|
|
33
33
|
"@digital-realty/ix-icon": "^1.0.36",
|
|
34
34
|
"@digital-realty/ix-icon-button": "^1.0.40",
|
|
35
|
-
"@digital-realty/ix-menu": "^1.0.
|
|
35
|
+
"@digital-realty/ix-menu": "^1.0.5",
|
|
36
36
|
"@digital-realty/ix-select": "^1.0.38",
|
|
37
37
|
"@digital-realty/ix-switch": "^2.1.11",
|
|
38
38
|
"@lit/react": "^1.0.5",
|
|
@@ -103,5 +103,5 @@
|
|
|
103
103
|
"prettier --write"
|
|
104
104
|
]
|
|
105
105
|
},
|
|
106
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "41d6dacc62a935bf40ce2ae6289ec8a9d10a1306"
|
|
107
107
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxGridNavigation } from '
|
|
3
|
+
import { IxGridNavigation } from './components/IxGridNav.js';
|
|
4
4
|
|
|
5
5
|
export const IxGridNav = createComponent({
|
|
6
6
|
tagName: 'ix-grid-nav',
|
|
@@ -34,7 +34,7 @@ export class IxGridNoRows extends LitElement {
|
|
|
34
34
|
}
|
|
35
35
|
h2.dlr-text-heading {
|
|
36
36
|
margin: 0.5rem 0 0;
|
|
37
|
-
font-family:
|
|
37
|
+
font-family: 'Red Hat Display', sans-serif;
|
|
38
38
|
font-style: normal;
|
|
39
39
|
font-size: 1.5rem;
|
|
40
40
|
line-height: 2rem;
|
package/src/test/ix-grid.test.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ix-grid-nav.js","sourceRoot":"","sources":["../../src/components/ix-grid-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["import { IxGridNavigation } from './IxGridNav.js';\n\nwindow.customElements.define('ix-grid-nav', IxGridNavigation);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/react/IxGridNav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { IxGridNavigation } from '../components/IxGridNav.js';\n\nexport const IxGridNav = createComponent({\n tagName: 'ix-grid-nav',\n elementClass: IxGridNavigation,\n react: React,\n});\n"]}
|
|
File without changes
|