lucos_search_component 1.0.13 → 1.0.14

package/dist/index.js

@@ -1927,10 +1927,19 @@ class TomSelect extends MicroPlugin(MicroEvent) {
                 self.positionDropdown();
             }
         };
+        const input_invalid = () => {
+            if (self.isValid) {
+                self.isValid = false;
+                self.isInvalid = true;
+                self.refreshState();
+            }
+        };
+        addEvent$5(input, 'invalid', input_invalid);
         addEvent$5(document, 'mousedown', doc_mousedown);
         addEvent$5(window, 'scroll', win_scroll, passive_event);
         addEvent$5(window, 'resize', win_scroll, passive_event);
         this._destroy = () => {
+            input.removeEventListener('invalid', input_invalid);
             document.removeEventListener('mousedown', doc_mousedown);
             window.removeEventListener('scroll', win_scroll);
             window.removeEventListener('resize', win_scroll);
@@ -1949,13 +1958,6 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         settings.items = [];
         delete settings.optgroups;
         delete settings.options;
-        addEvent$5(input, 'invalid', () => {
-            if (self.isValid) {
-                self.isValid = false;
-                self.isInvalid = true;
-                self.refreshState();
-            }
-        });
         self.refreshItems();
         self.close(false);
         self.inputState();
@@ -2241,7 +2243,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
                         // if select isFull, then the dropdown won't be open and [tab] will work normally
                         preventDefault$5(e);
                     }
-                    if (self.settings.create && self.createItem()) {
+                    else if (self.settings.create && self.createItem()) {
                         preventDefault$5(e);
                     }
                 }
@@ -3373,6 +3375,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
         var output;
         input = input || self.inputValue();
         if (!self.canCreate(input)) {
+            const hash = hash_key$1(input);
+            if (hash) {
+                if (this.options[input]) {
+                    self.addItem(input);
+                }
+            }
             callback();
             return false;
         }
