q2-tecton-elements 1.14.1 → 1.15.0
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/loader.cjs.js +1 -1
- package/dist/cjs/q2-avatar.cjs.entry.js +7 -2
- package/dist/cjs/q2-badge.cjs.entry.js +1 -3
- package/dist/cjs/q2-calendar.cjs.entry.js +3 -4
- package/dist/cjs/q2-chart-donut.cjs.entry.js +8 -3
- package/dist/cjs/q2-checkbox.cjs.entry.js +11 -12
- package/dist/cjs/q2-editable-field.cjs.entry.js +2 -2
- package/dist/cjs/q2-option-list.cjs.entry.js +4 -4
- package/dist/cjs/q2-pill.cjs.entry.js +8 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -0
- package/dist/cjs/q2-select.cjs.entry.js +6 -0
- package/dist/cjs/q2-stepper.cjs.entry.js +20 -3
- package/dist/cjs/q2-tab-container.cjs.entry.js +15 -5
- package/dist/cjs/q2-tab-pane.cjs.entry.js +7 -0
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/tecton-tab-pane.cjs.entry.js +5 -0
- package/dist/collection/components/q2-avatar/index.js +8 -2
- package/dist/collection/components/q2-avatar/styles.css +8 -0
- package/dist/collection/components/q2-badge/index.js +0 -2
- package/dist/collection/components/q2-badge/styles.css +2 -2
- package/dist/collection/components/q2-calendar/helpers.js +1 -1
- package/dist/collection/components/q2-calendar/index.js +2 -3
- package/dist/collection/components/q2-chart-donut/index.js +13 -6
- package/dist/collection/components/q2-chart-donut/styles.css +17 -8
- package/dist/collection/components/q2-checkbox/index.js +10 -11
- package/dist/collection/components/q2-checkbox/styles.css +5 -3
- package/dist/collection/components/q2-editable-field/index.js +19 -2
- package/dist/collection/components/q2-option-list/index.js +22 -7
- package/dist/collection/components/q2-pill/index.js +26 -2
- package/dist/collection/components/q2-radio/index.js +1 -0
- package/dist/collection/components/q2-radio-group/styles.css +1 -0
- package/dist/collection/components/q2-select/index.js +6 -0
- package/dist/collection/components/q2-stepper/index.js +30 -6
- package/dist/collection/components/q2-stepper/styles.css +45 -13
- package/dist/collection/components/q2-tab-container/index.js +22 -4
- package/dist/collection/components/q2-tab-container/styles.css +16 -2
- package/dist/collection/components/q2-tab-pane/index.js +58 -1
- package/dist/collection/components/tecton-tab-pane/index.js +57 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-avatar.entry.js +7 -2
- package/dist/esm/q2-badge.entry.js +1 -3
- package/dist/esm/q2-calendar.entry.js +3 -4
- package/dist/esm/q2-chart-donut.entry.js +8 -3
- package/dist/esm/q2-checkbox.entry.js +11 -12
- package/dist/esm/q2-editable-field.entry.js +2 -2
- package/dist/esm/q2-option-list.entry.js +4 -4
- package/dist/esm/q2-pill.entry.js +8 -1
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js +1 -0
- package/dist/esm/q2-select.entry.js +6 -0
- package/dist/esm/q2-stepper.entry.js +20 -3
- package/dist/esm/q2-tab-container.entry.js +15 -5
- package/dist/esm/q2-tab-pane.entry.js +8 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/tecton-tab-pane.entry.js +6 -1
- package/dist/q2-tecton-elements/p-1b3c4cb2.entry.js +1 -0
- package/dist/q2-tecton-elements/p-2f13d873.entry.js +1 -0
- package/dist/q2-tecton-elements/p-50615a56.entry.js +1 -0
- package/dist/q2-tecton-elements/p-60400f59.entry.js +1 -0
- package/dist/q2-tecton-elements/p-704d7f41.entry.js +1 -0
- package/dist/q2-tecton-elements/p-77263ed4.entry.js +1 -0
- package/dist/q2-tecton-elements/p-8a8c6374.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-92886dbe.entry.js → p-991d7d22.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-882eaf0f.entry.js → p-9b2bc894.entry.js} +1 -1
- package/dist/q2-tecton-elements/{p-eeb4a008.entry.js → p-b0dc920c.entry.js} +1 -1
- package/dist/q2-tecton-elements/p-d5ecb3ba.entry.js +1 -0
- package/dist/q2-tecton-elements/p-dc1ef3fa.entry.js +1 -0
- package/dist/q2-tecton-elements/p-e0ddf788.entry.js +1 -0
- package/dist/q2-tecton-elements/p-e3406026.entry.js +1 -0
- package/dist/q2-tecton-elements/{p-d5d2b3c9.entry.js → p-ead64414.entry.js} +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/types/components/q2-avatar/index.d.ts +2 -0
- package/dist/types/components/q2-checkbox/index.d.ts +0 -1
- package/dist/types/components/q2-editable-field/index.d.ts +1 -0
- package/dist/types/components/q2-option-list/index.d.ts +4 -4
- package/dist/types/components/q2-pill/index.d.ts +2 -0
- package/dist/types/components/q2-stepper/index.d.ts +1 -0
- package/dist/types/components/q2-tab-container/index.d.ts +4 -0
- package/dist/types/components/q2-tab-pane/index.d.ts +5 -1
- package/dist/types/components/tecton-tab-pane/index.d.ts +5 -1
- package/dist/types/components.d.ts +14 -0
- package/dist/types/workspace/workspace/{tecton-production_release_1.14.x → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/elements/q2-tag-test.d.ts +0 -0
- package/dist/types/workspace/workspace/{tecton-production_release_1.14.x → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
- package/package.json +2 -2
- package/dist/q2-tecton-elements/p-0675f9c8.entry.js +0 -1
- package/dist/q2-tecton-elements/p-09464226.entry.js +0 -1
- package/dist/q2-tecton-elements/p-1eed57aa.entry.js +0 -1
- package/dist/q2-tecton-elements/p-3796397e.entry.js +0 -1
- package/dist/q2-tecton-elements/p-65e2df25.entry.js +0 -1
- package/dist/q2-tecton-elements/p-6727f6d0.entry.js +0 -1
- package/dist/q2-tecton-elements/p-706249e1.entry.js +0 -1
- package/dist/q2-tecton-elements/p-7ddb159c.entry.js +0 -1
- package/dist/q2-tecton-elements/p-87f448ab.entry.js +0 -1
- package/dist/q2-tecton-elements/p-b066cdd1.entry.js +0 -1
- package/dist/q2-tecton-elements/p-cc57b8b1.entry.js +0 -1
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
import { i as icons } from './icons-ed54e307.js';
|
|
3
3
|
|
|
4
|
-
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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:var(--tct-avatar-bg, #9e9e9e)}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background-color:var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-color, #ffffff);font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));background-color:var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var(--tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var(--tct-avatar-fallback-stroke-primary, currentcolor);--t-icon-stroke-secondary:var(--tct-avatar-fallback-stroke-secondary, currentcolor);color:var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--t-icon-size);height:var(--t-icon-size)}";
|
|
4
|
+
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}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:unset}.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:var(--tct-avatar-bg, #9e9e9e)}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background-color:var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-color, #ffffff);font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));background-color:var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var(--tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var(--tct-avatar-fallback-stroke-primary, currentcolor);--t-icon-stroke-secondary:var(--tct-avatar-fallback-stroke-secondary, currentcolor);color:var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--t-icon-size);height:var(--t-icon-size)}";
|
|
5
5
|
|
|
6
6
|
const Q2Avatar = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.icon = 'person';
|
|
10
10
|
this.badSrc = false;
|
|
11
|
+
this.isLoaded = false;
|
|
11
12
|
this.onError = () => {
|
|
12
13
|
this.badSrc = true;
|
|
13
14
|
};
|
|
15
|
+
this.onLoad = () => {
|
|
16
|
+
this.isLoaded = true;
|
|
17
|
+
};
|
|
14
18
|
}
|
|
15
19
|
srcDidUpdate() {
|
|
16
20
|
this.badSrc = false;
|
|
@@ -40,9 +44,10 @@ const Q2Avatar = class {
|
|
|
40
44
|
render() {
|
|
41
45
|
const { computedInitials } = this;
|
|
42
46
|
const showImg = this.src && !this.badSrc;
|
|
47
|
+
const isLoaded = this.isLoaded;
|
|
43
48
|
const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
|
|
44
49
|
const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
|
|
45
|
-
return (h("div", null, showImg && (h("img", { class:
|
|
50
|
+
return (h("div", null, showImg && (h("img", { class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, h("text", { x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (h("div", { "test-id": "fallbackIcon", class: "fallback" }, h("q2-icon", { type: this.icon })))));
|
|
46
51
|
}
|
|
47
52
|
get el() { return getElement(this); }
|
|
48
53
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, F as Fragment, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
|
|
3
|
-
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{display:inline-block}.badge-wrapper{--comp-badge-background:var(--t-
|
|
3
|
+
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{display:inline-block}.badge-wrapper{--comp-badge-background:var(--t-gray8, #61c4ff);--comp-badge-color:var(--t-base, #ffffff)}:host([status=info]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-info, #0079C1);--comp-badge-color:var(--const-stoplight-info-text, #ffffff)}:host([status=alert]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-alert, #C30000);--comp-badge-color:var(--const-stoplight-alert-text, #ffffff)}:host([status=warning]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-warning, #F0B400);--comp-badge-color:var(--const-stoplight-warning-text, #423535)}:host([status=success]) .badge-wrapper{--comp-badge-background:var(--const-stoplight-success, #0E8A00);--comp-badge-color:var(--const-stoplight-success-text, #ffffff)}:host([theme=primary]) .badge-wrapper{--comp-badge-background:var(--t-primary, #61c4ff);--comp-badge-color:var(--t-primary-text, #ffffff);--comp-badge-border-color:var(--t-primary-l1, #61c4ff)}:host([theme=secondary]) .badge-wrapper{--comp-badge-background:var(--t-secondary, #61c4ff);--comp-badge-color:var(--t-secondary-text, #ffffff);--comp-badge-border-color:var(--t-secondary-l1, #61c4ff)}:host([theme=tertiary]) .badge-wrapper{--comp-badge-background:var(--t-tertiary, #0079C1);--comp-badge-color:var(--t-tertiary-text, #000000);--comp-badge-border-color:var(--t-tertiary-l1, #61c4ff)}.badge{font-size:10px;line-height:16px;height:16px;min-width:16px;background-color:var(--comp-badge-background);text-align:center;padding:0 4px;color:var(--comp-badge-color);border-color:var(--comp-badge-border-color);border-width:thin;border-radius:8px}.badge.size-large{font-size:14px;height:22px;min-width:22px;border-radius:11px;line-height:22px;padding:0 6px}.badge-wrapper{display:flex;align-items:center;justify-content:center}";
|
|
4
4
|
|
|
5
5
|
const Q2Badge = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -23,8 +23,6 @@ const Q2Badge = class {
|
|
|
23
23
|
}
|
|
24
24
|
generateMarkup() {
|
|
25
25
|
const badgeClass = ['badge'];
|
|
26
|
-
if (this.badgeText)
|
|
27
|
-
badgeClass.push(`digit-${this.badgeText.length}`);
|
|
28
26
|
if (this.size === 'large')
|
|
29
27
|
badgeClass.push('size-large');
|
|
30
28
|
return (h("div", { class: "badge-wrapper" }, h("slot", null), h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, this.badgeText))));
|
|
@@ -2764,7 +2764,7 @@ function formatDateShort(value) {
|
|
|
2764
2764
|
month: '2-digit',
|
|
2765
2765
|
day: '2-digit',
|
|
2766
2766
|
year: 'numeric',
|
|
2767
|
-
timeZone:
|
|
2767
|
+
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
2768
2768
|
}).format(new Date(isoDate));
|
|
2769
2769
|
}
|
|
2770
2770
|
function formatDateLong(value) {
|
|
@@ -3317,8 +3317,7 @@ const Q2Calendar = class {
|
|
|
3317
3317
|
const dateCell = event.target.closest('td:not([aria-hidden])');
|
|
3318
3318
|
if (!dateCell)
|
|
3319
3319
|
return;
|
|
3320
|
-
|
|
3321
|
-
this.selectDate(this.generateDateFromDay(day));
|
|
3320
|
+
this.selectDate(removeTimezoneOffset(new Date(dateCell.dataset.date)));
|
|
3322
3321
|
this.closeCalendar();
|
|
3323
3322
|
};
|
|
3324
3323
|
this.onDateKeydown = (event) => {
|
|
@@ -3438,7 +3437,7 @@ const Q2Calendar = class {
|
|
|
3438
3437
|
year: 'numeric',
|
|
3439
3438
|
month: '2-digit',
|
|
3440
3439
|
day: '2-digit',
|
|
3441
|
-
timeZone:
|
|
3440
|
+
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
3442
3441
|
}).format(dateValue);
|
|
3443
3442
|
}
|
|
3444
3443
|
get computedPlaceholder() {
|
|
@@ -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
|
|
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%;display:flex;justify-content:center;align-items:center}.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{position:absolute;top:50%;transform:translateY(-50%)}.center-card{width:100%;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{--tct-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 {
|
|
@@ -39711,6 +39711,7 @@ const Q2ChartDonut = class {
|
|
|
39711
39711
|
if (!(event.target instanceof HTMLElement))
|
|
39712
39712
|
return;
|
|
39713
39713
|
this.clearSelection();
|
|
39714
|
+
event.stopPropagation();
|
|
39714
39715
|
};
|
|
39715
39716
|
}
|
|
39716
39717
|
/// LifeCycle Hooks ///
|
|
@@ -39814,6 +39815,10 @@ const Q2ChartDonut = class {
|
|
|
39814
39815
|
chart.on('mouseover', (params) => {
|
|
39815
39816
|
this.hoveredId = params.data.id;
|
|
39816
39817
|
});
|
|
39818
|
+
chart.on('click', params => {
|
|
39819
|
+
// Don't emit click event when clicking a chart slice
|
|
39820
|
+
params.event.event.stopPropagation();
|
|
39821
|
+
});
|
|
39817
39822
|
chart.on('mouseout', () => {
|
|
39818
39823
|
this.hoveredId = null;
|
|
39819
39824
|
});
|
|
@@ -39952,10 +39957,10 @@ const Q2ChartDonut = class {
|
|
|
39952
39957
|
'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
|
|
39953
39958
|
}
|
|
39954
39959
|
: 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)));
|
|
39960
|
+
return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, 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
39961
|
}
|
|
39957
39962
|
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()));
|
|
39963
|
+
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
39964
|
}
|
|
39960
39965
|
get hostElement() { return getElement(this); }
|
|
39961
39966
|
static get watchers() { return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-14e81efa.js';
|
|
3
3
|
|
|
4
|
-
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{display:block;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-gap:
|
|
4
|
+
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{display:block;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-textA, rgba(77, 77, 77, 0.77))));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{cursor:pointer}:host([disabled]),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
|
|
5
5
|
|
|
6
6
|
const Q2Checkbox = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -11,23 +11,21 @@ const Q2Checkbox = class {
|
|
|
11
11
|
this.id = `checkbox-${createGuid()}`;
|
|
12
12
|
///// Actions ////////
|
|
13
13
|
this.onInputClick = (event) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
if (
|
|
14
|
+
const hasCustomHandler = !!this.hostElement.onchange;
|
|
15
|
+
const isNotInteractive = this.disabled || this.readonly;
|
|
16
|
+
if (isNotInteractive || hasCustomHandler)
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
if (isNotInteractive)
|
|
17
19
|
return;
|
|
18
20
|
if (!(event.target instanceof HTMLInputElement))
|
|
19
21
|
return;
|
|
22
|
+
const { value, checked } = event.target;
|
|
20
23
|
this.change.emit({
|
|
21
|
-
value
|
|
22
|
-
checked
|
|
24
|
+
value,
|
|
25
|
+
checked,
|
|
23
26
|
});
|
|
24
27
|
this.inputElement.focus();
|
|
25
28
|
};
|
|
26
|
-
this.onKeyDown = (event) => {
|
|
27
|
-
if (this.readonly && event.code === 'Space') {
|
|
28
|
-
event.preventDefault();
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
29
|
}
|
|
32
30
|
////////// LIFECYCLE HOOKS ////////
|
|
33
31
|
componentWillLoad() {
|
|
@@ -35,6 +33,7 @@ const Q2Checkbox = class {
|
|
|
35
33
|
}
|
|
36
34
|
componentDidLoad() {
|
|
37
35
|
overrideFocus(this.hostElement);
|
|
36
|
+
this.hostElement.click = () => this.inputElement.click();
|
|
38
37
|
}
|
|
39
38
|
//////// Host Element Events ////////
|
|
40
39
|
defaultChangeHandler(event) {
|
|
@@ -56,7 +55,7 @@ const Q2Checkbox = class {
|
|
|
56
55
|
const textLabelClasses = ['label-text'];
|
|
57
56
|
if (this.hideLabel)
|
|
58
57
|
textLabelClasses.push('sr');
|
|
59
|
-
return (h("div", { class: "container" }, h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox",
|
|
58
|
+
return (h("div", { class: "container" }, h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }), h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { class: textLabelClasses.join(' ') }, h("label", { "test-id": "checkboxLabel", htmlFor: this.id }, loc(this.label), h("slot", null))), this.description && (h("div", { class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
|
|
60
59
|
}
|
|
61
60
|
generateCheckboxSVG() {
|
|
62
61
|
if (this.type === 'favorite') {
|
|
@@ -124,7 +124,7 @@ const Q2EditableField = class {
|
|
|
124
124
|
return (h("div", null, this.generateEditStateDOM(), this.generateReadStateDOM()));
|
|
125
125
|
}
|
|
126
126
|
generateEditStateDOM() {
|
|
127
|
-
return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
|
|
127
|
+
return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
|
|
128
128
|
}
|
|
129
129
|
generateReadStateDOM() {
|
|
130
130
|
if (this.persistentLabel && this.locLabel) {
|
|
@@ -133,7 +133,7 @@ const Q2EditableField = class {
|
|
|
133
133
|
return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.value), this.generateEditBtn()));
|
|
134
134
|
}
|
|
135
135
|
generateEditBtn() {
|
|
136
|
-
return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
|
|
136
|
+
return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
|
|
137
137
|
}
|
|
138
138
|
get hostElement() { return getElement(this); }
|
|
139
139
|
static get watchers() { return {
|
|
@@ -312,21 +312,21 @@ const Q2OptionList = class {
|
|
|
312
312
|
event.stopPropagation();
|
|
313
313
|
}
|
|
314
314
|
/// Public Methods ///
|
|
315
|
-
toggle() {
|
|
315
|
+
async toggle() {
|
|
316
316
|
const isOpen = !this.open;
|
|
317
317
|
this.open = isOpen;
|
|
318
318
|
}
|
|
319
|
-
setDefaultActiveElement() {
|
|
319
|
+
async setDefaultActiveElement() {
|
|
320
320
|
this.activeIndex = this.getDefaultActiveIndex();
|
|
321
321
|
this.setActiveOption();
|
|
322
322
|
this.setFocusedOption();
|
|
323
323
|
}
|
|
324
|
-
setActiveElement(index) {
|
|
324
|
+
async setActiveElement(index) {
|
|
325
325
|
this.activeIndex = index;
|
|
326
326
|
this.setActiveOption();
|
|
327
327
|
this.setFocusedOption();
|
|
328
328
|
}
|
|
329
|
-
handleExternalKeydown(event) {
|
|
329
|
+
async handleExternalKeydown(event) {
|
|
330
330
|
const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
|
|
331
331
|
if (keysThatTriggerOpen.includes(event.key)) {
|
|
332
332
|
this.open = true;
|
|
@@ -98,6 +98,13 @@ const Q2Pill = class {
|
|
|
98
98
|
return selectedOptions[0].display;
|
|
99
99
|
return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
|
|
100
100
|
}
|
|
101
|
+
get truncatedButtonContent() {
|
|
102
|
+
const { maxLength, buttonContent } = this;
|
|
103
|
+
if (maxLength)
|
|
104
|
+
return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;
|
|
105
|
+
else
|
|
106
|
+
return buttonContent;
|
|
107
|
+
}
|
|
101
108
|
/// Listeners ///
|
|
102
109
|
delegateFocus(event) {
|
|
103
110
|
if (!isEventFromElement(event, this.hostElement))
|
|
@@ -124,7 +131,7 @@ const Q2Pill = class {
|
|
|
124
131
|
wrapperClassNames.push('has-icon');
|
|
125
132
|
if (hasOptions)
|
|
126
133
|
wrapperClassNames.push('has-options');
|
|
127
|
-
return (h(Fragment, null, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open
|
|
134
|
+
return (h(Fragment, null, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions }, h("slot", null)))));
|
|
128
135
|
}
|
|
129
136
|
get hostElement() { return getElement(this); }
|
|
130
137
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-14e81efa.js';
|
|
3
3
|
|
|
4
|
-
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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
|
|
4
|
+
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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";gap:var(--app-scale-1x, 5px)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px))}:host([has-error]) .options-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
|
|
5
5
|
|
|
6
6
|
const Q2RadioGroup = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -217,6 +217,11 @@ const Q2Select = class {
|
|
|
217
217
|
this.searchText = '';
|
|
218
218
|
}
|
|
219
219
|
break;
|
|
220
|
+
case 'Tab':
|
|
221
|
+
if (dropdownOpen) {
|
|
222
|
+
this.closeDropdown();
|
|
223
|
+
}
|
|
224
|
+
break;
|
|
220
225
|
default:
|
|
221
226
|
if (searchable) {
|
|
222
227
|
this.openDropdownWithoutActiveElement();
|
|
@@ -560,6 +565,7 @@ const Q2Select = class {
|
|
|
560
565
|
options.forEach(option => {
|
|
561
566
|
if (query === '') {
|
|
562
567
|
option.style.display = '';
|
|
568
|
+
option.hidden = false;
|
|
563
569
|
}
|
|
564
570
|
else {
|
|
565
571
|
const { display = '', innerText = '' } = option;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
import { b as addSmoothScrollPolyfill, o as overrideFocus, i as isEventFromElement, l as loc } from './index-14e81efa.js';
|
|
3
3
|
|
|
4
|
-
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{display:block;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-
|
|
4
|
+
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{display:block;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-top-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-btn-label-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-stepper-label-color, var(--t-stepper-label-color, var(--t-text, #4d4d4d)));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;--comp-active-color:var(--t-primary)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base)}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-icon:before,[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border);border-color:var(--comp-active-color)}.step-bubble{background:var(--comp-bullet-bg)}hr{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
|
|
5
5
|
|
|
6
6
|
addSmoothScrollPolyfill();
|
|
7
7
|
const Q2Stepper = class {
|
|
@@ -114,6 +114,13 @@ const Q2Stepper = class {
|
|
|
114
114
|
return;
|
|
115
115
|
this.focusStep(this.currentStep, true, true);
|
|
116
116
|
}
|
|
117
|
+
statusChangeHandler(event) {
|
|
118
|
+
const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);
|
|
119
|
+
if (index > -1) {
|
|
120
|
+
this.allPanes[index].status = event.detail.status;
|
|
121
|
+
this.renderStepBtn(index);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
117
124
|
////////// GETTER METHODS ////////
|
|
118
125
|
get allPanes() {
|
|
119
126
|
return this.hostElement.querySelectorAll('q2-stepper-pane');
|
|
@@ -164,13 +171,23 @@ const Q2Stepper = class {
|
|
|
164
171
|
renderStepBtn(stepIndex) {
|
|
165
172
|
var _a;
|
|
166
173
|
const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
|
|
167
|
-
const { id, label, description } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
|
|
174
|
+
const { id, label, description, status } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
|
|
168
175
|
const stepNumber = stepIndex + 1;
|
|
169
176
|
const isCurrentStep = stepNumber === currentStep;
|
|
170
177
|
const labelId = label && `label-${id}`;
|
|
171
178
|
const descriptionId = label && description && `description-${id}`;
|
|
172
179
|
const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
|
|
173
|
-
|
|
180
|
+
let statusIcon;
|
|
181
|
+
if (status === 'complete')
|
|
182
|
+
statusIcon = 'success';
|
|
183
|
+
else if (status === 'error')
|
|
184
|
+
statusIcon = 'warning';
|
|
185
|
+
const stepClasses = ['step-btn'];
|
|
186
|
+
if (status)
|
|
187
|
+
stepClasses.push(`status-${status}`);
|
|
188
|
+
const isLocked = status === 'locked';
|
|
189
|
+
const disabled = isLocked || stepNumber > lastEnabledStep;
|
|
190
|
+
return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, h(Fragment, null, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", { class: "step-label", id: labelId }, loc(label))), label && description && (h("div", { class: "step-description", id: descriptionId }, loc(description))))), stepIndex ? h("hr", null) : ''));
|
|
174
191
|
}
|
|
175
192
|
render() {
|
|
176
193
|
const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-6d5ed7cc.js';
|
|
2
2
|
import { b as addSmoothScrollPolyfill, c as createGuid, l as loc, i as isEventFromElement, o as overrideFocus } from './index-14e81efa.js';
|
|
3
3
|
|
|
4
|
-
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{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to
|
|
4
|
+
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{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
|
|
5
5
|
|
|
6
6
|
addSmoothScrollPolyfill();
|
|
7
7
|
const Q2TabContainer = class {
|
|
@@ -31,17 +31,21 @@ const Q2TabContainer = class {
|
|
|
31
31
|
});
|
|
32
32
|
};
|
|
33
33
|
this.setTabs = () => {
|
|
34
|
-
this.tabs = this.tabPanes.map(({ label, value }) => ({
|
|
34
|
+
this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription }) => ({
|
|
35
35
|
label: (label && loc(label)) || '',
|
|
36
36
|
value,
|
|
37
|
+
badgeCount,
|
|
38
|
+
badgeDescription,
|
|
37
39
|
}));
|
|
38
40
|
};
|
|
39
41
|
this.onTabClick = (event) => {
|
|
40
|
-
const
|
|
42
|
+
const targetValue = event.target.closest('button[role="tab"]')
|
|
43
|
+
.dataset.value;
|
|
44
|
+
const isAlreadySelected = this.value === targetValue;
|
|
41
45
|
if (isAlreadySelected)
|
|
42
46
|
return;
|
|
43
47
|
this.change.emit({
|
|
44
|
-
value:
|
|
48
|
+
value: targetValue,
|
|
45
49
|
});
|
|
46
50
|
};
|
|
47
51
|
this.onTabKeyDown = (event) => {
|
|
@@ -153,6 +157,9 @@ const Q2TabContainer = class {
|
|
|
153
157
|
const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
|
|
154
158
|
this.moveFocus(index);
|
|
155
159
|
}
|
|
160
|
+
onBadge() {
|
|
161
|
+
this.setTabs();
|
|
162
|
+
}
|
|
156
163
|
///////// Lifecycle Hooks /////////
|
|
157
164
|
componentWillLoad() {
|
|
158
165
|
const observer = new MutationObserver(this.updateTabData);
|
|
@@ -205,7 +212,10 @@ const Q2TabContainer = class {
|
|
|
205
212
|
generateTab(tab, index) {
|
|
206
213
|
const { label, value } = tab;
|
|
207
214
|
const isSelected = this.selectedTabValue === value;
|
|
208
|
-
return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
|
|
215
|
+
return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.generateTabWithBadge(tab, isSelected))));
|
|
216
|
+
}
|
|
217
|
+
generateTabWithBadge(tab, isSelected) {
|
|
218
|
+
return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${tab.badgeDescription || loc('tecton.element.tab.pane.new')}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: isSelected ? 'primary' : undefined })));
|
|
209
219
|
}
|
|
210
220
|
get hostElement() { return getElement(this); }
|
|
211
221
|
static get watchers() { return {
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-6d5ed7cc.js';
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-6d5ed7cc.js';
|
|
2
2
|
|
|
3
3
|
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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
|
|
4
4
|
|
|
5
5
|
const Q2TabPane = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
+
this.badge = createEvent(this, "badge", 7);
|
|
9
|
+
}
|
|
10
|
+
badgeObserver() {
|
|
11
|
+
this.badge.emit();
|
|
8
12
|
}
|
|
9
13
|
render() {
|
|
10
14
|
return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", null)));
|
|
11
15
|
}
|
|
16
|
+
static get watchers() { return {
|
|
17
|
+
"badgeCount": ["badgeObserver"]
|
|
18
|
+
}; }
|
|
12
19
|
};
|
|
13
20
|
Q2TabPane.style = stylesCss;
|
|
14
21
|
|