q2-tecton-elements 1.14.2 → 1.14.3
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/cjs/q2-chart-donut.cjs.entry.js +3 -3
- package/dist/collection/components/q2-chart-donut/index.js +8 -6
- package/dist/collection/components/q2-chart-donut/styles.css +13 -6
- package/dist/esm/q2-chart-donut.entry.js +3 -3
- package/dist/q2-tecton-elements/{p-eeb4a008.entry.js → p-fd5130c4.entry.js} +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/package.json +2 -2
|
@@ -39651,7 +39651,7 @@ function install(registers) {
|
|
|
39651
39651
|
registers.registerPainter('canvas', CanvasPainter);
|
|
39652
39652
|
}
|
|
39653
39653
|
|
|
39654
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;aspect-ratio:1/1;width:100%}.chart-container{
|
|
39654
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-vertical-padding:var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1, 5px)));transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-vertical-padding) 0}button:active{box-shadow:var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{box-shadow:var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}.center-card-container{width:100%;position:absolute;top:50%;transform:translateY(-50%)}.center-card{width:60%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)))}q2-icon{--t-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));margin-bottom:var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px)))}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}";
|
|
39655
39655
|
|
|
39656
39656
|
use([install$6, install$3, install$1, install, install$2, installLabelLayout]);
|
|
39657
39657
|
const Q2ChartDonut = class {
|
|
@@ -39956,10 +39956,10 @@ const Q2ChartDonut = class {
|
|
|
39956
39956
|
'aria-roledescription': index$1.loc('tecton.element.chartDonut.button.roleDescription'),
|
|
39957
39957
|
}
|
|
39958
39958
|
: null;
|
|
39959
|
-
return (index.h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (index.h("q2-icon", { type: icon, style: color && { color } })), name && index.h("div", { class: "name" }, name), value && index.h("div", { class: "value" }, displayValue)));
|
|
39959
|
+
return (index.h("div", { class: "center-card-container" }, index.h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (index.h("q2-icon", { type: icon, style: color && { color } })), name && index.h("div", { class: "name" }, name), value && index.h("div", { class: "value" }, displayValue))));
|
|
39960
39960
|
}
|
|
39961
39961
|
render() {
|
|
39962
|
-
return (index.h("click-elsewhere", { onChange: this.onClickElsewhere }, index.h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock()));
|
|
39962
|
+
return (index.h("click-elsewhere", { onChange: this.onClickElsewhere }, index.h("div", { class: "container" }, index.h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
|
|
39963
39963
|
}
|
|
39964
39964
|
get hostElement() { return index.getElement(this); }
|
|
39965
39965
|
static get watchers() { return {
|
|
@@ -305,15 +305,17 @@ export class Q2ChartDonut {
|
|
|
305
305
|
'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
|
|
306
306
|
}
|
|
307
307
|
: null;
|
|
308
|
-
return (h(
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
308
|
+
return (h("div", { class: "center-card-container" },
|
|
309
|
+
h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props),
|
|
310
|
+
icon && (h("q2-icon", { type: icon, style: color && { color } })),
|
|
311
|
+
name && h("div", { class: "name" }, name),
|
|
312
|
+
value && h("div", { class: "value" }, displayValue))));
|
|
312
313
|
}
|
|
313
314
|
render() {
|
|
314
315
|
return (h("click-elsewhere", { onChange: this.onClickElsewhere },
|
|
315
|
-
h("div", {
|
|
316
|
-
|
|
316
|
+
h("div", { class: "container" },
|
|
317
|
+
h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }),
|
|
318
|
+
this.renderCenterBlock())));
|
|
317
319
|
}
|
|
318
320
|
static get is() { return "q2-chart-donut"; }
|
|
319
321
|
static get encapsulation() { return "shadow"; }
|
|
@@ -66,15 +66,18 @@ button {
|
|
|
66
66
|
|
|
67
67
|
:host {
|
|
68
68
|
position: relative;
|
|
69
|
+
width: 100%;
|
|
70
|
+
display: block;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.container {
|
|
69
74
|
aspect-ratio: 1/1;
|
|
70
75
|
width: 100%;
|
|
71
76
|
}
|
|
72
77
|
|
|
73
78
|
.chart-container {
|
|
74
|
-
aspect-ratio: 1/1;
|
|
75
79
|
width: 100%;
|
|
76
|
-
|
|
77
|
-
top: 0;
|
|
80
|
+
height: 100%;
|
|
78
81
|
--comp-color-1: var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));
|
|
79
82
|
--comp-color-2: var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));
|
|
80
83
|
--comp-color-3: var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));
|
|
@@ -109,15 +112,19 @@ button:focus {
|
|
|
109
112
|
box-shadow: var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
|
|
110
113
|
}
|
|
111
114
|
|
|
115
|
+
.center-card-container {
|
|
116
|
+
width: 100%;
|
|
117
|
+
position: absolute;
|
|
118
|
+
top: 50%;
|
|
119
|
+
transform: translateY(-50%);
|
|
120
|
+
}
|
|
121
|
+
|
|
112
122
|
.center-card {
|
|
113
123
|
width: 60%;
|
|
114
124
|
text-align: center;
|
|
115
125
|
color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));
|
|
116
126
|
margin-inline: auto;
|
|
117
127
|
display: block;
|
|
118
|
-
margin-top: 50%;
|
|
119
|
-
position: relative;
|
|
120
|
-
transform: translateY(-50%);
|
|
121
128
|
}
|
|
122
129
|
.center-card:is(button) {
|
|
123
130
|
cursor: pointer;
|
|
@@ -39647,7 +39647,7 @@ function install(registers) {
|
|
|
39647
39647
|
registers.registerPainter('canvas', CanvasPainter);
|
|
39648
39648
|
}
|
|
39649
39649
|
|
|
39650
|
-
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;aspect-ratio:1/1;width:100%}.chart-container{
|
|
39650
|
+
const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-vertical-padding:var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1, 5px)));transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-vertical-padding) 0}button:active{box-shadow:var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{box-shadow:var(--const-global-focus), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}.center-card-container{width:100%;position:absolute;top:50%;transform:translateY(-50%)}.center-card{width:60%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)))}q2-icon{--t-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));margin-bottom:var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px)))}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}";
|
|
39651
39651
|
|
|
39652
39652
|
use([install$6, install$3, install$1, install, install$2, installLabelLayout]);
|
|
39653
39653
|
const Q2ChartDonut = class {
|
|
@@ -39952,10 +39952,10 @@ const Q2ChartDonut = class {
|
|
|
39952
39952
|
'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
|
|
39953
39953
|
}
|
|
39954
39954
|
: null;
|
|
39955
|
-
return (h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (h("q2-icon", { type: icon, style: color && { color } })), name && h("div", { class: "name" }, name), value && h("div", { class: "value" }, displayValue)));
|
|
39955
|
+
return (h("div", { class: "center-card-container" }, h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (h("q2-icon", { type: icon, style: color && { color } })), name && h("div", { class: "name" }, name), value && h("div", { class: "value" }, displayValue))));
|
|
39956
39956
|
}
|
|
39957
39957
|
render() {
|
|
39958
|
-
return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock()));
|
|
39958
|
+
return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
|
|
39959
39959
|
}
|
|
39960
39960
|
get hostElement() { return getElement(this); }
|
|
39961
39961
|
static get watchers() { return {
|