@dialpad/dialtone-vue 2.125.0 → 2.125.1-alpha.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/chunks/_plugin-vue2_normalizer-u6G_3nkj.js +33 -0
- package/dist/chunks/_plugin-vue2_normalizer-u6G_3nkj.js.map +1 -0
- package/dist/chunks/dropdown-SMWaTWyF.js +357 -0
- package/dist/chunks/dropdown-SMWaTWyF.js.map +1 -0
- package/dist/chunks/dropdown_constants-EUcDxBrX.js +9 -0
- package/dist/chunks/dropdown_constants-EUcDxBrX.js.map +1 -0
- package/dist/chunks/icon_constants-OpYAAKwF.js +16 -0
- package/dist/chunks/icon_constants-OpYAAKwF.js.map +1 -0
- package/dist/chunks/index-nIyl_PL6.js +372 -0
- package/dist/chunks/index-nIyl_PL6.js.map +1 -0
- package/dist/chunks/index-o4OMWMuv.js +244 -0
- package/dist/chunks/index-o4OMWMuv.js.map +1 -0
- package/dist/chunks/input-1tm09l_-.js +273 -0
- package/dist/chunks/input-1tm09l_-.js.map +1 -0
- package/dist/chunks/input_group-zcAq3DQl.js +141 -0
- package/dist/chunks/input_group-zcAq3DQl.js.map +1 -0
- package/dist/chunks/keyboard_list_navigation-F0O8nht0.js +197 -0
- package/dist/chunks/keyboard_list_navigation-F0O8nht0.js.map +1 -0
- package/dist/chunks/link_constants-vIUB92L4.js +16 -0
- package/dist/chunks/link_constants-vIUB92L4.js.map +1 -0
- package/dist/chunks/list_item_constants-LTUc74pD.js +13 -0
- package/dist/chunks/list_item_constants-LTUc74pD.js.map +1 -0
- package/dist/chunks/modal-VuMFkZFH.js +82 -0
- package/dist/chunks/modal-VuMFkZFH.js.map +1 -0
- package/dist/chunks/notice_action-9NmtQRai.js +182 -0
- package/dist/chunks/notice_action-9NmtQRai.js.map +1 -0
- package/dist/chunks/notice_constants-c--hBFQw.js +6 -0
- package/dist/chunks/notice_constants-c--hBFQw.js.map +1 -0
- package/dist/chunks/popover_constants-qjlEkroB.js +114 -0
- package/dist/chunks/popover_constants-qjlEkroB.js.map +1 -0
- package/dist/chunks/sr_only_close_button-JGole5Xi.js +86 -0
- package/dist/chunks/sr_only_close_button-JGole5Xi.js.map +1 -0
- package/dist/chunks/stack_constants-u7tNqGtc.js +13 -0
- package/dist/chunks/stack_constants-u7tNqGtc.js.map +1 -0
- package/dist/chunks/tab-Qm9LVkYj.js +346 -0
- package/dist/chunks/tab-Qm9LVkYj.js.map +1 -0
- package/dist/component-documentation.json +1 -1
- package/dist/dialtone-vue.js +354 -10368
- package/dist/dialtone-vue.js.map +1 -1
- package/dist/lib/attachment-carousel.js +250 -0
- package/dist/lib/attachment-carousel.js.map +1 -0
- package/dist/lib/avatar.js +369 -0
- package/dist/lib/avatar.js.map +1 -0
- package/dist/lib/badge.js +169 -0
- package/dist/lib/badge.js.map +1 -0
- package/dist/lib/banner.js +200 -0
- package/dist/lib/banner.js.map +1 -0
- package/dist/lib/breadcrumbs.js +138 -0
- package/dist/lib/breadcrumbs.js.map +1 -0
- package/dist/lib/button-group.js +45 -0
- package/dist/lib/button-group.js.map +1 -0
- package/dist/lib/button.js +328 -0
- package/dist/lib/button.js.map +1 -0
- package/dist/lib/callbar-button-with-popover.js +235 -0
- package/dist/lib/callbar-button-with-popover.js.map +1 -0
- package/dist/lib/callbar-button.js +175 -0
- package/dist/lib/callbar-button.js.map +1 -0
- package/dist/lib/callbox.js +142 -0
- package/dist/lib/callbox.js.map +1 -0
- package/dist/lib/card.js +72 -0
- package/dist/lib/card.js.map +1 -0
- package/dist/lib/checkbox-group.js +117 -0
- package/dist/lib/checkbox-group.js.map +1 -0
- package/dist/lib/checkbox.js +117 -0
- package/dist/lib/checkbox.js.map +1 -0
- package/dist/lib/chip.js +186 -0
- package/dist/lib/chip.js.map +1 -0
- package/dist/lib/codeblock.js +29 -0
- package/dist/lib/codeblock.js.map +1 -0
- package/dist/lib/collapsible.js +313 -0
- package/dist/lib/collapsible.js.map +1 -0
- package/dist/lib/combobox-multi-select.js +433 -0
- package/dist/lib/combobox-multi-select.js.map +1 -0
- package/dist/lib/combobox-with-popover.js +341 -0
- package/dist/lib/combobox-with-popover.js.map +1 -0
- package/dist/lib/combobox.js +19 -0
- package/dist/lib/combobox.js.map +1 -0
- package/dist/lib/constants.js +53 -0
- package/dist/lib/constants.js.map +1 -0
- package/dist/lib/contact-info.js +145 -0
- package/dist/lib/contact-info.js.map +1 -0
- package/dist/lib/contact-row.js +203 -0
- package/dist/lib/contact-row.js.map +1 -0
- package/dist/lib/datepicker.js +552 -0
- package/dist/lib/datepicker.js.map +1 -0
- package/dist/lib/dates.js +57 -0
- package/dist/lib/dates.js.map +1 -0
- package/dist/lib/description-list.js +83 -0
- package/dist/lib/description-list.js.map +1 -0
- package/dist/lib/dropdown.js +45 -0
- package/dist/lib/dropdown.js.map +1 -0
- package/dist/lib/editor.js +527 -0
- package/dist/lib/editor.js.map +1 -0
- package/dist/{emoji_picker-kiTOKaq8.js → lib/emoji-picker.js} +30 -12
- package/dist/lib/emoji-picker.js.map +1 -0
- package/dist/lib/emoji-row.js +83 -0
- package/dist/lib/emoji-row.js.map +1 -0
- package/dist/{emoji_text_wrapper-48ClwKvf.js → lib/emoji-text-wrapper.js} +19 -14
- package/dist/lib/emoji-text-wrapper.js.map +1 -0
- package/dist/lib/emoji.js +11 -0
- package/dist/{emoji.js.map → lib/emoji.js.map} +1 -1
- package/dist/lib/feed-item-row.js +207 -0
- package/dist/lib/feed-item-row.js.map +1 -0
- package/dist/lib/feed-pill.js +142 -0
- package/dist/lib/feed-pill.js.map +1 -0
- package/dist/lib/general-row.js +379 -0
- package/dist/lib/general-row.js.map +1 -0
- package/dist/lib/group-row.js +115 -0
- package/dist/lib/group-row.js.map +1 -0
- package/dist/lib/grouped-chip.js +45 -0
- package/dist/lib/grouped-chip.js.map +1 -0
- package/dist/lib/hovercard.js +194 -0
- package/dist/lib/hovercard.js.map +1 -0
- package/dist/lib/icon.js +82 -0
- package/dist/lib/icon.js.map +1 -0
- package/dist/lib/image-viewer.js +171 -0
- package/dist/lib/image-viewer.js.map +1 -0
- package/dist/lib/input-group.js +90 -0
- package/dist/lib/input-group.js.map +1 -0
- package/dist/lib/input.js +455 -0
- package/dist/lib/input.js.map +1 -0
- package/dist/lib/item-layout.js +39 -0
- package/dist/lib/item-layout.js.map +1 -0
- package/dist/lib/ivr-node.js +195 -0
- package/dist/lib/ivr-node.js.map +1 -0
- package/dist/lib/keyboard-shortcut.js +100 -0
- package/dist/lib/keyboard-shortcut.js.map +1 -0
- package/dist/lib/lazy-show.js +77 -0
- package/dist/lib/lazy-show.js.map +1 -0
- package/dist/lib/link.js +69 -0
- package/dist/lib/link.js.map +1 -0
- package/dist/lib/list-item-group.js +59 -0
- package/dist/lib/list-item-group.js.map +1 -0
- package/dist/lib/list-item.js +195 -0
- package/dist/lib/list-item.js.map +1 -0
- package/dist/{message_input.js → lib/message-input.js} +107 -56
- package/dist/lib/message-input.js.map +1 -0
- package/dist/lib/mixins.js +17 -0
- package/dist/lib/mixins.js.map +1 -0
- package/dist/lib/modal.js +324 -0
- package/dist/lib/modal.js.map +1 -0
- package/dist/lib/notice.js +158 -0
- package/dist/lib/notice.js.map +1 -0
- package/dist/lib/pagination.js +142 -0
- package/dist/lib/pagination.js.map +1 -0
- package/dist/lib/popover.js +779 -0
- package/dist/lib/popover.js.map +1 -0
- package/dist/lib/presence.js +60 -0
- package/dist/lib/presence.js.map +1 -0
- package/dist/lib/radio-group.js +97 -0
- package/dist/lib/radio-group.js.map +1 -0
- package/dist/lib/radio.js +111 -0
- package/dist/lib/radio.js.map +1 -0
- package/dist/lib/rich-text-editor.js +920 -0
- package/dist/lib/rich-text-editor.js.map +1 -0
- package/dist/lib/root-layout.js +127 -0
- package/dist/lib/root-layout.js.map +1 -0
- package/dist/lib/select-menu.js +243 -0
- package/dist/lib/select-menu.js.map +1 -0
- package/dist/lib/settings-menu-button.js +65 -0
- package/dist/lib/settings-menu-button.js.map +1 -0
- package/dist/lib/skeleton.js +574 -0
- package/dist/lib/skeleton.js.map +1 -0
- package/dist/lib/stack.js +118 -0
- package/dist/lib/stack.js.map +1 -0
- package/dist/lib/tabs.js +93 -0
- package/dist/lib/tabs.js.map +1 -0
- package/dist/lib/time-pill.js +43 -0
- package/dist/lib/time-pill.js.map +1 -0
- package/dist/lib/toast.js +226 -0
- package/dist/lib/toast.js.map +1 -0
- package/dist/lib/toggle.js +169 -0
- package/dist/lib/toggle.js.map +1 -0
- package/dist/{directives.js → lib/tooltip-directive.js} +24 -18
- package/dist/lib/tooltip-directive.js.map +1 -0
- package/dist/lib/tooltip.js +376 -0
- package/dist/lib/tooltip.js.map +1 -0
- package/dist/lib/top-banner-info.js +60 -0
- package/dist/lib/top-banner-info.js.map +1 -0
- package/dist/lib/unread-pill.js +61 -0
- package/dist/lib/unread-pill.js.map +1 -0
- package/dist/lib/utils.js +175 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/validation-messages.js +83 -0
- package/dist/lib/validation-messages.js.map +1 -0
- package/dist/lib/validators.js +12 -0
- package/dist/lib/validators.js.map +1 -0
- package/dist/style.css +1 -1
- package/dist/types/common/{constants.d.ts → constants/index.d.ts} +1 -1
- package/dist/types/common/constants/index.d.ts.map +1 -0
- package/dist/types/common/{dates.d.ts → dates/index.d.ts} +1 -1
- package/dist/types/common/dates/index.d.ts.map +1 -0
- package/dist/types/common/{emoji.d.ts → emoji/index.d.ts} +1 -1
- package/dist/types/common/{emoji.d.ts.map → emoji/index.d.ts.map} +1 -1
- package/dist/types/common/{utils.d.ts → utils/index.d.ts} +1 -1
- package/dist/types/common/utils/index.d.ts.map +1 -0
- package/dist/types/common/{validators.d.ts → validators/index.d.ts} +1 -1
- package/dist/types/common/validators/index.d.ts.map +1 -0
- package/dist/types/components/avatar/avatar.vue.d.ts +1 -1
- package/dist/types/components/button/button.vue.d.ts +2 -2
- package/dist/types/components/card/card.vue.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.vue.d.ts +7 -7
- package/dist/types/components/checkbox/checkbox.vue.d.ts.map +1 -1
- package/dist/types/components/chip/chip.vue.d.ts +2 -2
- package/dist/types/components/collapsible/collapsible.vue.d.ts +3 -3
- package/dist/types/components/combobox/combobox.vue.d.ts +7 -8
- package/dist/types/components/combobox/combobox.vue.d.ts.map +1 -1
- package/dist/types/components/dropdown/dropdown.vue.d.ts +1 -1
- package/dist/types/components/emoji/emoji.vue.d.ts +1 -1
- package/dist/types/components/emoji_picker/modules/emoji_selector.vue.d.ts +1 -219
- package/dist/types/components/icon/icon.vue.d.ts +20 -16
- package/dist/types/components/icon/icon.vue.d.ts.map +1 -1
- package/dist/types/components/icon/icon_constants.d.ts +2 -0
- package/dist/types/components/icon/icon_constants.d.ts.map +1 -1
- package/dist/types/components/icon/index.d.ts +1 -1
- package/dist/types/components/input_group/input_group.vue.d.ts +15 -6
- package/dist/types/components/input_group/input_group.vue.d.ts.map +1 -1
- package/dist/types/components/list_item_group/list_item_group.vue.d.ts +1 -1
- package/dist/types/components/modal/modal.vue.d.ts +7 -2
- package/dist/types/components/modal/modal.vue.d.ts.map +1 -1
- package/dist/types/components/notice/notice_action.vue.d.ts +3 -1
- package/dist/types/components/notice/notice_action.vue.d.ts.map +1 -1
- package/dist/types/components/popover/popover_header_footer.vue.d.ts +1 -1
- package/dist/types/components/radio/radio.vue.d.ts +2 -12
- package/dist/types/components/radio/radio.vue.d.ts.map +1 -1
- package/dist/types/components/skeleton/skeleton-list-item.vue.d.ts +1 -1
- package/dist/types/components/skeleton/skeleton-paragraph.vue.d.ts +3 -3
- package/dist/types/components/skeleton/skeleton-shape.vue.d.ts +2 -2
- package/dist/types/components/skeleton/skeleton-text.vue.d.ts +8 -3
- package/dist/types/components/skeleton/skeleton-text.vue.d.ts.map +1 -1
- package/dist/types/components/skeleton/skeleton.vue.d.ts +1 -1
- package/dist/types/components/toggle/toggle.vue.d.ts +1 -1
- package/dist/types/components/tooltip/tooltip.vue.d.ts +2 -2
- package/dist/types/index.d.ts +36 -29
- package/dist/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts +1 -1
- package/dist/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +2 -2
- package/dist/types/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.d.ts +1 -1
- package/dist/types/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.d.ts +2 -2
- package/package.json +18 -58
- package/CHANGELOG.json +0 -1
- package/CHANGELOG.md +0 -2904
- package/dist/dialtone-vue.cjs +0 -6
- package/dist/dialtone-vue.cjs.map +0 -1
- package/dist/directives.cjs +0 -2
- package/dist/directives.cjs.map +0 -1
- package/dist/directives.js.map +0 -1
- package/dist/emoji.cjs +0 -2
- package/dist/emoji.cjs.map +0 -1
- package/dist/emoji.js +0 -36
- package/dist/emoji_picker-kiTOKaq8.js.map +0 -1
- package/dist/emoji_picker-njWWAm6V.cjs +0 -2
- package/dist/emoji_picker-njWWAm6V.cjs.map +0 -1
- package/dist/emoji_text_wrapper-48ClwKvf.js.map +0 -1
- package/dist/emoji_text_wrapper-ZlynvHnd.cjs +0 -2
- package/dist/emoji_text_wrapper-ZlynvHnd.cjs.map +0 -1
- package/dist/index-OF94C6nQ.js +0 -142834
- package/dist/index-OF94C6nQ.js.map +0 -1
- package/dist/index-Wx7Jagcr.cjs +0 -2
- package/dist/index-Wx7Jagcr.cjs.map +0 -1
- package/dist/message_input.cjs +0 -2
- package/dist/message_input.cjs.map +0 -1
- package/dist/message_input.js.map +0 -1
- package/dist/rich_text_editor-RVMsCB8N.cjs +0 -98
- package/dist/rich_text_editor-RVMsCB8N.cjs.map +0 -1
- package/dist/rich_text_editor-eMvTs_Gp.js +0 -16479
- package/dist/rich_text_editor-eMvTs_Gp.js.map +0 -1
- package/dist/tooltip-88U5vFMA.js +0 -2517
- package/dist/tooltip-88U5vFMA.js.map +0 -1
- package/dist/tooltip-i2wxFIIi.cjs +0 -22
- package/dist/tooltip-i2wxFIIi.cjs.map +0 -1
- package/dist/types/common/constants.d.ts.map +0 -1
- package/dist/types/common/dates.d.ts.map +0 -1
- package/dist/types/common/utils.d.ts.map +0 -1
- package/dist/types/common/validators.d.ts.map +0 -1
- package/dist/types/components/emoji_picker/emojis/index.d.ts +0 -50
- package/dist/types/components/emoji_picker/emojis/index.d.ts.map +0 -1
- package/dist/types/directives.d.ts +0 -2
- package/dist/types/directives.d.ts.map +0 -1
- package/dist/types/emoji.d.ts +0 -5
- package/dist/types/emoji.d.ts.map +0 -1
- package/dist/types/message_input.d.ts +0 -3
- package/dist/types/message_input.d.ts.map +0 -1
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
const E = {
|
|
2
|
+
methods: {
|
|
3
|
+
/**
|
|
4
|
+
* Scroll an element into view if it is not fully visible in its nearest scrollable ancestor.
|
|
5
|
+
* @param {Element} ref
|
|
6
|
+
*/
|
|
7
|
+
scrollElementIntoViewIfNeeded(e, i, s, n) {
|
|
8
|
+
e.scrollIntoViewIfNeeded ? this.scrollIntoViewIfNeeded(e, i, s, n) : this.scrollIntoView(e, "bottom", !1, s, n);
|
|
9
|
+
},
|
|
10
|
+
/**
|
|
11
|
+
* Scroll an element to the top or bottom of its scroll ancestor.
|
|
12
|
+
* @param {Element} ref
|
|
13
|
+
*/
|
|
14
|
+
scrollElementIntoView(e, i, s, n) {
|
|
15
|
+
if (i === "center") {
|
|
16
|
+
this.scrollIntoView(e, "center", !1, s, n);
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
i === !1 ? this.scrollIntoView(e, "bottom", !1, s, n) : this.scrollIntoView(e, "top", !1, s, n);
|
|
20
|
+
},
|
|
21
|
+
scrollIntoViewIfNeeded(e, i, s, n) {
|
|
22
|
+
const r = i ? "center" : void 0;
|
|
23
|
+
this.scrollIntoView(e, r, !0, s, n);
|
|
24
|
+
},
|
|
25
|
+
scrollIntoView(e, i, s, n, r) {
|
|
26
|
+
if (!e || !e.parentElement)
|
|
27
|
+
return;
|
|
28
|
+
const l = e.offsetTop, h = r || e.parentElement, c = this._getScrollBounds(h), m = c.bottom - c.top, d = this._getElementHeight(e), g = l + d;
|
|
29
|
+
let t = -1;
|
|
30
|
+
switch (i) {
|
|
31
|
+
case "top":
|
|
32
|
+
t = l;
|
|
33
|
+
break;
|
|
34
|
+
case "center":
|
|
35
|
+
t = l + (d - m) / 2;
|
|
36
|
+
break;
|
|
37
|
+
case "bottom":
|
|
38
|
+
t = t = g - m;
|
|
39
|
+
break;
|
|
40
|
+
default:
|
|
41
|
+
l - c.top <= m / 2 ? t = l : t = g - m;
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
this._setScrollTop(h, t, c, l, g, s, n);
|
|
45
|
+
},
|
|
46
|
+
_setScrollTop(e, i, s, n, r, l, h) {
|
|
47
|
+
s = s || this._getScrollBounds(e);
|
|
48
|
+
const c = s.bottom - s.top;
|
|
49
|
+
if (l && this._inScrollBounds(n, r, s))
|
|
50
|
+
if (n < s.top)
|
|
51
|
+
i = n;
|
|
52
|
+
else if (r > s.bottom)
|
|
53
|
+
i = r - c;
|
|
54
|
+
else
|
|
55
|
+
return;
|
|
56
|
+
h ? e.scrollTo({ top: i, behavior: h }) : e.scrollTop = i;
|
|
57
|
+
},
|
|
58
|
+
_getElementHeight(e) {
|
|
59
|
+
return e.getBoundingClientRect().height;
|
|
60
|
+
},
|
|
61
|
+
_getScrollBounds(e) {
|
|
62
|
+
const i = this._getElementHeight(e), s = e.scrollTop;
|
|
63
|
+
return {
|
|
64
|
+
top: s,
|
|
65
|
+
bottom: s + i
|
|
66
|
+
};
|
|
67
|
+
},
|
|
68
|
+
_inScrollBounds(e, i, s) {
|
|
69
|
+
const n = i - e;
|
|
70
|
+
return i <= s.bottom + 3 * n / 4 && e >= s.top - n / 4;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}, N = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", w = ({
|
|
74
|
+
// Role of the list items in the component. This is used to identify the list items
|
|
75
|
+
// so you must update this if the role of your list items is anything other than 'option'
|
|
76
|
+
listItemRole: e = "option",
|
|
77
|
+
// Key of the data prop that will be added to the component.
|
|
78
|
+
indexKey: i = "highlightIndex",
|
|
79
|
+
idKey: s = "highlightId",
|
|
80
|
+
// Key of the method that references the list element.
|
|
81
|
+
listElementKey: n = "listRef",
|
|
82
|
+
// Optional, Key of the computed prop that references the currently active item element.
|
|
83
|
+
activeItemKey: r = "",
|
|
84
|
+
// Optional, name of the method that toggles the list visibility. Used for
|
|
85
|
+
// opening the list when up or down is pressed.
|
|
86
|
+
openMethod: l = null,
|
|
87
|
+
// Optional, method to call when the highlightIndex is changed.
|
|
88
|
+
afterHighlightMethod: h = null,
|
|
89
|
+
// Optional, method to call when the highlightIndex goes past the beginning of the list.
|
|
90
|
+
beginningOfListMethod: c = null,
|
|
91
|
+
// Optional, method to call when the highlightIndex goes past the end of the list.
|
|
92
|
+
endOfListMethod: m = null,
|
|
93
|
+
// Scroll the active element into view when highlighted by a keyboard event.
|
|
94
|
+
scrollToOnHighlight: d = !0,
|
|
95
|
+
// Focus the active element on keyboard navigation.
|
|
96
|
+
focusOnKeyboardNavigation: g = !1
|
|
97
|
+
} = {}) => ({
|
|
98
|
+
mixins: [E],
|
|
99
|
+
data() {
|
|
100
|
+
return {
|
|
101
|
+
[i]: -1,
|
|
102
|
+
[s]: "",
|
|
103
|
+
scrollToOnHighlight: d,
|
|
104
|
+
focusOnKeyboardNavigation: g
|
|
105
|
+
};
|
|
106
|
+
},
|
|
107
|
+
provide() {
|
|
108
|
+
return {
|
|
109
|
+
highlightId: () => this[s]
|
|
110
|
+
};
|
|
111
|
+
},
|
|
112
|
+
methods: {
|
|
113
|
+
// Returns the list element
|
|
114
|
+
// this[listElement]() can return a Vue component, in which case we need to target
|
|
115
|
+
// the $el property, or it can simply be an html element.
|
|
116
|
+
_getListElement() {
|
|
117
|
+
var t;
|
|
118
|
+
return ((t = this[n]()) == null ? void 0 : t.$el) || this[n]();
|
|
119
|
+
},
|
|
120
|
+
// Gets the length of all the items in the list, uses the listItemRole param to determine
|
|
121
|
+
// whether an element is a list item.
|
|
122
|
+
_itemsLength() {
|
|
123
|
+
const t = this._getListItemNodes();
|
|
124
|
+
return t === null ? 0 : t.length;
|
|
125
|
+
},
|
|
126
|
+
// Gets all the list item nodes within the list element
|
|
127
|
+
_getListItemNodes() {
|
|
128
|
+
const t = this._getListElement();
|
|
129
|
+
return t ? Array.from(t.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(N, t), null);
|
|
130
|
+
},
|
|
131
|
+
onUpKey() {
|
|
132
|
+
l && this[l](!0), this[i] > 0 ? this.setHighlightIndex(this[i] - 1) : c && this[c](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
|
|
133
|
+
},
|
|
134
|
+
onDownKey() {
|
|
135
|
+
l && this[l](!0), this[i] < this._itemsLength() - 1 ? this.setHighlightIndex(this[i] + 1) : m && this[m](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
|
|
136
|
+
},
|
|
137
|
+
onHomeKey() {
|
|
138
|
+
this.jumpToBeginning(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
|
|
139
|
+
},
|
|
140
|
+
onEndKey() {
|
|
141
|
+
this.jumpToEnd(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
|
|
142
|
+
},
|
|
143
|
+
onNavigationKey(t) {
|
|
144
|
+
const o = this._getListItemNodes(), I = o.filter((f) => f.textContent.trim().toLowerCase().startsWith(t.toLowerCase()));
|
|
145
|
+
if (I.length <= 0)
|
|
146
|
+
return;
|
|
147
|
+
const u = I.findIndex((f) => this[i] === o.indexOf(f)), a = o.indexOf(
|
|
148
|
+
u < I.length - 1 ? I[u + 1] : I[0]
|
|
149
|
+
);
|
|
150
|
+
this.setHighlightIndex(a), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
|
|
151
|
+
},
|
|
152
|
+
isValidLetter(t) {
|
|
153
|
+
return t.length > 1 ? !1 : t >= "a" && t <= "z" || t >= "A" && t <= "Z";
|
|
154
|
+
},
|
|
155
|
+
jumpToBeginning() {
|
|
156
|
+
this.setHighlightIndex(0);
|
|
157
|
+
},
|
|
158
|
+
jumpToEnd() {
|
|
159
|
+
this.setHighlightIndex(this._itemsLength() - 1);
|
|
160
|
+
},
|
|
161
|
+
setHighlightIndex(t) {
|
|
162
|
+
this[i] = t, this[s] = this._getItemId(t), this._itemsLength() && h && this[h](t);
|
|
163
|
+
},
|
|
164
|
+
setHighlightId(t) {
|
|
165
|
+
this[s] = t, this[i] = this._getItemIndex(t), this._itemsLength() && h && this[h](this._getItemIndex(t));
|
|
166
|
+
},
|
|
167
|
+
_getItemIndex(t) {
|
|
168
|
+
const o = this._getListElement();
|
|
169
|
+
return o ? Array.from(o.querySelectorAll(`[role="${e}"], #sr-only-close-button`)).indexOf(o.querySelector(`#${t}`)) : void 0;
|
|
170
|
+
},
|
|
171
|
+
_getItemId(t) {
|
|
172
|
+
var I;
|
|
173
|
+
const o = this._getListElement();
|
|
174
|
+
if (o)
|
|
175
|
+
return (I = o.querySelectorAll(`[role="${e}"], #sr-only-close-button`)[t]) == null ? void 0 : I.id;
|
|
176
|
+
},
|
|
177
|
+
scrollActiveItemIntoViewIfNeeded() {
|
|
178
|
+
if (!this.scrollToOnHighlight)
|
|
179
|
+
return;
|
|
180
|
+
const t = this[r];
|
|
181
|
+
if (t) {
|
|
182
|
+
const o = this._getListElement();
|
|
183
|
+
this.scrollElementIntoViewIfNeeded(t, null, null, o);
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
focusActiveItemIfNeeded() {
|
|
187
|
+
if (!this.focusOnKeyboardNavigation)
|
|
188
|
+
return;
|
|
189
|
+
const t = this[r];
|
|
190
|
+
t && t.focus();
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
export {
|
|
195
|
+
w as K
|
|
196
|
+
};
|
|
197
|
+
//# sourceMappingURL=keyboard_list_navigation-F0O8nht0.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyboard_list_navigation-F0O8nht0.js","sources":["../../common/mixins/dom.js","../../common/mixins/keyboard_list_navigation.js"],"sourcesContent":["export default {\n methods: {\n /**\n * Scroll an element into view if it is not fully visible in its nearest scrollable ancestor.\n * @param {Element} ref\n */\n scrollElementIntoViewIfNeeded (ref, opt_center, opt_behavior, opt_parent) {\n if (ref.scrollIntoViewIfNeeded) {\n this.scrollIntoViewIfNeeded(ref, opt_center, opt_behavior, opt_parent);\n } else {\n this.scrollIntoView(ref, 'bottom', false, opt_behavior, opt_parent);\n }\n },\n\n /**\n * Scroll an element to the top or bottom of its scroll ancestor.\n * @param {Element} ref\n */\n scrollElementIntoView (ref, opt_scrollToTop, opt_behavior, opt_parent) {\n if (opt_scrollToTop === 'center') {\n this.scrollIntoView(ref, 'center', false, opt_behavior, opt_parent);\n return;\n }\n\n if (opt_scrollToTop === false) {\n this.scrollIntoView(ref, 'bottom', false, opt_behavior, opt_parent);\n } else {\n this.scrollIntoView(ref, 'top', false, opt_behavior, opt_parent);\n }\n },\n\n scrollIntoViewIfNeeded (ref, opt_center, opt_behavior, opt_parent) {\n const dir = opt_center ? 'center' : undefined;\n this.scrollIntoView(ref, dir, true, opt_behavior, opt_parent);\n },\n\n scrollIntoView (ref, opt_dir, opt_ifNeeded, opt_behavior, opt_parent) {\n if (!ref || !ref.parentElement) {\n return;\n }\n const offsetTop = ref.offsetTop;\n const refParent = opt_parent || ref.parentElement;\n const scrollBounds = this._getScrollBounds(refParent);\n const parentHeight = scrollBounds.bottom - scrollBounds.top;\n const elHeight = this._getElementHeight(ref);\n const offsetBottom = offsetTop + elHeight;\n let scrollTop = -1;\n switch (opt_dir) {\n case 'top':\n scrollTop = offsetTop;\n break;\n case 'center':\n scrollTop = offsetTop + (elHeight - parentHeight) / 2;\n break;\n case 'bottom':\n scrollTop = scrollTop = offsetBottom - parentHeight;\n break;\n default:\n // Go to the closest edge if needed and no direction is provided.\n if (offsetTop - scrollBounds.top <= (parentHeight / 2)) {\n // Lock it to the top edge.\n scrollTop = offsetTop;\n } else {\n scrollTop = offsetBottom - parentHeight;\n }\n break;\n }\n this._setScrollTop(refParent, scrollTop, scrollBounds, offsetTop, offsetBottom, opt_ifNeeded, opt_behavior);\n },\n\n _setScrollTop (el, scrollTop, bounds, offsetTop, offsetBottom, opt_isNeeded, opt_behavior) {\n bounds = bounds || this._getScrollBounds(el);\n const parentHeight = bounds.bottom - bounds.top;\n if (opt_isNeeded && this._inScrollBounds(offsetTop, offsetBottom, bounds)) {\n // Then lock to the top or bottom if it's hanging off the edge.\n if (offsetTop < bounds.top) {\n // Snap it to the top.\n scrollTop = offsetTop;\n } else if (offsetBottom > bounds.bottom) {\n scrollTop = offsetBottom - parentHeight;\n } else {\n return;\n }\n }\n\n if (opt_behavior) {\n el.scrollTo({ top: scrollTop, behavior: opt_behavior });\n } else {\n el.scrollTop = scrollTop;\n }\n },\n\n _getElementHeight (el) {\n return el.getBoundingClientRect().height;\n },\n\n _getScrollBounds (el) {\n const height = this._getElementHeight(el);\n const scrollTop = el.scrollTop;\n return {\n top: scrollTop,\n bottom: scrollTop + height,\n };\n },\n\n _inScrollBounds (top, bottom, bounds) {\n // Since we read from top to bottom, we want more than 3/4 to be visible at the top\n // (bc you're looking at the bottom half) or a quarter visible at the bottom (bc you\n // can read the beginning of it)\n\n const height = bottom - top;\n return (bottom <= bounds.bottom + (3 * height / 4)) && (top >= bounds.top - (height / 4));\n },\n },\n};\n","import Dom from './dom';\n\nconst ERROR_INVALID_LIST_ELEMENT = (\n 'listElementKey is required or the referenced ' +\n 'element doesn\\'t exist. Received listElement: '\n);\n\n/**\n * Usage: `mixins: [keyboardNavigationMixin(options)]`\n *\n * This mixin provides some common data and methods to navigate a list of items\n * (such as a dropdown or select menu) by keyboard.\n *\n * To be effective, you must bind the onUpKey and onDownKey events, usually to\n * the root element of the component.\n *\n * @param listItemRole\n * @param indexKey\n * @param idKey\n * @param listElementKey\n * @param activeItemKey\n * @param openMethod\n * @param afterHighlightMethod\n * @param beginningOfListMethod\n * @param endOfListMethod\n * @param scrollToOnHighlight\n * @param focusOnKeyboardNavigation\n * @displayName Keyboard Navigation Mixin\n */\nexport default ({\n // Role of the list items in the component. This is used to identify the list items\n // so you must update this if the role of your list items is anything other than 'option'\n listItemRole = 'option',\n // Key of the data prop that will be added to the component.\n indexKey = 'highlightIndex',\n idKey = 'highlightId',\n // Key of the method that references the list element.\n listElementKey = 'listRef',\n // Optional, Key of the computed prop that references the currently active item element.\n activeItemKey = '',\n // Optional, name of the method that toggles the list visibility. Used for\n // opening the list when up or down is pressed.\n openMethod = null,\n // Optional, method to call when the highlightIndex is changed.\n afterHighlightMethod = null,\n // Optional, method to call when the highlightIndex goes past the beginning of the list.\n beginningOfListMethod = null,\n // Optional, method to call when the highlightIndex goes past the end of the list.\n endOfListMethod = null,\n // Scroll the active element into view when highlighted by a keyboard event.\n scrollToOnHighlight = true,\n // Focus the active element on keyboard navigation.\n focusOnKeyboardNavigation = false,\n} = {}) => ({\n mixins: [Dom],\n\n data () {\n return {\n [indexKey]: -1,\n [idKey]: '',\n scrollToOnHighlight,\n focusOnKeyboardNavigation,\n };\n },\n\n provide () {\n return {\n highlightId: () => this[idKey],\n };\n },\n\n methods: {\n // Returns the list element\n // this[listElement]() can return a Vue component, in which case we need to target\n // the $el property, or it can simply be an html element.\n _getListElement () {\n return this[listElementKey]()?.$el || this[listElementKey]();\n },\n\n // Gets the length of all the items in the list, uses the listItemRole param to determine\n // whether an element is a list item.\n _itemsLength () {\n const listItems = this._getListItemNodes();\n\n if (listItems === null) {\n return 0;\n }\n\n return listItems.length;\n },\n\n // Gets all the list item nodes within the list element\n _getListItemNodes () {\n const listElement = this._getListElement();\n\n if (!listElement) {\n console.error(ERROR_INVALID_LIST_ELEMENT, listElement);\n return null;\n }\n\n return Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n },\n\n onUpKey () {\n if (openMethod) {\n this[openMethod](true);\n }\n if (this[indexKey] > 0) {\n this.setHighlightIndex(this[indexKey] - 1);\n } else if (beginningOfListMethod) {\n this[beginningOfListMethod]();\n }\n this.scrollActiveItemIntoViewIfNeeded();\n this.focusActiveItemIfNeeded();\n },\n\n onDownKey () {\n if (openMethod) {\n this[openMethod](true);\n }\n if (this[indexKey] < this._itemsLength() - 1) {\n this.setHighlightIndex(this[indexKey] + 1);\n } else if (endOfListMethod) {\n this[endOfListMethod]();\n }\n this.scrollActiveItemIntoViewIfNeeded();\n this.focusActiveItemIfNeeded();\n },\n\n onHomeKey () {\n this.jumpToBeginning();\n this.scrollActiveItemIntoViewIfNeeded();\n this.focusActiveItemIfNeeded();\n },\n\n onEndKey () {\n this.jumpToEnd();\n this.scrollActiveItemIntoViewIfNeeded();\n this.focusActiveItemIfNeeded();\n },\n\n onNavigationKey (key) {\n const listItems = this._getListItemNodes();\n\n const matchingItems = listItems.filter(item => {\n const content = item.textContent.trim().toLowerCase();\n return content.startsWith(key.toLowerCase());\n });\n\n if (matchingItems.length <= 0) {\n return;\n }\n\n const highlightedMatchingItemIndex = matchingItems.findIndex(item => {\n return this[indexKey] === listItems.indexOf(item);\n });\n\n const nextHighlightedItemIndex = listItems.indexOf(\n highlightedMatchingItemIndex < matchingItems.length - 1\n ? matchingItems[highlightedMatchingItemIndex + 1]\n : matchingItems[0],\n );\n\n this.setHighlightIndex(nextHighlightedItemIndex);\n this.scrollActiveItemIntoViewIfNeeded();\n this.focusActiveItemIfNeeded();\n },\n\n isValidLetter (key) {\n if (key.length > 1) {\n return false;\n }\n\n return (key >= 'a' && key <= 'z') || (key >= 'A' && key <= 'Z');\n },\n\n jumpToBeginning () {\n this.setHighlightIndex(0);\n },\n\n jumpToEnd () {\n this.setHighlightIndex(this._itemsLength() - 1);\n },\n\n setHighlightIndex (num) {\n this[indexKey] = num;\n this[idKey] = this._getItemId(num);\n\n if (this._itemsLength() && afterHighlightMethod) {\n this[afterHighlightMethod](num);\n }\n },\n\n setHighlightId (id) {\n this[idKey] = id;\n this[indexKey] = this._getItemIndex(id);\n\n if (this._itemsLength() && afterHighlightMethod) {\n this[afterHighlightMethod](this._getItemIndex(id));\n }\n },\n\n _getItemIndex (id) {\n const listElement = this._getListElement();\n if (!listElement) {\n return;\n }\n\n const listItems = Array.from(listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`));\n return listItems.indexOf(listElement.querySelector(`#${id}`));\n },\n\n _getItemId (index) {\n const listElement = this._getListElement();\n if (!listElement) {\n return;\n }\n\n return listElement.querySelectorAll(`[role=\"${listItemRole}\"], #sr-only-close-button`)[index]?.id;\n },\n\n scrollActiveItemIntoViewIfNeeded () {\n if (!this.scrollToOnHighlight) {\n return;\n }\n const activeItemEl = this[activeItemKey];\n if (activeItemEl) {\n // When listElementKey is not passed,\n // scrollElementIntoViewIfNeeded will default to the immediate wrapper of the item.\n const listElement = this._getListElement();\n this.scrollElementIntoViewIfNeeded(activeItemEl, null, null, listElement);\n }\n },\n\n focusActiveItemIfNeeded () {\n if (!this.focusOnKeyboardNavigation) {\n return;\n }\n const activeItemEl = this[activeItemKey];\n if (activeItemEl) {\n activeItemEl.focus();\n }\n },\n },\n});\n"],"names":["Dom","ref","opt_center","opt_behavior","opt_parent","opt_scrollToTop","dir","opt_dir","opt_ifNeeded","offsetTop","refParent","scrollBounds","parentHeight","elHeight","offsetBottom","scrollTop","el","bounds","opt_isNeeded","height","top","bottom","ERROR_INVALID_LIST_ELEMENT","KeyboardNavigation","listItemRole","indexKey","idKey","listElementKey","activeItemKey","openMethod","afterHighlightMethod","beginningOfListMethod","endOfListMethod","scrollToOnHighlight","focusOnKeyboardNavigation","_a","listItems","listElement","key","matchingItems","item","highlightedMatchingItemIndex","nextHighlightedItemIndex","num","id","index","activeItemEl"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const n = "danger", s = "warning", e = "success", t = "muted", d = "inverted", i = "mention", c = ["", n, s, e, t, d, i], a = {
|
|
2
|
+
default: "",
|
|
3
|
+
warning: "d-link--warning",
|
|
4
|
+
danger: "d-link--danger",
|
|
5
|
+
success: "d-link--success",
|
|
6
|
+
muted: "d-link--muted",
|
|
7
|
+
inverted: "d-link--inverted",
|
|
8
|
+
mention: "d-link--mention"
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
d as I,
|
|
12
|
+
c as L,
|
|
13
|
+
t as M,
|
|
14
|
+
a
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=link_constants-vIUB92L4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"link_constants-vIUB92L4.js","sources":["../../components/link/link_constants.js"],"sourcesContent":["export const DANGER = 'danger';\nexport const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const MUTED = 'muted';\nexport const INVERTED = 'inverted';\nexport const MENTION = 'mention';\nexport const LINK_VARIANTS = ['', DANGER, WARNING, SUCCESS, MUTED, INVERTED, MENTION];\n\nexport const LINK_KIND_MODIFIERS = {\n default: '',\n warning: 'd-link--warning',\n danger: 'd-link--danger',\n success: 'd-link--success',\n muted: 'd-link--muted',\n inverted: 'd-link--inverted',\n mention: 'd-link--mention',\n};\n\nexport default {\n LINK_VARIANTS,\n LINK_KIND_MODIFIERS,\n};\n"],"names":["DANGER","WARNING","SUCCESS","MUTED","INVERTED","MENTION","LINK_VARIANTS","LINK_KIND_MODIFIERS"],"mappings":"AAAO,MAAMA,IAAS,UACTC,IAAU,WACVC,IAAU,WACVC,IAAQ,SACRC,IAAW,YACXC,IAAU,WACVC,IAAgB,CAAC,IAAIN,GAAQC,GAASC,GAASC,GAAOC,GAAUC,CAAO,GAEvEE,IAAsB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list_item_constants-LTUc74pD.js","sources":["../../components/list_item/list_item_constants.js"],"sourcesContent":["export const LIST_ITEM_TYPES = {\n DEFAULT: 'default',\n CUSTOM: 'custom',\n};\n\nexport const LIST_ITEM_NAVIGATION_TYPES = {\n ARROW_KEYS: 'arrow-keys',\n TAB: 'tab',\n NONE: 'none',\n};\n\nexport default {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n};\n"],"names":["LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"AAAY,MAACA,IAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,QAAQ;AACV,GAEaC,IAA6B;AAAA,EACxC,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,MAAM;AACR;"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
const o = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', r = `${o}:not([tabindex="-1"])`, a = "button,[href],input,select,textarea,details,[tabindex]", c = {
|
|
2
|
+
methods: {
|
|
3
|
+
/**
|
|
4
|
+
* get the first focusable element in your component, includes tabindex="-1".
|
|
5
|
+
* @param {object} el - optional - ref of dom element to trap focus on.
|
|
6
|
+
* will default to the root node of the vue component
|
|
7
|
+
*/
|
|
8
|
+
async getFirstFocusableElement(e) {
|
|
9
|
+
await this.$nextTick();
|
|
10
|
+
const t = this._getFocusableElements(e, !0);
|
|
11
|
+
return this._getFirstFocusElement(t);
|
|
12
|
+
},
|
|
13
|
+
/**
|
|
14
|
+
* set focus to the first focusable element in your component, includes tabindex="-1".
|
|
15
|
+
* @param {object} el - optional - ref of dom element to trap focus on.
|
|
16
|
+
* will default to the root node of the vue component
|
|
17
|
+
*/
|
|
18
|
+
async focusFirstElement(e = this.$el) {
|
|
19
|
+
const t = await this.getFirstFocusableElement(e);
|
|
20
|
+
t == null || t.focus({ preventScroll: !0 });
|
|
21
|
+
},
|
|
22
|
+
async focusElementById(e) {
|
|
23
|
+
var s;
|
|
24
|
+
await this.$nextTick();
|
|
25
|
+
const t = (s = this.$el) == null ? void 0 : s.querySelector(e);
|
|
26
|
+
if (t) {
|
|
27
|
+
t.focus();
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'), await this.focusFirstElement();
|
|
31
|
+
},
|
|
32
|
+
/**
|
|
33
|
+
* internal use only.
|
|
34
|
+
*
|
|
35
|
+
* @param focusableElements - list of focusable elements
|
|
36
|
+
* @returns {*} - first DOM element that is focusable.
|
|
37
|
+
* @private
|
|
38
|
+
*/
|
|
39
|
+
_getFirstFocusElement(e) {
|
|
40
|
+
if (!e.length)
|
|
41
|
+
return;
|
|
42
|
+
let t = e[0];
|
|
43
|
+
return t.matches('[type="radio"]:not(:checked)') && (t = e.find((s) => s.checked && s.name === t.name) || t), t;
|
|
44
|
+
},
|
|
45
|
+
/**
|
|
46
|
+
* internal use only.
|
|
47
|
+
*
|
|
48
|
+
* gets all the focusable elements within the component
|
|
49
|
+
* and sets the first and last of those elements.
|
|
50
|
+
*
|
|
51
|
+
* @param {object} el - the root dom element to find focusable elements in.
|
|
52
|
+
* @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
|
|
53
|
+
*/
|
|
54
|
+
_getFocusableElements(e = this.$el, t = !1) {
|
|
55
|
+
return e ? [...e.querySelectorAll(a)].filter((n) => {
|
|
56
|
+
const i = window.getComputedStyle(n);
|
|
57
|
+
return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && n.matches(t ? o : r);
|
|
58
|
+
}) : [];
|
|
59
|
+
},
|
|
60
|
+
/**
|
|
61
|
+
* tabs to the next element contained within your component, does not include tabindex="-1".
|
|
62
|
+
* @param {object} e - keypress event
|
|
63
|
+
* @param {object} el - optional - ref of dom element to trap focus on.
|
|
64
|
+
* will default to the root node of the vue component
|
|
65
|
+
*/
|
|
66
|
+
focusTrappedTabPress(e, t) {
|
|
67
|
+
if (!(e.key === "Tab"))
|
|
68
|
+
return;
|
|
69
|
+
const n = this._getFocusableElements(t);
|
|
70
|
+
if (!n.length) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const i = this._getFirstFocusElement(n), l = n[n.length - 1];
|
|
75
|
+
e.shiftKey ? document.activeElement === i && (l.focus(), e.preventDefault()) : document.activeElement === l && (i.focus(), e.preventDefault());
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
export {
|
|
80
|
+
c as M
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=modal-VuMFkZFH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-VuMFkZFH.js","sources":["../../common/mixins/modal.js"],"sourcesContent":["const focusableAttrs = ':not(:disabled):not([aria-disabled=\"true\"]):not([role=\"presentation\"])';\nconst tabbableAttrs = `${focusableAttrs}:not([tabindex=\"-1\"])`;\nconst focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;\n\n/**\n * This mixin provides the methods to automatically trap tab focus within\n * the component this mixin is on, meaning it is not possible to tab out\n * of the component without dismissing it.\n *\n * Useful for accessibility reasons on things like important actionable alerts.\n *\n * Use focusFirstElement to focus on the first tabbable element within your component, and call\n * focusTrappedTabPress every time tab is pressed to trap tab within this\n * component.\n *\n * Note that focusFirstElement WILL focus elements with tabindex=\"-1\",\n * however focusTrappedTabPress will not.\n * @displayName Modal Mixin\n */\nexport default {\n methods: {\n /**\n * get the first focusable element in your component, includes tabindex=\"-1\".\n * @param {object} el - optional - ref of dom element to trap focus on.\n * will default to the root node of the vue component\n */\n async getFirstFocusableElement (el) {\n await this.$nextTick();\n const focusableElements = this._getFocusableElements(el, true);\n return this._getFirstFocusElement(focusableElements);\n },\n\n /**\n * set focus to the first focusable element in your component, includes tabindex=\"-1\".\n * @param {object} el - optional - ref of dom element to trap focus on.\n * will default to the root node of the vue component\n */\n async focusFirstElement (el = this.$el) {\n const elToFocus = await this.getFirstFocusableElement(el);\n elToFocus?.focus({ preventScroll: true });\n },\n\n async focusElementById (elementId) {\n await this.$nextTick();\n const result = this.$el?.querySelector(elementId);\n if (result) {\n result.focus();\n return;\n }\n\n // eslint-disable-next-line no-console\n console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n 'Defaulting to focusing the first element.');\n await this.focusFirstElement();\n },\n\n /**\n * internal use only.\n *\n * @param focusableElements - list of focusable elements\n * @returns {*} - first DOM element that is focusable.\n * @private\n */\n _getFirstFocusElement (focusableElements) {\n if (!focusableElements.length) {\n return;\n }\n let firstFocusEl = focusableElements[0];\n // If first element is a checkbox, put focus on the selected checkbox or the first checkbox if none are selected.\n if (firstFocusEl.matches('[type=\"radio\"]:not(:checked)')) {\n firstFocusEl = focusableElements.find(el => el.checked && el.name === firstFocusEl.name) || firstFocusEl;\n }\n return firstFocusEl;\n },\n\n /**\n * internal use only.\n *\n * gets all the focusable elements within the component\n * and sets the first and last of those elements.\n *\n * @param {object} el - the root dom element to find focusable elements in.\n * @param {bool} includeNegativeTabIndex - will include tabindex=\"-1\" in the list of focusable elements.\n */\n _getFocusableElements (el = this.$el, includeNegativeTabIndex = false) {\n if (!el) return [];\n const focusableContent = [...el.querySelectorAll(focusableElementsList)];\n return focusableContent.filter((fc) => {\n const style = window.getComputedStyle(fc);\n return style.getPropertyValue('display') !== 'none' &&\n style.getPropertyValue('visibility') !== 'hidden' &&\n fc.matches(includeNegativeTabIndex ? focusableAttrs : tabbableAttrs);\n });\n },\n\n /**\n * tabs to the next element contained within your component, does not include tabindex=\"-1\".\n * @param {object} e - keypress event\n * @param {object} el - optional - ref of dom element to trap focus on.\n * will default to the root node of the vue component\n */\n focusTrappedTabPress (e, el) {\n const isTabPressed = e.key === 'Tab';\n\n if (!isTabPressed) {\n return;\n }\n\n const focusableElements = this._getFocusableElements(el);\n if (!focusableElements.length) {\n e.preventDefault();\n return;\n }\n\n const firstFocusableElement = this._getFirstFocusElement(focusableElements);\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else {\n if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n },\n};\n"],"names":["focusableAttrs","tabbableAttrs","focusableElementsList","Modal","el","focusableElements","elToFocus","elementId","_a","result","firstFocusEl","includeNegativeTabIndex","fc","style","firstFocusableElement","lastFocusableElement"],"mappings":"AAAA,MAAMA,IAAiB,0EACjBC,IAAgB,GAAGD,CAAc,yBACjCE,IAAwB,0DAiBfC,IAAA;AAAA,EACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMP,MAAM,yBAA0BC,GAAI;AAClC,YAAM,KAAK;AACX,YAAMC,IAAoB,KAAK,sBAAsBD,GAAI,EAAI;AAC7D,aAAO,KAAK,sBAAsBC,CAAiB;AAAA,IACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM,kBAAmBD,IAAK,KAAK,KAAK;AACtC,YAAME,IAAY,MAAM,KAAK,yBAAyBF,CAAE;AACxD,MAAAE,KAAA,QAAAA,EAAW,MAAM,EAAE,eAAe,GAAM;AAAA,IACzC;AAAA,IAED,MAAM,iBAAkBC,GAAW;AA1CvC,UAAAC;AA2CM,YAAM,KAAK;AACX,YAAMC,KAASD,IAAA,KAAK,QAAL,gBAAAA,EAAU,cAAcD;AACvC,UAAIE,GAAQ;AACV,QAAAA,EAAO,MAAK;AACZ;AAAA,MACD;AAGD,cAAQ,KAAK,wHACgC,GAC7C,MAAM,KAAK;IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,sBAAuBJ,GAAmB;AACxC,UAAI,CAACA,EAAkB;AACrB;AAEF,UAAIK,IAAeL,EAAkB,CAAC;AAEtC,aAAIK,EAAa,QAAQ,8BAA8B,MACrDA,IAAeL,EAAkB,KAAK,CAAAD,MAAMA,EAAG,WAAWA,EAAG,SAASM,EAAa,IAAI,KAAKA,IAEvFA;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWD,sBAAuBN,IAAK,KAAK,KAAKO,IAA0B,IAAO;AACrE,aAAKP,IACoB,CAAC,GAAGA,EAAG,iBAAiBF,CAAqB,CAAC,EAC/C,OAAO,CAACU,MAAO;AACrC,cAAMC,IAAQ,OAAO,iBAAiBD,CAAE;AACxC,eAAOC,EAAM,iBAAiB,SAAS,MAAM,UAC3CA,EAAM,iBAAiB,YAAY,MAAM,YACzCD,EAAG,QAAQD,IAA0BX,IAAiBC,CAAa;AAAA,MAC7E,CAAO,IAPe;IAQjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,qBAAsB,GAAGG,GAAI;AAG3B,UAAI,EAFiB,EAAE,QAAQ;AAG7B;AAGF,YAAMC,IAAoB,KAAK,sBAAsBD,CAAE;AACvD,UAAI,CAACC,EAAkB,QAAQ;AAC7B,UAAE,eAAc;AAChB;AAAA,MACD;AAED,YAAMS,IAAwB,KAAK,sBAAsBT,CAAiB,GACpEU,IAAuBV,EAAkBA,EAAkB,SAAS,CAAC;AAE3E,MAAI,EAAE,WACA,SAAS,kBAAkBS,MAC7BC,EAAqB,MAAK,GAC1B,EAAE,eAAc,KAGd,SAAS,kBAAkBA,MAC7BD,EAAsB,MAAK,GAC3B,EAAE,eAAc;AAAA,IAGrB;AAAA,EACF;AACH;"}
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { N as i } from "./notice_constants-c--hBFQw.js";
|
|
2
|
+
import { n as o } from "./_plugin-vue2_normalizer-u6G_3nkj.js";
|
|
3
|
+
import { DtIcon as s } from "../lib/icon.js";
|
|
4
|
+
import { S as l, a } from "./sr_only_close_button-JGole5Xi.js";
|
|
5
|
+
import { DtButton as c } from "../lib/button.js";
|
|
6
|
+
const r = /* @__PURE__ */ new Map([
|
|
7
|
+
["info", "info"],
|
|
8
|
+
["success", "check-circle"],
|
|
9
|
+
["warning", "alert-triangle"],
|
|
10
|
+
["error", "alert-circle"],
|
|
11
|
+
["base", "bell"]
|
|
12
|
+
]), d = {
|
|
13
|
+
name: "DtNoticeIcon",
|
|
14
|
+
components: {
|
|
15
|
+
DtIcon: s
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
/**
|
|
19
|
+
* Kind of icon
|
|
20
|
+
* @values base, error, info, success, warning
|
|
21
|
+
*/
|
|
22
|
+
kind: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: "base",
|
|
25
|
+
validate(n) {
|
|
26
|
+
return i.includes(n);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
computed: {
|
|
31
|
+
defaultIcon() {
|
|
32
|
+
return r.get(this.kind);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var u = function() {
|
|
37
|
+
var t = this, e = t._self._c;
|
|
38
|
+
return t.defaultIcon || t.$slots.default ? e("div", { staticClass: "d-notice__icon", attrs: { "aria-hidden": "true" } }, [t._t("default", function() {
|
|
39
|
+
return [e("dt-icon", { attrs: { name: t.defaultIcon, size: "400" } })];
|
|
40
|
+
})], 2) : t._e();
|
|
41
|
+
}, _ = [], f = /* @__PURE__ */ o(
|
|
42
|
+
d,
|
|
43
|
+
u,
|
|
44
|
+
_,
|
|
45
|
+
!1,
|
|
46
|
+
null,
|
|
47
|
+
null,
|
|
48
|
+
null,
|
|
49
|
+
null
|
|
50
|
+
);
|
|
51
|
+
const S = f.exports, p = {
|
|
52
|
+
name: "DtNoticeContent",
|
|
53
|
+
props: {
|
|
54
|
+
/**
|
|
55
|
+
* Title header of the notice. This can be left blank to remove the title from the notice entirely.
|
|
56
|
+
*/
|
|
57
|
+
title: {
|
|
58
|
+
type: String,
|
|
59
|
+
default: ""
|
|
60
|
+
},
|
|
61
|
+
/**
|
|
62
|
+
* ID for the title element of the component. Useful for aria-describedby
|
|
63
|
+
* or aria-labelledby or any other reason you may need an id to refer to the title.
|
|
64
|
+
*/
|
|
65
|
+
titleId: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: void 0
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* ID for the content element of the component. Useful for aria-describedby
|
|
71
|
+
* or aria-labelledby or any other reason you may need an id to refer to the content.
|
|
72
|
+
*/
|
|
73
|
+
contentId: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: void 0
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
var m = function() {
|
|
80
|
+
var t = this, e = t._self._c;
|
|
81
|
+
return e("div", { staticClass: "d-notice__content", attrs: { "data-qa": "notice-content" } }, [t.title || t.$slots.titleOverride ? e("p", { staticClass: "d-notice__title", attrs: { id: t.titleId, "data-qa": "notice-content-title" } }, [t._t("titleOverride", function() {
|
|
82
|
+
return [t._v(" " + t._s(t.title) + " ")];
|
|
83
|
+
})], 2) : t._e(), e("p", { staticClass: "d-notice__message", attrs: { id: t.contentId, "data-qa": "notice-content-message" } }, [t._t("default")], 2)]);
|
|
84
|
+
}, v = [], h = /* @__PURE__ */ o(
|
|
85
|
+
p,
|
|
86
|
+
m,
|
|
87
|
+
v,
|
|
88
|
+
!1,
|
|
89
|
+
null,
|
|
90
|
+
null,
|
|
91
|
+
null,
|
|
92
|
+
null
|
|
93
|
+
);
|
|
94
|
+
const k = h.exports, b = {
|
|
95
|
+
name: "DtNoticeAction",
|
|
96
|
+
components: {
|
|
97
|
+
DtIcon: s,
|
|
98
|
+
DtButton: c,
|
|
99
|
+
SrOnlyCloseButton: l
|
|
100
|
+
},
|
|
101
|
+
mixins: [a],
|
|
102
|
+
props: {
|
|
103
|
+
/**
|
|
104
|
+
* Props for the notice close button.
|
|
105
|
+
*/
|
|
106
|
+
closeButtonProps: {
|
|
107
|
+
type: Object,
|
|
108
|
+
default: () => ({})
|
|
109
|
+
},
|
|
110
|
+
/**
|
|
111
|
+
* Hides the close button from the notice
|
|
112
|
+
* @values true, false
|
|
113
|
+
*/
|
|
114
|
+
hideClose: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: !1
|
|
117
|
+
},
|
|
118
|
+
/**
|
|
119
|
+
* Hides the action from the notice
|
|
120
|
+
* @values true, false
|
|
121
|
+
*/
|
|
122
|
+
hideAction: {
|
|
123
|
+
type: Boolean,
|
|
124
|
+
default: !1
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
emits: [
|
|
128
|
+
/**
|
|
129
|
+
* Close button click event
|
|
130
|
+
*
|
|
131
|
+
* @event close
|
|
132
|
+
*/
|
|
133
|
+
"close"
|
|
134
|
+
],
|
|
135
|
+
computed: {
|
|
136
|
+
noticeActionListeners() {
|
|
137
|
+
return {
|
|
138
|
+
...this.$listeners,
|
|
139
|
+
click: (n) => {
|
|
140
|
+
this.close(), this.$emit("click", n);
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
created() {
|
|
146
|
+
!this.hideClose && !this.closeButtonProps.ariaLabel && console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
|
|
147
|
+
},
|
|
148
|
+
mounted() {
|
|
149
|
+
this.hideClose || (this.lastFocusedElement = document.activeElement);
|
|
150
|
+
},
|
|
151
|
+
beforeDestroy() {
|
|
152
|
+
var n;
|
|
153
|
+
(n = this.lastFocusedElement) == null || n.focus();
|
|
154
|
+
},
|
|
155
|
+
methods: {
|
|
156
|
+
close() {
|
|
157
|
+
this.$emit("close");
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
var y = function() {
|
|
162
|
+
var t = this, e = t._self._c;
|
|
163
|
+
return e("div", { staticClass: "d-notice__actions", attrs: { "data-qa": "notice-content-actions" } }, [t.hideAction ? t._e() : t._t("default"), t.hideClose ? t._e() : e("dt-button", t._g(t._b({ ref: "closeButton", attrs: { "data-qa": "dt-notice-action-close-button", size: "sm", importance: "clear", circle: "", "aria-label": t.closeButtonProps.ariaLabel ? t.closeButtonProps.ariaLabel : "Close" }, scopedSlots: t._u([{ key: "icon", fn: function() {
|
|
164
|
+
return [e("dt-icon", { attrs: { name: "close", size: "200" } })];
|
|
165
|
+
}, proxy: !0 }], null, !1, 1154370889) }, "dt-button", t.closeButtonProps, !1), t.noticeActionListeners)), t.showVisuallyHiddenClose ? e("sr-only-close-button", { attrs: { "visually-hidden-close-label": t.visuallyHiddenCloseLabel }, on: { close: t.close } }) : t._e()], 2);
|
|
166
|
+
}, C = [], I = /* @__PURE__ */ o(
|
|
167
|
+
b,
|
|
168
|
+
y,
|
|
169
|
+
C,
|
|
170
|
+
!1,
|
|
171
|
+
null,
|
|
172
|
+
null,
|
|
173
|
+
null,
|
|
174
|
+
null
|
|
175
|
+
);
|
|
176
|
+
const x = I.exports;
|
|
177
|
+
export {
|
|
178
|
+
x as D,
|
|
179
|
+
S as a,
|
|
180
|
+
k as b
|
|
181
|
+
};
|
|
182
|
+
//# sourceMappingURL=notice_action-9NmtQRai.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notice_action-9NmtQRai.js","sources":["../../components/notice/notice_icon.vue","../../components/notice/notice_content.vue","../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n <div\n v-if=\"defaultIcon || $slots.default\"\n aria-hidden=\"true\"\n class=\"d-notice__icon\"\n >\n <!-- @slot Slot for the main content -->\n <slot>\n <dt-icon\n :name=\"defaultIcon\"\n size=\"400\"\n />\n </slot>\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { NOTICE_KINDS } from './notice_constants';\n\nconst kindToIcon = new Map([\n ['info', 'info'],\n ['success', 'check-circle'],\n ['warning', 'alert-triangle'],\n ['error', 'alert-circle'],\n ['base', 'bell'],\n]);\n\nexport default {\n name: 'DtNoticeIcon',\n\n components: {\n DtIcon,\n },\n\n props: {\n /**\n * Kind of icon\n * @values base, error, info, success, warning\n */\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n },\n\n computed: {\n defaultIcon () {\n return kindToIcon.get(this.kind);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__content\"\n data-qa=\"notice-content\"\n >\n <p\n v-if=\"title || $slots.titleOverride\"\n :id=\"titleId\"\n class=\"d-notice__title\"\n data-qa=\"notice-content-title\"\n >\n <!-- @slot Slot for the title -->\n <slot name=\"titleOverride\">\n {{ title }}\n </slot>\n </p>\n <p\n :id=\"contentId\"\n class=\"d-notice__message\"\n data-qa=\"notice-content-message\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </p>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'DtNoticeContent',\n\n props: {\n /**\n * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * ID for the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n */\n titleId: {\n type: String,\n default: undefined,\n },\n\n /**\n * ID for the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n */\n contentId: {\n type: String,\n default: undefined,\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-notice__actions\"\n data-qa=\"notice-content-actions\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"!hideAction\" />\n <dt-button\n v-if=\"!hideClose\"\n ref=\"closeButton\"\n data-qa=\"dt-notice-action-close-button\"\n size=\"sm\"\n importance=\"clear\"\n circle\n :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n v-bind=\"closeButtonProps\"\n v-on=\"noticeActionListeners\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"200\"\n />\n </template>\n </dt-button>\n <sr-only-close-button\n v-if=\"showVisuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"close\"\n />\n </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n name: 'DtNoticeAction',\n\n components: {\n DtIcon,\n DtButton,\n SrOnlyCloseButton,\n },\n\n mixins: [SrOnlyCloseButtonMixin],\n\n props: {\n /**\n * Props for the notice close button.\n */\n closeButtonProps: {\n type: Object,\n default: () => ({}),\n },\n\n /**\n * Hides the close button from the notice\n * @values true, false\n */\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Hides the action from the notice\n * @values true, false\n */\n hideAction: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Close button click event\n *\n * @event close\n */\n 'close',\n ],\n\n computed: {\n noticeActionListeners () {\n return {\n ...this.$listeners,\n\n click: event => {\n this.close();\n this.$emit('click', event);\n },\n };\n },\n },\n\n created () {\n if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n }\n },\n\n mounted () {\n if (!this.hideClose) {\n this.lastFocusedElement = document.activeElement;\n }\n },\n\n beforeDestroy () {\n this.lastFocusedElement?.focus();\n },\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["kindToIcon","_sfc_main","DtIcon","kind","NOTICE_KINDS","DtButton","SrOnlyCloseButton","SrOnlyCloseButtonMixin","event","_a"],"mappings":";;;;;AAoBA,MAAAA,IAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAA,MAAA;AAAA,EACA,CAAA,WAAA,cAAA;AAAA,EACA,CAAA,WAAA,gBAAA;AAAA,EACA,CAAA,SAAA,cAAA;AAAA,EACA,CAAA,QAAA,MAAA;AACA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAAH,EAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;qBC1BAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;qBCnBAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,IACA,UAAAG;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,wBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,CAAAC,MAAA;AACA,eAAA,MAAA,GACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,aAAA,CAAA,KAAA,iBAAA,aACA,QAAA,MAAA,8FAAA;AAAA,EAEA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,cACA,KAAA,qBAAA,SAAA;AAAA,EAEA;AAAA,EAEA,gBAAA;;AACA,KAAAC,IAAA,KAAA,uBAAA,QAAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notice_constants-c--hBFQw.js","sources":["../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n NOTICE_KINDS,\n NOTICE_ROLES,\n};\n"],"names":["NOTICE_KINDS","NOTICE_ROLES"],"mappings":"AAAY,MAACA,IAAe,CAAC,QAAQ,SAAS,QAAQ,WAAW,SAAS,GAC7DC,IAAe,CAAC,SAAS,eAAe,QAAQ;"}
|