@@ -3942,7 +3950,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -3991,7 +3999,7 @@ function plugin$d () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4168,7 +4176,7 @@ function plugin$c (userOptions) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4222,7 +4230,7 @@ function plugin$b (userOptions) {
     role: 'button',
     tabindex: 0,
     html: data => {
-      return `<div class="${data.className}" title="${data.title}" role="${data.role}" tabindex="${data.tabindex}">&#10799;</div>`;
+      return `<div class="${data.className}" title="${data.title}" role="${data.role}" tabindex="${data.tabindex}">&times;</div>`;
     }
   }, userOptions);
   self.on('initialize', () => {
@@ -4241,7 +4249,7 @@ function plugin$b (userOptions) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4370,7 +4378,7 @@ const insertBefore = (referenceNode, newNode) => {
 const isBefore = (referenceNode, newNode) => {
   do {
     var _newNode;
-    newNode = (_newNode = newNode) == null ? undefined : _newNode.previousElementSibling;
+    newNode = (_newNode = newNode) == null ? void 0 : _newNode.previousElementSibling;
     if (referenceNode == newNode) {
       return true;
     }
@@ -4459,7 +4467,7 @@ function plugin$a () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4559,7 +4567,7 @@ function plugin$9 (userOptions) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4720,7 +4728,7 @@ function plugin$8 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -4932,7 +4940,7 @@ function plugin$7 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5004,7 +5012,7 @@ function plugin$6 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5034,7 +5042,7 @@ function plugin$5 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5058,7 +5066,7 @@ function plugin$4 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5142,7 +5150,7 @@ function plugin$3 () {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5274,7 +5282,7 @@ function plugin$2 (userOptions) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5314,7 +5322,7 @@ function plugin$1 (userOptions) {
 }
 
 /**
-* Tom Select v2.4.4
+* Tom Select v2.4.5
 * Licensed under the Apache License, Version 2.0 (the "License");
 */
 
@@ -5598,7 +5606,7 @@ TomSelect.define('remove_button', plugin$2);
 TomSelect.define('restore_on_backspace', plugin$1);
 TomSelect.define('virtual_scroll', plugin);
 
-var tomSelectStylesheet = "/**\n * tom-select.css (v2.4.4)\n * Copyright (c) contributors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use this\n * file except in compliance with the License. You may obtain a copy of the License at:\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF\n * ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n *\n */\n.ts-control {\n  border: 1px solid #d0d0d0;\n  padding: 8px 8px;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);\n}\n.full .ts-control {\n  background-color: #fff;\n}\n.disabled .ts-control, .disabled .ts-control * {\n  cursor: default !important;\n}\n.focus .ts-control {\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n.ts-control > * {\n  vertical-align: baseline;\n  display: inline-block;\n}\n.ts-wrapper.multi .ts-control > div {\n  cursor: pointer;\n  margin: 0 3px 3px 0;\n  padding: 2px 6px;\n  background: #1da7ee;\n  color: #fff;\n  border: 1px solid #0073bb;\n}\n.ts-wrapper.multi .ts-control > div.active {\n  background: #92c836;\n  color: #fff;\n  border: 1px solid #00578d;\n}\n.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {\n  color: white;\n  background: #d2d2d2;\n  border: 1px solid #aaaaaa;\n}\n.ts-control > input {\n  flex: 1 1 auto;\n  min-width: 7rem;\n  display: inline-block !important;\n  padding: 0 !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  text-indent: 0 !important;\n  border: 0 none !important;\n  background: none !important;\n  line-height: inherit !important;\n  -webkit-user-select: auto !important;\n     -moz-user-select: auto !important;\n      -ms-user-select: auto !important;\n          user-select: auto !important;\n  box-shadow: none !important;\n}\n.ts-control > input::-ms-clear {\n  display: none;\n}\n.ts-control > input:focus {\n  outline: none !important;\n}\n.has-items .ts-control > input {\n  margin: 0 4px !important;\n}\n.ts-control.rtl {\n  text-align: right;\n}\n.ts-control.rtl.single .ts-control:after {\n  left: 15px;\n  right: auto;\n}\n.ts-control.rtl .ts-control > input {\n  margin: 0 4px 0 -2px !important;\n}\n.disabled .ts-control {\n  opacity: 0.5;\n  background-color: #fafafa;\n}\n.input-hidden .ts-control > input {\n  opacity: 0;\n  position: absolute;\n  left: -10000px;\n}\n\n.ts-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  border: 1px solid #d0d0d0;\n  background: #fff;\n  margin: 0.25rem 0 0;\n  border-top: 0 none;\n  box-sizing: border-box;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  border-radius: 0 0 3px 3px;\n}\n.ts-dropdown [data-selectable] {\n  cursor: pointer;\n  overflow: hidden;\n}\n.ts-dropdown [data-selectable] .highlight {\n  background: rgba(125, 168, 208, 0.2);\n  border-radius: 1px;\n}\n.ts-dropdown .option,\n.ts-dropdown .optgroup-header,\n.ts-dropdown .no-results,\n.ts-dropdown .create {\n  padding: 5px 8px;\n}\n.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {\n  cursor: inherit;\n  opacity: 0.5;\n}\n.ts-dropdown [data-selectable].option {\n  opacity: 1;\n  cursor: pointer;\n}\n.ts-dropdown .optgroup:first-child .optgroup-header {\n  border-top: 0 none;\n}\n.ts-dropdown .optgroup-header {\n  color: #303030;\n  background: #fff;\n  cursor: default;\n}\n.ts-dropdown .active {\n  background-color: #f5fafd;\n  color: #495c68;\n}\n.ts-dropdown .active.create {\n  color: #495c68;\n}\n.ts-dropdown .create {\n  color: rgba(48, 48, 48, 0.5);\n}\n.ts-dropdown .spinner {\n  display: inline-block;\n  width: 30px;\n  height: 30px;\n  margin: 5px 8px;\n}\n.ts-dropdown .spinner::after {\n  content: \" \";\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 5px solid #d0d0d0;\n  border-color: #d0d0d0 transparent #d0d0d0 transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ts-dropdown-content {\n  overflow: hidden auto;\n  max-height: 200px;\n  scroll-behavior: smooth;\n}\n\n.ts-wrapper.plugin-drag_drop .ts-dragging {\n  color: transparent !important;\n}\n.ts-wrapper.plugin-drag_drop .ts-dragging > * {\n  visibility: hidden !important;\n}\n\n.plugin-checkbox_options:not(.rtl) .option input {\n  margin-right: 0.5rem;\n}\n\n.plugin-checkbox_options.rtl .option input {\n  margin-left: 0.5rem;\n}\n\n/* stylelint-disable function-name-case */\n.plugin-clear_button {\n  --ts-pr-clear-button: 1em;\n}\n.plugin-clear_button .clear-button {\n  opacity: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: calc(8px - 6px);\n  margin-right: 0 !important;\n  background: transparent !important;\n  transition: opacity 0.5s;\n  cursor: pointer;\n}\n.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {\n  right: max(var(--ts-pr-caret), 8px);\n}\n.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {\n  opacity: 1;\n}\n\n.ts-wrapper .dropdown-header {\n  position: relative;\n  padding: 10px 8px;\n  border-bottom: 1px solid #d0d0d0;\n  background: color-mix(#fff, #d0d0d0, 85%);\n  border-radius: 3px 3px 0 0;\n}\n.ts-wrapper .dropdown-header-close {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  color: #303030;\n  opacity: 0.4;\n  margin-top: -12px;\n  line-height: 20px;\n  font-size: 20px !important;\n}\n.ts-wrapper .dropdown-header-close:hover {\n  color: black;\n}\n\n.plugin-dropdown_input.focus.dropdown-active .ts-control {\n  box-shadow: none;\n  border: 1px solid #d0d0d0;\n}\n.plugin-dropdown_input .dropdown-input {\n  border: 1px solid #d0d0d0;\n  border-width: 0 0 1px;\n  display: block;\n  padding: 8px 8px;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  width: 100%;\n  background: transparent;\n}\n.plugin-dropdown_input .items-placeholder {\n  border: 0 none !important;\n  box-shadow: none !important;\n  width: 100%;\n}\n.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {\n  display: none !important;\n}\n\n.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {\n  min-width: 0;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {\n  flex: none;\n  min-width: 4px;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {\n  color: transparent;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {\n  color: transparent;\n}\n\n.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {\n  display: flex;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup {\n  border-right: 1px solid #f2f2f2;\n  border-top: 0 none;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-width: 0;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {\n  border-right: 0 none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup::before {\n  display: none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup-header {\n  border-top: 0 none;\n}\n\n.ts-wrapper.plugin-remove_button .item {\n  display: inline-flex;\n  align-items: center;\n}\n.ts-wrapper.plugin-remove_button .item .remove {\n  color: inherit;\n  text-decoration: none;\n  vertical-align: middle;\n  display: inline-block;\n  padding: 0 6px;\n  border-radius: 0 2px 2px 0;\n  box-sizing: border-box;\n}\n.ts-wrapper.plugin-remove_button .item .remove:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {\n  background: none;\n}\n.ts-wrapper.plugin-remove_button .remove-single {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 23px;\n}\n\n.ts-wrapper.plugin-remove_button:not(.rtl) .item {\n  padding-right: 0 !important;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {\n  border-left: 1px solid #0073bb;\n  margin-left: 6px;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {\n  border-left-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {\n  border-left-color: #aaaaaa;\n}\n\n.ts-wrapper.plugin-remove_button.rtl .item {\n  padding-left: 0 !important;\n}\n.ts-wrapper.plugin-remove_button.rtl .item .remove {\n  border-right: 1px solid #0073bb;\n  margin-right: 6px;\n}\n.ts-wrapper.plugin-remove_button.rtl .item.active .remove {\n  border-right-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {\n  border-right-color: #aaaaaa;\n}\n\n:root {\n  --ts-pr-clear-button: 0px;\n  --ts-pr-caret: 0px;\n  --ts-pr-min: .75rem;\n}\n\n.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {\n  cursor: pointer;\n}\n\n.ts-control:not(.rtl) {\n  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-control.rtl {\n  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-wrapper {\n  position: relative;\n}\n\n.ts-dropdown,\n.ts-control,\n.ts-control input {\n  color: #303030;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 18px;\n}\n\n.ts-control,\n.ts-wrapper.single.input-active .ts-control {\n  background: #fff;\n  cursor: text;\n}\n\n.ts-hidden-accessible {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n          clip-path: inset(50%) !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n.ts-wrapper.single .ts-control {\n  --ts-pr-caret: 2rem;\n}\n.ts-wrapper.single .ts-control::after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 50%;\n  margin-top: -3px;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 5px 5px 0 5px;\n  border-color: #808080 transparent transparent transparent;\n}\n.ts-wrapper.single .ts-control:not(.rtl)::after {\n  right: 15px;\n}\n.ts-wrapper.single .ts-control.rtl::after {\n  left: 15px;\n}\n.ts-wrapper.single.dropdown-active .ts-control::after {\n  margin-top: -4px;\n  border-width: 0 5px 5px 5px;\n  border-color: transparent transparent #808080 transparent;\n}\n.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {\n  cursor: text;\n}\n\n.ts-wrapper {\n  display: flex;\n  min-height: 36px;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding-left: 5px;\n  --ts-pr-min: $padding-x;\n}\n.ts-wrapper.multi .ts-control [data-value] {\n  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);\n  border-radius: 3px;\n  background-color: color-mix(#1da7ee, #178ee9, 60%);\n  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);\n  background-repeat: repeat-x;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);\n}\n.ts-wrapper.multi .ts-control [data-value].active {\n  background-color: color-mix(#008fd8, #0075cf, 60%);\n  background-image: linear-gradient(to bottom, #008fd8, #0075cf);\n  background-repeat: repeat-x;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] {\n  color: #999;\n  text-shadow: none;\n  background: none;\n  box-shadow: none;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value], .ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  border-color: #e6e6e6;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  background: none;\n}\n.ts-wrapper.single .ts-control {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);\n  background-color: color-mix(#fefefe, #f2f2f2, 60%);\n  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);\n  background-repeat: repeat-x;\n}\n\n.ts-wrapper.single .ts-control, .ts-dropdown.single {\n  border-color: #b8b8b8;\n}\n\n.dropdown-active .ts-control {\n  border-radius: 3px 3px 0 0;\n}\n\n.ts-dropdown .optgroup-header {\n  padding-top: 7px;\n  font-weight: bold;\n  font-size: 0.85em;\n}\n.ts-dropdown .optgroup {\n  border-top: 1px solid #f0f0f0;\n}\n.ts-dropdown .optgroup:first-child {\n  border-top: 0 none;\n}\n/*# sourceMappingURL=tom-select.default.css.map */";
+var tomSelectStylesheet = "/**\n * tom-select.css (v2.4.5)\n * Copyright (c) contributors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use this\n * file except in compliance with the License. You may obtain a copy of the License at:\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF\n * ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n *\n */\n.ts-control {\n  border: 1px solid #d0d0d0;\n  padding: 8px 8px;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);\n}\n.full .ts-control {\n  background-color: #fff;\n}\n.disabled .ts-control, .disabled .ts-control * {\n  cursor: default !important;\n}\n.focus .ts-control {\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n.ts-control > * {\n  vertical-align: baseline;\n  display: inline-block;\n}\n.ts-wrapper.multi .ts-control > div {\n  cursor: pointer;\n  margin: 0 3px 3px 0;\n  padding: 2px 6px;\n  background: #1da7ee;\n  color: #fff;\n  border: 1px solid #0073bb;\n  overflow: auto;\n}\n.ts-wrapper.multi .ts-control > div.active {\n  background: #92c836;\n  color: #fff;\n  border: 1px solid #00578d;\n}\n.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {\n  color: white;\n  background: #d2d2d2;\n  border: 1px solid #aaaaaa;\n}\n.ts-control > input {\n  flex: 1 1 auto;\n  min-width: 7rem;\n  display: inline-block !important;\n  padding: 0 !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  text-indent: 0 !important;\n  border: 0 none !important;\n  background: none !important;\n  line-height: inherit !important;\n  -webkit-user-select: auto !important;\n     -moz-user-select: auto !important;\n      -ms-user-select: auto !important;\n          user-select: auto !important;\n  box-shadow: none !important;\n}\n.ts-control > input::-ms-clear {\n  display: none;\n}\n.ts-control > input:focus {\n  outline: none !important;\n}\n.has-items .ts-control > input {\n  margin: 0px 4px !important;\n}\n.ts-control.rtl {\n  text-align: right;\n}\n.ts-control.rtl.single .ts-control:after {\n  left: 15px;\n  right: auto;\n}\n.ts-control.rtl .ts-control > input {\n  margin: 0px 4px 0px -2px !important;\n}\n.disabled .ts-control {\n  opacity: 0.5;\n  background-color: #fafafa;\n}\n.input-hidden .ts-control > input {\n  opacity: 0;\n  position: absolute;\n  left: -10000px;\n}\n\n.ts-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  border: 1px solid #d0d0d0;\n  background: #fff;\n  margin: 0.25rem 0 0;\n  border-top: 0 none;\n  box-sizing: border-box;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  border-radius: 0 0 3px 3px;\n}\n.ts-dropdown [data-selectable] {\n  cursor: pointer;\n  overflow: hidden;\n}\n.ts-dropdown [data-selectable] .highlight {\n  background: rgba(125, 168, 208, 0.2);\n  border-radius: 1px;\n}\n.ts-dropdown .option,\n.ts-dropdown .optgroup-header,\n.ts-dropdown .no-results,\n.ts-dropdown .create {\n  padding: 5px 8px;\n}\n.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {\n  cursor: inherit;\n  opacity: 0.5;\n}\n.ts-dropdown [data-selectable].option {\n  opacity: 1;\n  cursor: pointer;\n}\n.ts-dropdown .optgroup:first-child .optgroup-header {\n  border-top: 0 none;\n}\n.ts-dropdown .optgroup-header {\n  color: #303030;\n  background: #fff;\n  cursor: default;\n}\n.ts-dropdown .active {\n  background-color: #f5fafd;\n  color: #495c68;\n}\n.ts-dropdown .active.create {\n  color: #495c68;\n}\n.ts-dropdown .create {\n  color: rgba(48, 48, 48, 0.5);\n}\n.ts-dropdown .spinner {\n  display: inline-block;\n  width: 30px;\n  height: 30px;\n  margin: 5px 8px;\n}\n.ts-dropdown .spinner::after {\n  content: \" \";\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 3px;\n  border-radius: 50%;\n  border: 5px solid #d0d0d0;\n  border-color: #d0d0d0 transparent #d0d0d0 transparent;\n  animation: lds-dual-ring 1.2s linear infinite;\n}\n@keyframes lds-dual-ring {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ts-dropdown-content {\n  overflow: hidden auto;\n  max-height: 200px;\n  scroll-behavior: smooth;\n}\n\n.ts-wrapper.plugin-drag_drop .ts-dragging {\n  color: transparent !important;\n}\n.ts-wrapper.plugin-drag_drop .ts-dragging > * {\n  visibility: hidden !important;\n}\n\n.plugin-checkbox_options:not(.rtl) .option input {\n  margin-right: 0.5rem;\n}\n\n.plugin-checkbox_options.rtl .option input {\n  margin-left: 0.5rem;\n}\n\n/* stylelint-disable function-name-case */\n.plugin-clear_button {\n  --ts-pr-clear-button: 1em;\n}\n.plugin-clear_button .clear-button {\n  opacity: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: calc(8px - 6px);\n  margin-right: 0 !important;\n  background: transparent !important;\n  transition: opacity 0.5s;\n  cursor: pointer;\n}\n.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {\n  right: max(var(--ts-pr-caret), 8px);\n}\n.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {\n  opacity: 1;\n}\n\n.ts-wrapper .dropdown-header {\n  position: relative;\n  padding: 10px 8px;\n  border-bottom: 1px solid #d0d0d0;\n  background: color-mix(#fff, #d0d0d0, 85%);\n  border-radius: 3px 3px 0 0;\n}\n.ts-wrapper .dropdown-header-close {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  color: #303030;\n  opacity: 0.4;\n  margin-top: -12px;\n  line-height: 20px;\n  font-size: 20px !important;\n}\n.ts-wrapper .dropdown-header-close:hover {\n  color: black;\n}\n\n.plugin-dropdown_input.focus.dropdown-active .ts-control {\n  box-shadow: none;\n  border: 1px solid #d0d0d0;\n}\n.plugin-dropdown_input .dropdown-input {\n  border: 1px solid #d0d0d0;\n  border-width: 0 0 1px;\n  display: block;\n  padding: 8px 8px;\n  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);\n  width: 100%;\n  background: transparent;\n}\n.plugin-dropdown_input .items-placeholder {\n  border: 0 none !important;\n  box-shadow: none !important;\n  width: 100%;\n}\n.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {\n  display: none !important;\n}\n\n.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {\n  min-width: 0;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {\n  flex: none;\n  min-width: 4px;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {\n  color: transparent;\n}\n.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {\n  color: transparent;\n}\n\n.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {\n  display: flex;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup {\n  border-right: 1px solid #f2f2f2;\n  border-top: 0 none;\n  flex-grow: 1;\n  flex-basis: 0;\n  min-width: 0;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {\n  border-right: 0 none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup::before {\n  display: none;\n}\n.ts-dropdown.plugin-optgroup_columns .optgroup-header {\n  border-top: 0 none;\n}\n\n.ts-wrapper.plugin-remove_button .item {\n  display: inline-flex;\n  align-items: center;\n}\n.ts-wrapper.plugin-remove_button .item .remove {\n  color: inherit;\n  text-decoration: none;\n  vertical-align: middle;\n  display: inline-block;\n  padding: 0 6px;\n  border-radius: 0 2px 2px 0;\n  box-sizing: border-box;\n}\n.ts-wrapper.plugin-remove_button .item .remove:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {\n  background: none;\n}\n.ts-wrapper.plugin-remove_button .remove-single {\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 23px;\n}\n\n.ts-wrapper.plugin-remove_button:not(.rtl) .item {\n  padding-right: 0 !important;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {\n  border-left: 1px solid #0073bb;\n  margin-left: 6px;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {\n  border-left-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {\n  border-left-color: #aaaaaa;\n}\n\n.ts-wrapper.plugin-remove_button.rtl .item {\n  padding-left: 0 !important;\n}\n.ts-wrapper.plugin-remove_button.rtl .item .remove {\n  border-right: 1px solid #0073bb;\n  margin-right: 6px;\n}\n.ts-wrapper.plugin-remove_button.rtl .item.active .remove {\n  border-right-color: #00578d;\n}\n.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {\n  border-right-color: #aaaaaa;\n}\n\n:root {\n  --ts-pr-clear-button: 0px;\n  --ts-pr-caret: 0px;\n  --ts-pr-min: .75rem;\n}\n\n.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {\n  cursor: pointer;\n}\n\n.ts-control:not(.rtl) {\n  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-control.rtl {\n  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;\n}\n\n.ts-wrapper {\n  position: relative;\n}\n\n.ts-dropdown,\n.ts-control,\n.ts-control input {\n  color: #303030;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 18px;\n}\n\n.ts-control,\n.ts-wrapper.single.input-active .ts-control {\n  background: #fff;\n  cursor: text;\n}\n\n.ts-hidden-accessible {\n  border: 0 !important;\n  clip: rect(0 0 0 0) !important;\n  -webkit-clip-path: inset(50%) !important;\n          clip-path: inset(50%) !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n}\n\n.ts-wrapper.single .ts-control {\n  --ts-pr-caret: 2rem;\n}\n.ts-wrapper.single .ts-control::after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 50%;\n  margin-top: -3px;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 5px 5px 0 5px;\n  border-color: #808080 transparent transparent transparent;\n}\n.ts-wrapper.single .ts-control:not(.rtl)::after {\n  right: 15px;\n}\n.ts-wrapper.single .ts-control.rtl::after {\n  left: 15px;\n}\n.ts-wrapper.single.dropdown-active .ts-control::after {\n  margin-top: -4px;\n  border-width: 0 5px 5px 5px;\n  border-color: transparent transparent #808080 transparent;\n}\n.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {\n  cursor: text;\n}\n\n.ts-wrapper {\n  display: flex;\n  min-height: 36px;\n}\n.ts-wrapper.multi.has-items .ts-control {\n  padding-left: 5px;\n  --ts-pr-min: 5px;\n}\n.ts-wrapper.multi .ts-control [data-value] {\n  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);\n  border-radius: 3px;\n  background-color: color-mix(#1da7ee, #178ee9, 60%);\n  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);\n  background-repeat: repeat-x;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);\n}\n.ts-wrapper.multi .ts-control [data-value].active {\n  background-color: color-mix(#008fd8, #0075cf, 60%);\n  background-image: linear-gradient(to bottom, #008fd8, #0075cf);\n  background-repeat: repeat-x;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] {\n  color: #999;\n  text-shadow: none;\n  background: none;\n  box-shadow: none;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value], .ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  border-color: #e6e6e6;\n}\n.ts-wrapper.multi.disabled .ts-control [data-value] .remove {\n  background: none;\n}\n.ts-wrapper.single .ts-control {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);\n  background-color: color-mix(#fefefe, #f2f2f2, 60%);\n  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);\n  background-repeat: repeat-x;\n}\n\n.ts-wrapper.single .ts-control, .ts-dropdown.single {\n  border-color: #b8b8b8;\n}\n\n.dropdown-active .ts-control {\n  border-radius: 3px 3px 0 0;\n}\n\n.ts-dropdown .optgroup-header {\n  padding-top: 7px;\n  font-weight: bold;\n  font-size: 0.85em;\n}\n.ts-dropdown .optgroup {\n  border-top: 1px solid #f0f0f0;\n}\n.ts-dropdown .optgroup:first-child {\n  border-top: 0 none;\n}\n/*# sourceMappingURL=tom-select.default.css.map */";
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
@@ -5703,6 +5711,16 @@ class LucosSearchComponent extends HTMLSpanElement {
 				--lozenge-border: #333;
 				--lozenge-text: #000;
 			}
+			.lozenge[data-category="Literary"] {
+				--lozenge-background: #a22400;
+				--lozenge-border: #5e1500;
+				--lozenge-text: #fff;
+			}
+			.lozenge[data-category="Dramaturgical"] {
+				--lozenge-background: #5f0086;
+				--lozenge-border: #59007d;
+				--lozenge-text: #fff;
+			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/web-components/lucos-search.js

@@ -104,6 +104,16 @@ class LucosSearchComponent extends HTMLSpanElement {
 				--lozenge-border: #333;
 				--lozenge-text: #000;
 			}
+			.lozenge[data-category="Literary"] {
+				--lozenge-background: #a22400;
+				--lozenge-border: #5e1500;
+				--lozenge-text: #fff;
+			}
+			.lozenge[data-category="Dramaturgical"] {
+				--lozenge-background: #5f0086;
+				--lozenge-border: #59007d;
+				--lozenge-text: #fff;
+			}
 
 			.lozenge.active {
 				--lozenge-border: #b00;