q2-tecton-elements 1.70.1 → 1.70.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle-report.json +27 -21
- package/dist/cjs/q2-btn_2.cjs.entry.js +1 -5
- package/dist/cjs/q2-pill.cjs.entry.js +13 -1
- package/dist/collection/components/q2-btn/q2-btn.css +15 -9
- package/dist/collection/components/q2-btn/q2-btn.js +1 -6
- package/dist/collection/components/q2-btn/test/q2-btn-test.vr.js +27 -6
- package/dist/collection/components/q2-pill/q2-pill.js +13 -1
- package/dist/components/q2-btn2.js +1 -5
- package/dist/components/q2-pill.js +26 -19
- package/dist/esm/q2-btn_2.entry.js +1 -5
- package/dist/esm/q2-pill.entry.js +13 -1
- package/dist/q2-tecton-elements/q2-btn_2.entry.js +1 -5
- package/dist/q2-tecton-elements/q2-pill.entry.js +29 -22
- package/dist/types/components/q2-pill/q2-pill.d.ts +2 -0
- package/dist/types/components.d.ts +0 -2
- package/package.json +3 -3
|
@@ -4,9 +4,9 @@ import { a, o as r, i as n, w as c, l as s } from "./index-Cps4jSQM.js";
|
|
|
4
4
|
|
|
5
5
|
import { m as l } from "./mirror-emit-DUjY_ucm.js";
|
|
6
6
|
|
|
7
|
-
import { a as p, s as
|
|
7
|
+
import { a as p, s as d } from "./action-sheet-B7adb3xs.js";
|
|
8
8
|
|
|
9
|
-
const
|
|
9
|
+
const h = class {
|
|
10
10
|
constructor(i) {
|
|
11
11
|
var e;
|
|
12
12
|
t(this, i), this.change = o(this, "change", 7), this.tctChange = o(this, "tctChange", 7),
|
|
@@ -56,7 +56,7 @@ const d = class {
|
|
|
56
56
|
}, this.handleChange = t => {
|
|
57
57
|
t.stopPropagation(), this.optionCount && this.handleSelectionChanges(t.detail);
|
|
58
58
|
}, this.handleClick = async t => {
|
|
59
|
-
if (t.stopPropagation(), !this.disabled) if (this.optionCount)
|
|
59
|
+
if (t.stopPropagation(), !this.disabled) if (this.optionCount) d(this) ? this.executeActionSheet(t) : await this.popoverElement.toggle(); else {
|
|
60
60
|
const {value: t, label: o} = this, i = this.active = !this.active;
|
|
61
61
|
l(this, [ "change", "tctChange" ], {
|
|
62
62
|
value: t,
|
|
@@ -77,7 +77,7 @@ const d = class {
|
|
|
77
77
|
t.preventDefault();
|
|
78
78
|
const i = this.hasPopoverTop || this.hasPopoverBottom;
|
|
79
79
|
// slots are incompatible with action sheet
|
|
80
|
-
|
|
80
|
+
d(this, t) && !i ? this.executeActionSheet(t) : this.handleOptionListExternalKeydown(t);
|
|
81
81
|
},
|
|
82
82
|
// for spec testing
|
|
83
83
|
this.handleOptionListExternalKeydown = async t => {
|
|
@@ -97,6 +97,13 @@ const d = class {
|
|
|
97
97
|
values: e,
|
|
98
98
|
active: a
|
|
99
99
|
});
|
|
100
|
+
}, this.handleSlotKeydown = t => {
|
|
101
|
+
var o;
|
|
102
|
+
"Escape" === t.key && (this.open = !1, null === (o = this.primaryBtn) || void 0 === o || o.focus());
|
|
103
|
+
}, this.handleTctChange = t => {
|
|
104
|
+
// Prevent the inner q2-option-list's tctChange from bubbling past the pill;
|
|
105
|
+
// the pill re-emits its own tctChange from handleSelectionChanges.
|
|
106
|
+
t.stopPropagation();
|
|
100
107
|
}, this.handleWrapperClick = () => {
|
|
101
108
|
this.primaryBtn.focus(), this.primaryBtn.click();
|
|
102
109
|
}, this.onClickElsewhere = t => {
|
|
@@ -205,8 +212,8 @@ const d = class {
|
|
|
205
212
|
var e, a;
|
|
206
213
|
const {label: r, multiple: n, selectedOptions: c, value: s} = this, l = "value" === i ? t : s, p = "label" === i ? t : r;
|
|
207
214
|
if (n) return;
|
|
208
|
-
const
|
|
209
|
-
if ("value" === i && t ===
|
|
215
|
+
const d = null !== (a = null === (e = null == c ? void 0 : c[0]) || void 0 === e ? void 0 : e.value) && void 0 !== a ? a : null;
|
|
216
|
+
if ("value" === i && t === d) this.updateSelectedOptionElements(); else {
|
|
210
217
|
const o = await this.getOption(t), {value: i, display: e} = o || {
|
|
211
218
|
value: l,
|
|
212
219
|
display: p
|
|
@@ -268,19 +275,19 @@ const d = class {
|
|
|
268
275
|
render() {
|
|
269
276
|
const {optionCount: t, active: o, open: e} = this, {text: a, truncatedText: r} = this.buttonContent, n = [ "btn-wrapper" ];
|
|
270
277
|
return (t || o) && n.push("has-icon"), t && n.push("has-options"), i("click-elsewhere", {
|
|
271
|
-
key: "
|
|
278
|
+
key: "af7276f19b602f08f69bd1b7e0dc86108796db68",
|
|
272
279
|
onChange: this.onClickElsewhere
|
|
273
280
|
}, i("div", {
|
|
274
|
-
key: "
|
|
281
|
+
key: "329da4b893e1988902269e58f95fb182d6e5991e",
|
|
275
282
|
class: n.join(" ")
|
|
276
283
|
}, i("div", {
|
|
277
|
-
key: "
|
|
284
|
+
key: "d7c48db3fa02c71d2c9427600aa76435435cf213",
|
|
278
285
|
class: "btn-height-wrapper",
|
|
279
286
|
ref: t => this.primaryBtnWrapper = t,
|
|
280
287
|
onClick: this.handleWrapperClick,
|
|
281
288
|
tabIndex: -1
|
|
282
289
|
}, i("button", {
|
|
283
|
-
key: "
|
|
290
|
+
key: "cdbfab7954662c929566935b20d9bbc209d3ff2d",
|
|
284
291
|
class: "btn-primary",
|
|
285
292
|
"test-id": "btn-control",
|
|
286
293
|
type: "button",
|
|
@@ -297,7 +304,7 @@ const d = class {
|
|
|
297
304
|
"aria-pressed": t ? void 0 : `${!!o}`,
|
|
298
305
|
"aria-describedby": t ? "option-description" : void 0
|
|
299
306
|
}, r)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && i("q2-popover", {
|
|
300
|
-
key: "
|
|
307
|
+
key: "e41cd2f6024b51a11a2dcb509dad18fad4f0019d",
|
|
301
308
|
ref: t => this.popoverElement = t,
|
|
302
309
|
controlElement: this.primaryBtn,
|
|
303
310
|
open: this.open,
|
|
@@ -307,20 +314,20 @@ const d = class {
|
|
|
307
314
|
align: this.popoverAlignment,
|
|
308
315
|
onFocusout: this.handleFocusOut
|
|
309
316
|
}, i("div", {
|
|
310
|
-
key: "
|
|
317
|
+
key: "e235761dfe3537b47fb80a72150d87e60091f47b",
|
|
311
318
|
class: "popover-content"
|
|
312
319
|
}, i("div", {
|
|
313
|
-
key: "
|
|
320
|
+
key: "c80a8dba5b832f3b1fbb286648289d3bc81e7c0a",
|
|
314
321
|
ref: t => this.popoverTopContainer = t,
|
|
315
322
|
class: "popover-top-container",
|
|
316
323
|
tabindex: "-1",
|
|
317
324
|
hidden: !this.hasPopoverTop,
|
|
318
|
-
onKeyDown: this.
|
|
325
|
+
onKeyDown: this.handleSlotKeydown
|
|
319
326
|
}, i("slot", {
|
|
320
|
-
key: "
|
|
327
|
+
key: "44e011b6808a6c038cfb264c5a786f6512dfd1bc",
|
|
321
328
|
name: "popover-top"
|
|
322
329
|
})), i("q2-option-list", {
|
|
323
|
-
key: "
|
|
330
|
+
key: "546d12c22227897acd089360a119262ab8d8d732",
|
|
324
331
|
type: "listbox",
|
|
325
332
|
ref: t => this.optionList = t,
|
|
326
333
|
id: "option-list",
|
|
@@ -331,16 +338,16 @@ const d = class {
|
|
|
331
338
|
onPopoverState: this.onPopoverState,
|
|
332
339
|
label: s("tecton.element.optionList.label", [ this.optionListLabel ])
|
|
333
340
|
}, i("slot", {
|
|
334
|
-
key: "
|
|
341
|
+
key: "e115796433e08a2e346362bba8a852b37728f94d"
|
|
335
342
|
})), i("div", {
|
|
336
|
-
key: "
|
|
343
|
+
key: "92014390d384a3a5ff71aad12959ef7c5f91de17",
|
|
337
344
|
ref: t => this.popoverBottomContainer = t,
|
|
338
345
|
class: "popover-bottom-container",
|
|
339
346
|
tabindex: "-1",
|
|
340
347
|
hidden: !this.hasPopoverBottom,
|
|
341
|
-
onKeyDown: this.
|
|
348
|
+
onKeyDown: this.handleSlotKeydown
|
|
342
349
|
}, i("slot", {
|
|
343
|
-
key: "
|
|
350
|
+
key: "1bff78f8808f83e1346ee0f482befae2ee16312f",
|
|
344
351
|
name: "popover-bottom"
|
|
345
352
|
})))));
|
|
346
353
|
}
|
|
@@ -362,6 +369,6 @@ const d = class {
|
|
|
362
369
|
}
|
|
363
370
|
};
|
|
364
371
|
|
|
365
|
-
|
|
372
|
+
h.style = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
|
|
366
373
|
|
|
367
|
-
export {
|
|
374
|
+
export { h as q2_pill }
|
|
@@ -155,6 +155,8 @@ export declare class Q2Pill implements ComponentInterface {
|
|
|
155
155
|
value?: string;
|
|
156
156
|
values?: OptionValue[];
|
|
157
157
|
}) => Promise<void>;
|
|
158
|
+
handleSlotKeydown: (event: KeyboardEvent) => void;
|
|
159
|
+
handleTctChange: (event: CustomEvent) => void;
|
|
158
160
|
handleWrapperClick: () => void;
|
|
159
161
|
onClickElsewhere: (event: CustomEvent) => void;
|
|
160
162
|
onMutationObserved: () => void;
|
|
@@ -211,7 +211,6 @@ export namespace Components {
|
|
|
211
211
|
"loading": boolean;
|
|
212
212
|
/**
|
|
213
213
|
* Defines the size of q2-btn, it renders as default size if not provided.
|
|
214
|
-
* @default 'medium'
|
|
215
214
|
*/
|
|
216
215
|
"size": 'small' | 'medium' | 'large';
|
|
217
216
|
"tabIndex": number;
|
|
@@ -5929,7 +5928,6 @@ declare namespace LocalJSX {
|
|
|
5929
5928
|
"onTctClick"?: (event: Q2BtnCustomEvent<any>) => void;
|
|
5930
5929
|
/**
|
|
5931
5930
|
* Defines the size of q2-btn, it renders as default size if not provided.
|
|
5932
|
-
* @default 'medium'
|
|
5933
5931
|
*/
|
|
5934
5932
|
"size"?: 'small' | 'medium' | 'large';
|
|
5935
5933
|
"tabIndex"?: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "q2-tecton-elements",
|
|
3
|
-
"version": "1.70.
|
|
3
|
+
"version": "1.70.2",
|
|
4
4
|
"description": "Q2 Tecton Custom Elements",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Q2 Tecton Team",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@stencil/core": "~4.43.0",
|
|
59
|
-
"q2-tecton-common": "1.70.
|
|
59
|
+
"q2-tecton-common": "1.70.2",
|
|
60
60
|
"swiper": "^12.1.2"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"rollup-plugin-istanbul": "^5.0.0"
|
|
79
79
|
},
|
|
80
80
|
"packageManager": "pnpm@10.27.0",
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "66dbc0c35b0017b6c73c3c2be184b3ba17f43ce6"
|
|
82
82
|
}
|