q2-tecton-elements 1.73.0 → 1.73.1
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 +16 -21
- package/dist/cjs/q2-avatar.cjs.entry.js +34 -1
- package/dist/cjs/q2-badge_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox_2.cjs.entry.js +1 -1
- package/dist/cjs/q2-message.cjs.entry.js +1 -1
- package/dist/cjs/q2-pagination.cjs.entry.js +11 -5
- package/dist/cjs/q2-pill.cjs.entry.js +2 -2
- package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
- package/dist/cjs/q2-resize-observer.cjs.entry.js +1 -1
- package/dist/cjs/q2-search.cjs.entry.js +1 -1
- package/dist/cjs/q2-section.cjs.entry.js +2 -2
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
- package/dist/cjs/q2-surface.cjs.entry.js +1 -1
- package/dist/cjs/q2-tab-container.cjs.entry.js +1 -1
- package/dist/cjs/q2-tab-pane.cjs.entry.js +1 -1
- package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
- package/dist/collection/components/q2-avatar/q2-avatar.js +34 -1
- package/dist/collection/components/q2-avatar/test/q2-avatar-test.vr.js +79 -4
- package/dist/collection/components/q2-input/formatting/phone-number-formats.js +1 -1
- package/dist/collection/components/q2-message/q2-message.css +1 -1
- package/dist/collection/components/q2-message/test/q2-message-test.vr.js +11 -2
- package/dist/collection/components/q2-pagination/q2-pagination.css +17 -0
- package/dist/collection/components/q2-pagination/q2-pagination.js +10 -4
- package/dist/collection/components/q2-pagination/test/q2-pagination-test.vr.js +39 -0
- package/dist/collection/components/q2-pill/q2-pill.css +14 -10
- package/dist/collection/components/q2-pill/q2-pill.js +1 -1
- package/dist/collection/components/q2-pill/test/q2-pill-test.vr.js +25 -0
- package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
- package/dist/collection/components/q2-resize-observer/q2-resize-observer.js +1 -1
- package/dist/collection/components/q2-search/q2-search.js +1 -1
- package/dist/collection/components/q2-section/q2-section.js +2 -2
- package/dist/collection/components/q2-stepper/q2-stepper.js +1 -1
- package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +1 -1
- package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
- package/dist/collection/components/q2-surface/q2-surface.js +1 -1
- package/dist/collection/components/q2-tab-container/q2-tab-container.js +1 -1
- package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
- package/dist/collection/components/q2-tag/q2-tag.js +1 -1
- package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
- package/dist/components/q2-avatar2.js +41 -27
- package/dist/components/q2-input2.js +1 -1
- package/dist/components/q2-message2.js +1 -1
- package/dist/components/q2-pagination.js +37 -35
- package/dist/components/q2-pill.js +43 -40
- package/dist/components/q2-relative-time.js +1 -1
- package/dist/components/q2-resize-observer2.js +23 -23
- package/dist/components/q2-search.js +4 -4
- package/dist/components/q2-section.js +15 -15
- package/dist/components/q2-stepper-pane.js +29 -29
- package/dist/components/q2-stepper-vertical.js +4 -4
- package/dist/components/q2-stepper.js +12 -12
- package/dist/components/q2-surface.js +3 -3
- package/dist/components/q2-tab-container.js +16 -16
- package/dist/components/q2-tab-pane.js +6 -6
- package/dist/components/q2-tag2.js +5 -5
- package/dist/components/tecton-tab-pane.js +6 -6
- package/dist/esm/q2-avatar.entry.js +34 -1
- package/dist/esm/q2-badge_2.entry.js +1 -1
- package/dist/esm/q2-checkbox_2.entry.js +1 -1
- package/dist/esm/q2-message.entry.js +1 -1
- package/dist/esm/q2-pagination.entry.js +11 -5
- package/dist/esm/q2-pill.entry.js +2 -2
- package/dist/esm/q2-relative-time.entry.js +1 -1
- package/dist/esm/q2-resize-observer.entry.js +1 -1
- package/dist/esm/q2-search.entry.js +1 -1
- package/dist/esm/q2-section.entry.js +2 -2
- package/dist/esm/q2-stepper-pane.entry.js +1 -1
- package/dist/esm/q2-stepper-vertical.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js +1 -1
- package/dist/esm/q2-surface.entry.js +1 -1
- package/dist/esm/q2-tab-container.entry.js +1 -1
- package/dist/esm/q2-tab-pane.entry.js +1 -1
- package/dist/esm/tecton-tab-pane.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-avatar.entry.js +24 -10
- package/dist/q2-tecton-elements/q2-badge_2.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-checkbox_2.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-message.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-pagination.entry.js +51 -49
- package/dist/q2-tecton-elements/q2-pill.entry.js +38 -35
- package/dist/q2-tecton-elements/q2-relative-time.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-resize-observer.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-search.entry.js +30 -30
- package/dist/q2-tecton-elements/q2-section.entry.js +11 -11
- package/dist/q2-tecton-elements/q2-stepper-pane.entry.js +12 -12
- package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-stepper.entry.js +12 -12
- package/dist/q2-tecton-elements/q2-surface.entry.js +15 -15
- package/dist/q2-tecton-elements/q2-tab-container.entry.js +14 -14
- package/dist/q2-tecton-elements/q2-tab-pane.entry.js +4 -4
- package/dist/q2-tecton-elements/tecton-tab-pane.entry.js +9 -9
- package/dist/types/components/q2-avatar/q2-avatar.d.ts +5 -0
- package/package.json +3 -3
|
@@ -76,7 +76,7 @@ const Q2ResizeObserver = class {
|
|
|
76
76
|
// #endregion
|
|
77
77
|
// #region Render Methods
|
|
78
78
|
render() {
|
|
79
|
-
return h("slot", { key: '
|
|
79
|
+
return h("slot", { key: '78ea06c9c3963fe4fe145d66c42b546432d10e95', onSlotchange: this.handleSlotChange });
|
|
80
80
|
}
|
|
81
81
|
get hostElement() { return getElement(this); }
|
|
82
82
|
static get watchers() { return {
|
|
@@ -770,7 +770,7 @@ const Q2Search = class {
|
|
|
770
770
|
return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, h("slot", null)), showEmpty && this.renderEmpty(), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" })), this.loading && (h("div", { class: "loading-overlay", "aria-hidden": "true" }, h("q2-loading", { type: "spinner" }))))));
|
|
771
771
|
}
|
|
772
772
|
render() {
|
|
773
|
-
return (h(Fragment, { key: '
|
|
773
|
+
return (h(Fragment, { key: '4b3787554c37521bc3467345cdd1d733cffba3a5' }, h("div", { key: '696caa142cffecf1e0d62afafd826dce37f75512', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("click-elsewhere", { key: 'f8b493ec8f7da09fad48f9fa30f0e9be7fbaedf4', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, h("q2-input", { key: '44e0ad4b7825ac319dd4277ccb93d4dd66acef12', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => loc(e))) ||
|
|
774
774
|
(this.invalid && ['tecton.element.search.invalid']) ||
|
|
775
775
|
[], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
|
|
776
776
|
}
|
|
@@ -186,9 +186,9 @@ const Q2Section = class {
|
|
|
186
186
|
wrapperClasses.push('is-transitioning');
|
|
187
187
|
}
|
|
188
188
|
const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
|
|
189
|
-
return (h("section", { key: '
|
|
189
|
+
return (h("section", { key: '5adb22a7e6cf098fa3cf2325c945c6aa1c20b2d5', class: "wrapper" }, h("header", { key: 'c04df6d07756c27374e4be85ad88848a0c1ac897', class: hasHeader ? 'has-header' : '' }, h("div", { key: '8cd09e8bf367a7510b91106b8ebd4f419faff861', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '195e1523e68c83e294bd92d617b8c4d44e679494', class: "title" }, loc(this.label)), h("div", { key: 'e493986ee113d44bf74b11116003939f3db24bd7', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '44f2dc2ca76acfd800a1435608a75bf6e3258d37', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'b2602555b9282c8149780f65d2fbaa65febc1f50', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '62728524b58cf5cf7aa2531df1218d3bf0b40b0a', type: "chevron-up" })))), h("div", { key: '13ef854a01937880007fb4021b1528c1b83fe937', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
|
|
190
190
|
height: this.contentHeight,
|
|
191
|
-
} }, h("div", { key: '
|
|
191
|
+
} }, h("div", { key: '866d8b0301a9c5979f5b3bd31086d25f73373709', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '36c97155aa106dc1587537066e031c7d6c032295', ref: (el) => (this.contentSlot = el) })))));
|
|
192
192
|
}
|
|
193
193
|
get hostElement() { return getElement(this); }
|
|
194
194
|
static get watchers() { return {
|
|
@@ -73,7 +73,7 @@ const Q2StepperPane = class {
|
|
|
73
73
|
// #region Render Methods
|
|
74
74
|
render() {
|
|
75
75
|
const { label, isActive } = this;
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: '3929b6bdb716394892be2bcdd933864e43f0204e', role: "listitem" }, h(Fragment, { key: 'd913741a6b71aebef92be14fd7ee541a3d5568da' }, h("div", { key: '038d29ac861f70ad15350da7733b39eece30e538', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '56f4c0d9edfe134886d46367f2c801348267b53d' })), h("div", { key: '88bf8a9e1a6124c39d9ac4ee8906f61ac026966a', hidden: true }, h("span", { key: 'db485a5e84ab67fe714f0861fcd05c4b0bd7722f', id: "pane-label" }, h("slot", { key: '940a9a3a8543fd4c64425db2b7ea7b9cf079c947', name: "label", onSlotchange: () => this.contentChange.emit() }, label && loc(label))), h("slot", { key: '74a78697ed1aa85fca66743023d303c7abea0116', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '4fb660b547a2da7dca37de9106b20b93b72aaf83', name: "children" }))));
|
|
77
77
|
}
|
|
78
78
|
get hostElement() { return getElement(this); }
|
|
79
79
|
static get watchers() { return {
|
|
@@ -326,7 +326,7 @@ const Q2StepperVertical = class {
|
|
|
326
326
|
return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (h(Fragment, null, h("span", { class: "sr-only", id: positionId }, positionLabel), h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
|
|
327
327
|
}
|
|
328
328
|
render() {
|
|
329
|
-
return (h(Fragment, { key: '
|
|
329
|
+
return (h(Fragment, { key: 'd2e82613e91ef3acf210781f807807b0fba8e7fc' }, h("ul", { key: '1ad1e36d0fca4b0c1cf793de43d9ea9ccb76974f', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'ee710c6cb41011be7a8223ec817563cfeaeb6b71', role: "list" }, h("slot", { key: '0d1f6f53b73f72f163fc219de8db9736f669720d' }))));
|
|
330
330
|
}
|
|
331
331
|
get hostElement() { return getElement(this); }
|
|
332
332
|
static get watchers() { return {
|
|
@@ -294,7 +294,7 @@ const Q2Stepper = class {
|
|
|
294
294
|
const containerClasses = ['step-container'];
|
|
295
295
|
if (scrollEnabled)
|
|
296
296
|
containerClasses.push('has-scroll');
|
|
297
|
-
return (h(Fragment, { key: '
|
|
297
|
+
return (h(Fragment, { key: '423f7d50f787abf21c14730ae9cd50cd3638b17b' }, h("div", { key: '2ffacd2f9792075956748eb6960975d9aeda28ad', class: containerClasses.join(' ') }, scrollEnabled && (h(Fragment, { key: 'da90a671295ce6702c3bc6f1ab71f671cda2c9c8' }, h("div", { key: '319c4a75dfafd7b03d3f7f13156f24bd1ca7b0c3', class: "gradient-left", hidden: !showScrollLeft }), h("div", { key: '80a08dc979685d94f6cfe20d66787d06e7d46014', class: "gradient-right", hidden: !showScrollRight }), h("q2-btn", { key: '43a71cb3212ddbe37c6e7d7051850efd49ced456', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '19ee5abc690bba84016fb8c692a74b5c233aa426', type: "chevron-left" })), h("q2-btn", { key: 'f26bc502269a5d60308aba041a6d9a75efcf2573', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '7f35a54468433010427213e18d213b1c227413a6', type: "chevron-right" })))), h("ul", { key: '0bc4eed617263c7e4a6138c3a884f6a1b8bc2ca6', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), h("div", { key: '87945c612fcaa70164faa50d78bb63c9b290e3f2', role: "list" }, h("slot", { key: '4b55529f41b4731dc1424c8be4fcd941ff2c2f33', onSlotchange: () => this.onSlotChange() }))));
|
|
298
298
|
}
|
|
299
299
|
get hostElement() { return getElement(this); }
|
|
300
300
|
static get watchers() { return {
|
|
@@ -84,7 +84,7 @@ const Q2Surface = class {
|
|
|
84
84
|
// #endregion
|
|
85
85
|
// #region Render Methods
|
|
86
86
|
render() {
|
|
87
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: 'fba508447ca646c22aa4a14872d78e02294a2fa1' }, h("div", { key: '46ac755e4c071b2345be0ba4272f283ac2758a82', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("slot", { key: '699fdd1427248cdff8ecf1b3b1ca1d4a892dd763' }))));
|
|
88
88
|
}
|
|
89
89
|
get hostElement() { return getElement(this); }
|
|
90
90
|
};
|
|
@@ -337,7 +337,7 @@ const Q2TabContainer = class {
|
|
|
337
337
|
}
|
|
338
338
|
render() {
|
|
339
339
|
const isVertical = this.computedOrientation === 'vertical';
|
|
340
|
-
return (h(Fragment, { key: '
|
|
340
|
+
return (h(Fragment, { key: '37c84e750a2494ea2b4302fd99e0cebc443d58ce' }, h("div", { key: '249effad5ab4e880c2c203ac0e4024557c310679', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '10a7d53d5bde829e5897722cd924d40ce90a0b82' }, h("div", { key: 'b2acc786c41a9d1a8d3e951fdc36ecea3a304664', class: "gradient-left", hidden: !this.showScrollBack }), h("div", { key: 'fa70173c7d845f88417c6b6b6d54884ead80f34f', class: "gradient-right", hidden: !this.showScrollForward }), h("q2-btn", { key: 'd953c160ff42503dce5bb7c60d8234bdd9196d73', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, h("q2-icon", { key: '3980ef873b5d7ae6c50eb868455839344dda9701', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), h("q2-btn", { key: 'a3b1f46355ab1de2f73ac7529b734b684194093f', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, h("q2-icon", { key: 'a2ec50ff7e0cce3716ba890c626fa56e62ecddbb', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), h("ul", { key: 'e42bbb379d396a25b3af96985504a8f4bae1bba0', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '7d1f6ac5262cccb0b7087b3d93f33e46390814af', class: "tab-content" }, h("slot", { key: 'fa341fadca5ba04fe21ef7186cc0e15b5c7357db', onSlotchange: () => this.onSlotChange() }))));
|
|
341
341
|
}
|
|
342
342
|
get hostElement() { return getElement(this); }
|
|
343
343
|
static get watchers() { return {
|
|
@@ -21,7 +21,7 @@ const Q2TabPane = class {
|
|
|
21
21
|
// #endregion
|
|
22
22
|
// #region Render Methods
|
|
23
23
|
render() {
|
|
24
|
-
return (h("div", { key: '
|
|
24
|
+
return (h("div", { key: '1a957a6a6fb4dee7e420d46ad5f576b5b25008c4', 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", { key: '9c9dc847674f0a829feb822808f7e3dac9ac3263' })));
|
|
25
25
|
}
|
|
26
26
|
get hostElement() { return getElement(this); }
|
|
27
27
|
static get watchers() { return {
|
|
@@ -55,9 +55,9 @@ const TectonTabPane = class {
|
|
|
55
55
|
// #endregion
|
|
56
56
|
// #region Render Methods
|
|
57
57
|
render() {
|
|
58
|
-
return (h("div", { key: '
|
|
58
|
+
return (h("div", { key: '313fa13779cd8ecb5439b1a96cb7aaf17f6c871b', 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}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '5207414b205d1e9a25fb1455ca21ff7cc913a5fd' }, h("slot", { key: 'd883e909e38981f315bc1cab9ef57957a616c0d5', name: "loading-wrapper" }), h("iframe", { key: '2f0233d04d3c5be619cb54bfe637252a7ef42d77', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
|
|
59
59
|
return (h("input", { type: "hidden", value: element.value, name: element.key }));
|
|
60
|
-
}))) : (''))), h("div", { key: '
|
|
60
|
+
}))) : (''))), h("div", { key: 'ae5ee8d5a5a7d1b798f4111b33120d301b86a16b', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'cb1057d2b6cb467a25da1577610bfcc5b6300047' }))));
|
|
61
61
|
}
|
|
62
62
|
get hostElement() { return getElement(this); }
|
|
63
63
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@ import { r as a, h as t, g as r } from "./index-Cqkz7Bnm.js";
|
|
|
2
2
|
|
|
3
3
|
const e = class {
|
|
4
4
|
constructor(t) {
|
|
5
|
-
a(this, t),
|
|
5
|
+
a(this, t), this.initialsFontScale = 1,
|
|
6
6
|
// #endregion
|
|
7
7
|
// #region State Properties
|
|
8
8
|
this.badSrc = !1, this.hasDecorator = !1, this.isLoaded = !1,
|
|
@@ -20,7 +20,8 @@ const e = class {
|
|
|
20
20
|
// #endregion
|
|
21
21
|
// #region Component Lifecycle Events
|
|
22
22
|
disconnectedCallback() {
|
|
23
|
-
|
|
23
|
+
var a;
|
|
24
|
+
this.decoratorObserver && this.decoratorObserver.disconnect(), null === (a = this.initialsResizeObserver) || void 0 === a || a.disconnect();
|
|
24
25
|
}
|
|
25
26
|
componentWillLoad() {
|
|
26
27
|
this.checkDecorator();
|
|
@@ -28,6 +29,13 @@ const e = class {
|
|
|
28
29
|
componentDidLoad() {
|
|
29
30
|
this.setupDecoratorObserver();
|
|
30
31
|
}
|
|
32
|
+
componentDidRender() {
|
|
33
|
+
var a, t, r;
|
|
34
|
+
const e = null === (a = this.el.shadowRoot) || void 0 === a ? void 0 : a.querySelector(".avatar-initials text");
|
|
35
|
+
e !== this.observedInitialsText && (null === (t = this.initialsResizeObserver) || void 0 === t || t.disconnect(),
|
|
36
|
+
this.observedInitialsText = e, this.initialsFontScale = 1, e && "function" == typeof ResizeObserver && (null !== (r = this.initialsResizeObserver) && void 0 !== r || (this.initialsResizeObserver = new ResizeObserver((() => this.fitInitials()))),
|
|
37
|
+
this.initialsResizeObserver.observe(e))), this.fitInitials();
|
|
38
|
+
}
|
|
31
39
|
// #endregion
|
|
32
40
|
// #region Watchers
|
|
33
41
|
srcDidUpdate() {
|
|
@@ -49,6 +57,12 @@ const e = class {
|
|
|
49
57
|
const a = Array.from(this.el.children).filter((a => "decorator" === a.getAttribute("slot")));
|
|
50
58
|
this.hasDecorator = a.length > 0;
|
|
51
59
|
}
|
|
60
|
+
fitInitials() {
|
|
61
|
+
const a = this.observedInitialsText;
|
|
62
|
+
if (!a) return;
|
|
63
|
+
const {x: t, y: r, width: e, height: i} = a.getBBox(), o = Math.max(50 - t, t + e - 50, 50 - r, r + i - 50) / this.initialsFontScale, s = o > 50 ? 48 / o : 1;
|
|
64
|
+
Math.abs(s - this.initialsFontScale) < 1e-5 || (this.initialsFontScale = s, 1 === s ? a.style.removeProperty("font-size") : a.style.fontSize = `calc(var(--tct-avatar-font-size, var(--const-px-40, 40px)) * ${s})`);
|
|
65
|
+
}
|
|
52
66
|
setupDecoratorObserver() {
|
|
53
67
|
// Set up MutationObserver to watch for changes to the host element's children
|
|
54
68
|
this.decoratorObserver = new MutationObserver((() => {
|
|
@@ -67,16 +81,16 @@ const e = class {
|
|
|
67
81
|
render() {
|
|
68
82
|
const {computedInitials: a} = this, r = this.src && !this.badSrc, e = this.isLoaded, i = (this.name || this.initials) && (!this.src || this.badSrc), o = !this.name && !this.initials && (!this.src || this.badSrc);
|
|
69
83
|
return t("div", {
|
|
70
|
-
key: "
|
|
84
|
+
key: "d5a32129734a7923c61ecfbace6af0799051b8c9",
|
|
71
85
|
class: `avatar-wrapper size-${this.size}`
|
|
72
86
|
}, this.hasDecorator && t("div", {
|
|
73
|
-
key: "
|
|
87
|
+
key: "a20e35425d03a0b45df79846b1613be993935bab",
|
|
74
88
|
class: "decorator"
|
|
75
89
|
}, t("slot", {
|
|
76
|
-
key: "
|
|
90
|
+
key: "082a7d3022be63825ac0237b0f458eb3fc328737",
|
|
77
91
|
name: "decorator"
|
|
78
92
|
})), r && t("img", {
|
|
79
|
-
key: "
|
|
93
|
+
key: "bc092a5fe3996d53f89bc69146aceb2af53b571a",
|
|
80
94
|
class: "" + (e ? "avatar-img" : "avatar-img-default"),
|
|
81
95
|
"test-id": "userImage",
|
|
82
96
|
src: this.src,
|
|
@@ -84,7 +98,7 @@ const e = class {
|
|
|
84
98
|
onLoad: this.onLoad,
|
|
85
99
|
alt: this.name || ""
|
|
86
100
|
}), i && t("svg", {
|
|
87
|
-
key: "
|
|
101
|
+
key: "385335ea2b6d35d48179cbea4aa3ac3d99e56093",
|
|
88
102
|
viewBox: "0 0 100 100",
|
|
89
103
|
preserveAspectRatio: "xMidYMid meet",
|
|
90
104
|
"test-id": "userInitials",
|
|
@@ -92,18 +106,18 @@ const e = class {
|
|
|
92
106
|
"aria-label": this.name,
|
|
93
107
|
"aria-hidden": !this.name && "true"
|
|
94
108
|
}, t("text", {
|
|
95
|
-
key: "
|
|
109
|
+
key: "fb331a07ddc746787341e31febcf2a267f8f0e33",
|
|
96
110
|
x: "50",
|
|
97
111
|
y: "50",
|
|
98
112
|
"dominant-baseline": "central",
|
|
99
113
|
"text-anchor": "middle",
|
|
100
114
|
"aria-hidden": "true"
|
|
101
115
|
}, a)), o && t("div", {
|
|
102
|
-
key: "
|
|
116
|
+
key: "da7a75cc5e5b4e62eeaa63c399ed0dc6c869e99c",
|
|
103
117
|
"test-id": "fallbackIcon",
|
|
104
118
|
class: "fallback"
|
|
105
119
|
}, t("q2-icon", {
|
|
106
|
-
key: "
|
|
120
|
+
key: "626219dd1528fa7e39d298856be8205f21a6708e",
|
|
107
121
|
type: this.icon
|
|
108
122
|
})));
|
|
109
123
|
}
|
|
@@ -426,9 +426,9 @@ const x = class {
|
|
|
426
426
|
this.optionCount && t.push("has-options");
|
|
427
427
|
const c = this.optionCount > 0;
|
|
428
428
|
return o(i, {
|
|
429
|
-
key: "
|
|
429
|
+
key: "a46abe562647fe64e55427bcc8284bbfc5f01e3f"
|
|
430
430
|
}, o("click-elsewhere", {
|
|
431
|
-
key: "
|
|
431
|
+
key: "667e76295c30be78462ee67128a8fb2c38c01285",
|
|
432
432
|
onChange: this.onClickElsewhere
|
|
433
433
|
}, c ? o(r, null, o("button", {
|
|
434
434
|
class: "tag-wrapper",
|
|
@@ -455,7 +455,7 @@ const x = class {
|
|
|
455
455
|
}, o("slot", {
|
|
456
456
|
name: "decorator"
|
|
457
457
|
}), n(this.label))), c && o("q2-popover", {
|
|
458
|
-
key: "
|
|
458
|
+
key: "805e64b738fc5a0b1a73968636a8843af33834ef",
|
|
459
459
|
ref: e => this.popoverElement = e,
|
|
460
460
|
controlElement: this.dropdownBtn,
|
|
461
461
|
open: this.open,
|
|
@@ -464,7 +464,7 @@ const x = class {
|
|
|
464
464
|
direction: this.popoverDirection,
|
|
465
465
|
align: this.popoverAlignment
|
|
466
466
|
}, o("q2-option-list", {
|
|
467
|
-
key: "
|
|
467
|
+
key: "1d037878cfcf4785439edb9a5693d4dba700e947",
|
|
468
468
|
id: "option-list",
|
|
469
469
|
ref: e => this.optionList = e,
|
|
470
470
|
onChange: this.handleChange,
|
|
@@ -473,7 +473,7 @@ const x = class {
|
|
|
473
473
|
label: n("tecton.element.optionList.label", [ this.optionListLabel ]),
|
|
474
474
|
"no-select": !0
|
|
475
475
|
}, o("slot", {
|
|
476
|
-
key: "
|
|
476
|
+
key: "1039cd355f5b1a7ec7cab1eca80479042060fef4"
|
|
477
477
|
})))));
|
|
478
478
|
}
|
|
479
479
|
get hostElement() {
|
|
@@ -89,6 +89,6 @@ const n = class {
|
|
|
89
89
|
}
|
|
90
90
|
};
|
|
91
91
|
|
|
92
|
-
n.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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background);color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;
|
|
92
|
+
n.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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background);color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;font-size:var(--tct-message-font-size, inherit);line-height:max(1.2em, var(--comp-line-height))}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));--comp-message-background:var(--tct-message-info-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));--comp-message-background:var(--tct-message-success-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));--comp-message-background:var(--tct-message-warning-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));--comp-message-background:var(--tct-message-error-background, var(--tct-message-background, color-mix(in srgb, var(--t-base, #FFFFFF), var(--comp-bar-color) 10%)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}';
|
|
93
93
|
|
|
94
94
|
export { n as q2_message }
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { r as t, c as e, h as i, g as
|
|
1
|
+
import { r as t, c as e, h as i, g as a } from "./index-Cqkz7Bnm.js";
|
|
2
2
|
|
|
3
|
-
import { n
|
|
3
|
+
import { n, o as s, i as o, b as r, l as c } from "./index-CP8pXJ-l.js";
|
|
4
4
|
|
|
5
|
-
import { m as
|
|
5
|
+
import { m as l } from "./mirror-emit-DUjY_ucm.js";
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const h = class {
|
|
8
8
|
constructor(i) {
|
|
9
9
|
t(this, i), this.change = e(this, "change", 7), this.tctChange = e(this, "tctChange", 7),
|
|
10
10
|
/** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */
|
|
11
11
|
this.autoSize = !0,
|
|
12
12
|
/** Allows the component to be disabled should the state of the page require this */
|
|
13
13
|
this.disabled = !1, this.checkSize = () => {
|
|
14
|
-
const {hostElement: t, containerElement: e} = this, i = this.containerWidth > t.clientWidth;
|
|
15
|
-
this.isSmall =
|
|
14
|
+
const {hostElement: t, containerElement: e} = this, i = parseFloat(getComputedStyle(e).fontSize), a = this.containerWidth > t.clientWidth || t.clientWidth < 42 * i;
|
|
15
|
+
this.isSmall = a, n((() => {
|
|
16
16
|
const t = e.clientWidth, i = this.isSmall ? Math.max(this.containerWidth || 0, t) : t;
|
|
17
17
|
this.containerWidth === i || (this.containerWidth = i, this.checkSize());
|
|
18
18
|
}));
|
|
@@ -20,7 +20,7 @@ const l = class {
|
|
|
20
20
|
if (this.disabled) return;
|
|
21
21
|
const {totalPages: e, inputField: i} = this;
|
|
22
22
|
t = parseInt(`${t}`), isNaN(t) || t < 1 ? t = 1 : t > e && (t = e), i.value !== `${t}` && (i.value = `${t}`),
|
|
23
|
-
this.hostElement.onchange || (this.page = t),
|
|
23
|
+
this.hostElement.onchange || (this.page = t), l(this, [ "change", "tctChange" ], {
|
|
24
24
|
page: t,
|
|
25
25
|
perPage: this.perPageWithDefault
|
|
26
26
|
});
|
|
@@ -28,7 +28,7 @@ const l = class {
|
|
|
28
28
|
var e;
|
|
29
29
|
if (this.disabled) return;
|
|
30
30
|
const i = 1 * ((null === (e = t.detail) || void 0 === e ? void 0 : e.value) || this.perPage);
|
|
31
|
-
this.perPage = i,
|
|
31
|
+
this.perPage = i, l(this, [ "change", "tctChange" ], {
|
|
32
32
|
page: this.pageWithDefault,
|
|
33
33
|
perPage: i
|
|
34
34
|
});
|
|
@@ -44,7 +44,9 @@ const l = class {
|
|
|
44
44
|
this.align || (this.align = this.stacked ? "center" : "right");
|
|
45
45
|
}
|
|
46
46
|
componentDidLoad() {
|
|
47
|
-
|
|
47
|
+
var t;
|
|
48
|
+
this.containerWidth = this.containerElement.clientWidth, null === (t = this.resizeObserver) || void 0 === t || t.observe(this.containerElement),
|
|
49
|
+
s(this.hostElement);
|
|
48
50
|
}
|
|
49
51
|
// #endregion
|
|
50
52
|
// #region Listeners
|
|
@@ -52,8 +54,8 @@ const l = class {
|
|
|
52
54
|
var e;
|
|
53
55
|
if (this.disabled) return;
|
|
54
56
|
if (!o(t, this.hostElement)) return;
|
|
55
|
-
const {isFullViewHidden: i, containerElement:
|
|
56
|
-
i ? null === (e =
|
|
57
|
+
const {isFullViewHidden: i, containerElement: a, inputField: n} = this;
|
|
58
|
+
i ? null === (e = a.querySelector("q2-btn:not([disabled])")) || void 0 === e || e.focus() : n.focus();
|
|
57
59
|
}
|
|
58
60
|
// #endregion
|
|
59
61
|
// #region Public Methods API
|
|
@@ -141,7 +143,7 @@ const l = class {
|
|
|
141
143
|
// #region Local Methods
|
|
142
144
|
get containerClasses() {
|
|
143
145
|
const t = [ "container" ];
|
|
144
|
-
return this.stacked && t.push("stacked"), t;
|
|
146
|
+
return this.stacked && t.push("stacked"), this.isSmall && t.push("small"), t;
|
|
145
147
|
}
|
|
146
148
|
get currentRange() {
|
|
147
149
|
const {perPageWithDefault: t, totalWithDefault: e, pageWithDefault: i} = this;
|
|
@@ -175,8 +177,8 @@ const l = class {
|
|
|
175
177
|
return (null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length) > 1;
|
|
176
178
|
}
|
|
177
179
|
get totalPages() {
|
|
178
|
-
const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages:
|
|
179
|
-
return t &&
|
|
180
|
+
const {pagesOnly: t, totalWithDefault: e, perPageWithDefault: i, pages: a} = this;
|
|
181
|
+
return t && a && !isNaN(parseInt(`${a}`)) ? a : Math.ceil(e / i);
|
|
180
182
|
}
|
|
181
183
|
get totalWithDefault() {
|
|
182
184
|
return this.total || 0;
|
|
@@ -206,15 +208,15 @@ const l = class {
|
|
|
206
208
|
}
|
|
207
209
|
render() {
|
|
208
210
|
var t;
|
|
209
|
-
const {pagesOnly: e, recordsOnly:
|
|
211
|
+
const {pagesOnly: e, recordsOnly: a, isFullViewHidden: n, recordTypeWithDefault: s, totalPages: o, totalWithDefault: r, pageWithDefault: l, currentRange: h, nextRange: p, prevRange: d, showPerPageSelect: g, disabled: u} = this, f = l < 2, b = l === o;
|
|
210
212
|
let m = c("tecton.element.pagination.goToNext"), v = c("tecton.element.pagination.goToPrevious");
|
|
211
213
|
return e ? (v = c("tecton.element.pagination.goToPages", {
|
|
212
|
-
next:
|
|
214
|
+
next: l - 1,
|
|
213
215
|
total: o
|
|
214
216
|
}), m = c("tecton.element.pagination.goToPages", {
|
|
215
|
-
next:
|
|
217
|
+
next: l + 1,
|
|
216
218
|
total: o
|
|
217
|
-
})) :
|
|
219
|
+
})) : a && (v = c("tecton.element.pagination.goToRecords", {
|
|
218
220
|
range: d,
|
|
219
221
|
recordType: s.toLowerCase(),
|
|
220
222
|
total: r
|
|
@@ -223,66 +225,66 @@ const l = class {
|
|
|
223
225
|
recordType: s.toLowerCase(),
|
|
224
226
|
total: r
|
|
225
227
|
})), i("nav", {
|
|
226
|
-
key: "
|
|
228
|
+
key: "a427944d7134621fe5c1cc469d554cf60ea69271",
|
|
227
229
|
class: this.containerClasses.join(" "),
|
|
228
230
|
ref: t => this.containerElement = t,
|
|
229
231
|
"aria-label": c("tecton.element.pagination.title")
|
|
230
232
|
}, i("div", {
|
|
231
|
-
key: "
|
|
233
|
+
key: "ab5e3a0dc0a8c3ab99c8d6754097c37ae1c10193",
|
|
232
234
|
class: "description",
|
|
233
235
|
"test-id": "description"
|
|
234
236
|
}, e ? c("tecton.element.pagination.pages", {
|
|
235
|
-
current:
|
|
237
|
+
current: l,
|
|
236
238
|
total: o
|
|
237
239
|
}) : c("tecton.element.pagination.description", {
|
|
238
|
-
range:
|
|
240
|
+
range: h,
|
|
239
241
|
recordType: s.toLowerCase(),
|
|
240
242
|
total: r.toLocaleString()
|
|
241
243
|
})), i("div", {
|
|
242
|
-
key: "
|
|
244
|
+
key: "e84213e3dbeac1bb54fcd8244e486274869c5fa5",
|
|
243
245
|
class: "controls"
|
|
244
246
|
}, i("div", {
|
|
245
|
-
key: "
|
|
247
|
+
key: "f5a4cb3a4d467b2ce412afa2bb016e1843ccb364",
|
|
246
248
|
class: "btn-group"
|
|
247
249
|
}, i("q2-btn", {
|
|
248
|
-
key: "
|
|
250
|
+
key: "b4d315503de340e482ffb042d3cd4dbaff1aa3eb",
|
|
249
251
|
ref: t => this.firstPageBtn = t,
|
|
250
252
|
label: c("tecton.element.pagination.goToFirstPage"),
|
|
251
253
|
disabled: u || f,
|
|
252
|
-
hidden:
|
|
254
|
+
hidden: n,
|
|
253
255
|
onTctClick: () => this.handlePageChange(1),
|
|
254
256
|
"test-id": "firstPageBtn",
|
|
255
257
|
"hide-label": !0
|
|
256
258
|
}, i("q2-icon", {
|
|
257
|
-
key: "
|
|
259
|
+
key: "8d437e9a6b00999eee091accd8581b84a2dbe4fe",
|
|
258
260
|
type: "chevron-double-left"
|
|
259
261
|
})), i("q2-btn", {
|
|
260
|
-
key: "
|
|
262
|
+
key: "bd91788b84cbe8a55fb7e7b53342a6c9a75e3694",
|
|
261
263
|
ref: t => this.prevPageBtn = t,
|
|
262
264
|
label: v,
|
|
263
265
|
disabled: u || f,
|
|
264
|
-
onTctClick: () => this.handlePageChange(
|
|
266
|
+
onTctClick: () => this.handlePageChange(l - 1),
|
|
265
267
|
"test-id": "prevPageBtn",
|
|
266
268
|
"hide-label": !0
|
|
267
269
|
}, i("q2-icon", {
|
|
268
|
-
key: "
|
|
270
|
+
key: "bf9285d825da06e43e330b565ecf46f72a9ad930",
|
|
269
271
|
type: "chevron-left"
|
|
270
272
|
}))), i("div", {
|
|
271
|
-
key: "
|
|
273
|
+
key: "76ce1e31814ec56e7d060200ee8a87c720c5fc1e",
|
|
272
274
|
class: "input-display",
|
|
273
|
-
hidden:
|
|
275
|
+
hidden: n
|
|
274
276
|
}, i("span", {
|
|
275
|
-
key: "
|
|
277
|
+
key: "b1768b78ca08e2f76892823a165448c298d2a5b4",
|
|
276
278
|
"aria-hidden": "true"
|
|
277
279
|
}, c("tecton.element.pagination.page")), i("div", {
|
|
278
|
-
key: "
|
|
280
|
+
key: "8909fdeaf8832ec6a104ffad86258d0d3034fbb3",
|
|
279
281
|
class: "input-wrapper",
|
|
280
282
|
onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
|
|
281
283
|
}, i("q2-input", {
|
|
282
|
-
key: "
|
|
284
|
+
key: "96e0ce1764dc542fcac5a516b608b379bd1453a9",
|
|
283
285
|
ref: t => this.inputField = t,
|
|
284
286
|
type: "number",
|
|
285
|
-
value: `${
|
|
287
|
+
value: `${l}`,
|
|
286
288
|
min: 1,
|
|
287
289
|
max: this.totalPages,
|
|
288
290
|
hideLabel: !0,
|
|
@@ -296,42 +298,42 @@ const l = class {
|
|
|
296
298
|
current: "page",
|
|
297
299
|
disabled: u
|
|
298
300
|
})), i("span", {
|
|
299
|
-
key: "
|
|
301
|
+
key: "3914f78404deab10b4173df5b16c205067c7e15e",
|
|
300
302
|
"aria-hidden": "true"
|
|
301
303
|
}, c("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), i("div", {
|
|
302
|
-
key: "
|
|
304
|
+
key: "b5b441d213d99d04b18c976628ba07142e00856f",
|
|
303
305
|
class: "btn-group"
|
|
304
306
|
}, i("q2-btn", {
|
|
305
|
-
key: "
|
|
307
|
+
key: "3299b27a7d24045f2258288e86702a4b7e6d1e37",
|
|
306
308
|
ref: t => this.nextPageBtn = t,
|
|
307
309
|
label: m,
|
|
308
310
|
disabled: u || b,
|
|
309
|
-
onTctClick: () => this.handlePageChange(
|
|
311
|
+
onTctClick: () => this.handlePageChange(l + 1),
|
|
310
312
|
"test-id": "nextPageBtn",
|
|
311
313
|
"hide-label": !0
|
|
312
314
|
}, i("q2-icon", {
|
|
313
|
-
key: "
|
|
315
|
+
key: "d63e7679e5087a1a03bb17fd0a7c24c0d07bdf87",
|
|
314
316
|
type: "chevron-right"
|
|
315
317
|
})), i("q2-btn", {
|
|
316
|
-
key: "
|
|
318
|
+
key: "f575528380b7d239db48f49353d71b88ba0e2d9e",
|
|
317
319
|
ref: t => this.lastPageBtn = t,
|
|
318
320
|
label: "tecton.element.pagination.goToLastPage",
|
|
319
321
|
disabled: u || b,
|
|
320
|
-
hidden:
|
|
322
|
+
hidden: n,
|
|
321
323
|
onTctClick: () => this.handlePageChange(o),
|
|
322
324
|
"test-id": "lastPageBtn",
|
|
323
325
|
"hide-label": !0
|
|
324
326
|
}, i("q2-icon", {
|
|
325
|
-
key: "
|
|
327
|
+
key: "c76d0fe0dff9095f893604fc41cd4d615075045e",
|
|
326
328
|
type: "chevron-double-right"
|
|
327
329
|
})))), i("div", {
|
|
328
|
-
key: "
|
|
330
|
+
key: "71ad1c246e16a1c84318d7ccf75d50a37246af12",
|
|
329
331
|
class: "per-page",
|
|
330
|
-
hidden:
|
|
332
|
+
hidden: n || !(null === (t = this.perPageIncrements) || void 0 === t ? void 0 : t.length)
|
|
331
333
|
}, g && this.renderPerPage()));
|
|
332
334
|
}
|
|
333
335
|
get hostElement() {
|
|
334
|
-
return
|
|
336
|
+
return a(this);
|
|
335
337
|
}
|
|
336
338
|
static get watchers() {
|
|
337
339
|
return {
|
|
@@ -354,6 +356,6 @@ const l = class {
|
|
|
354
356
|
}
|
|
355
357
|
};
|
|
356
358
|
|
|
357
|
-
|
|
359
|
+
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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:flex;width:100%}:host([align=right]),:host([alignment=right]){justify-content:flex-end}:host([align=center]),:host([alignment=center]){justify-content:center}:host([align=left]),:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.container.small{flex-wrap:wrap;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;max-width:100%}.container.small .description{flex-basis:100%;min-width:0;overflow-wrap:anywhere;text-align:center;white-space:normal;line-height:max(1.2em, var(--app-line-height, 1.428571429em))}.container.small .controls{margin-inline:auto}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-input-align:start;--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}';
|
|
358
360
|
|
|
359
|
-
export {
|
|
361
|
+
export { h as q2_pagination }
|