@watermarkinsights/ripple 3.15.0-2 → 3.16.0-0

package/dist/esm/wm-tag-input.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-17c79cc6.js';
-import { g as generateId, i as intl, d as debounce, l as shouldOpenUp } from './functions-b4b62a23.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-17c79cc6.js';
+import { g as generateId, p as csvToArray, i as intl, d as debounce, q as hideTooltip, r as showTooltip, l as shouldOpenUp } from './functions-d39bf1c4.js';
 
-const wmTagInputCss = ":host,wm-tag-input{font-family:inherit;width:100%}:host *,wm-tag-input *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper,wm-tag-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-tag-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-tag-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-tag-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-tag-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-tag-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-tag-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-tag-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-tag-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-tag-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-tag-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-tag-input .wrapper{width:100%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;min-height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused,wm-tag-input .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .character-count,wm-tag-input .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper,wm-tag-input .tags-and-input-wrapper{position:relative;width:100%;padding:0.5rem 0.25rem;margin-bottom:-0.5rem}:host .upper-row,wm-tag-input .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}:host .lower-row,wm-tag-input .lower-row{width:100%;border-radius:0 0 3px 3px}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.875rem;background-color:#6b6b6b;padding:0.5rem 1rem;color:white;font-size:0.875rem}:host .tag-area,wm-tag-input .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}:host .tag-area:focus,wm-tag-input .tag-area:focus{outline:none}:host .tag-area [role=option],wm-tag-input .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:#4a4a4a;background-color:rgba(3, 0, 0, 0.1);padding:0.5rem 0.625rem;margin-bottom:0.5rem;margin-right:0.25rem;margin-left:0.25rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight,wm-tag-input .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}@keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}:host .tag-area [role=option].focused,wm-tag-input .tag-area [role=option].focused{background-color:#d1d1d1}:host .tag-area [role=option] .remove-btn,wm-tag-input .tag-area [role=option] .remove-btn{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;border:1px solid #575195;color:#575195;border-radius:50%;padding:0;margin-left:0.5rem;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .remove-btn:hover,wm-tag-input .tag-area [role=option] .remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .remove-btn:before,wm-tag-input .tag-area [role=option] .remove-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\"}:host input,wm-tag-input input{font-family:inherit;border:none;height:1.75rem;padding:0;margin-bottom:0.5rem;margin-right:0.25rem;padding-left:0.5rem;right:0px}:host input.hidden,wm-tag-input input.hidden{display:none}:host input:focus,wm-tag-input input:focus{outline:none}:host .dropdown-wrapper,wm-tag-input .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:calc(100% + 2px);right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown,wm-tag-input .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open,wm-tag-input .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards,wm-tag-input .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div,wm-tag-input .dropdown-wrapper li,wm-tag-input .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:#fff;list-style:none;height:2.6875rem;white-space:pre}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn,wm-tag-input .dropdown-wrapper li[role=option],wm-tag-input .dropdown-wrapper li.add-new-btn,wm-tag-input .dropdown-wrapper div[role=option],wm-tag-input .dropdown-wrapper div.add-new-btn{cursor:pointer;color:#575195;font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper li[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper li.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper div[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:#6b6b6b;font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused,wm-tag-input .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li[role=option].focused,wm-tag-input .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li.add-new-btn.focused,wm-tag-input .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div[role=option].focused,wm-tag-input .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div.add-new-btn.focused{outline:none;background:#f4f4f4}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text,wm-tag-input .dropdown-wrapper li.help-text,wm-tag-input .dropdown-wrapper div.help-text{color:#4a4a4a;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child),wm-tag-input .dropdown-wrapper li:not(:last-child),wm-tag-input .dropdown-wrapper div:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .info-text,wm-tag-input .info-text{font-style:italic;margin-top:0.25rem}:host .sr-only,wm-tag-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const wmTagInputCss = ":host,wm-tag-input{font-family:inherit;width:100%}:host *,wm-tag-input *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper,wm-tag-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-tag-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-tag-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-tag-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-tag-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-tag-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-tag-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-tag-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-tag-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-tag-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-tag-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-tag-input .wrapper{width:100%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;min-height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused,wm-tag-input .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .character-count,wm-tag-input .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper,wm-tag-input .tags-and-input-wrapper{position:relative;width:100%;padding:0.5rem 0.25rem 0.5rem 0;margin-bottom:-0.5rem}:host .upper-row,wm-tag-input .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before,wm-tag-input .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f349\";color:#b5b5b5;padding:0.75rem 0.5rem 0.75rem 0.75rem}:host .lower-row,wm-tag-input .lower-row{width:100%}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.875rem;background-color:#e6e6e6;padding:0.5rem 1rem;color:#4a4a4a;font-size:0.875rem;border-top:1px solid rgba(35, 35, 35, 0.6);border-radius:0 0 3px 3px}:host .tag-area,wm-tag-input .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}:host .tag-area:focus,wm-tag-input .tag-area:focus{outline:none}:host .tag-area [role=option],wm-tag-input .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:#4a4a4a;background-color:rgba(3, 0, 0, 0.1);padding:0.5rem 0.625rem;margin-bottom:0.5rem;margin-right:0.25rem;margin-left:0.25rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight,wm-tag-input .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}@keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}:host .tag-area [role=option].focused,wm-tag-input .tag-area [role=option].focused{background-color:#d1d1d1}:host .tag-area [role=option].locked,wm-tag-input .tag-area [role=option].locked{background-color:#6b6b6b;color:white}:host .tag-area [role=option] .icon,wm-tag-input .tag-area [role=option] .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area [role=option] .icon.remove-btn,wm-tag-input .tag-area [role=option] .icon.remove-btn{border:1px solid #575195;color:#575195;border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .icon.remove-btn:hover,wm-tag-input .tag-area [role=option] .icon.remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .icon.remove-btn:before,wm-tag-input .tag-area [role=option] .icon.remove-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\"}:host .tag-area [role=option] .icon.lock,wm-tag-input .tag-area [role=option] .icon.lock{color:white}:host .tag-area [role=option] .icon.lock:before,wm-tag-input .tag-area [role=option] .icon.lock:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f341\"}:host input,wm-tag-input input{font-family:inherit;border:none;height:1.75rem;padding:0;margin-bottom:0.5rem;margin-right:0.25rem;padding-left:0.5rem;right:0px}:host input.hidden,wm-tag-input input.hidden{display:none}:host input:focus,wm-tag-input input:focus{outline:none}:host .dropdown-wrapper,wm-tag-input .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:calc(100% + 2px);right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown,wm-tag-input .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open,wm-tag-input .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards,wm-tag-input .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div,wm-tag-input .dropdown-wrapper li,wm-tag-input .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:#fff;list-style:none;height:2.6875rem;white-space:pre}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn,wm-tag-input .dropdown-wrapper li[role=option],wm-tag-input .dropdown-wrapper li.add-new-btn,wm-tag-input .dropdown-wrapper div[role=option],wm-tag-input .dropdown-wrapper div.add-new-btn{cursor:pointer;color:#575195;font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper li[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper li.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper div[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:#6b6b6b;font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused,wm-tag-input .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li[role=option].focused,wm-tag-input .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li.add-new-btn.focused,wm-tag-input .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div[role=option].focused,wm-tag-input .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div.add-new-btn.focused{outline:none;background:#f4f4f4}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text,wm-tag-input .dropdown-wrapper li.help-text,wm-tag-input .dropdown-wrapper div.help-text{color:#4a4a4a;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child),wm-tag-input .dropdown-wrapper li:not(:last-child),wm-tag-input .dropdown-wrapper div:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .info-text,wm-tag-input .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper,wm-tag-input .table-wrapper{max-height:17.5rem;overflow:auto;margin-top:1.5rem}:host .table-wrapper #table,wm-tag-input .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths,wm-tag-input .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers,wm-tag-input .table-wrapper #table .headers{height:2.5rem;background-color:#eeedf4}:host .table-wrapper #table .headers th,wm-tag-input .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr.locked td:first-child:before,wm-tag-input .table-wrapper tr.locked td:first-child:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f33e\";margin-right:0.5rem;color:#4a4a4a}:host .table-wrapper tr:nth-child(even),wm-tag-input .table-wrapper tr:nth-child(even){background-color:#fafafa}:host .table-wrapper tr.selected,wm-tag-input .table-wrapper tr.selected{background-color:rgba(25, 161, 169, 0.2);-webkit-box-shadow:inset 0 0 0 1px #19a1a9;box-shadow:inset 0 0 0 1px #19a1a9;font-weight:500}:host .table-wrapper tr.focused,:host .table-wrapper tr:hover,wm-tag-input .table-wrapper tr.focused,wm-tag-input .table-wrapper tr:hover{background-color:#e9e7ec;-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper td,wm-tag-input .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.trunc,wm-tag-input .table-wrapper td.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td.focused,wm-tag-input .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}:host .table-wrapper td .description,wm-tag-input .table-wrapper td .description{display:none}:host .no-results,wm-tag-input .no-results{padding:1.25rem 1.5rem}:host .sr-only,wm-tag-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
 const TagInput = class {
   constructor(hostRef) {
@@ -12,11 +12,14 @@ const TagInput = class {
     this.selectedTags = ""; // csv
     this.addNew = true;
     this.characterLimit = 50;
+    this.tagInputType = "dropdown";
     this.uid = this.el.id ? this.el.id : generateId();
     this.openUp = false;
+    this.tooltipVisible = false;
+    this.tablePosition = { row: 0, column: 1 };
     this.isExpanded = false;
-    this.tagsList = this.csvToArray(this.selectedTags);
-    this.optionsList = this.csvToArray(this.options);
+    this.tagsList = csvToArray(this.selectedTags);
+    this.optionsList = csvToArray(this.options);
     this.charCount = 0;
     this.liveRegionMessage = "";
     this.tagAreaInstructions = intl.formatMessage({
@@ -43,6 +46,25 @@ const TagInput = class {
   get optionEls() {
     return Array.from(this.dropdownEl.querySelectorAll(".option"));
   }
+  get wmRowEls() {
+    return Array.from(this.el.querySelectorAll("wm-tag-input-row"));
+  }
+  get localRowEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll("tr"));
+  }
+  get filteredRows() {
+    return this.wmRowEls.filter((row) => {
+      const colValues = [row.col1, row.col2, row.col3, row.col4].join("").toLowerCase();
+      return this.inputEl && this.inputEl.value.toLowerCase() ? colValues.includes(this.inputEl.value) : true;
+    });
+  }
+  get noResultsMessage() {
+    return intl.formatMessage({
+      id: "tagInput.noResults",
+      defaultMessage: "No results match your search.",
+      description: "Message displayed when a user's search returns empty.",
+    });
+  }
   generateTagAddedMessage(tag) {
     return intl.formatMessage({
       id: "tagInput.tagAdded",
@@ -105,7 +127,7 @@ const TagInput = class {
         this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
       }
     });
-    this.optionsList = this.csvToArray(this.options);
+    this.optionsList = csvToArray(this.options);
   }
   createPlaceholderDefault(addNew, hasOptions) {
     const addAndSearchPlaceholder = intl.formatMessage({
@@ -139,12 +161,25 @@ const TagInput = class {
     this.selectedTags = this.listToCSV(this.tagsList);
     this.wmTagInputChanged.emit({ value: this.tagsList });
   }
+  handleRowUpdate() {
+    forceUpdate(this.el);
+  }
   closeIfNotElOrChild(ev) {
     const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (isntElOrChild && this.isExpanded) {
+    if (this.tagInputType === "dropdown" && isntElOrChild && this.isExpanded) {
       this.closeDropdown();
     }
   }
+  // From wm-button
+  // we need to listen for scroll events during the capture phase because they do not bubble up
+  // there can be layouts where the main content has 100vh and overflows
+  // in these cases window will register no scroll events unless we catch on they way down
+  dismissTooltip() {
+    if (this.tooltipVisible) {
+      hideTooltip();
+      this.tooltipVisible = false;
+    }
+  }
   handleResize() {
     this.debouncedResize();
   }
@@ -158,7 +193,7 @@ const TagInput = class {
       case "Enter":
       case ",":
         ev.preventDefault();
-        this.submitInput(this.addNew, this.inputEl.value.trim());
+        this.handleInputEnter();
         break;
       case "ArrowDown":
         ev.preventDefault();
@@ -168,8 +203,20 @@ const TagInput = class {
         ev.preventDefault();
         this.handleInputArrowUp();
         break;
+      case "ArrowLeft":
+        ev.preventDefault();
+        if (this.tagInputType === "table" && this.tablePosition.row) {
+          this.moveLeftCell();
+        }
+        break;
+      case "ArrowRight":
+        ev.preventDefault();
+        if (this.tagInputType === "table" && this.tablePosition.row) {
+          this.moveRightCell();
+        }
+        break;
       case "Escape":
-        if (this.isExpanded) {
+        if (this.tagInputType === "dropdown" && this.isExpanded) {
           this.closeDropdown();
         }
         break;
@@ -179,41 +226,71 @@ const TagInput = class {
         break;
     }
   }
+  handleInputFocus() {
+    if (this.tagInputType === "dropdown") {
+      this.openDropdown();
+      this.clearListItemFocus();
+    }
+    // force update needed to apply styled state of field-wrapper el
+    forceUpdate(this.el);
+  }
   handleInputChanged(value) {
     this.charCount = value.length;
-    if (this.charCount >= this.characterLimit - 5) {
-      this.announceCharacterLimitWarning(this.charCount, this.characterLimit);
+    if (this.tagInputType === "dropdown") {
+      this.clearListItemFocus();
+      if (this.charCount >= this.characterLimit - 5) {
+        this.announceCharacterLimitWarning(this.charCount, this.characterLimit);
+      }
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+    }
+    else if (this.tagInputType === "table") {
+      this.clearCellFocus();
+      this.tablePosition = { row: 0, column: 1 };
     }
     this.announceExistingOptions();
-    if (!this.isExpanded) {
-      this.openDropdown();
+  }
+  handleInputEnter() {
+    if (this.tagInputType === "dropdown") {
+      if (this.focusedListItem) {
+        this.handleListItemClick(this.focusedListItem);
+      }
+      else {
+        this.submitInput(this.addNew, this.inputEl.value.trim());
+      }
+    }
+    else if (this.tagInputType === "table" && this.tablePosition.row > 0) {
+      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);
     }
   }
   submitInput(canAddNew, value) {
     const hasNonWhiteSpaceCharacters = value.match(/\S/);
     if (canAddNew && hasNonWhiteSpaceCharacters) {
-      this.tagsList = this.addTag(value);
+      this.addTag(value);
       this.optionsList = this.addOption(value);
       this.resetInput();
-      // if maxTags has been reached, focus should go to the tagArea instead of the input
-      if (this.maxTags && this.tagsList.length >= this.maxTags) {
-        this.tagAreaEl.focus();
-      }
     }
   }
   handleInputArrowDown() {
-    if (this.isExpanded) {
+    if (this.tagInputType === "table") {
+      this.moveDownRow();
+    }
+    else if (this.tagInputType === "dropdown" && this.isExpanded) {
       this.moveDownListItem();
     }
-    else {
+    else if (this.tagInputType === "dropdown") {
       this.openDropdown();
     }
   }
   handleInputArrowUp() {
-    if (this.isExpanded) {
+    if (this.tagInputType === "table") {
+      this.moveUpRow();
+    }
+    else if (this.tagInputType === "dropdown" && this.isExpanded) {
       this.moveUpListItem();
     }
-    else {
+    else if (this.tagInputType === "dropdown") {
       this.openDropdown();
     }
   }
@@ -247,27 +324,37 @@ const TagInput = class {
         if (this.focusedElement !== this.inputEl) {
           this.inputEl.focus();
         }
-        else {
+        else if (this.tagInputType === "dropdown") {
           this.closeDropdown();
         }
         break;
     }
   }
-  handleListItemClick(ev) {
-    const typedEvTarget = ev.target;
-    const tag = typedEvTarget.dataset.option.trim() || "";
+  handleListItemClick(item) {
+    const tag = item.dataset.option.trim() || "";
     if (this.includesCaseInsensitive(this.tagsList, tag)) {
       this.announce(this.generateTagAlreadyAddedMessage(tag));
     }
     else {
       this.announce(this.generateTagAddedMessage(tag));
       this.resetInput();
-      this.tagsList = this.addTag(tag);
+      this.addTag(tag);
       this.optionsList = this.addOption(tag);
       this.focusedListItem = null;
-      // if maxTags has been reached, focus should go to the tagArea instead of the input
-      const elementToFocus = this.maxTags && this.tagsList.length >= this.maxTags ? this.tagAreaEl : this.inputEl;
-      elementToFocus.focus();
+    }
+  }
+  handleTableRowClick(rowId) {
+    const referencedRow = this.el.querySelector(`#${rowId}`);
+    const tagText = referencedRow.col1;
+    const isLocked = referencedRow.locked;
+    if (!isLocked) {
+      if (this.includesCaseInsensitive(this.tagsList, rowId)) {
+        this.removeTag(rowId);
+      }
+      else {
+        this.announce(this.generateTagAddedMessage(tagText));
+        this.addTag(rowId);
+      }
     }
   }
   handleTagAreaKeyDown(ev) {
@@ -289,7 +376,8 @@ const TagInput = class {
     }
   }
   handleTagAreaDelete() {
-    if (this.focusedTag && this.focusedTag.dataset.tag) {
+    const isLocked = this.focusedTag && this.focusedTag.classList.contains("locked");
+    if (this.focusedTag && this.focusedTag.dataset.tag && !isLocked) {
       this.removeTag(this.focusedTag.dataset.tag);
       if (this.tagsList.length === 0) {
         // focus input if no tags are left
@@ -304,13 +392,29 @@ const TagInput = class {
   }
   handleBlur(ev, component) {
     const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
+    this.dismissTooltip();
+    this.tablePosition = { row: 0, column: 1 };
+    this.clearCellFocus();
     if (isntElOrChild) {
-      this.closeDropdown();
       this.fieldWrapperEl.classList.remove("focused");
+      if (this.tagInputType === "dropdown") {
+        this.closeDropdown();
+      }
+    }
+  }
+  handleCellMouseEnter(ev) {
+    const cell = ev.target;
+    const isTruncated = cell.scrollWidth > cell.clientWidth;
+    if (isTruncated) {
+      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+      showTooltip("bottom", cell, cell.innerText);
+      this.tooltipVisible = true;
     }
   }
   handleTagAreaFocus() {
-    this.closeDropdown();
+    if (this.tagInputType === "dropdown") {
+      this.closeDropdown();
+    }
     if (!this.focusedTag) {
       this.focusedTag = this.tagEls[0];
     }
@@ -344,10 +448,71 @@ const TagInput = class {
         this.focusListItem(this.focusedListItem.previousElementSibling);
       }
       else {
-        this.focusedListItem = null;
-        this.inputEl.focus();
+        this.clearListItemFocus();
+      }
+    }
+  }
+  moveDownRow() {
+    if (this.filteredRows.length > 0) {
+      if (this.tablePosition.row === 0) {
+        this.tablePosition.row = 1;
+      }
+      else if (this.tablePosition.row === this.filteredRows.length) {
+        this.tablePosition.row = 1;
+      }
+      else {
+        this.tablePosition.row++;
+      }
+      this.focusCell(this.tablePosition);
+    }
+  }
+  moveUpRow() {
+    if (this.filteredRows.length > 0) {
+      if (this.tablePosition.row === 0) {
+        this.tablePosition.row = this.filteredRows.length;
+      }
+      else if (this.tablePosition.row === 1) {
+        this.tablePosition.row = 0;
       }
+      else {
+        this.tablePosition.row--;
+      }
+      this.focusCell(this.tablePosition);
+    }
+  }
+  moveLeftCell() {
+    const numCols = csvToArray(this.colHeaders).length;
+    if (this.tablePosition.column === 1 && this.tablePosition.row === 1) {
+      // if in first cell in first row, focus the input
+      this.tablePosition.row = 0;
+    }
+    else if (this.tablePosition.column === 1) {
+      // if in first cell, focus last cell of previous row
+      this.tablePosition.row--;
+      this.tablePosition.column = numCols;
+    }
+    else {
+      this.tablePosition.column--;
     }
+    this.focusCell(this.tablePosition);
+  }
+  moveRightCell() {
+    const numRows = this.filteredRows.length;
+    const numCols = csvToArray(this.colHeaders).length;
+    if (this.tablePosition.column === numCols && this.tablePosition.row === numRows) {
+      // if in last cell in last row, focus the first cell
+      this.tablePosition.row = 1;
+      this.tablePosition.column = 1;
+    }
+    else if (this.tablePosition.column === numCols) {
+      // if in last cell, focus first cell of next row
+      this.tablePosition.row++;
+      this.tablePosition.column = 1;
+    }
+    else {
+      this.tablePosition.column++;
+    }
+    this.focusCell(this.tablePosition);
   }
   moveLeftTag() {
     const lastTag = this.tagEls[this.tagEls.length - 1];
@@ -386,44 +551,79 @@ const TagInput = class {
     const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
     if (!tagAlreadyAdded) {
       this.announce(this.generateTagAddedMessage(tag));
-      newTagsList = newTagsList.concat(tagExistsAsOption || tag);
+      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);
+      // if maxTags has been reached, focus should go to the tagArea
+      if (this.maxTags && this.tagsList.length >= this.maxTags) {
+        this.tagAreaEl.focus();
+      }
     }
-    return newTagsList;
   }
   removeTag(tag) {
     const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: tag });
     this.announce(tagRemovedMessage);
     this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    const devOptionsList = this.csvToArray(this.options);
-    if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-      this.removeOption(tag);
+    if (this.tagInputType === "dropdown") {
+      // if a tag was introduced by the user, also remove it from the dropdown options
+      const devOptionsList = csvToArray(this.options);
+      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
+        this.removeOption(tag);
+      }
     }
   }
   focusListItem(item) {
     this.focusedListItem = item;
-    item.focus();
+    this.inputEl.setAttribute("aria-activedescendant", this.focusedListItem.id);
+    item.scrollIntoView({ block: "nearest" });
   }
   focusTag(element) {
     this.focusedTag = element;
     this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
   }
+  focusCell(position) {
+    this.clearCellFocus();
+    if (position.row) {
+      const rowToFocus = this.localRowEls[position.row];
+      const rowCells = rowToFocus.querySelectorAll("td");
+      const cellToFocus = rowCells[position.column - 1];
+      const isTruncated = cellToFocus.scrollWidth > cellToFocus.clientWidth;
+      rowToFocus.classList.add("focused");
+      cellToFocus.classList.add("focused");
+      cellToFocus.scrollIntoView({ block: "nearest" });
+      this.inputEl.setAttribute("aria-activedescendant", cellToFocus.id);
+      this.dismissTooltip();
+      if (isTruncated) {
+        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+        showTooltip("bottom", cellToFocus, cellToFocus.innerText);
+        this.tooltipVisible = true;
+      }
+    }
+  }
   clearTagFocus() {
-    this.tagAreaEl.removeAttribute("aria-activedescendant");
+    this.tagAreaEl.setAttribute("aria-activedescendant", "");
     this.focusedTag = null;
   }
+  clearCellFocus() {
+    this.inputEl.setAttribute("aria-activedescendant", "");
+    this.localRowEls.forEach((row) => {
+      row.classList.remove("focused");
+      row.querySelectorAll("td").forEach((cell) => {
+        cell.classList.remove("focused");
+      });
+    });
+  }
   openDropdown() {
     // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border
     this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);
     this.isExpanded = true;
   }
   closeDropdown() {
-    this.focusedListItem = null;
+    this.clearListItemFocus();
     this.isExpanded = false;
   }
   clearListItemFocus() {
     this.focusedListItem = null;
+    this.inputEl.setAttribute("aria-activedescendant", "");
     this.listItemEls.forEach((el) => {
-      el.tabIndex = -1;
       el.classList.remove("focused");
     });
   }
@@ -441,11 +641,18 @@ const TagInput = class {
   announceExistingOptions() {
     // request animation frame to wait for re-rendering of filtered options
     window.requestAnimationFrame(() => {
+      let numResults = 0;
+      if (this.tagInputType === "dropdown") {
+        numResults = this.optionEls.length;
+      }
+      else if (this.tagInputType === "table") {
+        numResults = this.filteredRows.length;
+      }
       const existingOptionsMessage = intl.formatMessage({
         id: "tagInput.existingOptions",
         defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
-      }, { num: this.optionEls.length });
-      if (this.optionEls.length > 0) {
+      }, { num: numResults });
+      if (numResults > 0) {
         this.announce(existingOptionsMessage);
       }
     });
@@ -485,9 +692,6 @@ const TagInput = class {
   listToCSV(list) {
     return list.join(",");
   }
-  csvToArray(csv) {
-    return csv ? csv.split(/, ?/) : [];
-  }
   includesCaseInsensitive(list, element) {
     const lowercaseList = list.map((str) => str.toLowerCase());
     return lowercaseList.includes(element.toLowerCase());
@@ -508,9 +712,24 @@ const TagInput = class {
   renderTags() {
     return this.tagsList.map((tag, idx) => {
       const id = `tag${idx + 1}`;
-      return (h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""}`, "data-tag": tag, role: "option" }, tag, h("button", { class: "remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) })));
+      let tagText = "";
+      let isLocked = false;
+      if (this.tagInputType === "dropdown") {
+        tagText = tag;
+      }
+      else if (this.tagInputType === "table") {
+        // display table tags using col1 of the row with the same id
+        // if one can't be found, display as empty
+        const referencedRow = this.el.querySelector(`#${tag}`);
+        tagText = referencedRow ? referencedRow.col1 : "";
+        isLocked = referencedRow.locked;
+      }
+      return (h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""} ${isLocked ? "locked" : ""}`, "data-tag": tag, role: "option" }, tagText, isLocked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) }))));
     });
   }
+  renderDropdown() {
+    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList))));
+  }
   renderListItems(optionsList) {
     optionsList = this.sortCaseInsensitive(optionsList);
     // filter by input
@@ -521,7 +740,7 @@ const TagInput = class {
       const id = `option${idx + 1}`;
       const isFocused = this.focusedListItem && this.focusedListItem.id === id;
       const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev) }, option));
+      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target) }, option));
     });
   }
   renderAddNewButton() {
@@ -530,7 +749,7 @@ const TagInput = class {
     if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
       const id = `add-new-btn`;
       const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
+      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
     }
     else
       return "";
@@ -560,21 +779,45 @@ const TagInput = class {
       return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.generateTagCounterMessage(this.tagsList.length, this.maxTags), this.tagsList.length >= this.maxTags && h("span", { class: "sr-only" }, this.maxTagsReachedMessage))));
     }
   }
+  renderTable() {
+    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredRows.length ? this.renderTableRows() : h("div", { class: "no-results" }, this.noResultsMessage))));
+  }
+  renderTableHeaders() {
+    return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
+      let overflowRule = "wrap";
+      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
+        overflowRule = csvToArray(this.colWrap)[idx];
+      }
+      return (h("th", { class: `header-cell ${overflowRule}`, role: "columnheader",
+        // @ts-ignore
+        width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
+    })));
+  }
+  renderTableRows() {
+    return this.filteredRows.map((row) => {
+      const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+      return (h("tr", { id: row.id, class: `${row.locked ? "locked" : ""} ${isSelected ? "selected" : ""}`, role: "row", onClick: () => this.handleTableRowClick(row.id) }, this.renderTableCells(row)));
+    });
+  }
+  renderTableCells(row) {
+    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);
+    const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+    return colValues.map((val, idx) => {
+      const localId = `${row.id}-col${idx + 1}`;
+      let overflowRule = "wrap";
+      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
+        overflowRule = csvToArray(this.colWrap)[idx];
+      }
+      return (h("td", { id: localId, role: "gridcell", class: overflowRule, "aria-describedby": `${localId}-description`, "aria-selected": isSelected.toString(), onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => this.dismissTooltip() }, val, h("div", { class: "description", id: `${localId}-description` }, row.locked ? "locked" : "")));
+    });
+  }
   render() {
-    const isFocused = this.focusedElement &&
-      (this.focusedElement === this.inputEl ||
-        this.focusedElement === this.tagAreaEl ||
-        this.focusedElement.classList.contains("add-new-btn") ||
-        (this.optionsList.length > 0 && this.listItemEls.includes(this.focusedElement)));
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label)), h("div", { class: `field-wrapper ${isFocused ? "focused" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.tagAreaInstructions : ""}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
+    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label)), h("div", { class: `field-wrapper ${this.focusedElement ? "focused" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.tagAreaInstructions : ""}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
         this.clearTagFocus();
         this.handleBlur(ev, this.el);
-      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: `input${this.uid}`, class: this.maxTags && this.tagsList.length >= this.maxTags ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": "dropdown", "aria-describedby": "help-text", "aria-label": `${this.label} ${this.generateCharacterLimitLabel(this.characterLimit)}`, "aria-expanded": this.isExpanded ? "true" : "false", placeholder: this.placeholder, maxLength: this.characterLimit, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
+      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: `input${this.uid}`, class: this.maxTags && this.tagsList.length >= this.maxTags ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": this.tagInputType, "aria-describedby": "help-text", "aria-label": `${this.label} ${this.generateCharacterLimitLabel(this.characterLimit)}`, "aria-expanded": this.tagInputType === "dropdown" ? this.isExpanded.toString() : null, placeholder: this.placeholder, maxLength: this.tagInputType === "dropdown" ? this.characterLimit : undefined, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
         this.handleBlur(ev, this.el);
-      }, onFocus: () => {
-        this.openDropdown();
-        this.clearListItemFocus();
-      }, onKeyDown: (ev) => this.handleInputKeyDown(ev) })), h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)), this.renderTagCounter(), h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList)))), this.info ? (h("div", { id: "info", class: "info-text" }, this.info)) : (""), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage))));
+      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.tagInputType === "dropdown" && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.tagInputType === "dropdown" && this.renderDropdown()), this.info ? (h("div", { id: "info", class: "info-text" }, this.info)) : (""), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.tagInputType === "table" && this.renderTable())));
   }
   get el() { return getElement(this); }
   static get watchers() { return {