@proximus/lavender-ag-grid-table 1.4.2-beta.1 → 1.4.3-alpha.2
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/index.es.js +13 -13
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { WithExtraAttributes as p, PxElement as c, checkName as h } from "@proximus/lavender-common";
|
|
2
|
-
const
|
|
3
|
-
g.replaceSync(
|
|
4
|
-
class
|
|
1
|
+
import { WithExtraAttributes as p, PxElement as c, checkName as h, log as x } from "@proximus/lavender-common";
|
|
2
|
+
const v = ":host{--ag-font-family: var(--px-font-family);--ag-font-size: 1em;--ag-data-font-size: 1em;--ag-accent-color: var(--px-color-text-brand-default);--ag-background-color: var(--px-color-background-container-light-default);--ag-foreground-color: var(--px-color-text-neutral-default);--ag-cell-text-color: var(--px-color-text-neutral-default);--ag-border-color: var(--px-color-border-main-default);--ag-border-radius: var(--px-radius-main);--ag-wrapper-border-radius: var(--px-radius-main);--ag-spacing: var(--px-padding-xs-mobile);--ag-header-background-color: var( --px-color-background-container-default-default );--ag-header-font-weight: var(--px-font-weight-title);--ag-icon-size: 1em;--ag-row-hover-color: rgba(0, 0, 0, .04);--ag-checkbox-border-radius: 4px;--ag-checkbox-indeterminate-background-color: var( --px-color-background-surface-brand );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-default );--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-default);--ag-invalid-color: var(--px-color-text-purpose-error-default);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-default );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-default );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-selected-row-background-color: rgba(0, 0, 0, .04)}@media only screen and (min-width: 48em){:host{--ag-spacing: var(--px-padding-xs-tablet)}}@media only screen and (min-width: 64.0625em){:host{--ag-spacing: var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){:host{--ag-spacing: var(--px-padding-xs-desktop)}}:host([inverted]){--ag-accent-color: var(--px-color-text-brand-inverted);--ag-background-color: var(--px-color-background-surface-dark);--ag-foreground-color: var(--px-color-text-neutral-inverted);--ag-cell-text-color: var(--px-color-text-neutral-inverted);--ag-border-color: var(--px-color-border-main-inverted);--ag-header-background-color: var( --px-color-background-container-default-inverted );--ag-row-hover-color: rgba(255, 255, 255, .08);--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-inverted);--ag-invalid-color: var(--px-color-text-purpose-error-inverted);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-inverted );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-inverted );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-selected-row-background-color: rgba(255, 255, 255, .08);--ag-checkbox-checked-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-background-color: var( --px-color-background-container-primary-inverted );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-inverted )}", g = new CSSStyleSheet();
|
|
3
|
+
g.replaceSync(v);
|
|
4
|
+
class m extends p {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(g), this.template = () => "<slot></slot>", this.shadowRoot.innerHTML = this.template();
|
|
7
7
|
}
|
|
@@ -23,10 +23,10 @@ class v extends p {
|
|
|
23
23
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
customElements.get("px-ag-grid-table") || customElements.define("px-ag-grid-table",
|
|
27
|
-
const
|
|
28
|
-
b.replaceSync(
|
|
29
|
-
const o = ["none", "ascending", "descending"],
|
|
26
|
+
customElements.get("px-ag-grid-table") || customElements.define("px-ag-grid-table", m);
|
|
27
|
+
const f = `:host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-button{max-width:100%;font-size:var(--px-font-size-base);font-family:var(--px-font-family);display:inline-flex;gap:var(--px-spacing-xs-mobile);align-items:center;text-align:left;cursor:pointer;background:none;border:none;padding:0;margin:0}.ag-grid-table-th-button .sort-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.ag-grid-table-th-button .sort-icon:after{content:"";width:var(--px-size-icon-s);height:var(--px-size-icon-s);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");background-color:currentColor;color:var(--px-color-text-neutral-default)}.ag-grid-table-th-button[sorting=ascending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}.ag-grid-table-th-button[sorting=descending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}@media only screen and (min-width: 48em){.ag-grid-table-th-button{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.ag-grid-table-th-button{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.ag-grid-table-th-button{gap:var(--px-spacing-xs-desktop)}}:host([inverted]) .ag-grid-table-th-button .sort-icon:after{color:var(--px-color-text-neutral-inverted)}`, b = new CSSStyleSheet();
|
|
28
|
+
b.replaceSync(f);
|
|
29
|
+
const o = ["none", "ascending", "descending"], k = "px.lavender.ag-grid-table-th-button.click", n = class n extends c {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(b), this.clickHandler = (t) => {
|
|
32
32
|
this.handleSortingCycle(t);
|
|
@@ -81,7 +81,7 @@ const o = ["none", "ascending", "descending"], f = "px.lavender.ag-grid-table-th
|
|
|
81
81
|
updateSorting(t, e, r) {
|
|
82
82
|
var a, d;
|
|
83
83
|
if (!h(r, e)) {
|
|
84
|
-
|
|
84
|
+
x(`${e} is not an allowed sorting value.`);
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
t !== null && t !== "" && (this.$el.setAttribute("sorting", t), (a = this.$columnHeader) == null || a.setAttribute("aria-sort", t)), e !== null && e !== "" && (this.$el.setAttribute("sorting", e), (d = this.$columnHeader) == null || d.setAttribute("aria-sort", e));
|
|
@@ -92,7 +92,7 @@ const o = ["none", "ascending", "descending"], f = "px.lavender.ag-grid-table-th
|
|
|
92
92
|
}
|
|
93
93
|
clickAgGridTableThButton(t) {
|
|
94
94
|
this.dispatchEvent(
|
|
95
|
-
new CustomEvent(
|
|
95
|
+
new CustomEvent(k, {
|
|
96
96
|
bubbles: !0,
|
|
97
97
|
composed: !0,
|
|
98
98
|
detail: { value: t }
|
|
@@ -135,8 +135,8 @@ const o = ["none", "ascending", "descending"], f = "px.lavender.ag-grid-table-th
|
|
|
135
135
|
n.nativeName = "button";
|
|
136
136
|
let i = n;
|
|
137
137
|
customElements.get("px-ag-grid-table-th-button") || customElements.define("px-ag-grid-table-th-button", i);
|
|
138
|
-
const
|
|
139
|
-
u.replaceSync(
|
|
138
|
+
const C = ':host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-content{font-size:var(--px-font-size-base);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);word-break:break-all;max-width:100%;display:flex;flex-direction:column}.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);max-width:100%;word-break:break-all;white-space:break-spaces}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-s-mobile);color:var(--px-color-icon-dimmed-default);max-width:100%;word-break:break-all;white-space:break-spaces}@media only screen and (min-width: 48em){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-tablet)}}@media only screen and (min-width: 64.0625em){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-laptop)}}@media only screen and (min-width: 90.0625em){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-desktop)}}:host([inverted]) .ag-grid-table-th-content ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .ag-grid-table-th-content ::slotted([slot="subtitle"]){color:var(--px-color-icon-dimmed-inverted)}', u = new CSSStyleSheet();
|
|
139
|
+
u.replaceSync(C);
|
|
140
140
|
const s = class s extends c {
|
|
141
141
|
template() {
|
|
142
142
|
return `
|
|
@@ -171,7 +171,7 @@ s.nativeName = "span";
|
|
|
171
171
|
let l = s;
|
|
172
172
|
customElements.get("px-ag-grid-table-th-content") || customElements.define("px-ag-grid-table-th-content", l);
|
|
173
173
|
export {
|
|
174
|
-
|
|
174
|
+
m as AgGridTable,
|
|
175
175
|
i as AgGridTableThButton,
|
|
176
176
|
l as AgGridTableThContent,
|
|
177
177
|
o as sortingValues
|