q2-tecton-elements 1.55.4 → 1.55.5
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 +336 -324
- package/dist/cjs/{index-e0aba375.js → index-f69742cf.js} +1 -1
- package/dist/cjs/{index-e0aba375.js.map → index-f69742cf.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/q2-action-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
- package/dist/cjs/q2-badge_7.cjs.entry.js +9 -1
- package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-calendar.cjs.entry.js +2 -2
- package/dist/cjs/q2-carousel-pane.cjs.entry.js +2 -2
- package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
- package/dist/cjs/q2-chart-donut.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/q2-currency.cjs.entry.js +1 -1
- package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
- package/dist/cjs/q2-detail.cjs.entry.js +1 -1
- package/dist/cjs/q2-dropdown.cjs.entry.js +9 -11
- package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-editable-field.cjs.entry.js +6 -7
- package/dist/cjs/q2-editable-field.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-example.cjs.entry.js +1 -1
- package/dist/cjs/q2-form.cjs.entry.js +1 -1
- package/dist/cjs/q2-formatted-text.cjs.entry.js +1 -1
- package/dist/cjs/q2-item_3.cjs.entry.js +2 -2
- package/dist/cjs/q2-legend.cjs.entry.js +1 -1
- package/dist/cjs/q2-message.cjs.entry.js +1 -1
- package/dist/cjs/q2-modal.cjs.entry.js +1 -1
- package/dist/cjs/q2-month-picker.cjs.entry.js +2 -2
- package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
- package/dist/cjs/q2-option-list_2.cjs.entry.js +8 -4
- package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-pagination.cjs.entry.js +3 -3
- package/dist/cjs/q2-pill.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/q2-radio.cjs.entry.js +1 -1
- package/dist/cjs/q2-relative-time.cjs.entry.js +2 -2
- package/dist/cjs/q2-resize-observer.cjs.entry.js +1 -1
- package/dist/cjs/q2-section.cjs.entry.js +2 -2
- package/dist/cjs/q2-select.cjs.entry.js +2 -2
- package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
- package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
- package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
- package/dist/cjs/q2-textarea.cjs.entry.js +2 -1
- package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/collection-manifest.json +6 -6
- package/dist/collection/components/q2-action-group/q2-action-group.js +1 -1
- package/dist/collection/components/q2-action-sheet/q2-action-sheet.js +1 -1
- package/dist/collection/components/q2-avatar/q2-avatar.js +1 -1
- package/dist/collection/components/q2-btn/q2-btn.js +4 -0
- package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
- package/dist/collection/components/q2-calendar/q2-calendar.js +1 -1
- package/dist/collection/components/q2-calendar/q2-month-picker.js +2 -2
- package/dist/collection/components/q2-carousel/q2-carousel.js +1 -1
- package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +2 -2
- package/dist/collection/components/q2-chart-area/q2-chart-area.js +1 -1
- package/dist/collection/components/q2-chart-bar/q2-chart-bar.js +1 -1
- package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +1 -1
- package/dist/collection/components/q2-checkbox/q2-checkbox.js +1 -1
- package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js +1 -1
- package/dist/collection/components/q2-currency/q2-currency.js +1 -1
- package/dist/collection/components/q2-data-table/q2-data-table.js +8 -8
- package/dist/collection/components/q2-detail/q2-detail.js +1 -1
- package/dist/collection/components/q2-dropdown/q2-dropdown.js +9 -11
- package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
- package/dist/collection/components/q2-editable-field/q2-editable-field.js +12 -7
- package/dist/collection/components/q2-editable-field/q2-editable-field.js.map +1 -1
- package/dist/collection/components/q2-example/q2-example.js +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.js +5 -5
- package/dist/collection/components/q2-form/q2-form.js +1 -1
- package/dist/collection/components/q2-formatted-text/q2-formatted-text.js +1 -1
- package/dist/collection/components/q2-icon/q2-icon.js +4 -0
- package/dist/collection/components/q2-icon/q2-icon.js.map +1 -1
- package/dist/collection/components/q2-input/q2-input.js +2 -2
- package/dist/collection/components/q2-item/q2-item.js +1 -1
- package/dist/collection/components/q2-legend/q2-legend.js +1 -1
- package/dist/collection/components/q2-list/q2-list.js +1 -1
- package/dist/collection/components/q2-message/q2-message.js +1 -1
- package/dist/collection/components/q2-modal/q2-modal.js +1 -1
- package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
- package/dist/collection/components/q2-option-list/q2-option-list.js +7 -7
- package/dist/collection/components/q2-pagination/q2-pagination.js +3 -3
- package/dist/collection/components/q2-pill/q2-pill.js +1 -1
- package/dist/collection/components/q2-popover/q2-popover.js +7 -3
- package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
- package/dist/collection/components/q2-radio/q2-radio.js +1 -1
- package/dist/collection/components/q2-radio-group/q2-radio-group.js +1 -1
- 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-section/q2-section.js +2 -2
- package/dist/collection/components/q2-select/q2-select.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 +3 -3
- package/dist/collection/components/q2-textarea/q2-textarea.js +2 -1
- package/dist/collection/components/q2-textarea/q2-textarea.js.map +1 -1
- package/dist/components/q2-action-group2.js +1 -1
- package/dist/components/q2-action-sheet.js +1 -1
- package/dist/components/q2-avatar2.js +1 -1
- package/dist/components/q2-btn2.js +4 -0
- package/dist/components/q2-btn2.js.map +1 -1
- package/dist/components/q2-calendar.js +1 -1
- package/dist/components/q2-carousel-pane.js +2 -2
- package/dist/components/q2-carousel.js +1 -1
- package/dist/components/q2-chart-area.js +1 -1
- package/dist/components/q2-chart-bar.js +1 -1
- package/dist/components/q2-chart-donut.js +1 -1
- package/dist/components/q2-checkbox-group.js +1 -1
- package/dist/components/q2-checkbox2.js +1 -1
- package/dist/components/q2-currency.js +1 -1
- package/dist/components/q2-data-table.js +1 -1
- package/dist/components/q2-detail.js +1 -1
- package/dist/components/q2-dropdown.js +9 -11
- package/dist/components/q2-dropdown.js.map +1 -1
- package/dist/components/q2-editable-field.js +7 -8
- package/dist/components/q2-editable-field.js.map +1 -1
- package/dist/components/q2-example.js +1 -1
- package/dist/components/q2-form.js +1 -1
- package/dist/components/q2-formatted-text.js +1 -1
- package/dist/components/q2-icon2.js +4 -0
- package/dist/components/q2-icon2.js.map +1 -1
- package/dist/components/q2-input2.js +1 -1
- package/dist/components/q2-item2.js +1 -1
- package/dist/components/q2-legend2.js +1 -1
- package/dist/components/q2-list2.js +1 -1
- package/dist/components/q2-message2.js +1 -1
- package/dist/components/q2-modal.js +1 -1
- package/dist/components/q2-month-picker.js +2 -2
- package/dist/components/q2-optgroup2.js +1 -1
- package/dist/components/q2-option-list2.js +1 -1
- package/dist/components/q2-pagination.js +3 -3
- package/dist/components/q2-pill.js +1 -1
- package/dist/components/q2-popover2.js +7 -3
- package/dist/components/q2-popover2.js.map +1 -1
- package/dist/components/q2-radio-group.js +1 -1
- package/dist/components/q2-radio.js +1 -1
- package/dist/components/q2-relative-time.js +1 -1
- package/dist/components/q2-resize-observer2.js +1 -1
- package/dist/components/q2-section.js +2 -2
- package/dist/components/q2-select2.js +2 -2
- package/dist/components/q2-stepper-pane.js +1 -1
- package/dist/components/q2-stepper.js +1 -1
- package/dist/components/q2-textarea.js +2 -1
- package/dist/components/q2-textarea.js.map +1 -1
- package/dist/esm/{index-3bb7a785.js → index-3184c760.js} +1 -1
- package/dist/esm/{index-3bb7a785.js.map → index-3184c760.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/q2-action-group.entry.js +1 -1
- package/dist/esm/q2-action-sheet.entry.js +1 -1
- package/dist/esm/q2-avatar.entry.js +1 -1
- package/dist/esm/q2-badge_7.entry.js +9 -1
- package/dist/esm/q2-badge_7.entry.js.map +1 -1
- package/dist/esm/q2-calendar.entry.js +2 -2
- package/dist/esm/q2-carousel-pane.entry.js +2 -2
- package/dist/esm/q2-carousel.entry.js +1 -1
- package/dist/esm/q2-chart-area.entry.js +1 -1
- package/dist/esm/q2-chart-bar.entry.js +1 -1
- package/dist/esm/q2-chart-donut.entry.js +1 -1
- package/dist/esm/q2-checkbox-group.entry.js +1 -1
- package/dist/esm/q2-checkbox.entry.js +1 -1
- package/dist/esm/q2-currency.entry.js +1 -1
- package/dist/esm/q2-data-table.entry.js +1 -1
- package/dist/esm/q2-detail.entry.js +1 -1
- package/dist/esm/q2-dropdown.entry.js +9 -11
- package/dist/esm/q2-dropdown.entry.js.map +1 -1
- package/dist/esm/q2-editable-field.entry.js +6 -7
- package/dist/esm/q2-editable-field.entry.js.map +1 -1
- package/dist/esm/q2-example.entry.js +1 -1
- package/dist/esm/q2-form.entry.js +1 -1
- package/dist/esm/q2-formatted-text.entry.js +1 -1
- package/dist/esm/q2-item_3.entry.js +2 -2
- package/dist/esm/q2-legend.entry.js +1 -1
- package/dist/esm/q2-message.entry.js +1 -1
- package/dist/esm/q2-modal.entry.js +1 -1
- package/dist/esm/q2-month-picker.entry.js +2 -2
- package/dist/esm/q2-optgroup.entry.js +1 -1
- package/dist/esm/q2-option-list_2.entry.js +8 -4
- package/dist/esm/q2-option-list_2.entry.js.map +1 -1
- package/dist/esm/q2-pagination.entry.js +3 -3
- package/dist/esm/q2-pill.entry.js +1 -1
- package/dist/esm/q2-radio-group.entry.js +1 -1
- package/dist/esm/q2-radio.entry.js +1 -1
- package/dist/esm/q2-relative-time.entry.js +2 -2
- package/dist/esm/q2-resize-observer.entry.js +1 -1
- package/dist/esm/q2-section.entry.js +2 -2
- package/dist/esm/q2-select.entry.js +2 -2
- package/dist/esm/q2-stepper-pane.entry.js +1 -1
- package/dist/esm/q2-stepper.entry.js +1 -1
- package/dist/esm/q2-tecton-elements.js +1 -1
- package/dist/esm/q2-textarea.entry.js +2 -1
- package/dist/esm/q2-textarea.entry.js.map +1 -1
- package/dist/q2-tecton-elements/{index-3bb7a785.js → index-3184c760.js} +1 -1
- package/dist/q2-tecton-elements/q2-action-group.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-action-sheet.entry.js +62 -62
- package/dist/q2-tecton-elements/q2-avatar.entry.js +6 -6
- package/dist/q2-tecton-elements/q2-badge_7.entry.js +10 -2
- package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-calendar.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-carousel.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-chart-area.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-chart-bar.entry.js +79 -79
- package/dist/q2-tecton-elements/q2-chart-donut.entry.js +100 -100
- package/dist/q2-tecton-elements/q2-checkbox-group.entry.js +13 -13
- package/dist/q2-tecton-elements/q2-checkbox.entry.js +7 -7
- package/dist/q2-tecton-elements/q2-currency.entry.js +6 -6
- package/dist/q2-tecton-elements/q2-data-table.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-detail.entry.js +3 -3
- package/dist/q2-tecton-elements/q2-dropdown.entry.js +13 -15
- package/dist/q2-tecton-elements/q2-dropdown.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-editable-field.entry.js +26 -17
- package/dist/q2-tecton-elements/q2-editable-field.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-example.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-form.entry.js +7 -7
- package/dist/q2-tecton-elements/q2-formatted-text.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-item_3.entry.js +21 -21
- package/dist/q2-tecton-elements/q2-legend.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-message.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-modal.entry.js +17 -17
- package/dist/q2-tecton-elements/q2-month-picker.entry.js +30 -30
- package/dist/q2-tecton-elements/q2-optgroup.entry.js +4 -4
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js +15 -9
- package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-pagination.entry.js +33 -33
- package/dist/q2-tecton-elements/q2-pill.entry.js +13 -13
- package/dist/q2-tecton-elements/q2-radio-group.entry.js +33 -33
- package/dist/q2-tecton-elements/q2-radio.entry.js +8 -8
- package/dist/q2-tecton-elements/q2-relative-time.entry.js +2 -2
- package/dist/q2-tecton-elements/q2-resize-observer.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-section.entry.js +11 -11
- package/dist/q2-tecton-elements/q2-select.entry.js +5 -5
- package/dist/q2-tecton-elements/q2-stepper-pane.entry.js +11 -11
- package/dist/q2-tecton-elements/q2-stepper.entry.js +20 -20
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
- package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
- package/dist/q2-tecton-elements/q2-textarea.entry.js +3 -2
- package/dist/q2-tecton-elements/q2-textarea.entry.js.map +1 -1
- package/dist/types/components/q2-action-group/q2-action-group.d.ts +1 -0
- package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts +60 -0
- package/dist/types/components/q2-btn/q2-btn.d.ts +1 -0
- package/dist/types/components/q2-calendar/q2-calendar.d.ts +327 -0
- package/dist/types/components/q2-carousel/q2-carousel.d.ts +95 -0
- package/dist/types/components/q2-data-table/q2-data-table.d.ts +261 -0
- package/dist/types/components/q2-dropdown/q2-dropdown.d.ts +178 -0
- package/dist/types/components/q2-editable-field/q2-editable-field.d.ts +141 -0
- package/dist/types/components/q2-icon/q2-icon.d.ts +1 -0
- package/dist/types/components/q2-loading/skeleton/shapes.d.ts +1 -0
- package/dist/types/components/q2-optgroup/q2-optgroup.d.ts +1 -1
- package/dist/types/components/q2-option-list/q2-option-list.d.ts +100 -0
- package/dist/types/components/q2-pagination/q2-pagination.d.ts +117 -0
- package/dist/types/components/q2-pill/q2-pill.d.ts +143 -0
- package/dist/types/components/q2-select/q2-select.d.ts +238 -0
- package/dist/types/components/q2-stepper/q2-stepper.d.ts +61 -0
- package/dist/types/components/q2-stepper-vertical/q2-stepper-vertical.d.ts +68 -0
- package/dist/types/components/q2-tab-container/q2-tab-container.d.ts +2 -2
- package/dist/types/components/q2-tag/q2-tag.d.ts +91 -0
- package/dist/types/utils/action-sheet.d.ts +12 -0
- package/package.json +4 -3
- /package/dist/q2-tecton-elements/{index-3bb7a785.js.map → index-3184c760.js.map} +0 -0
- /package/dist/types/{Users/kvanhouten/Documents/Work/tecton_extra → builds/q2e/development/tecton/tecton}/packages/q2-tecton-elements/.stencil/jest.setup.d.ts +0 -0
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
import { IOptionValue } from '../q2-option-list/q2-option-list';
|
|
3
|
+
export declare class Q2Pill implements ComponentInterface {
|
|
4
|
+
mutationObserver: MutationObserver;
|
|
5
|
+
optionList: HTMLQ2OptionListElement;
|
|
6
|
+
popoverBottomContainer: HTMLElement;
|
|
7
|
+
popoverElement: HTMLQ2PopoverElement;
|
|
8
|
+
popoverTopContainer: HTMLElement;
|
|
9
|
+
primaryBtn: HTMLButtonElement;
|
|
10
|
+
primaryBtnWrapper: HTMLElement;
|
|
11
|
+
scheduledAfterRender: (() => void)[];
|
|
12
|
+
hostElement: HTMLElement;
|
|
13
|
+
hasPopoverBottom: boolean;
|
|
14
|
+
hasPopoverTop: boolean;
|
|
15
|
+
optionCount: number;
|
|
16
|
+
selectedOptionElements: HTMLQ2OptionElement[];
|
|
17
|
+
/** Determine if the elements is in the selected state, with values. */
|
|
18
|
+
active: boolean;
|
|
19
|
+
/** Indicates that the pill has no border */
|
|
20
|
+
borderless: boolean;
|
|
21
|
+
/** Indicates the pill cannot be focused or interacted with. */
|
|
22
|
+
disabled: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Instructs the component to use the action sheet workflow for displaying its options.
|
|
25
|
+
*
|
|
26
|
+
* For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
|
|
27
|
+
*/
|
|
28
|
+
hoist: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* The text that populates the label.
|
|
31
|
+
* @localizable
|
|
32
|
+
*/
|
|
33
|
+
label: string;
|
|
34
|
+
/**
|
|
35
|
+
* The maximum number of characters to display before ellipcizing.
|
|
36
|
+
* @info
|
|
37
|
+
* Limitless by default.
|
|
38
|
+
*/
|
|
39
|
+
maxLength: number;
|
|
40
|
+
/**
|
|
41
|
+
* Enables the multi-select ability for the dropdown.
|
|
42
|
+
* @info
|
|
43
|
+
* Only applicable when options are provided.
|
|
44
|
+
*/
|
|
45
|
+
multiple: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Determine whether the popover is open or closed.
|
|
48
|
+
*
|
|
49
|
+
* @readonly
|
|
50
|
+
*/
|
|
51
|
+
open: boolean;
|
|
52
|
+
/** Determines the label that is applied to the option list for accessibility purposes. */
|
|
53
|
+
optionListLabel: string;
|
|
54
|
+
/** Aligns the popover dropdown to the left or right side of the input field. */
|
|
55
|
+
popoverAlignment: 'left' | 'right';
|
|
56
|
+
/**
|
|
57
|
+
* Force the direction of the popover dropdown when it opens.
|
|
58
|
+
* If no value is passed, the component will auto-detect the direction based on available space.
|
|
59
|
+
*/
|
|
60
|
+
popoverDirection: 'up' | 'down';
|
|
61
|
+
/**
|
|
62
|
+
* Force the maximum height of the popover. This value will be interpreted as pixels.
|
|
63
|
+
* If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
|
|
64
|
+
*/
|
|
65
|
+
popoverMaxHeight: number;
|
|
66
|
+
/** @deprecated */
|
|
67
|
+
popoverMinHeight: number;
|
|
68
|
+
/** A list of the selected options on the element. */
|
|
69
|
+
selectedOptions: IOptionValue[];
|
|
70
|
+
/** The color of the element when in the active state. */
|
|
71
|
+
theme: 'primary' | 'secondary' | 'tertiary';
|
|
72
|
+
/** The value emitted when the component is selected. */
|
|
73
|
+
value: string;
|
|
74
|
+
/**
|
|
75
|
+
* Emitted when the pill is clicked or the selected options change.
|
|
76
|
+
*
|
|
77
|
+
* When multi-select is enabled, `value` will be `undefined`.
|
|
78
|
+
* @legacyEvent
|
|
79
|
+
*/
|
|
80
|
+
change: EventEmitter<{
|
|
81
|
+
value: string;
|
|
82
|
+
values: IOptionValue[];
|
|
83
|
+
active: boolean;
|
|
84
|
+
}>;
|
|
85
|
+
disconnectedCallback(): void;
|
|
86
|
+
componentWillLoad(): void;
|
|
87
|
+
componentDidLoad(): void;
|
|
88
|
+
componentDidRender(): void;
|
|
89
|
+
handleSelectedDisplay(): void;
|
|
90
|
+
delegateFocus(event: FocusEvent): void;
|
|
91
|
+
popoverStateHandler({ detail: { open } }: CustomEvent<{
|
|
92
|
+
open: boolean;
|
|
93
|
+
}>): void;
|
|
94
|
+
/**
|
|
95
|
+
* Emulates clicking the `<button>` to hide the popover if it is visible.
|
|
96
|
+
*
|
|
97
|
+
* @testOnly
|
|
98
|
+
*/
|
|
99
|
+
closePopover(): Promise<void>;
|
|
100
|
+
/**
|
|
101
|
+
* Emulates clicking the `<button>` to display the popover if it is hidden.
|
|
102
|
+
*
|
|
103
|
+
* @testOnly
|
|
104
|
+
*/
|
|
105
|
+
openPopover(): Promise<void>;
|
|
106
|
+
/**
|
|
107
|
+
* Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).
|
|
108
|
+
*
|
|
109
|
+
* If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
|
|
110
|
+
* after the option(s) are selected.
|
|
111
|
+
*
|
|
112
|
+
* @testOnly
|
|
113
|
+
*/
|
|
114
|
+
setValue(values: string | string[], options?: {
|
|
115
|
+
closePopover?: boolean;
|
|
116
|
+
}): Promise<void>;
|
|
117
|
+
selectedOptionsChanged(newValue: any): void;
|
|
118
|
+
valueChanged(newValue: any): Promise<void>;
|
|
119
|
+
get buttonContent(): string;
|
|
120
|
+
get truncatedButtonContent(): string;
|
|
121
|
+
_togglePopover(): void;
|
|
122
|
+
clearSelectedOptions: () => void;
|
|
123
|
+
determineOptionCount: () => Promise<void>;
|
|
124
|
+
executeActionSheet: (event: MouseEvent | KeyboardEvent) => Promise<void>;
|
|
125
|
+
getOption: (value: string) => Promise<import("../q2-option-list/q2-option-list").ValidOptionElements>;
|
|
126
|
+
handleFocusOut: (event: FocusEvent) => Promise<void>;
|
|
127
|
+
handleChange: (event: any) => void;
|
|
128
|
+
handleClick: (event: MouseEvent) => Promise<void>;
|
|
129
|
+
handleKeydown: (event: KeyboardEvent) => Promise<void>;
|
|
130
|
+
handleSelectionChanges: (changeDetails: {
|
|
131
|
+
value?: string;
|
|
132
|
+
values?: IOptionValue[];
|
|
133
|
+
}) => Promise<void>;
|
|
134
|
+
handleWrapperClick: () => void;
|
|
135
|
+
onClickElsewhere: (event: CustomEvent) => void;
|
|
136
|
+
onMutationObserved: () => void;
|
|
137
|
+
syncValueProperties: () => void;
|
|
138
|
+
updateSelectedOptionElements: () => Promise<void>;
|
|
139
|
+
updateSlotState: () => void;
|
|
140
|
+
renderHiddenElement(): any;
|
|
141
|
+
renderIcon(): any;
|
|
142
|
+
render(): any;
|
|
143
|
+
}
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
|
|
3
|
+
import { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from "../../components";
|
|
4
|
+
import { IOptionValue } from '../q2-option-list/q2-option-list';
|
|
5
|
+
export declare class Q2Select implements ComponentInterface {
|
|
6
|
+
inputField?: HTMLQ2InputElement;
|
|
7
|
+
mutationObserver: MutationObserver;
|
|
8
|
+
optionList: HTMLQ2OptionListElement;
|
|
9
|
+
popoverElement?: HTMLQ2PopoverElement;
|
|
10
|
+
popoverTopContainer?: HTMLDivElement;
|
|
11
|
+
scheduledAfterRender: (() => void)[];
|
|
12
|
+
statusMessageTimer: NodeJS.Timeout;
|
|
13
|
+
hostElement: HTMLElement;
|
|
14
|
+
hasCustomDisplay: boolean;
|
|
15
|
+
hasPopoverBottom: boolean;
|
|
16
|
+
hasPopoverTop: boolean;
|
|
17
|
+
inputFocused: boolean;
|
|
18
|
+
open: boolean;
|
|
19
|
+
prioritizeSearch: boolean;
|
|
20
|
+
searchText: string;
|
|
21
|
+
showSelected: boolean;
|
|
22
|
+
statusMessage: string;
|
|
23
|
+
structuredSelectedOptions: IOptionValue[];
|
|
24
|
+
/** @deprecated */
|
|
25
|
+
ariaLabel: string;
|
|
26
|
+
/** Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. */
|
|
27
|
+
clearable: boolean;
|
|
28
|
+
/** Disables all interaction with the field and leverages the disabled visual style of `q2-input`. */
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* The presence of `errors` will mark the field as invalid, putting it into an error state.
|
|
32
|
+
* @localizable
|
|
33
|
+
*/
|
|
34
|
+
errors: string[];
|
|
35
|
+
/**
|
|
36
|
+
* Hide's the field's `<label>` element from view.
|
|
37
|
+
* @warning
|
|
38
|
+
* Only use when a visible label is impractical.
|
|
39
|
+
*/
|
|
40
|
+
hideLabel: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Instructs the component to use the action sheet workflow for displaying its options.
|
|
43
|
+
*
|
|
44
|
+
* For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
|
|
45
|
+
* @warning
|
|
46
|
+
* If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,
|
|
47
|
+
* any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.
|
|
48
|
+
* For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.
|
|
49
|
+
*/
|
|
50
|
+
hoist: boolean;
|
|
51
|
+
/** Determines whether to show an error state. Its primary use-case is for an unfilled field. */
|
|
52
|
+
invalid: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* The text that will be used as the label for the field.
|
|
55
|
+
* @localizable
|
|
56
|
+
*/
|
|
57
|
+
label: string;
|
|
58
|
+
/**
|
|
59
|
+
* Determines the label that is applied to the option list for accessibility purposes.
|
|
60
|
+
* @localizable
|
|
61
|
+
*/
|
|
62
|
+
listLabel: string;
|
|
63
|
+
/** The minimum number of rows the component will try to display below or above the component when opened. */
|
|
64
|
+
minRows: number;
|
|
65
|
+
/** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */
|
|
66
|
+
multilineOptions: boolean;
|
|
67
|
+
/** Enables multi-select functionality. */
|
|
68
|
+
multiple: boolean;
|
|
69
|
+
/** Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`. */
|
|
70
|
+
optional: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Text that appears within the field when it is blurred and empty.
|
|
73
|
+
* Placeholder text disappears when the user selects an option.
|
|
74
|
+
* @localizable
|
|
75
|
+
*/
|
|
76
|
+
placeholder: string;
|
|
77
|
+
/** @deprecated */
|
|
78
|
+
popDirection: 'up' | 'down';
|
|
79
|
+
/**
|
|
80
|
+
* Force the maximum height of the popover. This value will be interpreted as pixels.
|
|
81
|
+
* If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
|
|
82
|
+
*/
|
|
83
|
+
popoverMaxHeight: number;
|
|
84
|
+
/**
|
|
85
|
+
* Determines the display mode of the popover.
|
|
86
|
+
*
|
|
87
|
+
* Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
|
|
88
|
+
*
|
|
89
|
+
* @info
|
|
90
|
+
* This is a temporary solution to work around styling issues related to using fixed positioning for the popover
|
|
91
|
+
* when nested inside of elements with transform properties. This will be removed once the popover API is available
|
|
92
|
+
* for use.
|
|
93
|
+
*/
|
|
94
|
+
popoverMode: 'legacy';
|
|
95
|
+
/**
|
|
96
|
+
* Appends "(read only)" to the field label, and field becomes unusable, but remains focusable.
|
|
97
|
+
* Takes priority over `optional` if both are `true`.
|
|
98
|
+
*/
|
|
99
|
+
readonly: boolean;
|
|
100
|
+
/** Enables search functionality. */
|
|
101
|
+
searchable: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Each item in this array should correspond to the value of a `q2-option` element.
|
|
104
|
+
* This property is only relevant for `multiple` (i.e., multi-select) implementations.
|
|
105
|
+
*/
|
|
106
|
+
selectedOptions: string[];
|
|
107
|
+
/**
|
|
108
|
+
* The current value for the select. This should correspond to the value of a nested q2-option element.
|
|
109
|
+
* This property is only relevant for single-select implementations.
|
|
110
|
+
*/
|
|
111
|
+
value: string;
|
|
112
|
+
/**
|
|
113
|
+
* Emitted when an option is selected or deselected.
|
|
114
|
+
*
|
|
115
|
+
* When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property
|
|
116
|
+
* will contain the selected option values.
|
|
117
|
+
*
|
|
118
|
+
* @legacyEvent
|
|
119
|
+
*/
|
|
120
|
+
change: EventEmitter<{
|
|
121
|
+
value: string;
|
|
122
|
+
selectedOptions: string[];
|
|
123
|
+
}>;
|
|
124
|
+
/**
|
|
125
|
+
* Emitted when the input value changes.
|
|
126
|
+
*
|
|
127
|
+
* Requires the `searchable` prop to be set to `true`.
|
|
128
|
+
*/
|
|
129
|
+
input: EventEmitter<{
|
|
130
|
+
query: string;
|
|
131
|
+
}>;
|
|
132
|
+
disconnectedCallback(): void;
|
|
133
|
+
componentWillLoad(): void;
|
|
134
|
+
componentDidLoad(): void;
|
|
135
|
+
componentDidRender(): void;
|
|
136
|
+
onHostElementChange(event: CustomEvent<{
|
|
137
|
+
value: string;
|
|
138
|
+
selectedOptions: string[];
|
|
139
|
+
}>): void;
|
|
140
|
+
onClearHandler(): void;
|
|
141
|
+
handleSelectedDisplay(event: CustomEvent): void;
|
|
142
|
+
delegateFocus(event: FocusEvent): void;
|
|
143
|
+
handleFocusout(event: FocusEvent): void;
|
|
144
|
+
onHostElementInput(event: CustomEvent): void;
|
|
145
|
+
keydownHandler(event: KeyboardEvent): void;
|
|
146
|
+
/**
|
|
147
|
+
* Emulates clicking the `<input>` to hide the popover if it is visible.
|
|
148
|
+
*
|
|
149
|
+
* @testOnly
|
|
150
|
+
*/
|
|
151
|
+
closePopover(): Promise<void>;
|
|
152
|
+
/**
|
|
153
|
+
* Emulates clicking the `<input>` to display the popover if it is hidden.
|
|
154
|
+
*
|
|
155
|
+
* @testOnly
|
|
156
|
+
*/
|
|
157
|
+
openPopover(): Promise<void>;
|
|
158
|
+
/**
|
|
159
|
+
* Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
|
|
160
|
+
*
|
|
161
|
+
* @warning
|
|
162
|
+
* Only applicable when the input is searchable.
|
|
163
|
+
*
|
|
164
|
+
* @testOnly
|
|
165
|
+
*/
|
|
166
|
+
searchOptions(query: string): void;
|
|
167
|
+
/**
|
|
168
|
+
* Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).
|
|
169
|
+
*
|
|
170
|
+
* If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
|
|
171
|
+
* after the option(s) are selected.
|
|
172
|
+
*
|
|
173
|
+
* @testOnly
|
|
174
|
+
*/
|
|
175
|
+
setValue(values: string | string[], options?: {
|
|
176
|
+
closePopover?: boolean;
|
|
177
|
+
}): Promise<void>;
|
|
178
|
+
ariaLabelObserver(): void;
|
|
179
|
+
handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
|
|
180
|
+
openChanged(isOpen: boolean): void;
|
|
181
|
+
buildStructuredSelectedOptions(): void;
|
|
182
|
+
valueUpdated(): void;
|
|
183
|
+
get badgeValue(): string;
|
|
184
|
+
get firstSelectedOptionElement(): HTMLQ2OptionElement;
|
|
185
|
+
get firstSelectedValue(): string;
|
|
186
|
+
get innerInputContainer(): HTMLElement;
|
|
187
|
+
get innerInputField(): HTMLInputElement | HTMLButtonElement;
|
|
188
|
+
get optionElements(): HTMLQ2OptionElement[];
|
|
189
|
+
get popoverMinHeight(): number;
|
|
190
|
+
get selectedDisplay(): string;
|
|
191
|
+
get selectedDisplaySlot(): HTMLElement;
|
|
192
|
+
get wrapperClasses(): string;
|
|
193
|
+
_togglePopover(): void;
|
|
194
|
+
calculateMultiSelectSelectedDisplay(): string;
|
|
195
|
+
calculateSingleSelectSelectedDisplay(): string;
|
|
196
|
+
checkSelectedDisplay(): void | HTMLElement;
|
|
197
|
+
checkSelectedDisplayHeight(): void;
|
|
198
|
+
checkSelectedOptions(): void;
|
|
199
|
+
clearSearchText(): void;
|
|
200
|
+
clearSelectedDisplay(): void;
|
|
201
|
+
clearValue(): void;
|
|
202
|
+
clickedElsewhere: (event: CustomEvent) => void;
|
|
203
|
+
closeDropdown(): void;
|
|
204
|
+
executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
|
|
205
|
+
focusInput(): void;
|
|
206
|
+
handleOptionListExternalKeydown(event: KeyboardEvent): void;
|
|
207
|
+
handleSelectionChanges(changeDetails: {
|
|
208
|
+
value?: string;
|
|
209
|
+
values?: IOptionValue[];
|
|
210
|
+
}): void;
|
|
211
|
+
inputBlurHandler: () => void;
|
|
212
|
+
inputChangeHandler: (event: Event) => void;
|
|
213
|
+
inputClickHandler: (event: MouseEvent) => Promise<void>;
|
|
214
|
+
inputFocusHandler: () => void;
|
|
215
|
+
inputInputHandler: (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
|
|
216
|
+
inputKeydownHandler: (event: KeyboardEvent) => Promise<void>;
|
|
217
|
+
onCustomDisplayClick: (event: MouseEvent) => void;
|
|
218
|
+
onMutationObserved: () => void;
|
|
219
|
+
onOptionListChange: (event: Q2OptionListCustomEvent<{
|
|
220
|
+
value: string;
|
|
221
|
+
values: IOptionValue[];
|
|
222
|
+
}>) => void;
|
|
223
|
+
onPopoverState: ({ detail: { open, action }, }: CustomEvent<{
|
|
224
|
+
open: boolean;
|
|
225
|
+
action: 'close' | 'select' | 'open';
|
|
226
|
+
}>) => void;
|
|
227
|
+
openDropdownWithoutActiveElement(): void;
|
|
228
|
+
setStatusMessage(message: any): void;
|
|
229
|
+
shouldClearSearchText(event: KeyboardEvent): boolean;
|
|
230
|
+
showAllOptions: () => void;
|
|
231
|
+
showSelectedOptions: () => void;
|
|
232
|
+
toggleDropdown(): void;
|
|
233
|
+
visibilityToggleKeyDown: (event: KeyboardEvent) => void;
|
|
234
|
+
renderCustomDisplay(): any;
|
|
235
|
+
renderOptionsDropdown(): any;
|
|
236
|
+
renderVisibilityToggle(): any;
|
|
237
|
+
render(): any;
|
|
238
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
export declare class Q2Stepper implements ComponentInterface {
|
|
3
|
+
listElement: HTMLUListElement;
|
|
4
|
+
resizeObserver: ResizeObserver;
|
|
5
|
+
scheduledAfterRender: (() => void)[];
|
|
6
|
+
hostElement: HTMLElement;
|
|
7
|
+
contentChangeTriggerCount: number;
|
|
8
|
+
scrollEnabled: boolean;
|
|
9
|
+
showScrollLeft: boolean;
|
|
10
|
+
showScrollRight: boolean;
|
|
11
|
+
/** The currently selected step. */
|
|
12
|
+
currentStep: number;
|
|
13
|
+
/**
|
|
14
|
+
* The last step the user may navigate to.
|
|
15
|
+
* @info
|
|
16
|
+
* Will be managed automatically if not provided.
|
|
17
|
+
*/
|
|
18
|
+
lastEnabledStep: number;
|
|
19
|
+
/**
|
|
20
|
+
* Used to determine the number of steps in the stepper.
|
|
21
|
+
* @private
|
|
22
|
+
*/
|
|
23
|
+
stepCount: number;
|
|
24
|
+
/**
|
|
25
|
+
* Emitted when the selected step changes.
|
|
26
|
+
* @legacyEvent
|
|
27
|
+
*/
|
|
28
|
+
change: EventEmitter;
|
|
29
|
+
disconnectedCallback(): void;
|
|
30
|
+
componentWillLoad(): void;
|
|
31
|
+
componentDidLoad(): void;
|
|
32
|
+
componentDidRender(): void;
|
|
33
|
+
defaultChangeHandler(event: CustomEvent): void;
|
|
34
|
+
contentChangeHandler(): void;
|
|
35
|
+
delegateFocus(event: FocusEvent): void;
|
|
36
|
+
statusChangeHandler(event: CustomEvent): void;
|
|
37
|
+
/**
|
|
38
|
+
* Emulates clicking a step in the stepper and emitting the change event.
|
|
39
|
+
*
|
|
40
|
+
* You may provide either the step number or the stepper pane id.
|
|
41
|
+
*
|
|
42
|
+
* If the value is invalid or the step is locked, the method will do nothing.
|
|
43
|
+
* @testOnly
|
|
44
|
+
*/
|
|
45
|
+
selectStep(value: number | string): Promise<void>;
|
|
46
|
+
currentStepChanged(stepNumber: number): void;
|
|
47
|
+
get allPanes(): HTMLQ2StepperPaneElement[];
|
|
48
|
+
checkForPanes: () => void;
|
|
49
|
+
checkScrollState: () => void;
|
|
50
|
+
focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean): void;
|
|
51
|
+
getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label'): string;
|
|
52
|
+
onScrollBtnClick: (direction: 'left' | 'right') => void;
|
|
53
|
+
onSlotChange: () => void;
|
|
54
|
+
onStepClick: (event: any, selectedStep: number) => void;
|
|
55
|
+
onStepKeyDown: (event: KeyboardEvent, stepNumber: number) => void;
|
|
56
|
+
resizeIframe(): void;
|
|
57
|
+
showStep(stepNumber: number): void;
|
|
58
|
+
showStepPane(stepNumber: number): void;
|
|
59
|
+
renderStepBtn(stepIndex: number): any;
|
|
60
|
+
render(): any;
|
|
61
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
interface IBaseStructuredPane {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
description: string;
|
|
6
|
+
isActive: boolean;
|
|
7
|
+
status: string;
|
|
8
|
+
}
|
|
9
|
+
interface IStructuredPane extends IBaseStructuredPane {
|
|
10
|
+
children: IBaseStructuredPane[];
|
|
11
|
+
}
|
|
12
|
+
export declare class Q2StepperVertical implements ComponentInterface {
|
|
13
|
+
expandedStepChildrenList: HTMLUListElement;
|
|
14
|
+
mutationObserver: MutationObserver;
|
|
15
|
+
scheduledAfterRender: (() => void)[];
|
|
16
|
+
hostElement: HTMLElement;
|
|
17
|
+
structuredPanes: IStructuredPane[];
|
|
18
|
+
/** The `id` of the currently selected `q2-stepper-pane`. */
|
|
19
|
+
currentStepId: string;
|
|
20
|
+
/**
|
|
21
|
+
* Emitted when the selected step changes.
|
|
22
|
+
* @legacyEvent
|
|
23
|
+
*/
|
|
24
|
+
change: EventEmitter<{
|
|
25
|
+
selectedStep: HTMLQ2StepperPaneElement;
|
|
26
|
+
selectedStepId: string;
|
|
27
|
+
currentStepId: string;
|
|
28
|
+
}>;
|
|
29
|
+
disconnectedCallback(): void;
|
|
30
|
+
componentWillLoad(): void;
|
|
31
|
+
componentDidLoad(): void;
|
|
32
|
+
componentWillUpdate(): void;
|
|
33
|
+
componentDidRender(): void;
|
|
34
|
+
defaultChangeHandler(event: CustomEvent): void;
|
|
35
|
+
delegateFocus(event: FocusEvent): void;
|
|
36
|
+
statusChangeHandler(): void;
|
|
37
|
+
currentStepChanged(stepId: string): void;
|
|
38
|
+
get allPanes(): HTMLQ2StepperPaneElement[];
|
|
39
|
+
get allRootPanes(): HTMLQ2StepperPaneElement[];
|
|
40
|
+
buildPaneList: () => void;
|
|
41
|
+
determinePaneChanges: (mutations: MutationRecord[]) => void;
|
|
42
|
+
extractDetails(pane: HTMLQ2StepperPaneElement): {
|
|
43
|
+
id: string;
|
|
44
|
+
label: string;
|
|
45
|
+
description: string;
|
|
46
|
+
status: "error" | "complete" | "locked";
|
|
47
|
+
};
|
|
48
|
+
focusStepBtn(stepId: string, forceFocus?: boolean): void;
|
|
49
|
+
getStepId(currentStepId: string, goTo: string): string;
|
|
50
|
+
onStepClick: (event: any, stepId: string) => void;
|
|
51
|
+
onStepKeyDown: (event: KeyboardEvent, stepId: string) => void;
|
|
52
|
+
openCurrentStepChildren(): void;
|
|
53
|
+
resizeIframe(): void;
|
|
54
|
+
setDefaultPane(): void;
|
|
55
|
+
showStep(stepId: string): void;
|
|
56
|
+
showStepPane(stepId: string): void;
|
|
57
|
+
/**
|
|
58
|
+
* A method to select a step corresponding with the step id.
|
|
59
|
+
*
|
|
60
|
+
* @testOnly
|
|
61
|
+
*/
|
|
62
|
+
selectStep(stepId: string): Promise<void>;
|
|
63
|
+
renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string): any;
|
|
64
|
+
renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean): any;
|
|
65
|
+
renderStepBtn(pane: IStructuredPane, index: number): any;
|
|
66
|
+
render(): any;
|
|
67
|
+
}
|
|
68
|
+
export {};
|
|
@@ -67,9 +67,9 @@ export declare class Q2TabContainer implements ComponentInterface {
|
|
|
67
67
|
onResize(): void;
|
|
68
68
|
nameObserver(): void;
|
|
69
69
|
valueObserver(): void;
|
|
70
|
-
get selectedTabValue():
|
|
70
|
+
get selectedTabValue(): string;
|
|
71
71
|
get tabList(): Element;
|
|
72
|
-
get tabPanes():
|
|
72
|
+
get tabPanes(): (HTMLQ2TabPaneElement | HTMLTectonTabPaneElement)[];
|
|
73
73
|
checkScrollState: () => void;
|
|
74
74
|
moveToAdjacentTab: (value: string, direction: 'next' | 'prev' | 'first' | 'last') => void;
|
|
75
75
|
moveToTab: (index: number, shouldFocus?: boolean) => HTMLButtonElement;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
export declare class Q2Tag implements ComponentInterface {
|
|
3
|
+
dropdownBtn: HTMLButtonElement;
|
|
4
|
+
mutationObserver: MutationObserver;
|
|
5
|
+
optionList: HTMLQ2OptionListElement;
|
|
6
|
+
popoverElement: HTMLQ2PopoverElement;
|
|
7
|
+
hostElement: HTMLElement;
|
|
8
|
+
optionCount: number;
|
|
9
|
+
/**
|
|
10
|
+
* Instructs the component to use the action sheet workflow for displaying its options.
|
|
11
|
+
*
|
|
12
|
+
* For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
|
|
13
|
+
*/
|
|
14
|
+
hoist: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* The text that populates the label.
|
|
17
|
+
* @localizable
|
|
18
|
+
*/
|
|
19
|
+
label: string;
|
|
20
|
+
/**
|
|
21
|
+
* Determine whether the popover is open or closed.
|
|
22
|
+
*
|
|
23
|
+
* @readonly
|
|
24
|
+
*/
|
|
25
|
+
open: boolean;
|
|
26
|
+
/** Determines the label that is applied to the option list for accessibility purposes. */
|
|
27
|
+
optionListLabel: string;
|
|
28
|
+
/** Aligns the popover dropdown to the left or right side of the input field. */
|
|
29
|
+
popoverAlignment: 'left' | 'right';
|
|
30
|
+
/**
|
|
31
|
+
* Force the direction of the popover dropdown when it opens.
|
|
32
|
+
* If no value is passed, the component will auto-detect the direction based on available space.
|
|
33
|
+
*/
|
|
34
|
+
popoverDirection: 'up' | 'down';
|
|
35
|
+
/**
|
|
36
|
+
* Force the maximum height of the popover. This value will be interpreted as pixels.
|
|
37
|
+
* If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
|
|
38
|
+
*/
|
|
39
|
+
popoverMaxHeight: number;
|
|
40
|
+
/** @deprecated */
|
|
41
|
+
popoverMinHeight: number;
|
|
42
|
+
/** The color of the element. */
|
|
43
|
+
theme: 'primary' | 'secondary' | 'tertiary';
|
|
44
|
+
/**
|
|
45
|
+
* Emitted when a provided option is clicked.
|
|
46
|
+
*
|
|
47
|
+
* Requires at least one option to be provided.
|
|
48
|
+
*/
|
|
49
|
+
click: EventEmitter<{
|
|
50
|
+
value: string;
|
|
51
|
+
}>;
|
|
52
|
+
disconnectedCallback(): void;
|
|
53
|
+
componentWillLoad(): void;
|
|
54
|
+
componentDidLoad(): void;
|
|
55
|
+
delegateFocus(event: FocusEvent): void;
|
|
56
|
+
popoverStateHandler({ detail: { open } }: CustomEvent<{
|
|
57
|
+
open: boolean;
|
|
58
|
+
}>): void;
|
|
59
|
+
/**
|
|
60
|
+
* Emulates clicking the tag to close the popover when options are provided and the popover is open.
|
|
61
|
+
* @testonly
|
|
62
|
+
*/
|
|
63
|
+
closePopover(): Promise<void>;
|
|
64
|
+
/**
|
|
65
|
+
* Emulates clicking the tag to open the popover when options are provided and the popover is closed.
|
|
66
|
+
* @testonly
|
|
67
|
+
*/
|
|
68
|
+
openPopover(): Promise<void>;
|
|
69
|
+
/**
|
|
70
|
+
* Emulates selecting an option matching the passed value.
|
|
71
|
+
*
|
|
72
|
+
* If the popover is closed, this will open it before selecting the option.
|
|
73
|
+
*
|
|
74
|
+
* If there are not options, or the passed value does not match any option's value, this method does nothing.
|
|
75
|
+
* @testonly
|
|
76
|
+
*/
|
|
77
|
+
selectOption(value: any): Promise<void>;
|
|
78
|
+
_togglePopover(): void;
|
|
79
|
+
determineOptionCount: () => void;
|
|
80
|
+
filterSlottedElements: () => void;
|
|
81
|
+
handleButtonFocusout: (event: FocusEvent) => Promise<void>;
|
|
82
|
+
handleChange: (event: any) => void;
|
|
83
|
+
handleClick: (event: MouseEvent) => Promise<void>;
|
|
84
|
+
handleKeydown: (event: KeyboardEvent) => Promise<void>;
|
|
85
|
+
handleWrapperClick: () => void;
|
|
86
|
+
initMutationObserver: () => void;
|
|
87
|
+
onClickElsewhere: (event: CustomEvent) => void;
|
|
88
|
+
onMutationObserved: () => void;
|
|
89
|
+
renderHiddenElement(): any;
|
|
90
|
+
render(): any;
|
|
91
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ActionSheetListCloseData, ActionSheetListData } from 'q2-tecton-common/lib/utility/action-sheet';
|
|
2
|
+
interface IActionSheetComponent {
|
|
3
|
+
hoist: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const shouldShowActionSheet: (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => boolean;
|
|
6
|
+
export declare const buildListData: (component: IActionSheetListComponent, event?: MouseEvent | KeyboardEvent) => Promise<ActionSheetListData>;
|
|
7
|
+
interface IActionSheetListComponent {
|
|
8
|
+
optionList: HTMLQ2OptionListElement;
|
|
9
|
+
label: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const showActionSheetList: (component: IActionSheetListComponent, event?: MouseEvent | KeyboardEvent) => Promise<ActionSheetListCloseData>;
|
|
12
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "q2-tecton-elements",
|
|
3
|
-
"version": "1.55.
|
|
3
|
+
"version": "1.55.5",
|
|
4
4
|
"description": "Q2 Tecton Custom Elements",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Q2 Tecton Team",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@stencil/core": "4.18.0",
|
|
39
|
-
"q2-tecton-common": "1.55.
|
|
39
|
+
"q2-tecton-common": "1.55.5",
|
|
40
40
|
"swiper": "8.4.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
@@ -60,5 +60,6 @@
|
|
|
60
60
|
"puppeteer": "^20.9.0",
|
|
61
61
|
"typescript": "5.4.5",
|
|
62
62
|
"typescript-eslint": "^7.11.0"
|
|
63
|
-
}
|
|
63
|
+
},
|
|
64
|
+
"gitHead": "fde42507e6c18fec2feef5696361ead75abb0904"
|
|
64
65
|
}
|
|
File without changes
|