@proximus/lavender-ag-grid-table 2.0.0-alpha.2 → 2.0.0-alpha.20
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/AgGridTableThButton.d.ts +4 -2
- package/dist/index.es.js +41 -38
- package/package.json +1 -1
|
@@ -2,7 +2,6 @@ import { PxElement } from '@proximus/lavender-common';
|
|
|
2
2
|
export declare const sortingValues: string[];
|
|
3
3
|
export declare class AgGridTableThButton extends PxElement<HTMLButtonElement> {
|
|
4
4
|
static nativeName: string;
|
|
5
|
-
protected internals: ElementInternals;
|
|
6
5
|
private template;
|
|
7
6
|
constructor();
|
|
8
7
|
connectedCallback(): void;
|
|
@@ -11,8 +10,11 @@ export declare class AgGridTableThButton extends PxElement<HTMLButtonElement> {
|
|
|
11
10
|
disconnectedCallback(): void;
|
|
12
11
|
updateSorting(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
13
12
|
updateColumnHeaderAriaLabel(oldValue: string, newValue: string): void;
|
|
14
|
-
|
|
13
|
+
clickAgGridTableThButton(value: string): void;
|
|
14
|
+
private clickHandler;
|
|
15
|
+
private keypressHandler;
|
|
15
16
|
private cycleToNextSortingValue;
|
|
17
|
+
private handleSortingCycle;
|
|
16
18
|
get $slottedThContent(): HTMLElement;
|
|
17
19
|
get $columnHeader(): HTMLElement;
|
|
18
20
|
get inverted(): boolean;
|
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { WithExtraAttributes as
|
|
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,17 @@ class v extends u {
|
|
|
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
|
+
constructor() {
|
|
31
|
+
super(b), this.clickHandler = (t) => {
|
|
32
|
+
this.handleSortingCycle(t);
|
|
33
|
+
}, this.keypressHandler = (t) => {
|
|
34
|
+
t.code === "Enter" && this.handleSortingCycle();
|
|
35
|
+
}, this.shadowRoot.innerHTML = this.template();
|
|
36
|
+
}
|
|
30
37
|
template() {
|
|
31
38
|
return `
|
|
32
39
|
<button class="ag-grid-table-th-button">
|
|
@@ -35,22 +42,12 @@ const o = ["none", "ascending", "descending"], l = class l extends c {
|
|
|
35
42
|
</button>
|
|
36
43
|
`;
|
|
37
44
|
}
|
|
38
|
-
constructor() {
|
|
39
|
-
var t;
|
|
40
|
-
super(b), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.ariaHidden = "true");
|
|
41
|
-
}
|
|
42
45
|
connectedCallback() {
|
|
43
46
|
var t, e, r;
|
|
44
|
-
|
|
47
|
+
this.sorting || (this.sorting = "none", (t = this.$columnHeader) == null || t.setAttribute("aria-sort", "none")), (e = this.$columnHeader) == null || e.setAttribute(
|
|
45
48
|
"aria-label",
|
|
46
49
|
"Sortable column header, press ctrl + enter to sort"
|
|
47
|
-
), this.addEventListener(
|
|
48
|
-
"click",
|
|
49
|
-
(a) => this.cycleToNextSortingValue(a)
|
|
50
|
-
), (r = this.$columnHeader) == null || r.addEventListener(
|
|
51
|
-
"keypress",
|
|
52
|
-
(a) => this.setKeypressEvent(a)
|
|
53
|
-
);
|
|
50
|
+
), this.addEventListener("click", this.clickHandler), (r = this.$columnHeader) == null || r.addEventListener("keypress", this.keypressHandler);
|
|
54
51
|
}
|
|
55
52
|
static get observedAttributes() {
|
|
56
53
|
return [
|
|
@@ -79,12 +76,12 @@ const o = ["none", "ascending", "descending"], l = class l extends c {
|
|
|
79
76
|
}
|
|
80
77
|
disconnectedCallback() {
|
|
81
78
|
var t;
|
|
82
|
-
this.removeEventListener("click", this.
|
|
79
|
+
this.removeEventListener("click", this.clickHandler), (t = this.$columnHeader) == null || t.removeEventListener("keypress", this.keypressHandler);
|
|
83
80
|
}
|
|
84
81
|
updateSorting(t, e, r) {
|
|
85
82
|
var a, d;
|
|
86
83
|
if (!h(r, e)) {
|
|
87
|
-
|
|
84
|
+
x(`${e} is not an allowed sorting value.`);
|
|
88
85
|
return;
|
|
89
86
|
}
|
|
90
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));
|
|
@@ -93,16 +90,22 @@ const o = ["none", "ascending", "descending"], l = class l extends c {
|
|
|
93
90
|
var r, a;
|
|
94
91
|
t !== null && t !== "" && ((r = this.$columnHeader) == null || r.setAttribute("aria-label", t)), e !== null && e !== "" && ((a = this.$columnHeader) == null || a.setAttribute("aria-label", e));
|
|
95
92
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
93
|
+
clickAgGridTableThButton(t) {
|
|
94
|
+
this.dispatchEvent(
|
|
95
|
+
new CustomEvent(k, {
|
|
96
|
+
bubbles: !0,
|
|
97
|
+
composed: !0,
|
|
98
|
+
detail: { value: t }
|
|
99
|
+
})
|
|
100
|
+
);
|
|
102
101
|
}
|
|
103
102
|
cycleToNextSortingValue(t) {
|
|
103
|
+
t == null || t.stopPropagation(), t == null || t.preventDefault();
|
|
104
104
|
const r = (o.indexOf(this.sorting) + 1) % o.length;
|
|
105
|
-
this.sorting = o[r]
|
|
105
|
+
this.sorting = o[r];
|
|
106
|
+
}
|
|
107
|
+
handleSortingCycle(t) {
|
|
108
|
+
this.cycleToNextSortingValue(t), this.clickAgGridTableThButton(this.sorting);
|
|
106
109
|
}
|
|
107
110
|
get $slottedThContent() {
|
|
108
111
|
return this.querySelector("px-ag-grid-table-th-content");
|
|
@@ -129,11 +132,11 @@ const o = ["none", "ascending", "descending"], l = class l extends c {
|
|
|
129
132
|
super._updateAttribute("column-header-aria-label", t);
|
|
130
133
|
}
|
|
131
134
|
};
|
|
132
|
-
|
|
133
|
-
let i =
|
|
135
|
+
n.nativeName = "button";
|
|
136
|
+
let i = n;
|
|
134
137
|
customElements.get("px-ag-grid-table-th-button") || customElements.define("px-ag-grid-table-th-button", i);
|
|
135
|
-
const
|
|
136
|
-
|
|
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);
|
|
137
140
|
const s = class s extends c {
|
|
138
141
|
template() {
|
|
139
142
|
return `
|
|
@@ -144,7 +147,7 @@ const s = class s extends c {
|
|
|
144
147
|
`;
|
|
145
148
|
}
|
|
146
149
|
constructor() {
|
|
147
|
-
super(
|
|
150
|
+
super(u), this.shadowRoot.innerHTML = this.template();
|
|
148
151
|
}
|
|
149
152
|
static get observedAttributes() {
|
|
150
153
|
return [...super.observedAttributes, "inverted"];
|
|
@@ -165,11 +168,11 @@ const s = class s extends c {
|
|
|
165
168
|
}
|
|
166
169
|
};
|
|
167
170
|
s.nativeName = "span";
|
|
168
|
-
let
|
|
169
|
-
customElements.get("px-ag-grid-table-th-content") || customElements.define("px-ag-grid-table-th-content",
|
|
171
|
+
let l = s;
|
|
172
|
+
customElements.get("px-ag-grid-table-th-content") || customElements.define("px-ag-grid-table-th-content", l);
|
|
170
173
|
export {
|
|
171
|
-
|
|
174
|
+
m as AgGridTable,
|
|
172
175
|
i as AgGridTableThButton,
|
|
173
|
-
|
|
176
|
+
l as AgGridTableThContent,
|
|
174
177
|
o as sortingValues
|
|
175
178
|
};
|