@limetech/lime-elements 40.4.1 → 40.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/component-UyqdiWGc.js +1576 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-action-bar_3.cjs.entry.js +1 -1
- package/dist/cjs/limel-ai-avatar.cjs.entry.js +1 -1
- package/dist/cjs/{limel-breadcrumbs_8.cjs.entry.js → limel-breadcrumbs_6.cjs.entry.js} +221 -2175
- package/dist/cjs/limel-callout.cjs.entry.js +1 -1
- package/dist/cjs/limel-chart.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip-set.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-code-diff.cjs.entry.js +1 -1
- package/dist/cjs/limel-code-editor.cjs.entry.js +1 -1
- package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
- package/dist/cjs/limel-drag-handle.cjs.entry.js +1 -1
- package/dist/cjs/limel-email-viewer.cjs.entry.js +1 -1
- package/dist/cjs/limel-file-viewer.cjs.entry.js +1 -1
- package/dist/cjs/limel-file.cjs.entry.js +1 -1
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-helper-line_3.cjs.entry.js +454 -0
- package/dist/cjs/limel-list-item.cjs.entry.js +1 -1
- package/dist/cjs/limel-pagination-jump.cjs.entry.js +182 -0
- package/dist/cjs/limel-pagination.cjs.entry.js +165 -126
- package/dist/cjs/limel-picker.cjs.entry.js +1 -1
- package/dist/cjs/limel-popover_2.cjs.entry.js +33 -25
- package/dist/cjs/limel-profile-picture.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-slider.cjs.entry.js +1 -1
- package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +1 -1
- package/dist/cjs/limel-text-editor-link-menu.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pagination.util-B5zzH8vg.js +135 -0
- package/dist/cjs/{translations-C5T2-_rH.js → translations-DFFpR6AZ.js} +32 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/menu/menu.js +44 -22
- package/dist/collection/components/pagination/jump/pagination-jump.css +11 -0
- package/dist/collection/components/pagination/jump/pagination-jump.js +331 -0
- package/dist/collection/components/pagination/pagination.css +8 -4
- package/dist/collection/components/pagination/pagination.js +167 -10
- package/dist/collection/components/pagination/pagination.util.js +25 -8
- package/dist/collection/components/popover/popover.js +33 -25
- package/dist/collection/translations/da.js +4 -0
- package/dist/collection/translations/de.js +4 -0
- package/dist/collection/translations/en.js +4 -0
- package/dist/collection/translations/fi.js +4 -0
- package/dist/collection/translations/fr.js +4 -0
- package/dist/collection/translations/nl.js +4 -0
- package/dist/collection/translations/no.js +4 -0
- package/dist/collection/translations/sv.js +4 -0
- package/dist/esm/component-B2Vy44Z3.js +1570 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-action-bar_3.entry.js +1 -1
- package/dist/esm/limel-ai-avatar.entry.js +1 -1
- package/dist/esm/{limel-breadcrumbs_8.entry.js → limel-breadcrumbs_6.entry.js} +47 -1999
- package/dist/esm/limel-callout.entry.js +1 -1
- package/dist/esm/limel-chart.entry.js +1 -1
- package/dist/esm/limel-chip-set.entry.js +1 -1
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-code-diff.entry.js +1 -1
- package/dist/esm/limel-code-editor.entry.js +1 -1
- package/dist/esm/limel-collapsible-section.entry.js +1 -1
- package/dist/esm/limel-drag-handle.entry.js +1 -1
- package/dist/esm/limel-email-viewer.entry.js +1 -1
- package/dist/esm/limel-file-viewer.entry.js +1 -1
- package/dist/esm/limel-file.entry.js +1 -1
- package/dist/esm/limel-flatpickr-adapter.entry.js +1 -1
- package/dist/esm/limel-helper-line_3.entry.js +450 -0
- package/dist/esm/limel-list-item.entry.js +1 -1
- package/dist/esm/limel-pagination-jump.entry.js +180 -0
- package/dist/esm/limel-pagination.entry.js +165 -126
- package/dist/esm/limel-picker.entry.js +1 -1
- package/dist/esm/limel-popover_2.entry.js +33 -25
- package/dist/esm/limel-profile-picture.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-slider.entry.js +1 -1
- package/dist/esm/limel-snackbar.entry.js +1 -1
- package/dist/esm/limel-table.entry.js +1 -1
- package/dist/esm/limel-text-editor-link-menu.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pagination.util-CSC2LJ7P.js +132 -0
- package/dist/esm/{translations-Bwm2y2E4.js → translations-DMtX4tTX.js} +32 -0
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-2bbdac10.entry.js → p-11a96a8c.entry.js} +1 -1
- package/dist/lime-elements/p-1dd86ad4.entry.js +1 -0
- package/dist/lime-elements/p-1e93473a.entry.js +1 -0
- package/dist/lime-elements/{p-a41b5ff3.entry.js → p-2e568c56.entry.js} +1 -1
- package/dist/lime-elements/{p-de631fc3.entry.js → p-2f57c3fa.entry.js} +1 -1
- package/dist/lime-elements/p-3735111e.entry.js +1 -0
- package/dist/lime-elements/{p-c823054d.entry.js → p-452b9b01.entry.js} +1 -1
- package/dist/lime-elements/{p-f333f12d.entry.js → p-4855dc9b.entry.js} +1 -1
- package/dist/lime-elements/{p-a462aeb7.entry.js → p-4902fb3f.entry.js} +1 -1
- package/dist/lime-elements/p-507cc8a1.entry.js +159 -0
- package/dist/lime-elements/{p-dadd2e17.entry.js → p-531b6a64.entry.js} +1 -1
- package/dist/lime-elements/{p-b194a212.entry.js → p-5698e493.entry.js} +1 -1
- package/dist/lime-elements/{p-65a9adfc.entry.js → p-67f02b69.entry.js} +1 -1
- package/dist/lime-elements/{p-1162dd39.entry.js → p-867681aa.entry.js} +1 -1
- package/dist/lime-elements/{p-f72ee01b.entry.js → p-90df3e1b.entry.js} +1 -1
- package/dist/lime-elements/{p-22f85b99.entry.js → p-955292eb.entry.js} +1 -1
- package/dist/lime-elements/{p-c2ff132c.entry.js → p-9b631363.entry.js} +1 -1
- package/dist/lime-elements/{p-8af3e4a1.entry.js → p-9d3437ac.entry.js} +1 -1
- package/dist/lime-elements/p-B8hoCfhT.js +1 -0
- package/dist/lime-elements/p-BwJGg-WI.js +89 -0
- package/dist/lime-elements/p-CSC2LJ7P.js +1 -0
- package/dist/lime-elements/p-a1de9bbe.entry.js +1 -0
- package/dist/lime-elements/{p-b5484494.entry.js → p-acba5700.entry.js} +1 -1
- package/dist/lime-elements/{p-f6361b03.entry.js → p-b8c76487.entry.js} +1 -1
- package/dist/lime-elements/{p-ac9c5c88.entry.js → p-cafec335.entry.js} +1 -1
- package/dist/lime-elements/{p-48928b4f.entry.js → p-d146feda.entry.js} +1 -1
- package/dist/lime-elements/{p-532ea234.entry.js → p-deceda00.entry.js} +1 -1
- package/dist/lime-elements/{p-e508771f.entry.js → p-f04f7c8e.entry.js} +1 -1
- package/dist/lime-elements/{p-51dc5f0b.entry.js → p-f3c108c9.entry.js} +1 -1
- package/dist/lime-elements/{p-24041bbb.entry.js → p-fbcd99a3.entry.js} +1 -1
- package/dist/types/components/menu/menu.d.ts +11 -0
- package/dist/types/components/pagination/jump/pagination-jump.d.ts +102 -0
- package/dist/types/components/pagination/pagination.d.ts +81 -0
- package/dist/types/components/pagination/pagination.util.d.ts +12 -2
- package/dist/types/components/popover/popover.d.ts +8 -1
- package/dist/types/components.d.ts +145 -0
- package/dist/types/translations/da.d.ts +4 -0
- package/dist/types/translations/de.d.ts +4 -0
- package/dist/types/translations/en.d.ts +4 -0
- package/dist/types/translations/fi.d.ts +4 -0
- package/dist/types/translations/fr.d.ts +4 -0
- package/dist/types/translations/nl.d.ts +4 -0
- package/dist/types/translations/no.d.ts +4 -0
- package/dist/types/translations/sv.d.ts +4 -0
- package/package.json +1 -1
- package/dist/cjs/limel-helper-line.cjs.entry.js +0 -42
- package/dist/esm/limel-helper-line.entry.js +0 -40
- package/dist/lime-elements/p-1a478498.entry.js +0 -248
- package/dist/lime-elements/p-4c65dee7.entry.js +0 -1
- package/dist/lime-elements/p-DAFuhe5e.js +0 -1
- package/dist/lime-elements/p-b4988a9b.entry.js +0 -1
- package/dist/lime-elements/p-f81dc23a.entry.js +0 -1
|
@@ -7,10 +7,11 @@ import { b as getHref, a as getTarget, g as getRel } from './link-helper-5KsJICv
|
|
|
7
7
|
import { g as globalConfig } from './config-Dnt5w_Bp.js';
|
|
8
8
|
import { d as debounce } from './debounce-B67JMchz.js';
|
|
9
9
|
import { M as MDCTextField } from './component-wGVqvUmL.js';
|
|
10
|
-
import { _ as __extends, a as __assign, M as MDCFoundation, m as matches, d as closest, c as MDCComponent, b as __values } from './ponyfill-ChRGk668.js';
|
|
11
10
|
import { f as focusTriggerElement, z as zipObject } from './focus-trigger-element-BOFcjLq3.js';
|
|
12
11
|
import { h as hotkeyFromKeyboardEvent, t as tokenizeHotkeyString, n as normalizeHotkeyString } from './hotkeys-BxrRWYts.js';
|
|
13
12
|
import { i as isFunction } from './isFunction-9zQTeQI8.js';
|
|
13
|
+
import { _ as __extends, a as __assign, b as __values, M as MDCFoundation, c as MDCComponent, d as closest } from './ponyfill-ChRGk668.js';
|
|
14
|
+
import { c as cssClasses$2, n as numbers$2, M as MDCListFoundation, a as MDCList } from './component-B2Vy44Z3.js';
|
|
14
15
|
import { M as MDCRipple } from './component-7QB0OUSF.js';
|
|
15
16
|
import { i as isDescendant } from './dom-B9Ofc5RB.js';
|
|
16
17
|
import './isObject-BJQylLSL.js';
|
|
@@ -720,1917 +721,6 @@ const InputField = class {
|
|
|
720
721
|
};
|
|
721
722
|
InputField.style = inputFieldCss();
|
|
722
723
|
|
|
723
|
-
/**
|
|
724
|
-
* @license
|
|
725
|
-
* Copyright 2018 Google Inc.
|
|
726
|
-
*
|
|
727
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
728
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
729
|
-
* in the Software without restriction, including without limitation the rights
|
|
730
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
731
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
732
|
-
* furnished to do so, subject to the following conditions:
|
|
733
|
-
*
|
|
734
|
-
* The above copyright notice and this permission notice shall be included in
|
|
735
|
-
* all copies or substantial portions of the Software.
|
|
736
|
-
*
|
|
737
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
738
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
739
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
740
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
741
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
742
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
743
|
-
* THE SOFTWARE.
|
|
744
|
-
*/
|
|
745
|
-
var _a, _b;
|
|
746
|
-
var cssClasses$2 = {
|
|
747
|
-
LIST_ITEM_ACTIVATED_CLASS: 'mdc-list-item--activated',
|
|
748
|
-
LIST_ITEM_CLASS: 'mdc-list-item',
|
|
749
|
-
LIST_ITEM_DISABLED_CLASS: 'mdc-list-item--disabled',
|
|
750
|
-
LIST_ITEM_SELECTED_CLASS: 'mdc-list-item--selected',
|
|
751
|
-
LIST_ITEM_TEXT_CLASS: 'mdc-list-item__text',
|
|
752
|
-
LIST_ITEM_PRIMARY_TEXT_CLASS: 'mdc-list-item__primary-text',
|
|
753
|
-
ROOT: 'mdc-list',
|
|
754
|
-
};
|
|
755
|
-
var evolutionClassNameMap = (_a = {},
|
|
756
|
-
_a["" + cssClasses$2.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-list-item--activated',
|
|
757
|
-
_a["" + cssClasses$2.LIST_ITEM_CLASS] = 'mdc-list-item',
|
|
758
|
-
_a["" + cssClasses$2.LIST_ITEM_DISABLED_CLASS] = 'mdc-list-item--disabled',
|
|
759
|
-
_a["" + cssClasses$2.LIST_ITEM_SELECTED_CLASS] = 'mdc-list-item--selected',
|
|
760
|
-
_a["" + cssClasses$2.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-list-item__primary-text',
|
|
761
|
-
_a["" + cssClasses$2.ROOT] = 'mdc-list',
|
|
762
|
-
_a);
|
|
763
|
-
var deprecatedClassNameMap = (_b = {},
|
|
764
|
-
_b["" + cssClasses$2.LIST_ITEM_ACTIVATED_CLASS] = 'mdc-deprecated-list-item--activated',
|
|
765
|
-
_b["" + cssClasses$2.LIST_ITEM_CLASS] = 'mdc-deprecated-list-item',
|
|
766
|
-
_b["" + cssClasses$2.LIST_ITEM_DISABLED_CLASS] = 'mdc-deprecated-list-item--disabled',
|
|
767
|
-
_b["" + cssClasses$2.LIST_ITEM_SELECTED_CLASS] = 'mdc-deprecated-list-item--selected',
|
|
768
|
-
_b["" + cssClasses$2.LIST_ITEM_TEXT_CLASS] = 'mdc-deprecated-list-item__text',
|
|
769
|
-
_b["" + cssClasses$2.LIST_ITEM_PRIMARY_TEXT_CLASS] = 'mdc-deprecated-list-item__primary-text',
|
|
770
|
-
_b["" + cssClasses$2.ROOT] = 'mdc-deprecated-list',
|
|
771
|
-
_b);
|
|
772
|
-
var strings$2 = {
|
|
773
|
-
ACTION_EVENT: 'MDCList:action',
|
|
774
|
-
ARIA_CHECKED: 'aria-checked',
|
|
775
|
-
ARIA_CHECKED_CHECKBOX_SELECTOR: '[role="checkbox"][aria-checked="true"]',
|
|
776
|
-
ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
|
|
777
|
-
ARIA_CURRENT: 'aria-current',
|
|
778
|
-
ARIA_DISABLED: 'aria-disabled',
|
|
779
|
-
ARIA_ORIENTATION: 'aria-orientation',
|
|
780
|
-
ARIA_ORIENTATION_HORIZONTAL: 'horizontal',
|
|
781
|
-
ARIA_ROLE_CHECKBOX_SELECTOR: '[role="checkbox"]',
|
|
782
|
-
ARIA_SELECTED: 'aria-selected',
|
|
783
|
-
ARIA_INTERACTIVE_ROLES_SELECTOR: '[role="listbox"], [role="menu"]',
|
|
784
|
-
ARIA_MULTI_SELECTABLE_SELECTOR: '[aria-multiselectable="true"]',
|
|
785
|
-
CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"], input[type="radio"]',
|
|
786
|
-
CHECKBOX_SELECTOR: 'input[type="checkbox"]',
|
|
787
|
-
CHILD_ELEMENTS_TO_TOGGLE_TABINDEX: "\n ." + cssClasses$2.LIST_ITEM_CLASS + " button:not(:disabled),\n ." + cssClasses$2.LIST_ITEM_CLASS + " a,\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " button:not(:disabled),\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " a\n ",
|
|
788
|
-
DEPRECATED_SELECTOR: '.mdc-deprecated-list',
|
|
789
|
-
FOCUSABLE_CHILD_ELEMENTS: "\n ." + cssClasses$2.LIST_ITEM_CLASS + " button:not(:disabled),\n ." + cssClasses$2.LIST_ITEM_CLASS + " a,\n ." + cssClasses$2.LIST_ITEM_CLASS + " input[type=\"radio\"]:not(:disabled),\n ." + cssClasses$2.LIST_ITEM_CLASS + " input[type=\"checkbox\"]:not(:disabled),\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " button:not(:disabled),\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " a,\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " input[type=\"radio\"]:not(:disabled),\n ." + deprecatedClassNameMap[cssClasses$2.LIST_ITEM_CLASS] + " input[type=\"checkbox\"]:not(:disabled)\n ",
|
|
790
|
-
RADIO_SELECTOR: 'input[type="radio"]',
|
|
791
|
-
SELECTED_ITEM_SELECTOR: '[aria-selected="true"], [aria-current="true"]',
|
|
792
|
-
};
|
|
793
|
-
var numbers$2 = {
|
|
794
|
-
UNSET_INDEX: -1,
|
|
795
|
-
TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS: 300
|
|
796
|
-
};
|
|
797
|
-
var evolutionAttribute = 'evolution';
|
|
798
|
-
|
|
799
|
-
/**
|
|
800
|
-
* @license
|
|
801
|
-
* Copyright 2020 Google Inc.
|
|
802
|
-
*
|
|
803
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
804
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
805
|
-
* in the Software without restriction, including without limitation the rights
|
|
806
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
807
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
808
|
-
* furnished to do so, subject to the following conditions:
|
|
809
|
-
*
|
|
810
|
-
* The above copyright notice and this permission notice shall be included in
|
|
811
|
-
* all copies or substantial portions of the Software.
|
|
812
|
-
*
|
|
813
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
814
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
815
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
816
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
817
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
818
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
819
|
-
* THE SOFTWARE.
|
|
820
|
-
*/
|
|
821
|
-
/**
|
|
822
|
-
* KEY provides normalized string values for keys.
|
|
823
|
-
*/
|
|
824
|
-
var KEY = {
|
|
825
|
-
UNKNOWN: 'Unknown',
|
|
826
|
-
BACKSPACE: 'Backspace',
|
|
827
|
-
ENTER: 'Enter',
|
|
828
|
-
SPACEBAR: 'Spacebar',
|
|
829
|
-
PAGE_UP: 'PageUp',
|
|
830
|
-
PAGE_DOWN: 'PageDown',
|
|
831
|
-
END: 'End',
|
|
832
|
-
HOME: 'Home',
|
|
833
|
-
ARROW_LEFT: 'ArrowLeft',
|
|
834
|
-
ARROW_UP: 'ArrowUp',
|
|
835
|
-
ARROW_RIGHT: 'ArrowRight',
|
|
836
|
-
ARROW_DOWN: 'ArrowDown',
|
|
837
|
-
DELETE: 'Delete',
|
|
838
|
-
ESCAPE: 'Escape',
|
|
839
|
-
TAB: 'Tab',
|
|
840
|
-
};
|
|
841
|
-
var normalizedKeys = new Set();
|
|
842
|
-
// IE11 has no support for new Map with iterable so we need to initialize this
|
|
843
|
-
// by hand.
|
|
844
|
-
normalizedKeys.add(KEY.BACKSPACE);
|
|
845
|
-
normalizedKeys.add(KEY.ENTER);
|
|
846
|
-
normalizedKeys.add(KEY.SPACEBAR);
|
|
847
|
-
normalizedKeys.add(KEY.PAGE_UP);
|
|
848
|
-
normalizedKeys.add(KEY.PAGE_DOWN);
|
|
849
|
-
normalizedKeys.add(KEY.END);
|
|
850
|
-
normalizedKeys.add(KEY.HOME);
|
|
851
|
-
normalizedKeys.add(KEY.ARROW_LEFT);
|
|
852
|
-
normalizedKeys.add(KEY.ARROW_UP);
|
|
853
|
-
normalizedKeys.add(KEY.ARROW_RIGHT);
|
|
854
|
-
normalizedKeys.add(KEY.ARROW_DOWN);
|
|
855
|
-
normalizedKeys.add(KEY.DELETE);
|
|
856
|
-
normalizedKeys.add(KEY.ESCAPE);
|
|
857
|
-
normalizedKeys.add(KEY.TAB);
|
|
858
|
-
var KEY_CODE = {
|
|
859
|
-
BACKSPACE: 8,
|
|
860
|
-
ENTER: 13,
|
|
861
|
-
SPACEBAR: 32,
|
|
862
|
-
PAGE_UP: 33,
|
|
863
|
-
PAGE_DOWN: 34,
|
|
864
|
-
END: 35,
|
|
865
|
-
HOME: 36,
|
|
866
|
-
ARROW_LEFT: 37,
|
|
867
|
-
ARROW_UP: 38,
|
|
868
|
-
ARROW_RIGHT: 39,
|
|
869
|
-
ARROW_DOWN: 40,
|
|
870
|
-
DELETE: 46,
|
|
871
|
-
ESCAPE: 27,
|
|
872
|
-
TAB: 9,
|
|
873
|
-
};
|
|
874
|
-
var mappedKeyCodes = new Map();
|
|
875
|
-
// IE11 has no support for new Map with iterable so we need to initialize this
|
|
876
|
-
// by hand.
|
|
877
|
-
mappedKeyCodes.set(KEY_CODE.BACKSPACE, KEY.BACKSPACE);
|
|
878
|
-
mappedKeyCodes.set(KEY_CODE.ENTER, KEY.ENTER);
|
|
879
|
-
mappedKeyCodes.set(KEY_CODE.SPACEBAR, KEY.SPACEBAR);
|
|
880
|
-
mappedKeyCodes.set(KEY_CODE.PAGE_UP, KEY.PAGE_UP);
|
|
881
|
-
mappedKeyCodes.set(KEY_CODE.PAGE_DOWN, KEY.PAGE_DOWN);
|
|
882
|
-
mappedKeyCodes.set(KEY_CODE.END, KEY.END);
|
|
883
|
-
mappedKeyCodes.set(KEY_CODE.HOME, KEY.HOME);
|
|
884
|
-
mappedKeyCodes.set(KEY_CODE.ARROW_LEFT, KEY.ARROW_LEFT);
|
|
885
|
-
mappedKeyCodes.set(KEY_CODE.ARROW_UP, KEY.ARROW_UP);
|
|
886
|
-
mappedKeyCodes.set(KEY_CODE.ARROW_RIGHT, KEY.ARROW_RIGHT);
|
|
887
|
-
mappedKeyCodes.set(KEY_CODE.ARROW_DOWN, KEY.ARROW_DOWN);
|
|
888
|
-
mappedKeyCodes.set(KEY_CODE.DELETE, KEY.DELETE);
|
|
889
|
-
mappedKeyCodes.set(KEY_CODE.ESCAPE, KEY.ESCAPE);
|
|
890
|
-
mappedKeyCodes.set(KEY_CODE.TAB, KEY.TAB);
|
|
891
|
-
var navigationKeys = new Set();
|
|
892
|
-
// IE11 has no support for new Set with iterable so we need to initialize this
|
|
893
|
-
// by hand.
|
|
894
|
-
navigationKeys.add(KEY.PAGE_UP);
|
|
895
|
-
navigationKeys.add(KEY.PAGE_DOWN);
|
|
896
|
-
navigationKeys.add(KEY.END);
|
|
897
|
-
navigationKeys.add(KEY.HOME);
|
|
898
|
-
navigationKeys.add(KEY.ARROW_LEFT);
|
|
899
|
-
navigationKeys.add(KEY.ARROW_UP);
|
|
900
|
-
navigationKeys.add(KEY.ARROW_RIGHT);
|
|
901
|
-
navigationKeys.add(KEY.ARROW_DOWN);
|
|
902
|
-
/**
|
|
903
|
-
* normalizeKey returns the normalized string for a navigational action.
|
|
904
|
-
*/
|
|
905
|
-
function normalizeKey(evt) {
|
|
906
|
-
var key = evt.key;
|
|
907
|
-
// If the event already has a normalized key, return it
|
|
908
|
-
if (normalizedKeys.has(key)) {
|
|
909
|
-
return key;
|
|
910
|
-
}
|
|
911
|
-
// tslint:disable-next-line:deprecation
|
|
912
|
-
var mappedKey = mappedKeyCodes.get(evt.keyCode);
|
|
913
|
-
if (mappedKey) {
|
|
914
|
-
return mappedKey;
|
|
915
|
-
}
|
|
916
|
-
return KEY.UNKNOWN;
|
|
917
|
-
}
|
|
918
|
-
|
|
919
|
-
/**
|
|
920
|
-
* @license
|
|
921
|
-
* Copyright 2020 Google Inc.
|
|
922
|
-
*
|
|
923
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
924
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
925
|
-
* in the Software without restriction, including without limitation the rights
|
|
926
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
927
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
928
|
-
* furnished to do so, subject to the following conditions:
|
|
929
|
-
*
|
|
930
|
-
* The above copyright notice and this permission notice shall be included in
|
|
931
|
-
* all copies or substantial portions of the Software.
|
|
932
|
-
*
|
|
933
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
934
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
935
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
936
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
937
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
938
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
939
|
-
* THE SOFTWARE.
|
|
940
|
-
*/
|
|
941
|
-
var ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];
|
|
942
|
-
/**
|
|
943
|
-
* Ensures that preventDefault is only called if the containing element
|
|
944
|
-
* doesn't consume the event, and it will cause an unintended scroll.
|
|
945
|
-
*
|
|
946
|
-
* @param evt keyboard event to be prevented.
|
|
947
|
-
*/
|
|
948
|
-
var preventDefaultEvent = function (evt) {
|
|
949
|
-
var target = evt.target;
|
|
950
|
-
if (!target) {
|
|
951
|
-
return;
|
|
952
|
-
}
|
|
953
|
-
var tagName = ("" + target.tagName).toLowerCase();
|
|
954
|
-
if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
|
|
955
|
-
evt.preventDefault();
|
|
956
|
-
}
|
|
957
|
-
};
|
|
958
|
-
|
|
959
|
-
/**
|
|
960
|
-
* @license
|
|
961
|
-
* Copyright 2020 Google Inc.
|
|
962
|
-
*
|
|
963
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
964
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
965
|
-
* in the Software without restriction, including without limitation the rights
|
|
966
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
967
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
968
|
-
* furnished to do so, subject to the following conditions:
|
|
969
|
-
*
|
|
970
|
-
* The above copyright notice and this permission notice shall be included in
|
|
971
|
-
* all copies or substantial portions of the Software.
|
|
972
|
-
*
|
|
973
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
974
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
975
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
976
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
977
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
978
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
979
|
-
* THE SOFTWARE.
|
|
980
|
-
*/
|
|
981
|
-
/**
|
|
982
|
-
* Initializes a state object for typeahead. Use the same reference for calls to
|
|
983
|
-
* typeahead functions.
|
|
984
|
-
*
|
|
985
|
-
* @return The current state of the typeahead process. Each state reference
|
|
986
|
-
* represents a typeahead instance as the reference is typically mutated
|
|
987
|
-
* in-place.
|
|
988
|
-
*/
|
|
989
|
-
function initState() {
|
|
990
|
-
var state = {
|
|
991
|
-
bufferClearTimeout: 0,
|
|
992
|
-
currentFirstChar: '',
|
|
993
|
-
sortedIndexCursor: 0,
|
|
994
|
-
typeaheadBuffer: '',
|
|
995
|
-
};
|
|
996
|
-
return state;
|
|
997
|
-
}
|
|
998
|
-
/**
|
|
999
|
-
* Initializes typeahead state by indexing the current list items by primary
|
|
1000
|
-
* text into the sortedIndexByFirstChar data structure.
|
|
1001
|
-
*
|
|
1002
|
-
* @param listItemCount numer of items in the list
|
|
1003
|
-
* @param getPrimaryTextByItemIndex function that returns the primary text at a
|
|
1004
|
-
* given index
|
|
1005
|
-
*
|
|
1006
|
-
* @return Map that maps the first character of the primary text to the full
|
|
1007
|
-
* list text and it's index
|
|
1008
|
-
*/
|
|
1009
|
-
function initSortedIndex(listItemCount, getPrimaryTextByItemIndex) {
|
|
1010
|
-
var sortedIndexByFirstChar = new Map();
|
|
1011
|
-
// Aggregate item text to index mapping
|
|
1012
|
-
for (var i = 0; i < listItemCount; i++) {
|
|
1013
|
-
var primaryText = getPrimaryTextByItemIndex(i).trim();
|
|
1014
|
-
if (!primaryText) {
|
|
1015
|
-
continue;
|
|
1016
|
-
}
|
|
1017
|
-
var firstChar = primaryText[0].toLowerCase();
|
|
1018
|
-
if (!sortedIndexByFirstChar.has(firstChar)) {
|
|
1019
|
-
sortedIndexByFirstChar.set(firstChar, []);
|
|
1020
|
-
}
|
|
1021
|
-
sortedIndexByFirstChar.get(firstChar).push({ text: primaryText.toLowerCase(), index: i });
|
|
1022
|
-
}
|
|
1023
|
-
// Sort the mapping
|
|
1024
|
-
// TODO(b/157162694): Investigate replacing forEach with Map.values()
|
|
1025
|
-
sortedIndexByFirstChar.forEach(function (values) {
|
|
1026
|
-
values.sort(function (first, second) {
|
|
1027
|
-
return first.index - second.index;
|
|
1028
|
-
});
|
|
1029
|
-
});
|
|
1030
|
-
return sortedIndexByFirstChar;
|
|
1031
|
-
}
|
|
1032
|
-
/**
|
|
1033
|
-
* Given the next desired character from the user, it attempts to find the next
|
|
1034
|
-
* list option matching the buffer. Wraps around if at the end of options.
|
|
1035
|
-
*
|
|
1036
|
-
* @param opts Options and accessors
|
|
1037
|
-
* - nextChar - the next character to match against items
|
|
1038
|
-
* - sortedIndexByFirstChar - output of `initSortedIndex(...)`
|
|
1039
|
-
* - focusedItemIndex - the index of the currently focused item
|
|
1040
|
-
* - focusItemAtIndex - function that focuses a list item at given index
|
|
1041
|
-
* - skipFocus - whether or not to focus the matched item
|
|
1042
|
-
* - isItemAtIndexDisabled - function that determines whether an item at a
|
|
1043
|
-
* given index is disabled
|
|
1044
|
-
* @param state The typeahead state instance. See `initState`.
|
|
1045
|
-
*
|
|
1046
|
-
* @return The index of the matched item, or -1 if no match.
|
|
1047
|
-
*/
|
|
1048
|
-
function matchItem(opts, state) {
|
|
1049
|
-
var nextChar = opts.nextChar, focusItemAtIndex = opts.focusItemAtIndex, sortedIndexByFirstChar = opts.sortedIndexByFirstChar, focusedItemIndex = opts.focusedItemIndex, skipFocus = opts.skipFocus, isItemAtIndexDisabled = opts.isItemAtIndexDisabled;
|
|
1050
|
-
clearTimeout(state.bufferClearTimeout);
|
|
1051
|
-
state.bufferClearTimeout = setTimeout(function () {
|
|
1052
|
-
clearBuffer(state);
|
|
1053
|
-
}, numbers$2.TYPEAHEAD_BUFFER_CLEAR_TIMEOUT_MS);
|
|
1054
|
-
state.typeaheadBuffer = state.typeaheadBuffer + nextChar;
|
|
1055
|
-
var index;
|
|
1056
|
-
if (state.typeaheadBuffer.length === 1) {
|
|
1057
|
-
index = matchFirstChar(sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state);
|
|
1058
|
-
}
|
|
1059
|
-
else {
|
|
1060
|
-
index = matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state);
|
|
1061
|
-
}
|
|
1062
|
-
if (index !== -1 && !skipFocus) {
|
|
1063
|
-
focusItemAtIndex(index);
|
|
1064
|
-
}
|
|
1065
|
-
return index;
|
|
1066
|
-
}
|
|
1067
|
-
/**
|
|
1068
|
-
* Matches the user's single input character in the buffer to the
|
|
1069
|
-
* next option that begins with such character. Wraps around if at
|
|
1070
|
-
* end of options. Returns -1 if no match is found.
|
|
1071
|
-
*/
|
|
1072
|
-
function matchFirstChar(sortedIndexByFirstChar, focusedItemIndex, isItemAtIndexDisabled, state) {
|
|
1073
|
-
var firstChar = state.typeaheadBuffer[0];
|
|
1074
|
-
var itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);
|
|
1075
|
-
if (!itemsMatchingFirstChar) {
|
|
1076
|
-
return -1;
|
|
1077
|
-
}
|
|
1078
|
-
// Has the same firstChar been recently matched?
|
|
1079
|
-
// Also, did starting index remain the same between key presses?
|
|
1080
|
-
// If both hold true, simply increment index.
|
|
1081
|
-
if (firstChar === state.currentFirstChar &&
|
|
1082
|
-
itemsMatchingFirstChar[state.sortedIndexCursor].index ===
|
|
1083
|
-
focusedItemIndex) {
|
|
1084
|
-
state.sortedIndexCursor =
|
|
1085
|
-
(state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;
|
|
1086
|
-
var newIndex = itemsMatchingFirstChar[state.sortedIndexCursor].index;
|
|
1087
|
-
if (!isItemAtIndexDisabled(newIndex)) {
|
|
1088
|
-
return newIndex;
|
|
1089
|
-
}
|
|
1090
|
-
}
|
|
1091
|
-
// If we're here, it means one of the following happened:
|
|
1092
|
-
// - either firstChar or startingIndex has changed, invalidating the
|
|
1093
|
-
// cursor.
|
|
1094
|
-
// - The next item of typeahead is disabled, so we have to look further.
|
|
1095
|
-
state.currentFirstChar = firstChar;
|
|
1096
|
-
var newCursorPosition = -1;
|
|
1097
|
-
var cursorPosition;
|
|
1098
|
-
// Find the first non-disabled item as a fallback.
|
|
1099
|
-
for (cursorPosition = 0; cursorPosition < itemsMatchingFirstChar.length; cursorPosition++) {
|
|
1100
|
-
if (!isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {
|
|
1101
|
-
newCursorPosition = cursorPosition;
|
|
1102
|
-
break;
|
|
1103
|
-
}
|
|
1104
|
-
}
|
|
1105
|
-
// Advance cursor to first item matching the firstChar that is positioned
|
|
1106
|
-
// after starting item. Cursor is unchanged from fallback if there's no
|
|
1107
|
-
// such item.
|
|
1108
|
-
for (; cursorPosition < itemsMatchingFirstChar.length; cursorPosition++) {
|
|
1109
|
-
if (itemsMatchingFirstChar[cursorPosition].index > focusedItemIndex &&
|
|
1110
|
-
!isItemAtIndexDisabled(itemsMatchingFirstChar[cursorPosition].index)) {
|
|
1111
|
-
newCursorPosition = cursorPosition;
|
|
1112
|
-
break;
|
|
1113
|
-
}
|
|
1114
|
-
}
|
|
1115
|
-
if (newCursorPosition !== -1) {
|
|
1116
|
-
state.sortedIndexCursor = newCursorPosition;
|
|
1117
|
-
return itemsMatchingFirstChar[state.sortedIndexCursor].index;
|
|
1118
|
-
}
|
|
1119
|
-
return -1;
|
|
1120
|
-
}
|
|
1121
|
-
/**
|
|
1122
|
-
* Attempts to find the next item that matches all of the typeahead buffer.
|
|
1123
|
-
* Wraps around if at end of options. Returns -1 if no match is found.
|
|
1124
|
-
*/
|
|
1125
|
-
function matchAllChars(sortedIndexByFirstChar, isItemAtIndexDisabled, state) {
|
|
1126
|
-
var firstChar = state.typeaheadBuffer[0];
|
|
1127
|
-
var itemsMatchingFirstChar = sortedIndexByFirstChar.get(firstChar);
|
|
1128
|
-
if (!itemsMatchingFirstChar) {
|
|
1129
|
-
return -1;
|
|
1130
|
-
}
|
|
1131
|
-
// Do nothing if text already matches
|
|
1132
|
-
var startingItem = itemsMatchingFirstChar[state.sortedIndexCursor];
|
|
1133
|
-
if (startingItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0 &&
|
|
1134
|
-
!isItemAtIndexDisabled(startingItem.index)) {
|
|
1135
|
-
return startingItem.index;
|
|
1136
|
-
}
|
|
1137
|
-
// Find next item that matches completely; if no match, we'll eventually
|
|
1138
|
-
// loop around to same position
|
|
1139
|
-
var cursorPosition = (state.sortedIndexCursor + 1) % itemsMatchingFirstChar.length;
|
|
1140
|
-
var nextCursorPosition = -1;
|
|
1141
|
-
while (cursorPosition !== state.sortedIndexCursor) {
|
|
1142
|
-
var currentItem = itemsMatchingFirstChar[cursorPosition];
|
|
1143
|
-
var matches = currentItem.text.lastIndexOf(state.typeaheadBuffer, 0) === 0;
|
|
1144
|
-
var isEnabled = !isItemAtIndexDisabled(currentItem.index);
|
|
1145
|
-
if (matches && isEnabled) {
|
|
1146
|
-
nextCursorPosition = cursorPosition;
|
|
1147
|
-
break;
|
|
1148
|
-
}
|
|
1149
|
-
cursorPosition = (cursorPosition + 1) % itemsMatchingFirstChar.length;
|
|
1150
|
-
}
|
|
1151
|
-
if (nextCursorPosition !== -1) {
|
|
1152
|
-
state.sortedIndexCursor = nextCursorPosition;
|
|
1153
|
-
return itemsMatchingFirstChar[state.sortedIndexCursor].index;
|
|
1154
|
-
}
|
|
1155
|
-
return -1;
|
|
1156
|
-
}
|
|
1157
|
-
/**
|
|
1158
|
-
* Whether or not the given typeahead instaance state is currently typing.
|
|
1159
|
-
*
|
|
1160
|
-
* @param state The typeahead state instance. See `initState`.
|
|
1161
|
-
*/
|
|
1162
|
-
function isTypingInProgress(state) {
|
|
1163
|
-
return state.typeaheadBuffer.length > 0;
|
|
1164
|
-
}
|
|
1165
|
-
/**
|
|
1166
|
-
* Clears the typeahaed buffer so that it resets item matching to the first
|
|
1167
|
-
* character.
|
|
1168
|
-
*
|
|
1169
|
-
* @param state The typeahead state instance. See `initState`.
|
|
1170
|
-
*/
|
|
1171
|
-
function clearBuffer(state) {
|
|
1172
|
-
state.typeaheadBuffer = '';
|
|
1173
|
-
}
|
|
1174
|
-
/**
|
|
1175
|
-
* Given a keydown event, it calculates whether or not to automatically focus a
|
|
1176
|
-
* list item depending on what was typed mimicing the typeahead functionality of
|
|
1177
|
-
* a standard <select> element that is open.
|
|
1178
|
-
*
|
|
1179
|
-
* @param opts Options and accessors
|
|
1180
|
-
* - event - the KeyboardEvent to handle and parse
|
|
1181
|
-
* - sortedIndexByFirstChar - output of `initSortedIndex(...)`
|
|
1182
|
-
* - focusedItemIndex - the index of the currently focused item
|
|
1183
|
-
* - focusItemAtIndex - function that focuses a list item at given index
|
|
1184
|
-
* - isItemAtFocusedIndexDisabled - whether or not the currently focused item
|
|
1185
|
-
* is disabled
|
|
1186
|
-
* - isTargetListItem - whether or not the event target is a list item
|
|
1187
|
-
* @param state The typeahead state instance. See `initState`.
|
|
1188
|
-
*
|
|
1189
|
-
* @returns index of the item matched by the keydown. -1 if not matched.
|
|
1190
|
-
*/
|
|
1191
|
-
function handleKeydown(opts, state) {
|
|
1192
|
-
var event = opts.event, isTargetListItem = opts.isTargetListItem, focusedItemIndex = opts.focusedItemIndex, focusItemAtIndex = opts.focusItemAtIndex, sortedIndexByFirstChar = opts.sortedIndexByFirstChar, isItemAtIndexDisabled = opts.isItemAtIndexDisabled;
|
|
1193
|
-
var isArrowLeft = normalizeKey(event) === 'ArrowLeft';
|
|
1194
|
-
var isArrowUp = normalizeKey(event) === 'ArrowUp';
|
|
1195
|
-
var isArrowRight = normalizeKey(event) === 'ArrowRight';
|
|
1196
|
-
var isArrowDown = normalizeKey(event) === 'ArrowDown';
|
|
1197
|
-
var isHome = normalizeKey(event) === 'Home';
|
|
1198
|
-
var isEnd = normalizeKey(event) === 'End';
|
|
1199
|
-
var isEnter = normalizeKey(event) === 'Enter';
|
|
1200
|
-
var isSpace = normalizeKey(event) === 'Spacebar';
|
|
1201
|
-
if (event.ctrlKey || event.metaKey || isArrowLeft || isArrowUp ||
|
|
1202
|
-
isArrowRight || isArrowDown || isHome || isEnd || isEnter) {
|
|
1203
|
-
return -1;
|
|
1204
|
-
}
|
|
1205
|
-
var isCharacterKey = !isSpace && event.key.length === 1;
|
|
1206
|
-
if (isCharacterKey) {
|
|
1207
|
-
preventDefaultEvent(event);
|
|
1208
|
-
var matchItemOpts = {
|
|
1209
|
-
focusItemAtIndex: focusItemAtIndex,
|
|
1210
|
-
focusedItemIndex: focusedItemIndex,
|
|
1211
|
-
nextChar: event.key.toLowerCase(),
|
|
1212
|
-
sortedIndexByFirstChar: sortedIndexByFirstChar,
|
|
1213
|
-
skipFocus: false,
|
|
1214
|
-
isItemAtIndexDisabled: isItemAtIndexDisabled,
|
|
1215
|
-
};
|
|
1216
|
-
return matchItem(matchItemOpts, state);
|
|
1217
|
-
}
|
|
1218
|
-
if (!isSpace) {
|
|
1219
|
-
return -1;
|
|
1220
|
-
}
|
|
1221
|
-
if (isTargetListItem) {
|
|
1222
|
-
preventDefaultEvent(event);
|
|
1223
|
-
}
|
|
1224
|
-
var typeaheadOnListItem = isTargetListItem && isTypingInProgress(state);
|
|
1225
|
-
if (typeaheadOnListItem) {
|
|
1226
|
-
var matchItemOpts = {
|
|
1227
|
-
focusItemAtIndex: focusItemAtIndex,
|
|
1228
|
-
focusedItemIndex: focusedItemIndex,
|
|
1229
|
-
nextChar: ' ',
|
|
1230
|
-
sortedIndexByFirstChar: sortedIndexByFirstChar,
|
|
1231
|
-
skipFocus: false,
|
|
1232
|
-
isItemAtIndexDisabled: isItemAtIndexDisabled,
|
|
1233
|
-
};
|
|
1234
|
-
// space participates in typeahead matching if in rapid typing mode
|
|
1235
|
-
return matchItem(matchItemOpts, state);
|
|
1236
|
-
}
|
|
1237
|
-
return -1;
|
|
1238
|
-
}
|
|
1239
|
-
|
|
1240
|
-
/**
|
|
1241
|
-
* @license
|
|
1242
|
-
* Copyright 2018 Google Inc.
|
|
1243
|
-
*
|
|
1244
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1245
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
1246
|
-
* in the Software without restriction, including without limitation the rights
|
|
1247
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
1248
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
1249
|
-
* furnished to do so, subject to the following conditions:
|
|
1250
|
-
*
|
|
1251
|
-
* The above copyright notice and this permission notice shall be included in
|
|
1252
|
-
* all copies or substantial portions of the Software.
|
|
1253
|
-
*
|
|
1254
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
1255
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
1256
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
1257
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
1258
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
1259
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
1260
|
-
* THE SOFTWARE.
|
|
1261
|
-
*/
|
|
1262
|
-
function isNumberArray(selectedIndex) {
|
|
1263
|
-
return selectedIndex instanceof Array;
|
|
1264
|
-
}
|
|
1265
|
-
var MDCListFoundation = /** @class */ (function (_super) {
|
|
1266
|
-
__extends(MDCListFoundation, _super);
|
|
1267
|
-
function MDCListFoundation(adapter) {
|
|
1268
|
-
var _this = _super.call(this, __assign(__assign({}, MDCListFoundation.defaultAdapter), adapter)) || this;
|
|
1269
|
-
_this.wrapFocus = false;
|
|
1270
|
-
_this.isVertical = true;
|
|
1271
|
-
_this.isSingleSelectionList = false;
|
|
1272
|
-
_this.selectedIndex = numbers$2.UNSET_INDEX;
|
|
1273
|
-
_this.focusedItemIndex = numbers$2.UNSET_INDEX;
|
|
1274
|
-
_this.useActivatedClass = false;
|
|
1275
|
-
_this.useSelectedAttr = false;
|
|
1276
|
-
_this.ariaCurrentAttrValue = null;
|
|
1277
|
-
_this.isCheckboxList = false;
|
|
1278
|
-
_this.isRadioList = false;
|
|
1279
|
-
_this.hasTypeahead = false;
|
|
1280
|
-
// Transiently holds current typeahead prefix from user.
|
|
1281
|
-
_this.typeaheadState = initState();
|
|
1282
|
-
_this.sortedIndexByFirstChar = new Map();
|
|
1283
|
-
return _this;
|
|
1284
|
-
}
|
|
1285
|
-
Object.defineProperty(MDCListFoundation, "strings", {
|
|
1286
|
-
get: function () {
|
|
1287
|
-
return strings$2;
|
|
1288
|
-
},
|
|
1289
|
-
enumerable: false,
|
|
1290
|
-
configurable: true
|
|
1291
|
-
});
|
|
1292
|
-
Object.defineProperty(MDCListFoundation, "cssClasses", {
|
|
1293
|
-
get: function () {
|
|
1294
|
-
return cssClasses$2;
|
|
1295
|
-
},
|
|
1296
|
-
enumerable: false,
|
|
1297
|
-
configurable: true
|
|
1298
|
-
});
|
|
1299
|
-
Object.defineProperty(MDCListFoundation, "numbers", {
|
|
1300
|
-
get: function () {
|
|
1301
|
-
return numbers$2;
|
|
1302
|
-
},
|
|
1303
|
-
enumerable: false,
|
|
1304
|
-
configurable: true
|
|
1305
|
-
});
|
|
1306
|
-
Object.defineProperty(MDCListFoundation, "defaultAdapter", {
|
|
1307
|
-
get: function () {
|
|
1308
|
-
return {
|
|
1309
|
-
addClassForElementIndex: function () { return undefined; },
|
|
1310
|
-
focusItemAtIndex: function () { return undefined; },
|
|
1311
|
-
getAttributeForElementIndex: function () { return null; },
|
|
1312
|
-
getFocusedElementIndex: function () { return 0; },
|
|
1313
|
-
getListItemCount: function () { return 0; },
|
|
1314
|
-
hasCheckboxAtIndex: function () { return false; },
|
|
1315
|
-
hasRadioAtIndex: function () { return false; },
|
|
1316
|
-
isCheckboxCheckedAtIndex: function () { return false; },
|
|
1317
|
-
isFocusInsideList: function () { return false; },
|
|
1318
|
-
isRootFocused: function () { return false; },
|
|
1319
|
-
listItemAtIndexHasClass: function () { return false; },
|
|
1320
|
-
notifyAction: function () { return undefined; },
|
|
1321
|
-
removeClassForElementIndex: function () { return undefined; },
|
|
1322
|
-
setAttributeForElementIndex: function () { return undefined; },
|
|
1323
|
-
setCheckedCheckboxOrRadioAtIndex: function () { return undefined; },
|
|
1324
|
-
setTabIndexForListItemChildren: function () { return undefined; },
|
|
1325
|
-
getPrimaryTextAtIndex: function () { return ''; },
|
|
1326
|
-
};
|
|
1327
|
-
},
|
|
1328
|
-
enumerable: false,
|
|
1329
|
-
configurable: true
|
|
1330
|
-
});
|
|
1331
|
-
MDCListFoundation.prototype.layout = function () {
|
|
1332
|
-
if (this.adapter.getListItemCount() === 0) {
|
|
1333
|
-
return;
|
|
1334
|
-
}
|
|
1335
|
-
// TODO(b/172274142): consider all items when determining the list's type.
|
|
1336
|
-
if (this.adapter.hasCheckboxAtIndex(0)) {
|
|
1337
|
-
this.isCheckboxList = true;
|
|
1338
|
-
}
|
|
1339
|
-
else if (this.adapter.hasRadioAtIndex(0)) {
|
|
1340
|
-
this.isRadioList = true;
|
|
1341
|
-
}
|
|
1342
|
-
else {
|
|
1343
|
-
this.maybeInitializeSingleSelection();
|
|
1344
|
-
}
|
|
1345
|
-
if (this.hasTypeahead) {
|
|
1346
|
-
this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();
|
|
1347
|
-
}
|
|
1348
|
-
};
|
|
1349
|
-
/** Returns the index of the item that was last focused. */
|
|
1350
|
-
MDCListFoundation.prototype.getFocusedItemIndex = function () {
|
|
1351
|
-
return this.focusedItemIndex;
|
|
1352
|
-
};
|
|
1353
|
-
/** Toggles focus wrapping with keyboard navigation. */
|
|
1354
|
-
MDCListFoundation.prototype.setWrapFocus = function (value) {
|
|
1355
|
-
this.wrapFocus = value;
|
|
1356
|
-
};
|
|
1357
|
-
/**
|
|
1358
|
-
* Toggles orientation direction for keyboard navigation (true for vertical,
|
|
1359
|
-
* false for horizontal).
|
|
1360
|
-
*/
|
|
1361
|
-
MDCListFoundation.prototype.setVerticalOrientation = function (value) {
|
|
1362
|
-
this.isVertical = value;
|
|
1363
|
-
};
|
|
1364
|
-
/** Toggles single-selection behavior. */
|
|
1365
|
-
MDCListFoundation.prototype.setSingleSelection = function (value) {
|
|
1366
|
-
this.isSingleSelectionList = value;
|
|
1367
|
-
if (value) {
|
|
1368
|
-
this.maybeInitializeSingleSelection();
|
|
1369
|
-
this.selectedIndex = this.getSelectedIndexFromDOM();
|
|
1370
|
-
}
|
|
1371
|
-
};
|
|
1372
|
-
/**
|
|
1373
|
-
* Automatically determines whether the list is single selection list. If so,
|
|
1374
|
-
* initializes the internal state to match the selected item.
|
|
1375
|
-
*/
|
|
1376
|
-
MDCListFoundation.prototype.maybeInitializeSingleSelection = function () {
|
|
1377
|
-
var selectedItemIndex = this.getSelectedIndexFromDOM();
|
|
1378
|
-
if (selectedItemIndex === numbers$2.UNSET_INDEX)
|
|
1379
|
-
return;
|
|
1380
|
-
var hasActivatedClass = this.adapter.listItemAtIndexHasClass(selectedItemIndex, cssClasses$2.LIST_ITEM_ACTIVATED_CLASS);
|
|
1381
|
-
if (hasActivatedClass) {
|
|
1382
|
-
this.setUseActivatedClass(true);
|
|
1383
|
-
}
|
|
1384
|
-
this.isSingleSelectionList = true;
|
|
1385
|
-
this.selectedIndex = selectedItemIndex;
|
|
1386
|
-
};
|
|
1387
|
-
/** @return Index of the first selected item based on the DOM state. */
|
|
1388
|
-
MDCListFoundation.prototype.getSelectedIndexFromDOM = function () {
|
|
1389
|
-
var selectedIndex = numbers$2.UNSET_INDEX;
|
|
1390
|
-
var listItemsCount = this.adapter.getListItemCount();
|
|
1391
|
-
for (var i = 0; i < listItemsCount; i++) {
|
|
1392
|
-
var hasSelectedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_SELECTED_CLASS);
|
|
1393
|
-
var hasActivatedClass = this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_ACTIVATED_CLASS);
|
|
1394
|
-
if (!(hasSelectedClass || hasActivatedClass)) {
|
|
1395
|
-
continue;
|
|
1396
|
-
}
|
|
1397
|
-
selectedIndex = i;
|
|
1398
|
-
break;
|
|
1399
|
-
}
|
|
1400
|
-
return selectedIndex;
|
|
1401
|
-
};
|
|
1402
|
-
/**
|
|
1403
|
-
* Sets whether typeahead is enabled on the list.
|
|
1404
|
-
* @param hasTypeahead Whether typeahead is enabled.
|
|
1405
|
-
*/
|
|
1406
|
-
MDCListFoundation.prototype.setHasTypeahead = function (hasTypeahead) {
|
|
1407
|
-
this.hasTypeahead = hasTypeahead;
|
|
1408
|
-
if (hasTypeahead) {
|
|
1409
|
-
this.sortedIndexByFirstChar = this.typeaheadInitSortedIndex();
|
|
1410
|
-
}
|
|
1411
|
-
};
|
|
1412
|
-
/**
|
|
1413
|
-
* @return Whether typeahead is currently matching a user-specified prefix.
|
|
1414
|
-
*/
|
|
1415
|
-
MDCListFoundation.prototype.isTypeaheadInProgress = function () {
|
|
1416
|
-
return this.hasTypeahead &&
|
|
1417
|
-
isTypingInProgress(this.typeaheadState);
|
|
1418
|
-
};
|
|
1419
|
-
/** Toggle use of the "activated" CSS class. */
|
|
1420
|
-
MDCListFoundation.prototype.setUseActivatedClass = function (useActivated) {
|
|
1421
|
-
this.useActivatedClass = useActivated;
|
|
1422
|
-
};
|
|
1423
|
-
/**
|
|
1424
|
-
* Toggles use of the selected attribute (true for aria-selected, false for
|
|
1425
|
-
* aria-checked).
|
|
1426
|
-
*/
|
|
1427
|
-
MDCListFoundation.prototype.setUseSelectedAttribute = function (useSelected) {
|
|
1428
|
-
this.useSelectedAttr = useSelected;
|
|
1429
|
-
};
|
|
1430
|
-
MDCListFoundation.prototype.getSelectedIndex = function () {
|
|
1431
|
-
return this.selectedIndex;
|
|
1432
|
-
};
|
|
1433
|
-
MDCListFoundation.prototype.setSelectedIndex = function (index, _a) {
|
|
1434
|
-
var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
|
|
1435
|
-
if (!this.isIndexValid(index)) {
|
|
1436
|
-
return;
|
|
1437
|
-
}
|
|
1438
|
-
if (this.isCheckboxList) {
|
|
1439
|
-
this.setCheckboxAtIndex(index);
|
|
1440
|
-
}
|
|
1441
|
-
else if (this.isRadioList) {
|
|
1442
|
-
this.setRadioAtIndex(index);
|
|
1443
|
-
}
|
|
1444
|
-
else {
|
|
1445
|
-
this.setSingleSelectionAtIndex(index, { forceUpdate: forceUpdate });
|
|
1446
|
-
}
|
|
1447
|
-
};
|
|
1448
|
-
/**
|
|
1449
|
-
* Focus in handler for the list items.
|
|
1450
|
-
*/
|
|
1451
|
-
MDCListFoundation.prototype.handleFocusIn = function (listItemIndex) {
|
|
1452
|
-
if (listItemIndex >= 0) {
|
|
1453
|
-
this.focusedItemIndex = listItemIndex;
|
|
1454
|
-
this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '0');
|
|
1455
|
-
this.adapter.setTabIndexForListItemChildren(listItemIndex, '0');
|
|
1456
|
-
}
|
|
1457
|
-
};
|
|
1458
|
-
/**
|
|
1459
|
-
* Focus out handler for the list items.
|
|
1460
|
-
*/
|
|
1461
|
-
MDCListFoundation.prototype.handleFocusOut = function (listItemIndex) {
|
|
1462
|
-
var _this = this;
|
|
1463
|
-
if (listItemIndex >= 0) {
|
|
1464
|
-
this.adapter.setAttributeForElementIndex(listItemIndex, 'tabindex', '-1');
|
|
1465
|
-
this.adapter.setTabIndexForListItemChildren(listItemIndex, '-1');
|
|
1466
|
-
}
|
|
1467
|
-
/**
|
|
1468
|
-
* Between Focusout & Focusin some browsers do not have focus on any
|
|
1469
|
-
* element. Setting a delay to wait till the focus is moved to next element.
|
|
1470
|
-
*/
|
|
1471
|
-
setTimeout(function () {
|
|
1472
|
-
if (!_this.adapter.isFocusInsideList()) {
|
|
1473
|
-
_this.setTabindexToFirstSelectedOrFocusedItem();
|
|
1474
|
-
}
|
|
1475
|
-
}, 0);
|
|
1476
|
-
};
|
|
1477
|
-
/**
|
|
1478
|
-
* Key handler for the list.
|
|
1479
|
-
*/
|
|
1480
|
-
MDCListFoundation.prototype.handleKeydown = function (event, isRootListItem, listItemIndex) {
|
|
1481
|
-
var _this = this;
|
|
1482
|
-
var isArrowLeft = normalizeKey(event) === 'ArrowLeft';
|
|
1483
|
-
var isArrowUp = normalizeKey(event) === 'ArrowUp';
|
|
1484
|
-
var isArrowRight = normalizeKey(event) === 'ArrowRight';
|
|
1485
|
-
var isArrowDown = normalizeKey(event) === 'ArrowDown';
|
|
1486
|
-
var isHome = normalizeKey(event) === 'Home';
|
|
1487
|
-
var isEnd = normalizeKey(event) === 'End';
|
|
1488
|
-
var isEnter = normalizeKey(event) === 'Enter';
|
|
1489
|
-
var isSpace = normalizeKey(event) === 'Spacebar';
|
|
1490
|
-
// Have to check both upper and lower case, because having caps lock on
|
|
1491
|
-
// affects the value.
|
|
1492
|
-
var isLetterA = event.key === 'A' || event.key === 'a';
|
|
1493
|
-
if (this.adapter.isRootFocused()) {
|
|
1494
|
-
if (isArrowUp || isEnd) {
|
|
1495
|
-
event.preventDefault();
|
|
1496
|
-
this.focusLastElement();
|
|
1497
|
-
}
|
|
1498
|
-
else if (isArrowDown || isHome) {
|
|
1499
|
-
event.preventDefault();
|
|
1500
|
-
this.focusFirstElement();
|
|
1501
|
-
}
|
|
1502
|
-
if (this.hasTypeahead) {
|
|
1503
|
-
var handleKeydownOpts = {
|
|
1504
|
-
event: event,
|
|
1505
|
-
focusItemAtIndex: function (index) {
|
|
1506
|
-
_this.focusItemAtIndex(index);
|
|
1507
|
-
},
|
|
1508
|
-
focusedItemIndex: -1,
|
|
1509
|
-
isTargetListItem: isRootListItem,
|
|
1510
|
-
sortedIndexByFirstChar: this.sortedIndexByFirstChar,
|
|
1511
|
-
isItemAtIndexDisabled: function (index) {
|
|
1512
|
-
return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
|
|
1513
|
-
},
|
|
1514
|
-
};
|
|
1515
|
-
handleKeydown(handleKeydownOpts, this.typeaheadState);
|
|
1516
|
-
}
|
|
1517
|
-
return;
|
|
1518
|
-
}
|
|
1519
|
-
var currentIndex = this.adapter.getFocusedElementIndex();
|
|
1520
|
-
if (currentIndex === -1) {
|
|
1521
|
-
currentIndex = listItemIndex;
|
|
1522
|
-
if (currentIndex < 0) {
|
|
1523
|
-
// If this event doesn't have a mdc-list-item ancestor from the
|
|
1524
|
-
// current list (not from a sublist), return early.
|
|
1525
|
-
return;
|
|
1526
|
-
}
|
|
1527
|
-
}
|
|
1528
|
-
if ((this.isVertical && isArrowDown) ||
|
|
1529
|
-
(!this.isVertical && isArrowRight)) {
|
|
1530
|
-
preventDefaultEvent(event);
|
|
1531
|
-
this.focusNextElement(currentIndex);
|
|
1532
|
-
}
|
|
1533
|
-
else if ((this.isVertical && isArrowUp) || (!this.isVertical && isArrowLeft)) {
|
|
1534
|
-
preventDefaultEvent(event);
|
|
1535
|
-
this.focusPrevElement(currentIndex);
|
|
1536
|
-
}
|
|
1537
|
-
else if (isHome) {
|
|
1538
|
-
preventDefaultEvent(event);
|
|
1539
|
-
this.focusFirstElement();
|
|
1540
|
-
}
|
|
1541
|
-
else if (isEnd) {
|
|
1542
|
-
preventDefaultEvent(event);
|
|
1543
|
-
this.focusLastElement();
|
|
1544
|
-
}
|
|
1545
|
-
else if (isLetterA && event.ctrlKey && this.isCheckboxList) {
|
|
1546
|
-
event.preventDefault();
|
|
1547
|
-
this.toggleAll(this.selectedIndex === numbers$2.UNSET_INDEX ?
|
|
1548
|
-
[] :
|
|
1549
|
-
this.selectedIndex);
|
|
1550
|
-
}
|
|
1551
|
-
else if (isEnter || isSpace) {
|
|
1552
|
-
if (isRootListItem) {
|
|
1553
|
-
// Return early if enter key is pressed on anchor element which triggers
|
|
1554
|
-
// synthetic MouseEvent event.
|
|
1555
|
-
var target = event.target;
|
|
1556
|
-
if (target && target.tagName === 'A' && isEnter) {
|
|
1557
|
-
return;
|
|
1558
|
-
}
|
|
1559
|
-
preventDefaultEvent(event);
|
|
1560
|
-
if (this.adapter.listItemAtIndexHasClass(currentIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS)) {
|
|
1561
|
-
return;
|
|
1562
|
-
}
|
|
1563
|
-
if (!this.isTypeaheadInProgress()) {
|
|
1564
|
-
if (this.isSelectableList()) {
|
|
1565
|
-
this.setSelectedIndexOnAction(currentIndex);
|
|
1566
|
-
}
|
|
1567
|
-
this.adapter.notifyAction(currentIndex);
|
|
1568
|
-
}
|
|
1569
|
-
}
|
|
1570
|
-
}
|
|
1571
|
-
if (this.hasTypeahead) {
|
|
1572
|
-
var handleKeydownOpts = {
|
|
1573
|
-
event: event,
|
|
1574
|
-
focusItemAtIndex: function (index) {
|
|
1575
|
-
_this.focusItemAtIndex(index);
|
|
1576
|
-
},
|
|
1577
|
-
focusedItemIndex: this.focusedItemIndex,
|
|
1578
|
-
isTargetListItem: isRootListItem,
|
|
1579
|
-
sortedIndexByFirstChar: this.sortedIndexByFirstChar,
|
|
1580
|
-
isItemAtIndexDisabled: function (index) { return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS); },
|
|
1581
|
-
};
|
|
1582
|
-
handleKeydown(handleKeydownOpts, this.typeaheadState);
|
|
1583
|
-
}
|
|
1584
|
-
};
|
|
1585
|
-
/**
|
|
1586
|
-
* Click handler for the list.
|
|
1587
|
-
*/
|
|
1588
|
-
MDCListFoundation.prototype.handleClick = function (index, toggleCheckbox) {
|
|
1589
|
-
if (index === numbers$2.UNSET_INDEX) {
|
|
1590
|
-
return;
|
|
1591
|
-
}
|
|
1592
|
-
if (this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS)) {
|
|
1593
|
-
return;
|
|
1594
|
-
}
|
|
1595
|
-
if (this.isSelectableList()) {
|
|
1596
|
-
this.setSelectedIndexOnAction(index, toggleCheckbox);
|
|
1597
|
-
}
|
|
1598
|
-
this.adapter.notifyAction(index);
|
|
1599
|
-
};
|
|
1600
|
-
/**
|
|
1601
|
-
* Focuses the next element on the list.
|
|
1602
|
-
*/
|
|
1603
|
-
MDCListFoundation.prototype.focusNextElement = function (index) {
|
|
1604
|
-
var count = this.adapter.getListItemCount();
|
|
1605
|
-
var nextIndex = index + 1;
|
|
1606
|
-
if (nextIndex >= count) {
|
|
1607
|
-
if (this.wrapFocus) {
|
|
1608
|
-
nextIndex = 0;
|
|
1609
|
-
}
|
|
1610
|
-
else {
|
|
1611
|
-
// Return early because last item is already focused.
|
|
1612
|
-
return index;
|
|
1613
|
-
}
|
|
1614
|
-
}
|
|
1615
|
-
this.focusItemAtIndex(nextIndex);
|
|
1616
|
-
return nextIndex;
|
|
1617
|
-
};
|
|
1618
|
-
/**
|
|
1619
|
-
* Focuses the previous element on the list.
|
|
1620
|
-
*/
|
|
1621
|
-
MDCListFoundation.prototype.focusPrevElement = function (index) {
|
|
1622
|
-
var prevIndex = index - 1;
|
|
1623
|
-
if (prevIndex < 0) {
|
|
1624
|
-
if (this.wrapFocus) {
|
|
1625
|
-
prevIndex = this.adapter.getListItemCount() - 1;
|
|
1626
|
-
}
|
|
1627
|
-
else {
|
|
1628
|
-
// Return early because first item is already focused.
|
|
1629
|
-
return index;
|
|
1630
|
-
}
|
|
1631
|
-
}
|
|
1632
|
-
this.focusItemAtIndex(prevIndex);
|
|
1633
|
-
return prevIndex;
|
|
1634
|
-
};
|
|
1635
|
-
MDCListFoundation.prototype.focusFirstElement = function () {
|
|
1636
|
-
this.focusItemAtIndex(0);
|
|
1637
|
-
return 0;
|
|
1638
|
-
};
|
|
1639
|
-
MDCListFoundation.prototype.focusLastElement = function () {
|
|
1640
|
-
var lastIndex = this.adapter.getListItemCount() - 1;
|
|
1641
|
-
this.focusItemAtIndex(lastIndex);
|
|
1642
|
-
return lastIndex;
|
|
1643
|
-
};
|
|
1644
|
-
MDCListFoundation.prototype.focusInitialElement = function () {
|
|
1645
|
-
var initialIndex = this.getFirstSelectedOrFocusedItemIndex();
|
|
1646
|
-
this.focusItemAtIndex(initialIndex);
|
|
1647
|
-
return initialIndex;
|
|
1648
|
-
};
|
|
1649
|
-
/**
|
|
1650
|
-
* @param itemIndex Index of the list item
|
|
1651
|
-
* @param isEnabled Sets the list item to enabled or disabled.
|
|
1652
|
-
*/
|
|
1653
|
-
MDCListFoundation.prototype.setEnabled = function (itemIndex, isEnabled) {
|
|
1654
|
-
if (!this.isIndexValid(itemIndex)) {
|
|
1655
|
-
return;
|
|
1656
|
-
}
|
|
1657
|
-
if (isEnabled) {
|
|
1658
|
-
this.adapter.removeClassForElementIndex(itemIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
|
|
1659
|
-
this.adapter.setAttributeForElementIndex(itemIndex, strings$2.ARIA_DISABLED, 'false');
|
|
1660
|
-
}
|
|
1661
|
-
else {
|
|
1662
|
-
this.adapter.addClassForElementIndex(itemIndex, cssClasses$2.LIST_ITEM_DISABLED_CLASS);
|
|
1663
|
-
this.adapter.setAttributeForElementIndex(itemIndex, strings$2.ARIA_DISABLED, 'true');
|
|
1664
|
-
}
|
|
1665
|
-
};
|
|
1666
|
-
MDCListFoundation.prototype.setSingleSelectionAtIndex = function (index, _a) {
|
|
1667
|
-
var _b = _a === void 0 ? {} : _a, forceUpdate = _b.forceUpdate;
|
|
1668
|
-
if (this.selectedIndex === index && !forceUpdate) {
|
|
1669
|
-
return;
|
|
1670
|
-
}
|
|
1671
|
-
var selectedClassName = cssClasses$2.LIST_ITEM_SELECTED_CLASS;
|
|
1672
|
-
if (this.useActivatedClass) {
|
|
1673
|
-
selectedClassName = cssClasses$2.LIST_ITEM_ACTIVATED_CLASS;
|
|
1674
|
-
}
|
|
1675
|
-
if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
|
|
1676
|
-
this.adapter.removeClassForElementIndex(this.selectedIndex, selectedClassName);
|
|
1677
|
-
}
|
|
1678
|
-
this.setAriaForSingleSelectionAtIndex(index);
|
|
1679
|
-
this.setTabindexAtIndex(index);
|
|
1680
|
-
if (index !== numbers$2.UNSET_INDEX) {
|
|
1681
|
-
this.adapter.addClassForElementIndex(index, selectedClassName);
|
|
1682
|
-
}
|
|
1683
|
-
this.selectedIndex = index;
|
|
1684
|
-
};
|
|
1685
|
-
/**
|
|
1686
|
-
* Sets aria attribute for single selection at given index.
|
|
1687
|
-
*/
|
|
1688
|
-
MDCListFoundation.prototype.setAriaForSingleSelectionAtIndex = function (index) {
|
|
1689
|
-
// Detect the presence of aria-current and get the value only during list
|
|
1690
|
-
// initialization when it is in unset state.
|
|
1691
|
-
if (this.selectedIndex === numbers$2.UNSET_INDEX) {
|
|
1692
|
-
this.ariaCurrentAttrValue =
|
|
1693
|
-
this.adapter.getAttributeForElementIndex(index, strings$2.ARIA_CURRENT);
|
|
1694
|
-
}
|
|
1695
|
-
var isAriaCurrent = this.ariaCurrentAttrValue !== null;
|
|
1696
|
-
var ariaAttribute = isAriaCurrent ? strings$2.ARIA_CURRENT : strings$2.ARIA_SELECTED;
|
|
1697
|
-
if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
|
|
1698
|
-
this.adapter.setAttributeForElementIndex(this.selectedIndex, ariaAttribute, 'false');
|
|
1699
|
-
}
|
|
1700
|
-
if (index !== numbers$2.UNSET_INDEX) {
|
|
1701
|
-
var ariaAttributeValue = isAriaCurrent ? this.ariaCurrentAttrValue : 'true';
|
|
1702
|
-
this.adapter.setAttributeForElementIndex(index, ariaAttribute, ariaAttributeValue);
|
|
1703
|
-
}
|
|
1704
|
-
};
|
|
1705
|
-
/**
|
|
1706
|
-
* Returns the attribute to use for indicating selection status.
|
|
1707
|
-
*/
|
|
1708
|
-
MDCListFoundation.prototype.getSelectionAttribute = function () {
|
|
1709
|
-
return this.useSelectedAttr ? strings$2.ARIA_SELECTED : strings$2.ARIA_CHECKED;
|
|
1710
|
-
};
|
|
1711
|
-
/**
|
|
1712
|
-
* Toggles radio at give index. Radio doesn't change the checked state if it
|
|
1713
|
-
* is already checked.
|
|
1714
|
-
*/
|
|
1715
|
-
MDCListFoundation.prototype.setRadioAtIndex = function (index) {
|
|
1716
|
-
var selectionAttribute = this.getSelectionAttribute();
|
|
1717
|
-
this.adapter.setCheckedCheckboxOrRadioAtIndex(index, true);
|
|
1718
|
-
if (this.selectedIndex !== numbers$2.UNSET_INDEX) {
|
|
1719
|
-
this.adapter.setAttributeForElementIndex(this.selectedIndex, selectionAttribute, 'false');
|
|
1720
|
-
}
|
|
1721
|
-
this.adapter.setAttributeForElementIndex(index, selectionAttribute, 'true');
|
|
1722
|
-
this.selectedIndex = index;
|
|
1723
|
-
};
|
|
1724
|
-
MDCListFoundation.prototype.setCheckboxAtIndex = function (index) {
|
|
1725
|
-
var selectionAttribute = this.getSelectionAttribute();
|
|
1726
|
-
for (var i = 0; i < this.adapter.getListItemCount(); i++) {
|
|
1727
|
-
var isChecked = false;
|
|
1728
|
-
if (index.indexOf(i) >= 0) {
|
|
1729
|
-
isChecked = true;
|
|
1730
|
-
}
|
|
1731
|
-
this.adapter.setCheckedCheckboxOrRadioAtIndex(i, isChecked);
|
|
1732
|
-
this.adapter.setAttributeForElementIndex(i, selectionAttribute, isChecked ? 'true' : 'false');
|
|
1733
|
-
}
|
|
1734
|
-
this.selectedIndex = index;
|
|
1735
|
-
};
|
|
1736
|
-
MDCListFoundation.prototype.setTabindexAtIndex = function (index) {
|
|
1737
|
-
if (this.focusedItemIndex === numbers$2.UNSET_INDEX && index !== 0) {
|
|
1738
|
-
// If some list item was selected set first list item's tabindex to -1.
|
|
1739
|
-
// Generally, tabindex is set to 0 on first list item of list that has no
|
|
1740
|
-
// preselected items.
|
|
1741
|
-
this.adapter.setAttributeForElementIndex(0, 'tabindex', '-1');
|
|
1742
|
-
}
|
|
1743
|
-
else if (this.focusedItemIndex >= 0 && this.focusedItemIndex !== index) {
|
|
1744
|
-
this.adapter.setAttributeForElementIndex(this.focusedItemIndex, 'tabindex', '-1');
|
|
1745
|
-
}
|
|
1746
|
-
// Set the previous selection's tabindex to -1. We need this because
|
|
1747
|
-
// in selection menus that are not visible, programmatically setting an
|
|
1748
|
-
// option will not change focus but will change where tabindex should be 0.
|
|
1749
|
-
if (!(this.selectedIndex instanceof Array) &&
|
|
1750
|
-
this.selectedIndex !== index) {
|
|
1751
|
-
this.adapter.setAttributeForElementIndex(this.selectedIndex, 'tabindex', '-1');
|
|
1752
|
-
}
|
|
1753
|
-
if (index !== numbers$2.UNSET_INDEX) {
|
|
1754
|
-
this.adapter.setAttributeForElementIndex(index, 'tabindex', '0');
|
|
1755
|
-
}
|
|
1756
|
-
};
|
|
1757
|
-
/**
|
|
1758
|
-
* @return Return true if it is single selectin list, checkbox list or radio
|
|
1759
|
-
* list.
|
|
1760
|
-
*/
|
|
1761
|
-
MDCListFoundation.prototype.isSelectableList = function () {
|
|
1762
|
-
return this.isSingleSelectionList || this.isCheckboxList ||
|
|
1763
|
-
this.isRadioList;
|
|
1764
|
-
};
|
|
1765
|
-
MDCListFoundation.prototype.setTabindexToFirstSelectedOrFocusedItem = function () {
|
|
1766
|
-
var targetIndex = this.getFirstSelectedOrFocusedItemIndex();
|
|
1767
|
-
this.setTabindexAtIndex(targetIndex);
|
|
1768
|
-
};
|
|
1769
|
-
MDCListFoundation.prototype.getFirstSelectedOrFocusedItemIndex = function () {
|
|
1770
|
-
// Action lists retain focus on the most recently focused item.
|
|
1771
|
-
if (!this.isSelectableList()) {
|
|
1772
|
-
return Math.max(this.focusedItemIndex, 0);
|
|
1773
|
-
}
|
|
1774
|
-
// Single-selection lists focus the selected item.
|
|
1775
|
-
if (typeof this.selectedIndex === 'number' &&
|
|
1776
|
-
this.selectedIndex !== numbers$2.UNSET_INDEX) {
|
|
1777
|
-
return this.selectedIndex;
|
|
1778
|
-
}
|
|
1779
|
-
// Multiple-selection lists focus the first selected item.
|
|
1780
|
-
if (isNumberArray(this.selectedIndex) && this.selectedIndex.length > 0) {
|
|
1781
|
-
return this.selectedIndex.reduce(function (minIndex, currentIndex) { return Math.min(minIndex, currentIndex); });
|
|
1782
|
-
}
|
|
1783
|
-
// Selection lists without a selection focus the first item.
|
|
1784
|
-
return 0;
|
|
1785
|
-
};
|
|
1786
|
-
MDCListFoundation.prototype.isIndexValid = function (index) {
|
|
1787
|
-
var _this = this;
|
|
1788
|
-
if (index instanceof Array) {
|
|
1789
|
-
if (!this.isCheckboxList) {
|
|
1790
|
-
throw new Error('MDCListFoundation: Array of index is only supported for checkbox based list');
|
|
1791
|
-
}
|
|
1792
|
-
if (index.length === 0) {
|
|
1793
|
-
return true;
|
|
1794
|
-
}
|
|
1795
|
-
else {
|
|
1796
|
-
return index.some(function (i) { return _this.isIndexInRange(i); });
|
|
1797
|
-
}
|
|
1798
|
-
}
|
|
1799
|
-
else if (typeof index === 'number') {
|
|
1800
|
-
if (this.isCheckboxList) {
|
|
1801
|
-
throw new Error("MDCListFoundation: Expected array of index for checkbox based list but got number: " + index);
|
|
1802
|
-
}
|
|
1803
|
-
return this.isIndexInRange(index) ||
|
|
1804
|
-
this.isSingleSelectionList && index === numbers$2.UNSET_INDEX;
|
|
1805
|
-
}
|
|
1806
|
-
else {
|
|
1807
|
-
return false;
|
|
1808
|
-
}
|
|
1809
|
-
};
|
|
1810
|
-
MDCListFoundation.prototype.isIndexInRange = function (index) {
|
|
1811
|
-
var listSize = this.adapter.getListItemCount();
|
|
1812
|
-
return index >= 0 && index < listSize;
|
|
1813
|
-
};
|
|
1814
|
-
/**
|
|
1815
|
-
* Sets selected index on user action, toggles checkbox / radio based on
|
|
1816
|
-
* toggleCheckbox value. User interaction should not toggle list item(s) when
|
|
1817
|
-
* disabled.
|
|
1818
|
-
*/
|
|
1819
|
-
MDCListFoundation.prototype.setSelectedIndexOnAction = function (index, toggleCheckbox) {
|
|
1820
|
-
if (toggleCheckbox === void 0) { toggleCheckbox = true; }
|
|
1821
|
-
if (this.isCheckboxList) {
|
|
1822
|
-
this.toggleCheckboxAtIndex(index, toggleCheckbox);
|
|
1823
|
-
}
|
|
1824
|
-
else {
|
|
1825
|
-
this.setSelectedIndex(index);
|
|
1826
|
-
}
|
|
1827
|
-
};
|
|
1828
|
-
MDCListFoundation.prototype.toggleCheckboxAtIndex = function (index, toggleCheckbox) {
|
|
1829
|
-
var selectionAttribute = this.getSelectionAttribute();
|
|
1830
|
-
var isChecked = this.adapter.isCheckboxCheckedAtIndex(index);
|
|
1831
|
-
if (toggleCheckbox) {
|
|
1832
|
-
isChecked = !isChecked;
|
|
1833
|
-
this.adapter.setCheckedCheckboxOrRadioAtIndex(index, isChecked);
|
|
1834
|
-
}
|
|
1835
|
-
this.adapter.setAttributeForElementIndex(index, selectionAttribute, isChecked ? 'true' : 'false');
|
|
1836
|
-
// If none of the checkbox items are selected and selectedIndex is not
|
|
1837
|
-
// initialized then provide a default value.
|
|
1838
|
-
var selectedIndexes = this.selectedIndex === numbers$2.UNSET_INDEX ?
|
|
1839
|
-
[] :
|
|
1840
|
-
this.selectedIndex.slice();
|
|
1841
|
-
if (isChecked) {
|
|
1842
|
-
selectedIndexes.push(index);
|
|
1843
|
-
}
|
|
1844
|
-
else {
|
|
1845
|
-
selectedIndexes = selectedIndexes.filter(function (i) { return i !== index; });
|
|
1846
|
-
}
|
|
1847
|
-
this.selectedIndex = selectedIndexes;
|
|
1848
|
-
};
|
|
1849
|
-
MDCListFoundation.prototype.focusItemAtIndex = function (index) {
|
|
1850
|
-
this.adapter.focusItemAtIndex(index);
|
|
1851
|
-
this.focusedItemIndex = index;
|
|
1852
|
-
};
|
|
1853
|
-
MDCListFoundation.prototype.toggleAll = function (currentlySelectedIndexes) {
|
|
1854
|
-
var count = this.adapter.getListItemCount();
|
|
1855
|
-
// If all items are selected, deselect everything.
|
|
1856
|
-
if (currentlySelectedIndexes.length === count) {
|
|
1857
|
-
this.setCheckboxAtIndex([]);
|
|
1858
|
-
}
|
|
1859
|
-
else {
|
|
1860
|
-
// Otherwise select all enabled options.
|
|
1861
|
-
var allIndexes = [];
|
|
1862
|
-
for (var i = 0; i < count; i++) {
|
|
1863
|
-
if (!this.adapter.listItemAtIndexHasClass(i, cssClasses$2.LIST_ITEM_DISABLED_CLASS) ||
|
|
1864
|
-
currentlySelectedIndexes.indexOf(i) > -1) {
|
|
1865
|
-
allIndexes.push(i);
|
|
1866
|
-
}
|
|
1867
|
-
}
|
|
1868
|
-
this.setCheckboxAtIndex(allIndexes);
|
|
1869
|
-
}
|
|
1870
|
-
};
|
|
1871
|
-
/**
|
|
1872
|
-
* Given the next desired character from the user, adds it to the typeahead
|
|
1873
|
-
* buffer. Then, attempts to find the next option matching the buffer. Wraps
|
|
1874
|
-
* around if at the end of options.
|
|
1875
|
-
*
|
|
1876
|
-
* @param nextChar The next character to add to the prefix buffer.
|
|
1877
|
-
* @param startingIndex The index from which to start matching. Only relevant
|
|
1878
|
-
* when starting a new match sequence. To start a new match sequence,
|
|
1879
|
-
* clear the buffer using `clearTypeaheadBuffer`, or wait for the buffer
|
|
1880
|
-
* to clear after a set interval defined in list foundation. Defaults to
|
|
1881
|
-
* the currently focused index.
|
|
1882
|
-
* @return The index of the matched item, or -1 if no match.
|
|
1883
|
-
*/
|
|
1884
|
-
MDCListFoundation.prototype.typeaheadMatchItem = function (nextChar, startingIndex, skipFocus) {
|
|
1885
|
-
var _this = this;
|
|
1886
|
-
if (skipFocus === void 0) { skipFocus = false; }
|
|
1887
|
-
var opts = {
|
|
1888
|
-
focusItemAtIndex: function (index) {
|
|
1889
|
-
_this.focusItemAtIndex(index);
|
|
1890
|
-
},
|
|
1891
|
-
focusedItemIndex: startingIndex ? startingIndex : this.focusedItemIndex,
|
|
1892
|
-
nextChar: nextChar,
|
|
1893
|
-
sortedIndexByFirstChar: this.sortedIndexByFirstChar,
|
|
1894
|
-
skipFocus: skipFocus,
|
|
1895
|
-
isItemAtIndexDisabled: function (index) { return _this.adapter.listItemAtIndexHasClass(index, cssClasses$2.LIST_ITEM_DISABLED_CLASS); }
|
|
1896
|
-
};
|
|
1897
|
-
return matchItem(opts, this.typeaheadState);
|
|
1898
|
-
};
|
|
1899
|
-
/**
|
|
1900
|
-
* Initializes the MDCListTextAndIndex data structure by indexing the current
|
|
1901
|
-
* list items by primary text.
|
|
1902
|
-
*
|
|
1903
|
-
* @return The primary texts of all the list items sorted by first character.
|
|
1904
|
-
*/
|
|
1905
|
-
MDCListFoundation.prototype.typeaheadInitSortedIndex = function () {
|
|
1906
|
-
return initSortedIndex(this.adapter.getListItemCount(), this.adapter.getPrimaryTextAtIndex);
|
|
1907
|
-
};
|
|
1908
|
-
/**
|
|
1909
|
-
* Clears the typeahead buffer.
|
|
1910
|
-
*/
|
|
1911
|
-
MDCListFoundation.prototype.clearTypeaheadBuffer = function () {
|
|
1912
|
-
clearBuffer(this.typeaheadState);
|
|
1913
|
-
};
|
|
1914
|
-
return MDCListFoundation;
|
|
1915
|
-
}(MDCFoundation));
|
|
1916
|
-
|
|
1917
|
-
/**
|
|
1918
|
-
* @license
|
|
1919
|
-
* Copyright 2018 Google Inc.
|
|
1920
|
-
*
|
|
1921
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
1922
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
1923
|
-
* in the Software without restriction, including without limitation the rights
|
|
1924
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
1925
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
1926
|
-
* furnished to do so, subject to the following conditions:
|
|
1927
|
-
*
|
|
1928
|
-
* The above copyright notice and this permission notice shall be included in
|
|
1929
|
-
* all copies or substantial portions of the Software.
|
|
1930
|
-
*
|
|
1931
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
1932
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
1933
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
1934
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
1935
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
1936
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
1937
|
-
* THE SOFTWARE.
|
|
1938
|
-
*/
|
|
1939
|
-
var MDCList = /** @class */ (function (_super) {
|
|
1940
|
-
__extends(MDCList, _super);
|
|
1941
|
-
function MDCList() {
|
|
1942
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
|
1943
|
-
}
|
|
1944
|
-
Object.defineProperty(MDCList.prototype, "vertical", {
|
|
1945
|
-
set: function (value) {
|
|
1946
|
-
this.foundation.setVerticalOrientation(value);
|
|
1947
|
-
},
|
|
1948
|
-
enumerable: false,
|
|
1949
|
-
configurable: true
|
|
1950
|
-
});
|
|
1951
|
-
Object.defineProperty(MDCList.prototype, "listElements", {
|
|
1952
|
-
get: function () {
|
|
1953
|
-
return Array.from(this.root.querySelectorAll("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS]));
|
|
1954
|
-
},
|
|
1955
|
-
enumerable: false,
|
|
1956
|
-
configurable: true
|
|
1957
|
-
});
|
|
1958
|
-
Object.defineProperty(MDCList.prototype, "wrapFocus", {
|
|
1959
|
-
set: function (value) {
|
|
1960
|
-
this.foundation.setWrapFocus(value);
|
|
1961
|
-
},
|
|
1962
|
-
enumerable: false,
|
|
1963
|
-
configurable: true
|
|
1964
|
-
});
|
|
1965
|
-
Object.defineProperty(MDCList.prototype, "typeaheadInProgress", {
|
|
1966
|
-
/**
|
|
1967
|
-
* @return Whether typeahead is currently matching a user-specified prefix.
|
|
1968
|
-
*/
|
|
1969
|
-
get: function () {
|
|
1970
|
-
return this.foundation.isTypeaheadInProgress();
|
|
1971
|
-
},
|
|
1972
|
-
enumerable: false,
|
|
1973
|
-
configurable: true
|
|
1974
|
-
});
|
|
1975
|
-
Object.defineProperty(MDCList.prototype, "hasTypeahead", {
|
|
1976
|
-
/**
|
|
1977
|
-
* Sets whether typeahead functionality is enabled on the list.
|
|
1978
|
-
* @param hasTypeahead Whether typeahead is enabled.
|
|
1979
|
-
*/
|
|
1980
|
-
set: function (hasTypeahead) {
|
|
1981
|
-
this.foundation.setHasTypeahead(hasTypeahead);
|
|
1982
|
-
},
|
|
1983
|
-
enumerable: false,
|
|
1984
|
-
configurable: true
|
|
1985
|
-
});
|
|
1986
|
-
Object.defineProperty(MDCList.prototype, "singleSelection", {
|
|
1987
|
-
set: function (isSingleSelectionList) {
|
|
1988
|
-
this.foundation.setSingleSelection(isSingleSelectionList);
|
|
1989
|
-
},
|
|
1990
|
-
enumerable: false,
|
|
1991
|
-
configurable: true
|
|
1992
|
-
});
|
|
1993
|
-
Object.defineProperty(MDCList.prototype, "selectedIndex", {
|
|
1994
|
-
get: function () {
|
|
1995
|
-
return this.foundation.getSelectedIndex();
|
|
1996
|
-
},
|
|
1997
|
-
set: function (index) {
|
|
1998
|
-
this.foundation.setSelectedIndex(index);
|
|
1999
|
-
},
|
|
2000
|
-
enumerable: false,
|
|
2001
|
-
configurable: true
|
|
2002
|
-
});
|
|
2003
|
-
MDCList.attachTo = function (root) {
|
|
2004
|
-
return new MDCList(root);
|
|
2005
|
-
};
|
|
2006
|
-
MDCList.prototype.initialSyncWithDOM = function () {
|
|
2007
|
-
this.isEvolutionEnabled =
|
|
2008
|
-
evolutionAttribute in this.root.dataset;
|
|
2009
|
-
if (this.isEvolutionEnabled) {
|
|
2010
|
-
this.classNameMap = evolutionClassNameMap;
|
|
2011
|
-
}
|
|
2012
|
-
else if (matches(this.root, strings$2.DEPRECATED_SELECTOR)) {
|
|
2013
|
-
this.classNameMap = deprecatedClassNameMap;
|
|
2014
|
-
}
|
|
2015
|
-
else {
|
|
2016
|
-
this.classNameMap =
|
|
2017
|
-
Object.values(cssClasses$2)
|
|
2018
|
-
.reduce(function (obj, className) {
|
|
2019
|
-
obj[className] = className;
|
|
2020
|
-
return obj;
|
|
2021
|
-
}, {});
|
|
2022
|
-
}
|
|
2023
|
-
this.handleClick = this.handleClickEvent.bind(this);
|
|
2024
|
-
this.handleKeydown = this.handleKeydownEvent.bind(this);
|
|
2025
|
-
this.focusInEventListener = this.handleFocusInEvent.bind(this);
|
|
2026
|
-
this.focusOutEventListener = this.handleFocusOutEvent.bind(this);
|
|
2027
|
-
this.listen('keydown', this.handleKeydown);
|
|
2028
|
-
this.listen('click', this.handleClick);
|
|
2029
|
-
this.listen('focusin', this.focusInEventListener);
|
|
2030
|
-
this.listen('focusout', this.focusOutEventListener);
|
|
2031
|
-
this.layout();
|
|
2032
|
-
this.initializeListType();
|
|
2033
|
-
this.ensureFocusable();
|
|
2034
|
-
};
|
|
2035
|
-
MDCList.prototype.destroy = function () {
|
|
2036
|
-
this.unlisten('keydown', this.handleKeydown);
|
|
2037
|
-
this.unlisten('click', this.handleClick);
|
|
2038
|
-
this.unlisten('focusin', this.focusInEventListener);
|
|
2039
|
-
this.unlisten('focusout', this.focusOutEventListener);
|
|
2040
|
-
};
|
|
2041
|
-
MDCList.prototype.layout = function () {
|
|
2042
|
-
var direction = this.root.getAttribute(strings$2.ARIA_ORIENTATION);
|
|
2043
|
-
this.vertical = direction !== strings$2.ARIA_ORIENTATION_HORIZONTAL;
|
|
2044
|
-
var itemSelector = "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ":not([tabindex])";
|
|
2045
|
-
var childSelector = strings$2.FOCUSABLE_CHILD_ELEMENTS;
|
|
2046
|
-
// List items need to have at least tabindex=-1 to be focusable.
|
|
2047
|
-
var itemEls = this.root.querySelectorAll(itemSelector);
|
|
2048
|
-
if (itemEls.length) {
|
|
2049
|
-
Array.prototype.forEach.call(itemEls, function (el) {
|
|
2050
|
-
el.setAttribute('tabindex', '-1');
|
|
2051
|
-
});
|
|
2052
|
-
}
|
|
2053
|
-
// Child button/a elements are not tabbable until the list item is focused.
|
|
2054
|
-
var focusableChildEls = this.root.querySelectorAll(childSelector);
|
|
2055
|
-
if (focusableChildEls.length) {
|
|
2056
|
-
Array.prototype.forEach.call(focusableChildEls, function (el) {
|
|
2057
|
-
el.setAttribute('tabindex', '-1');
|
|
2058
|
-
});
|
|
2059
|
-
}
|
|
2060
|
-
if (this.isEvolutionEnabled) {
|
|
2061
|
-
this.foundation.setUseSelectedAttribute(true);
|
|
2062
|
-
}
|
|
2063
|
-
this.foundation.layout();
|
|
2064
|
-
};
|
|
2065
|
-
/**
|
|
2066
|
-
* Extracts the primary text from a list item.
|
|
2067
|
-
* @param item The list item element.
|
|
2068
|
-
* @return The primary text in the element.
|
|
2069
|
-
*/
|
|
2070
|
-
MDCList.prototype.getPrimaryText = function (item) {
|
|
2071
|
-
var _a;
|
|
2072
|
-
var primaryText = item.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_PRIMARY_TEXT_CLASS]);
|
|
2073
|
-
if (this.isEvolutionEnabled || primaryText) {
|
|
2074
|
-
return (_a = primaryText === null || primaryText === void 0 ? void 0 : primaryText.textContent) !== null && _a !== void 0 ? _a : '';
|
|
2075
|
-
}
|
|
2076
|
-
var singleLineText = item.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_TEXT_CLASS]);
|
|
2077
|
-
return (singleLineText && singleLineText.textContent) || '';
|
|
2078
|
-
};
|
|
2079
|
-
/**
|
|
2080
|
-
* Initialize selectedIndex value based on pre-selected list items.
|
|
2081
|
-
*/
|
|
2082
|
-
MDCList.prototype.initializeListType = function () {
|
|
2083
|
-
var _this = this;
|
|
2084
|
-
this.isInteractive =
|
|
2085
|
-
matches(this.root, strings$2.ARIA_INTERACTIVE_ROLES_SELECTOR);
|
|
2086
|
-
if (this.isEvolutionEnabled && this.isInteractive) {
|
|
2087
|
-
var selection = Array.from(this.root.querySelectorAll(strings$2.SELECTED_ITEM_SELECTOR), function (listItem) { return _this.listElements.indexOf(listItem); });
|
|
2088
|
-
if (matches(this.root, strings$2.ARIA_MULTI_SELECTABLE_SELECTOR)) {
|
|
2089
|
-
this.selectedIndex = selection;
|
|
2090
|
-
}
|
|
2091
|
-
else if (selection.length > 0) {
|
|
2092
|
-
this.selectedIndex = selection[0];
|
|
2093
|
-
}
|
|
2094
|
-
return;
|
|
2095
|
-
}
|
|
2096
|
-
var checkboxListItems = this.root.querySelectorAll(strings$2.ARIA_ROLE_CHECKBOX_SELECTOR);
|
|
2097
|
-
var radioSelectedListItem = this.root.querySelector(strings$2.ARIA_CHECKED_RADIO_SELECTOR);
|
|
2098
|
-
if (checkboxListItems.length) {
|
|
2099
|
-
var preselectedItems = this.root.querySelectorAll(strings$2.ARIA_CHECKED_CHECKBOX_SELECTOR);
|
|
2100
|
-
this.selectedIndex = Array.from(preselectedItems, function (listItem) { return _this.listElements.indexOf(listItem); });
|
|
2101
|
-
}
|
|
2102
|
-
else if (radioSelectedListItem) {
|
|
2103
|
-
this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);
|
|
2104
|
-
}
|
|
2105
|
-
};
|
|
2106
|
-
/**
|
|
2107
|
-
* Updates the list item at itemIndex to the desired isEnabled state.
|
|
2108
|
-
* @param itemIndex Index of the list item
|
|
2109
|
-
* @param isEnabled Sets the list item to enabled or disabled.
|
|
2110
|
-
*/
|
|
2111
|
-
MDCList.prototype.setEnabled = function (itemIndex, isEnabled) {
|
|
2112
|
-
this.foundation.setEnabled(itemIndex, isEnabled);
|
|
2113
|
-
};
|
|
2114
|
-
/**
|
|
2115
|
-
* Given the next desired character from the user, adds it to the typeahead
|
|
2116
|
-
* buffer. Then, attempts to find the next option matching the buffer. Wraps
|
|
2117
|
-
* around if at the end of options.
|
|
2118
|
-
*
|
|
2119
|
-
* @param nextChar The next character to add to the prefix buffer.
|
|
2120
|
-
* @param startingIndex The index from which to start matching. Defaults to
|
|
2121
|
-
* the currently focused index.
|
|
2122
|
-
* @return The index of the matched item.
|
|
2123
|
-
*/
|
|
2124
|
-
MDCList.prototype.typeaheadMatchItem = function (nextChar, startingIndex) {
|
|
2125
|
-
return this.foundation.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
|
|
2126
|
-
};
|
|
2127
|
-
MDCList.prototype.getDefaultFoundation = function () {
|
|
2128
|
-
var _this = this;
|
|
2129
|
-
// DO NOT INLINE this variable. For backward compatibility, foundations take
|
|
2130
|
-
// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
|
|
2131
|
-
// methods, we need a separate, strongly typed adapter variable.
|
|
2132
|
-
var adapter = {
|
|
2133
|
-
addClassForElementIndex: function (index, className) {
|
|
2134
|
-
var element = _this.listElements[index];
|
|
2135
|
-
if (element) {
|
|
2136
|
-
element.classList.add(_this.classNameMap[className]);
|
|
2137
|
-
}
|
|
2138
|
-
},
|
|
2139
|
-
focusItemAtIndex: function (index) {
|
|
2140
|
-
var element = _this.listElements[index];
|
|
2141
|
-
if (element) {
|
|
2142
|
-
element.focus();
|
|
2143
|
-
}
|
|
2144
|
-
},
|
|
2145
|
-
getAttributeForElementIndex: function (index, attr) {
|
|
2146
|
-
return _this.listElements[index].getAttribute(attr);
|
|
2147
|
-
},
|
|
2148
|
-
getFocusedElementIndex: function () {
|
|
2149
|
-
return _this.listElements.indexOf(document.activeElement);
|
|
2150
|
-
},
|
|
2151
|
-
getListItemCount: function () { return _this.listElements.length; },
|
|
2152
|
-
getPrimaryTextAtIndex: function (index) {
|
|
2153
|
-
return _this.getPrimaryText(_this.listElements[index]);
|
|
2154
|
-
},
|
|
2155
|
-
hasCheckboxAtIndex: function (index) {
|
|
2156
|
-
var listItem = _this.listElements[index];
|
|
2157
|
-
return !!listItem.querySelector(strings$2.CHECKBOX_SELECTOR);
|
|
2158
|
-
},
|
|
2159
|
-
hasRadioAtIndex: function (index) {
|
|
2160
|
-
var listItem = _this.listElements[index];
|
|
2161
|
-
return !!listItem.querySelector(strings$2.RADIO_SELECTOR);
|
|
2162
|
-
},
|
|
2163
|
-
isCheckboxCheckedAtIndex: function (index) {
|
|
2164
|
-
var listItem = _this.listElements[index];
|
|
2165
|
-
var toggleEl = listItem.querySelector(strings$2.CHECKBOX_SELECTOR);
|
|
2166
|
-
return toggleEl.checked;
|
|
2167
|
-
},
|
|
2168
|
-
isFocusInsideList: function () {
|
|
2169
|
-
return _this.root !== document.activeElement &&
|
|
2170
|
-
_this.root.contains(document.activeElement);
|
|
2171
|
-
},
|
|
2172
|
-
isRootFocused: function () { return document.activeElement === _this.root; },
|
|
2173
|
-
listItemAtIndexHasClass: function (index, className) {
|
|
2174
|
-
return _this.listElements[index].classList.contains(_this.classNameMap[className]);
|
|
2175
|
-
},
|
|
2176
|
-
notifyAction: function (index) {
|
|
2177
|
-
_this.emit(strings$2.ACTION_EVENT, { index: index }, /** shouldBubble */ true);
|
|
2178
|
-
},
|
|
2179
|
-
removeClassForElementIndex: function (index, className) {
|
|
2180
|
-
var element = _this.listElements[index];
|
|
2181
|
-
if (element) {
|
|
2182
|
-
element.classList.remove(_this.classNameMap[className]);
|
|
2183
|
-
}
|
|
2184
|
-
},
|
|
2185
|
-
setAttributeForElementIndex: function (index, attr, value) {
|
|
2186
|
-
var element = _this.listElements[index];
|
|
2187
|
-
if (element) {
|
|
2188
|
-
element.setAttribute(attr, value);
|
|
2189
|
-
}
|
|
2190
|
-
},
|
|
2191
|
-
setCheckedCheckboxOrRadioAtIndex: function (index, isChecked) {
|
|
2192
|
-
var listItem = _this.listElements[index];
|
|
2193
|
-
var toggleEl = listItem.querySelector(strings$2.CHECKBOX_RADIO_SELECTOR);
|
|
2194
|
-
toggleEl.checked = isChecked;
|
|
2195
|
-
var event = document.createEvent('Event');
|
|
2196
|
-
event.initEvent('change', true, true);
|
|
2197
|
-
toggleEl.dispatchEvent(event);
|
|
2198
|
-
},
|
|
2199
|
-
setTabIndexForListItemChildren: function (listItemIndex, tabIndexValue) {
|
|
2200
|
-
var element = _this.listElements[listItemIndex];
|
|
2201
|
-
var selector = strings$2.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX;
|
|
2202
|
-
Array.prototype.forEach.call(element.querySelectorAll(selector), function (el) {
|
|
2203
|
-
el.setAttribute('tabindex', tabIndexValue);
|
|
2204
|
-
});
|
|
2205
|
-
},
|
|
2206
|
-
};
|
|
2207
|
-
return new MDCListFoundation(adapter);
|
|
2208
|
-
};
|
|
2209
|
-
/**
|
|
2210
|
-
* Ensures that at least one item is focusable if the list is interactive and
|
|
2211
|
-
* doesn't specify a suitable tabindex.
|
|
2212
|
-
*/
|
|
2213
|
-
MDCList.prototype.ensureFocusable = function () {
|
|
2214
|
-
if (this.isEvolutionEnabled && this.isInteractive) {
|
|
2215
|
-
if (!this.root.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + "[tabindex=\"0\"]")) {
|
|
2216
|
-
var index = this.initialFocusIndex();
|
|
2217
|
-
if (index !== -1) {
|
|
2218
|
-
this.listElements[index].tabIndex = 0;
|
|
2219
|
-
}
|
|
2220
|
-
}
|
|
2221
|
-
}
|
|
2222
|
-
};
|
|
2223
|
-
MDCList.prototype.initialFocusIndex = function () {
|
|
2224
|
-
if (this.selectedIndex instanceof Array && this.selectedIndex.length > 0) {
|
|
2225
|
-
return this.selectedIndex[0];
|
|
2226
|
-
}
|
|
2227
|
-
if (typeof this.selectedIndex === 'number' &&
|
|
2228
|
-
this.selectedIndex !== numbers$2.UNSET_INDEX) {
|
|
2229
|
-
return this.selectedIndex;
|
|
2230
|
-
}
|
|
2231
|
-
var el = this.root.querySelector("." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ":not(." + this.classNameMap[cssClasses$2.LIST_ITEM_DISABLED_CLASS] + ")");
|
|
2232
|
-
if (el === null) {
|
|
2233
|
-
return -1;
|
|
2234
|
-
}
|
|
2235
|
-
return this.getListItemIndex(el);
|
|
2236
|
-
};
|
|
2237
|
-
/**
|
|
2238
|
-
* Used to figure out which list item this event is targetting. Or returns -1
|
|
2239
|
-
* if there is no list item
|
|
2240
|
-
*/
|
|
2241
|
-
MDCList.prototype.getListItemIndex = function (el) {
|
|
2242
|
-
var nearestParent = closest(el, "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS] + ", ." + this.classNameMap[cssClasses$2.ROOT]);
|
|
2243
|
-
// Get the index of the element if it is a list item.
|
|
2244
|
-
if (nearestParent &&
|
|
2245
|
-
matches(nearestParent, "." + this.classNameMap[cssClasses$2.LIST_ITEM_CLASS])) {
|
|
2246
|
-
return this.listElements.indexOf(nearestParent);
|
|
2247
|
-
}
|
|
2248
|
-
return -1;
|
|
2249
|
-
};
|
|
2250
|
-
/**
|
|
2251
|
-
* Used to figure out which element was clicked before sending the event to
|
|
2252
|
-
* the foundation.
|
|
2253
|
-
*/
|
|
2254
|
-
MDCList.prototype.handleFocusInEvent = function (evt) {
|
|
2255
|
-
var index = this.getListItemIndex(evt.target);
|
|
2256
|
-
this.foundation.handleFocusIn(index);
|
|
2257
|
-
};
|
|
2258
|
-
/**
|
|
2259
|
-
* Used to figure out which element was clicked before sending the event to
|
|
2260
|
-
* the foundation.
|
|
2261
|
-
*/
|
|
2262
|
-
MDCList.prototype.handleFocusOutEvent = function (evt) {
|
|
2263
|
-
var index = this.getListItemIndex(evt.target);
|
|
2264
|
-
this.foundation.handleFocusOut(index);
|
|
2265
|
-
};
|
|
2266
|
-
/**
|
|
2267
|
-
* Used to figure out which element was focused when keydown event occurred
|
|
2268
|
-
* before sending the event to the foundation.
|
|
2269
|
-
*/
|
|
2270
|
-
MDCList.prototype.handleKeydownEvent = function (evt) {
|
|
2271
|
-
var index = this.getListItemIndex(evt.target);
|
|
2272
|
-
var target = evt.target;
|
|
2273
|
-
this.foundation.handleKeydown(evt, target.classList.contains(this.classNameMap[cssClasses$2.LIST_ITEM_CLASS]), index);
|
|
2274
|
-
};
|
|
2275
|
-
/**
|
|
2276
|
-
* Used to figure out which element was clicked before sending the event to
|
|
2277
|
-
* the foundation.
|
|
2278
|
-
*/
|
|
2279
|
-
MDCList.prototype.handleClickEvent = function (evt) {
|
|
2280
|
-
var index = this.getListItemIndex(evt.target);
|
|
2281
|
-
var target = evt.target;
|
|
2282
|
-
// Toggle the checkbox only if it's not the target of the event, or the
|
|
2283
|
-
// checkbox will have 2 change events.
|
|
2284
|
-
var toggleCheckbox = !matches(target, strings$2.CHECKBOX_RADIO_SELECTOR);
|
|
2285
|
-
this.foundation.handleClick(index, toggleCheckbox);
|
|
2286
|
-
};
|
|
2287
|
-
return MDCList;
|
|
2288
|
-
}(MDCComponent));
|
|
2289
|
-
|
|
2290
|
-
class ListRenderer {
|
|
2291
|
-
constructor() {
|
|
2292
|
-
this.defaultConfig = {
|
|
2293
|
-
isOpen: true,
|
|
2294
|
-
badgeIcons: false,
|
|
2295
|
-
};
|
|
2296
|
-
/**
|
|
2297
|
-
* `aria-orientation` is valid for `listbox` and `radiogroup`,
|
|
2298
|
-
* but not for group (used for checkboxes).
|
|
2299
|
-
* @param role
|
|
2300
|
-
*/
|
|
2301
|
-
this.getAriaOrientation = (role) => {
|
|
2302
|
-
if (role === 'listbox' || role === 'radiogroup') {
|
|
2303
|
-
return 'vertical';
|
|
2304
|
-
}
|
|
2305
|
-
else {
|
|
2306
|
-
return null;
|
|
2307
|
-
}
|
|
2308
|
-
};
|
|
2309
|
-
/**
|
|
2310
|
-
* Determine which ListItem should have the `tab-index` attribute set,
|
|
2311
|
-
* and return the index at which that ListItem is located in `items`.
|
|
2312
|
-
* Returns `undefined` if no item should have the attribute set.
|
|
2313
|
-
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
2314
|
-
*
|
|
2315
|
-
* @param items - the items of the list, including any `ListSeparator`:s
|
|
2316
|
-
* @returns the index as per the description
|
|
2317
|
-
*/
|
|
2318
|
-
this.getIndexForWhichToApplyTabIndex = (items) => {
|
|
2319
|
-
let result;
|
|
2320
|
-
for (let i = 0, max = items.length; i < max; i += 1) {
|
|
2321
|
-
if ('separator' in items[i]) ;
|
|
2322
|
-
else {
|
|
2323
|
-
const item = items[i];
|
|
2324
|
-
if (item.disabled) {
|
|
2325
|
-
// Skip disabled items - they should never get tabindex
|
|
2326
|
-
continue;
|
|
2327
|
-
}
|
|
2328
|
-
if (item.selected) {
|
|
2329
|
-
result = i;
|
|
2330
|
-
break;
|
|
2331
|
-
}
|
|
2332
|
-
if (result === undefined) {
|
|
2333
|
-
result = i;
|
|
2334
|
-
// Do NOT break, as any later item with
|
|
2335
|
-
// `selected=true` should get the tab-index instead!
|
|
2336
|
-
}
|
|
2337
|
-
}
|
|
2338
|
-
}
|
|
2339
|
-
return result;
|
|
2340
|
-
};
|
|
2341
|
-
/**
|
|
2342
|
-
* Render a single list item
|
|
2343
|
-
*
|
|
2344
|
-
* @param item - the item to render
|
|
2345
|
-
* @param index - the index the item had in the `items` array
|
|
2346
|
-
* @returns the list item
|
|
2347
|
-
*/
|
|
2348
|
-
this.renderListItem = (item, index) => {
|
|
2349
|
-
var _a;
|
|
2350
|
-
if ('separator' in item) {
|
|
2351
|
-
return (h("li", { class: "mdc-deprecated-list-divider", role: "separator", key: `sep-${index}` }, this.renderTextForSeparator(item), h("div", { class: "limel-list-divider-line" })));
|
|
2352
|
-
}
|
|
2353
|
-
const attributes = {};
|
|
2354
|
-
if (index === this.applyTabIndexToItemAtIndex) {
|
|
2355
|
-
attributes.tabindex = '0';
|
|
2356
|
-
}
|
|
2357
|
-
let itemType;
|
|
2358
|
-
if (this.config.type === 'radio' || this.config.type === 'checkbox') {
|
|
2359
|
-
itemType = this.config.type;
|
|
2360
|
-
}
|
|
2361
|
-
else if (this.config.type === 'selectable') {
|
|
2362
|
-
itemType = 'option';
|
|
2363
|
-
}
|
|
2364
|
-
else {
|
|
2365
|
-
itemType = 'listitem';
|
|
2366
|
-
}
|
|
2367
|
-
const key = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
|
|
2368
|
-
const classNames = {
|
|
2369
|
-
'mdc-deprecated-list-item': true, // required for keyboard navigation with arrow keys
|
|
2370
|
-
'mdc-deprecated-list-item--disabled': !!item.disabled, // MDC’s foundation checks for the disabled class before toggling selected state
|
|
2371
|
-
};
|
|
2372
|
-
return (h("limel-list-item", Object.assign({ key: key, class: classNames }, attributes, { "data-index": index, type: itemType, text: item.text, secondaryText: item.secondaryText, icon: item.icon, image: item.image, primaryComponent: item.primaryComponent, badgeIcon: this.config.badgeIcons, iconSize: this.config.iconSize, selected: item.selected, disabled: item.disabled, actions: item.actions })));
|
|
2373
|
-
};
|
|
2374
|
-
this.renderTextForSeparator = (item) => {
|
|
2375
|
-
if ('text' in item) {
|
|
2376
|
-
return h("h2", { class: "limel-list-divider-title" }, item.text);
|
|
2377
|
-
}
|
|
2378
|
-
};
|
|
2379
|
-
}
|
|
2380
|
-
render(items, config = {}) {
|
|
2381
|
-
items = items || [];
|
|
2382
|
-
this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
|
|
2383
|
-
let role;
|
|
2384
|
-
switch (this.config.type) {
|
|
2385
|
-
case 'checkbox': {
|
|
2386
|
-
role = 'group';
|
|
2387
|
-
break;
|
|
2388
|
-
}
|
|
2389
|
-
case 'radio': {
|
|
2390
|
-
role = 'radiogroup';
|
|
2391
|
-
break;
|
|
2392
|
-
}
|
|
2393
|
-
default: {
|
|
2394
|
-
role = 'listbox';
|
|
2395
|
-
}
|
|
2396
|
-
}
|
|
2397
|
-
this.applyTabIndexToItemAtIndex =
|
|
2398
|
-
this.getIndexForWhichToApplyTabIndex(items);
|
|
2399
|
-
return (h("ul", { class: "mdc-deprecated-list", role: role, "aria-orientation": this.getAriaOrientation(role) }, items.map(this.renderListItem)));
|
|
2400
|
-
}
|
|
2401
|
-
}
|
|
2402
|
-
|
|
2403
|
-
const listCss = () => `@charset "UTF-8";:host(.has-striped-rows) .mdc-deprecated-list{border:1px solid rgb(var(--contrast-400))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(even){background-color:var(--list-background-color-of-odd-interactive-items, rgb(var(--contrast-200)))}:host(.has-striped-rows) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd),:host(.has-striped-rows.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):not(:hover):nth-child(odd){background-color:var(--list-background-color-of-even-interactive-items, rgb(var(--contrast-100)))}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover{box-shadow:var(--button-shadow-hovered)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):hover,:host(.has-interactive-items) limel-list-item:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(.has-grid-layout){--gap:var(--list-grid-gap, 0.5rem);padding:var(--gap);}:host(.has-grid-layout) .mdc-deprecated-list{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, max(var(--list-grid-item-max-width, 10rem) - var(--gap), var(--list-grid-item-min-width, 7.5rem))), 1fr));max-width:var(--list-grid-max-width, 100%)}:host(.has-grid-layout) .mdc-deprecated-list limel-list-item{border-radius:var(--limel-list-border-radius) !important}:host(.has-grid-layout) .mdc-deprecated-list-divider{grid-column:1/-1}:host(.static-actions-list){z-index:1;background-color:var(--limel-theme-surface-background-color)}:host(.has-position-sticky){position:sticky;box-shadow:0 0 0.75rem 0.5rem var(--limel-theme-surface-background-color)}:host(.has-position-sticky.is-on-top){top:0}:host(.has-position-sticky.is-at-bottom){bottom:0}:host(.is-on-top){border-bottom:1px solid rgb(var(--contrast-400));margin-bottom:0.5rem;padding-bottom:0.25rem}:host(.is-at-bottom){border-top:1px solid rgb(var(--contrast-400));margin-top:0.5rem;padding-top:0.25rem}:host(limel-list){--limel-list-border-radius:0.5rem;display:block;isolation:isolate}:host([hidden]){display:none}ul{--mdc-theme-text-icon-on-background:var( --icon-color, rgb(var(--contrast-900)) );margin:var(--list-margin, 0.25rem);border-radius:var(--limel-list-border-radius);padding:0;list-style:none}.mdc-deprecated-list-divider{border-bottom-color:transparent;display:flex;align-items:center;gap:0.75rem;height:auto;padding:0 0.25rem;margin-bottom:0.5rem}.mdc-deprecated-list-divider:not(:first-child){margin-top:0.75rem}:host(.has-striped-rows) .mdc-deprecated-list-divider{margin-top:0.5rem}.limel-list-divider-line{background-color:rgb(var(--contrast-400));height:0.125rem;border-radius:1rem;min-width:1rem;flex-grow:1}.limel-list-divider-title{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--contrast-900));font-size:var(--limel-theme-default-small-font-size)}`;
|
|
2404
|
-
|
|
2405
|
-
const { ACTION_EVENT } = strings$2;
|
|
2406
|
-
const List = class {
|
|
2407
|
-
constructor(hostRef) {
|
|
2408
|
-
registerInstance(this, hostRef);
|
|
2409
|
-
this.change = createEvent(this, "change", 7);
|
|
2410
|
-
this.select = createEvent(this, "select", 7);
|
|
2411
|
-
this.interact = createEvent(this, "interact", 7);
|
|
2412
|
-
/**
|
|
2413
|
-
* Size of the icons in the list
|
|
2414
|
-
*/
|
|
2415
|
-
this.iconSize = 'small';
|
|
2416
|
-
/**
|
|
2417
|
-
* By default, lists will display 3 lines of text, and then truncate the rest.
|
|
2418
|
-
* Consumers can increase or decrease this number by specifying
|
|
2419
|
-
* `maxLinesSecondaryText`. If consumer enters zero or negative
|
|
2420
|
-
* numbers we default to 1; and if they type decimals we round up.
|
|
2421
|
-
*/
|
|
2422
|
-
this.maxLinesSecondaryText = 3;
|
|
2423
|
-
this.listRenderer = new ListRenderer();
|
|
2424
|
-
this.setup = () => {
|
|
2425
|
-
this.setupList();
|
|
2426
|
-
this.setupListeners();
|
|
2427
|
-
};
|
|
2428
|
-
this.setupList = () => {
|
|
2429
|
-
if (this.mdcList) {
|
|
2430
|
-
this.teardown();
|
|
2431
|
-
this.mdcList = null;
|
|
2432
|
-
}
|
|
2433
|
-
const element = this.element.shadowRoot.querySelector('.mdc-deprecated-list');
|
|
2434
|
-
if (!element) {
|
|
2435
|
-
return;
|
|
2436
|
-
}
|
|
2437
|
-
this.listElement = element;
|
|
2438
|
-
this.listElement.removeEventListener('mousedown', this.handleItemMouseDown);
|
|
2439
|
-
this.listElement.addEventListener('mousedown', this.handleItemMouseDown);
|
|
2440
|
-
this.mdcList = new MDCList(element);
|
|
2441
|
-
// NOTE: This has no effect. It is kept as a marker rather than
|
|
2442
|
-
// removed, so that its absence isn't mistaken for an oversight.
|
|
2443
|
-
//
|
|
2444
|
-
// MDC indexes each row for typeahead by looking for
|
|
2445
|
-
// `.mdc-deprecated-list-item__primary-text` inside it, while
|
|
2446
|
-
// `limel-list-item` renders its label as `<span class="label">`. MDC
|
|
2447
|
-
// therefore builds an empty index, and typing does nothing.
|
|
2448
|
-
//
|
|
2449
|
-
// Do not "fix" this by adding MDC's class name to `limel-list-item`.
|
|
2450
|
-
// That revives MDC's typeahead along with three behaviors that cannot
|
|
2451
|
-
// be configured from the outside: a hard coded 300ms buffer, `Enter`
|
|
2452
|
-
// being ignored for as long as that buffer lives (its `notifyAction`
|
|
2453
|
-
// is guarded by `isTypeaheadInProgress`), and the space bar being
|
|
2454
|
-
// excluded from matches. It would also collide with `limel-menu`,
|
|
2455
|
-
// where single characters are used as item hotkeys.
|
|
2456
|
-
//
|
|
2457
|
-
// `limel-select` implements its own typeahead instead, see
|
|
2458
|
-
// `src/util/typeahead.ts`. It intercepts typed characters in the
|
|
2459
|
-
// capture phase on this very element, so they never reach MDC.
|
|
2460
|
-
this.mdcList.hasTypeahead = true;
|
|
2461
|
-
};
|
|
2462
|
-
/**
|
|
2463
|
-
* Focus the pressed list item directly, without scrolling.
|
|
2464
|
-
*
|
|
2465
|
-
* Since the list uses `delegatesFocus`, pressing a non-focusable part of
|
|
2466
|
-
* a list item (e.g. its text) would otherwise delegate focus to the first
|
|
2467
|
-
* focusable row, scrolling it into view. In a scrolled list that moves the
|
|
2468
|
-
* pressed row out from under the pointer before the click completes, so the
|
|
2469
|
-
* click lands on empty space and no item gets selected.
|
|
2470
|
-
*
|
|
2471
|
-
* Bound to `mousedown` only (not `pointerdown`) so a touch-drag to scroll
|
|
2472
|
-
* that starts on a row is not blocked by `preventDefault`.
|
|
2473
|
-
*
|
|
2474
|
-
* @param event - the mousedown event
|
|
2475
|
-
*/
|
|
2476
|
-
this.handleItemMouseDown = (event) => {
|
|
2477
|
-
var _a;
|
|
2478
|
-
const target = event.target;
|
|
2479
|
-
const itemElement = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.mdc-deprecated-list-item');
|
|
2480
|
-
if (!itemElement) {
|
|
2481
|
-
return;
|
|
2482
|
-
}
|
|
2483
|
-
// Suppress the default focus delegation (and its scroll) for any row,
|
|
2484
|
-
// but only move focus to interactive (non-disabled) rows.
|
|
2485
|
-
event.preventDefault();
|
|
2486
|
-
if (!itemElement.classList.contains('mdc-deprecated-list-item--disabled')) {
|
|
2487
|
-
itemElement.focus({ preventScroll: true });
|
|
2488
|
-
}
|
|
2489
|
-
};
|
|
2490
|
-
this.setupListeners = () => {
|
|
2491
|
-
if (!this.mdcList) {
|
|
2492
|
-
return;
|
|
2493
|
-
}
|
|
2494
|
-
this.mdcList.unlisten(ACTION_EVENT, this.handleAction);
|
|
2495
|
-
this.selectable = ['selectable', 'radio', 'checkbox'].includes(this.type);
|
|
2496
|
-
this.multiple = this.type === 'checkbox';
|
|
2497
|
-
if (!this.selectable) {
|
|
2498
|
-
return;
|
|
2499
|
-
}
|
|
2500
|
-
this.mdcList.listen(ACTION_EVENT, this.handleAction);
|
|
2501
|
-
this.mdcList.singleSelection = !this.multiple;
|
|
2502
|
-
};
|
|
2503
|
-
this.teardown = () => {
|
|
2504
|
-
var _a, _b, _c;
|
|
2505
|
-
(_a = this.listElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.handleItemMouseDown);
|
|
2506
|
-
(_b = this.mdcList) === null || _b === void 0 ? void 0 : _b.unlisten(ACTION_EVENT, this.handleAction);
|
|
2507
|
-
(_c = this.mdcList) === null || _c === void 0 ? void 0 : _c.destroy();
|
|
2508
|
-
};
|
|
2509
|
-
this.handleAction = (event) => {
|
|
2510
|
-
if (!this.multiple) {
|
|
2511
|
-
this.handleSingleSelect(event.detail.index);
|
|
2512
|
-
return;
|
|
2513
|
-
}
|
|
2514
|
-
this.handleMultiSelect(event.detail.index);
|
|
2515
|
-
};
|
|
2516
|
-
this.handleSingleSelect = (index) => {
|
|
2517
|
-
const listItems = this.items.filter(this.isListItem);
|
|
2518
|
-
if (listItems[index].disabled) {
|
|
2519
|
-
return;
|
|
2520
|
-
}
|
|
2521
|
-
const selectedItem = listItems.find((item) => {
|
|
2522
|
-
return !!item.selected;
|
|
2523
|
-
});
|
|
2524
|
-
let interactedItem;
|
|
2525
|
-
if (selectedItem) {
|
|
2526
|
-
if (this.type !== 'radio') {
|
|
2527
|
-
this.mdcList.selectedIndex = -1;
|
|
2528
|
-
}
|
|
2529
|
-
interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
|
|
2530
|
-
this.change.emit(interactedItem);
|
|
2531
|
-
}
|
|
2532
|
-
if (listItems[index] !== selectedItem) {
|
|
2533
|
-
interactedItem = Object.assign(Object.assign({}, listItems[index]), { selected: true });
|
|
2534
|
-
this.change.emit(interactedItem);
|
|
2535
|
-
}
|
|
2536
|
-
this.interact.emit(interactedItem);
|
|
2537
|
-
};
|
|
2538
|
-
this.handleMultiSelect = (index) => {
|
|
2539
|
-
const listItems = this.items.filter(this.isListItem);
|
|
2540
|
-
if (listItems[index].disabled) {
|
|
2541
|
-
return;
|
|
2542
|
-
}
|
|
2543
|
-
const selectedItems = listItems
|
|
2544
|
-
.filter((item, listIndex) => {
|
|
2545
|
-
if (listIndex === index) {
|
|
2546
|
-
// This is the item that was selected or deselected,
|
|
2547
|
-
// so we negate its previous selection status.
|
|
2548
|
-
return !item.selected;
|
|
2549
|
-
}
|
|
2550
|
-
// This is an item that didn't change, so we keep its selection status.
|
|
2551
|
-
return item.selected;
|
|
2552
|
-
})
|
|
2553
|
-
.map((item) => {
|
|
2554
|
-
return Object.assign(Object.assign({}, item), { selected: true });
|
|
2555
|
-
});
|
|
2556
|
-
this.change.emit(selectedItems);
|
|
2557
|
-
this.interact.emit(Object.assign({}, selectedItems[index]));
|
|
2558
|
-
};
|
|
2559
|
-
this.isListItem = (item) => {
|
|
2560
|
-
return !('separator' in item);
|
|
2561
|
-
};
|
|
2562
|
-
}
|
|
2563
|
-
connectedCallback() {
|
|
2564
|
-
this.setup();
|
|
2565
|
-
}
|
|
2566
|
-
disconnectedCallback() {
|
|
2567
|
-
this.teardown();
|
|
2568
|
-
}
|
|
2569
|
-
componentDidLoad() {
|
|
2570
|
-
this.setup();
|
|
2571
|
-
this.triggerIconColorWarning();
|
|
2572
|
-
}
|
|
2573
|
-
render() {
|
|
2574
|
-
var _a;
|
|
2575
|
-
this.config = {
|
|
2576
|
-
badgeIcons: this.badgeIcons,
|
|
2577
|
-
type: this.type,
|
|
2578
|
-
iconSize: this.iconSize,
|
|
2579
|
-
};
|
|
2580
|
-
let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed());
|
|
2581
|
-
if (this.maxLinesSecondaryText < 1) {
|
|
2582
|
-
maxLinesSecondaryText = 1;
|
|
2583
|
-
}
|
|
2584
|
-
const html = this.listRenderer.render(this.items, this.config);
|
|
2585
|
-
return (h(Host, { key: 'f15badb0936caf891cd8bd272ef5d3224645c3c7', style: {
|
|
2586
|
-
'--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
|
|
2587
|
-
} }, html));
|
|
2588
|
-
}
|
|
2589
|
-
handleType() {
|
|
2590
|
-
this.setupListeners();
|
|
2591
|
-
}
|
|
2592
|
-
itemsChanged() {
|
|
2593
|
-
if (!this.mdcList) {
|
|
2594
|
-
return;
|
|
2595
|
-
}
|
|
2596
|
-
setTimeout(() => {
|
|
2597
|
-
this.setup();
|
|
2598
|
-
const listItems = this.items.filter(this.isListItem);
|
|
2599
|
-
if (this.multiple) {
|
|
2600
|
-
this.mdcList.selectedIndex = listItems
|
|
2601
|
-
.filter((item) => item.selected)
|
|
2602
|
-
.map((item) => listItems.indexOf(item));
|
|
2603
|
-
}
|
|
2604
|
-
else {
|
|
2605
|
-
const selectedIndex = listItems.findIndex((item) => item.selected);
|
|
2606
|
-
if (selectedIndex === -1) {
|
|
2607
|
-
this.mdcList.initializeListType();
|
|
2608
|
-
}
|
|
2609
|
-
else {
|
|
2610
|
-
this.mdcList.selectedIndex = selectedIndex;
|
|
2611
|
-
}
|
|
2612
|
-
}
|
|
2613
|
-
}, 0);
|
|
2614
|
-
}
|
|
2615
|
-
triggerIconColorWarning() {
|
|
2616
|
-
var _a;
|
|
2617
|
-
if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.some((item) => 'iconColor' in item)) {
|
|
2618
|
-
console.warn("The `iconColor` prop is deprecated, has no visual effect anymore, and will soon be removed! Use the new `Icon` interface, and instead of `iconColor: 'color-name'` write `icon: { name: 'icon-name', color: 'color-name' }`.");
|
|
2619
|
-
}
|
|
2620
|
-
}
|
|
2621
|
-
static get delegatesFocus() { return true; }
|
|
2622
|
-
get element() { return getElement(this); }
|
|
2623
|
-
static get watchers() { return {
|
|
2624
|
-
"type": [{
|
|
2625
|
-
"handleType": 0
|
|
2626
|
-
}],
|
|
2627
|
-
"items": [{
|
|
2628
|
-
"itemsChanged": 0
|
|
2629
|
-
}]
|
|
2630
|
-
}; }
|
|
2631
|
-
};
|
|
2632
|
-
List.style = listCss();
|
|
2633
|
-
|
|
2634
724
|
const menuCss = () => `:host(limel-menu){isolation:isolate;position:relative;display:inline-block;--badge-background-color:var( --notification-badge-background-color, rgb(var(--color-red-default)) );--badge-text-color:var( --notification-badge-text-color, rgb(var(--color-white)) )}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}`;
|
|
2635
725
|
|
|
2636
726
|
const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
|
|
@@ -2696,6 +786,7 @@ const Menu = class {
|
|
|
2696
786
|
this.keepOpenOnSelect = false;
|
|
2697
787
|
this.shouldRestoreFocusOnClose = false;
|
|
2698
788
|
this.normalizedHotkeyCache = new Map();
|
|
789
|
+
this.triggersDisabledByMenu = new WeakSet();
|
|
2699
790
|
this.cachedSubMenuSource = null;
|
|
2700
791
|
this.cachedSubMenuItems = null;
|
|
2701
792
|
this.handleDocumentKeyDown = (event) => {
|
|
@@ -2975,20 +1066,32 @@ const Menu = class {
|
|
|
2975
1066
|
this.handleSelect(parent);
|
|
2976
1067
|
};
|
|
2977
1068
|
this.setTriggerAttributes = (element) => {
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
1069
|
+
element.setAttribute('aria-haspopup', 'true');
|
|
1070
|
+
element.setAttribute('aria-controls', this.portalId);
|
|
1071
|
+
element.setAttribute('role', 'button');
|
|
1072
|
+
// `aria-expanded` is needed even when the menu is closed. Without
|
|
1073
|
+
// it, the trigger reads as an ordinary button to a screen reader.
|
|
1074
|
+
element.setAttribute('aria-expanded', String(this.open));
|
|
1075
|
+
this.setTriggerDisabled(element);
|
|
1076
|
+
};
|
|
1077
|
+
/**
|
|
1078
|
+
* `disabled` has to be removed rather than set to `false`, because the
|
|
1079
|
+
* presence of the attribute is what disables the element. Only the one the
|
|
1080
|
+
* menu put there may go: a consumer can disable their own trigger, and
|
|
1081
|
+
* stripping that attribute would re-enable it on every render.
|
|
1082
|
+
* @param element - the slotted trigger element
|
|
1083
|
+
*/
|
|
1084
|
+
this.setTriggerDisabled = (element) => {
|
|
1085
|
+
if (this.disabled) {
|
|
1086
|
+
if (!element.hasAttribute('disabled')) {
|
|
1087
|
+
element.setAttribute('disabled', 'true');
|
|
1088
|
+
this.triggersDisabledByMenu.add(element);
|
|
2991
1089
|
}
|
|
1090
|
+
return;
|
|
1091
|
+
}
|
|
1092
|
+
if (this.triggersDisabledByMenu.has(element)) {
|
|
1093
|
+
element.removeAttribute('disabled');
|
|
1094
|
+
this.triggersDisabledByMenu.delete(element);
|
|
2992
1095
|
}
|
|
2993
1096
|
};
|
|
2994
1097
|
this.onClose = () => {
|
|
@@ -3191,7 +1294,7 @@ const Menu = class {
|
|
|
3191
1294
|
const cssProperties = this.getCssProperties();
|
|
3192
1295
|
const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
|
|
3193
1296
|
const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
|
|
3194
|
-
return (h("div", { key: '
|
|
1297
|
+
return (h("div", { key: 'c66307a5cc7257e2b394f0b5d56d6fbc6fce18b1', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '7c37448e29deaee202f74d3288d21697529c82b5', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'f7f1b14ae5c6e19fa8e9651c2a847db0bb246427', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'c2fd7257bfe8ccf820b8aabc6a8959f6d5d1cd2f', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
|
|
3195
1298
|
'has-grid-layout': this.gridLayout,
|
|
3196
1299
|
} }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
|
|
3197
1300
|
}
|
|
@@ -3201,24 +1304,33 @@ const Menu = class {
|
|
|
3201
1304
|
this.setFocus();
|
|
3202
1305
|
}
|
|
3203
1306
|
connectedCallback() {
|
|
3204
|
-
|
|
3205
|
-
document.addEventListener('keydown', this.handleDocumentKeyDown, true);
|
|
3206
|
-
}
|
|
1307
|
+
this.setupGlobalHandlers();
|
|
3207
1308
|
}
|
|
3208
1309
|
disconnectedCallback() {
|
|
3209
|
-
|
|
1310
|
+
this.teardownGlobalHandlers();
|
|
3210
1311
|
}
|
|
3211
1312
|
openWatcher(newValue) {
|
|
3212
|
-
|
|
3213
|
-
if (
|
|
3214
|
-
document.addEventListener('keydown', this.handleDocumentKeyDown, true);
|
|
1313
|
+
this.setupGlobalHandlers();
|
|
1314
|
+
if (newValue) {
|
|
3215
1315
|
this.setFocus();
|
|
3216
1316
|
}
|
|
3217
1317
|
else {
|
|
3218
|
-
document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
|
|
3219
1318
|
this.clearSearch();
|
|
3220
1319
|
}
|
|
3221
1320
|
}
|
|
1321
|
+
setupGlobalHandlers() {
|
|
1322
|
+
// Stencil keeps firing `@Watch` on a detached instance, so `open` can
|
|
1323
|
+
// still flip after `disconnectedCallback` has run. Listening then
|
|
1324
|
+
// would leave a listener behind that no disconnect takes down.
|
|
1325
|
+
if (!this.open || !this.host.isConnected) {
|
|
1326
|
+
this.teardownGlobalHandlers();
|
|
1327
|
+
return;
|
|
1328
|
+
}
|
|
1329
|
+
document.addEventListener('keydown', this.handleDocumentKeyDown, true);
|
|
1330
|
+
}
|
|
1331
|
+
teardownGlobalHandlers() {
|
|
1332
|
+
document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
|
|
1333
|
+
}
|
|
3222
1334
|
isFromTextInput(event) {
|
|
3223
1335
|
const path = typeof event.composedPath === 'function'
|
|
3224
1336
|
? event.composedPath()
|
|
@@ -5176,70 +3288,6 @@ const MenuSurface = class {
|
|
|
5176
3288
|
};
|
|
5177
3289
|
MenuSurface.style = menuSurfaceCss();
|
|
5178
3290
|
|
|
5179
|
-
const notchedOutlineCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}limel-notched-outline{--limel-notched-outline-border-color:rgba(var(--contrast-700), 0.65);--limel-notched-outline-background-color:rgba(var(--contrast-200), 0.5);display:block;width:100%;height:fit-content}.limel-notched-outline{position:relative;width:100%;height:100%}.limel-notched-outline [slot=content]{background-color:var(--limel-notched-outline-background-color);border-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--outlines{pointer-events:none;position:absolute;inset:0;z-index:var(--limel-notched-outline-z-index, 0);display:flex}.limel-notched-outline--leading-outline,.limel-notched-outline--notch,.limel-notched-outline--trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-notched-outline-border-color)}.limel-notched-outline--leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-left-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--notch{flex-shrink:0;position:relative;z-index:2;border-top-color:var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.limel-notched-outline--notch label{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;transition:color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);transform:translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);display:block;padding:0 0.25rem;color:var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));font-size:var(--limel-notched-outline-label-font-size, var(--limel-theme-default-font-size));letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);line-height:normal}.limel-notched-outline--notch label:after{position:absolute;right:0;padding:0 0.25rem}.limel-notched-outline--trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-right-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:var(--limel-theme-default-font-size);font-weight:400;font-family:inherit;letter-spacing:0.009375em}.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.limel-notched-outline--empty-readonly-value{position:absolute;top:0.62rem;left:1rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:rgba(var(--contrast-700), 1);--limel-notched-outline-background-color:rgba(var(--contrast-200), 1)}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-border-color:var(--lime-primary-color, var(--limel-theme-primary-color));--limel-notched-outline-background-color:rgba(var(--contrast-100), 0.8)}limel-notched-outline[disabled]:not([disabled=false]){--limel-notched-outline-label-color:rgba(var(--contrast-1200), 0.5)}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label{padding-right:0.75rem}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after{content:"*";scale:1.3}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])){--limel-notched-outline-border-color:var( --limel-theme-error-text-color )}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:var( --limel-theme-error-color )}limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after{color:var(--limel-theme-error-text-color)}limel-notched-outline[readonly]:not([readonly=false]){--limel-notched-outline-border-color:transparent !important;--limel-notched-outline-background-color:transparent !important}limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label{transition-duration:0s}limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]){--limel-notched-outline-label-transform-x:1.25rem}limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value{left:2.25rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover label,limel-notched-outline:not([disabled]:not([disabled=false])):focus label,limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label{will-change:color, transform, font-size}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}limel-notched-outline[has-floating-label],limel-notched-outline[has-value]:not([has-value=false]),limel-notched-outline[readonly]:not([has-value]:not([has-value=true])){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}`;
|
|
5180
|
-
|
|
5181
|
-
const NotchedOutline = class {
|
|
5182
|
-
constructor(hostRef) {
|
|
5183
|
-
registerInstance(this, hostRef);
|
|
5184
|
-
/**
|
|
5185
|
-
* Set to `true` when the input element is required.
|
|
5186
|
-
* This applies proper visual styles, such as inclusion of an asterisk
|
|
5187
|
-
* beside the label.
|
|
5188
|
-
*/
|
|
5189
|
-
this.required = false;
|
|
5190
|
-
/**
|
|
5191
|
-
* Set to `true` when the input element is readonly.
|
|
5192
|
-
* This applies proper visual styles, such as making the outline transparent.
|
|
5193
|
-
*/
|
|
5194
|
-
this.readonly = false;
|
|
5195
|
-
/**
|
|
5196
|
-
* Set to `true` to indicate that the current value of the input element is
|
|
5197
|
-
* invalid. This applies proper visual styles, such as making the outlines red.
|
|
5198
|
-
*/
|
|
5199
|
-
this.invalid = false;
|
|
5200
|
-
/**
|
|
5201
|
-
* Set to `true` to indicate that the input element is
|
|
5202
|
-
* disabled. This applies proper visual styles, such as making the outlines
|
|
5203
|
-
* and the label transparent.
|
|
5204
|
-
*/
|
|
5205
|
-
this.disabled = false;
|
|
5206
|
-
/**
|
|
5207
|
-
* Set to `true` when the user has entered a value for the input element,
|
|
5208
|
-
* shrinking the label in size, and visually rendering it above the entered value.
|
|
5209
|
-
*/
|
|
5210
|
-
this.hasValue = false;
|
|
5211
|
-
/**
|
|
5212
|
-
* Set to `true` when the consumer element displays a leading icon.
|
|
5213
|
-
* This applies proper visual styles, such as rendering the label
|
|
5214
|
-
* correctly placed beside the leading icon.
|
|
5215
|
-
*/
|
|
5216
|
-
this.hasLeadingIcon = false;
|
|
5217
|
-
/**
|
|
5218
|
-
* Set to `true` when the consumer element needs to render the
|
|
5219
|
-
* label above the input element, despite existence of a `value`.
|
|
5220
|
-
* For example in the `text-editor` or `limel-select`,
|
|
5221
|
-
* where the default layout requires a floating label.
|
|
5222
|
-
*/
|
|
5223
|
-
this.hasFloatingLabel = false;
|
|
5224
|
-
}
|
|
5225
|
-
render() {
|
|
5226
|
-
return (h("div", { key: '928b12e7565dd3a827b29e57dfb94cbd668feb91', class: "limel-notched-outline" }, h("slot", { key: 'ae0a6205b1e8aeed3edea040a198ba7faebecc85', name: "content" }), h("span", { key: '84b1fd4feb65005eea9280717dd2cb6d74fc513c', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '4ae9c02d23197109c5ea0721a4f1abfab802822e', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd7b70aa632b22b7b639bf208ea57fd39a82884e3', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
|
|
5227
|
-
}
|
|
5228
|
-
renderLabel() {
|
|
5229
|
-
if (!this.label) {
|
|
5230
|
-
return;
|
|
5231
|
-
}
|
|
5232
|
-
return (h("span", { class: "limel-notched-outline--notch" }, h("label", { htmlFor: this.labelId }, this.label)));
|
|
5233
|
-
}
|
|
5234
|
-
renderEmptyReadonlyValue() {
|
|
5235
|
-
if (!this.readonly || this.hasValue) {
|
|
5236
|
-
return;
|
|
5237
|
-
}
|
|
5238
|
-
return (h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
|
|
5239
|
-
}
|
|
5240
|
-
};
|
|
5241
|
-
NotchedOutline.style = notchedOutlineCss();
|
|
5242
|
-
|
|
5243
3291
|
const spinnerCss = () => `:host(limel-spinner){display:block}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-aqua)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-aqua)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-10, rgb(var(--contrast-700)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}`;
|
|
5244
3292
|
|
|
5245
3293
|
const Spinner = class {
|
|
@@ -5266,4 +3314,4 @@ const Spinner = class {
|
|
|
5266
3314
|
};
|
|
5267
3315
|
Spinner.style = spinnerCss();
|
|
5268
3316
|
|
|
5269
|
-
export { Breadcrumbs as limel_breadcrumbs, InputField as limel_input_field,
|
|
3317
|
+
export { Breadcrumbs as limel_breadcrumbs, InputField as limel_input_field, Menu as limel_menu, MenuList as limel_menu_list, MenuSurface as limel_menu_surface, Spinner as limel_spinner };
|