@startinblox/core 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/index.js

@@ -1951,6 +1951,13 @@ const Sib = {
         this.component = new component(this);
         this.component.created();
       }
+      /** @deprecated use `component` instead */
+      get _component() {
+        return this.component;
+      }
+      set _component(_component) {
+        this.component = _component;
+      }
       static get observedAttributes() {
         return component.observedAttributes;
       }
@@ -16621,7 +16628,7 @@ const AutocompletionMixin = {
     );
     importInlineCSS(
       "slimselect-local",
-      () => import("./slimselect-WIZK5Hmq.js")
+      () => import("./slimselect-Bx1deYT1.js")
     );
     this.slimSelect = null;
     this.addToAttributes(true, "autocomplete");
@@ -16647,6 +16654,7 @@ const AutocompletionMixin = {
     const slimSelect = new SlimSelect({
       select,
       settings: {
+        contentPosition: "fixed",
         placeholderText: this.placeholder || this.t("autocompletion.placeholder"),
         searchText: this.searchText || this.t("autocompletion.searchText"),
         searchPlaceholder: this.searchPlaceholder || this.t("autocompletion.searchPlaceholder"),

package/dist/slimselect-Bx1deYT1.js

@@ -0,0 +1,4 @@
+const slimselect = '.ss-main {\n  position: relative;\n  display: flex;\n  user-select: none;\n  color: #666;\n  width: 100%;\n}\n.ss-main .ss-single-selected {\n  display: flex;\n  cursor: pointer;\n  width: 100%;\n  height: 30px;\n  padding: 6px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  box-sizing: border-box;\n  transition: background-color .2s;\n}\n.ss-main .ss-single-selected.ss-disabled {\n  background-color: #dcdee2;\n  cursor: not-allowed;\n}\n.ss-main .ss-single-selected.ss-open-above {\n  border-top-left-radius: 0px;\n  border-top-right-radius: 0px;\n}\n.ss-main .ss-single-selected.ss-open-below {\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n}\n.ss-main .ss-single-selected .placeholder {\n  display: flex;\n  flex: 1 1 100%;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  width: calc(100% - 30px);\n  line-height: 1em;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.ss-main .ss-single-selected .placeholder * {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: auto;\n}\n.ss-main .ss-single-selected .placeholder .ss-disabled {\n  color: #dedede;\n}\n.ss-main .ss-single-selected .ss-deselect {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 0 1 auto;\n  margin: 0 6px 0 6px;\n  font-weight: bold;\n}\n.ss-main .ss-single-selected .ss-deselect.ss-hide {\n  display: none;\n}\n.ss-main .ss-single-selected .ss-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 0 1 auto;\n  margin: 0 6px 0 6px;\n}\n.ss-main .ss-single-selected .ss-arrow span {\n  border: solid #666;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transition: transform .2s, margin .2s;\n}\n.ss-main .ss-single-selected .ss-arrow span.arrow-up {\n  transform: rotate(-135deg);\n  margin: 3px 0 0 0;\n}\n.ss-main .ss-single-selected .ss-arrow span.arrow-down {\n  transform: rotate(45deg);\n  margin: -3px 0 0 0;\n}\n.ss-main .ss-multi-selected {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  min-height: 30px;\n  width: 100%;\n  padding: 0 0 0 3px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  box-sizing: border-box;\n  transition: background-color .2s;\n}\n.ss-main .ss-multi-selected.ss-disabled {\n  background-color: #dcdee2;\n  cursor: not-allowed;\n}\n.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled {\n  color: #666;\n}\n.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {\n  cursor: not-allowed;\n}\n.ss-main .ss-multi-selected.ss-open-above {\n  border-top-left-radius: 0px;\n  border-top-right-radius: 0px;\n}\n.ss-main .ss-multi-selected.ss-open-below {\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n}\n.ss-main .ss-multi-selected .ss-values {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  flex: 1 1 100%;\n  width: calc(100% - 30px);\n}\n.ss-main .ss-multi-selected .ss-values .ss-disabled {\n  display: flex;\n  padding: 4px 5px;\n  margin: 2px 0px;\n  line-height: 1em;\n  align-items: center;\n  width: 100%;\n  color: #dedede;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n@keyframes scaleIn {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes scaleOut {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(0);\n    opacity: 0;\n  }\n}\n.ss-main .ss-multi-selected .ss-values .ss-value {\n  display: flex;\n  user-select: none;\n  align-items: center;\n  font-size: 12px;\n  padding: 3px 5px;\n  margin: 3px 5px 3px 0px;\n  color: #fff;\n  background-color: #5897fb;\n  border-radius: 4px;\n  animation-name: scaleIn;\n  animation-duration: .2s;\n  animation-timing-function: ease-out;\n  animation-fill-mode: both;\n}\n.ss-main .ss-multi-selected .ss-values .ss-value.ss-out {\n  animation-name: scaleOut;\n  animation-duration: .2s;\n  animation-timing-function: ease-out;\n}\n.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {\n  margin: 0 0 0 5px;\n  cursor: pointer;\n}\n.ss-main .ss-multi-selected .ss-add {\n  display: flex;\n  flex: 0 1 3px;\n  margin: 9px 12px 0 5px;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #666;\n  position: relative;\n  height: 10px;\n  width: 2px;\n  transition: transform .2s;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus:after {\n  background: #666;\n  content: "";\n  position: absolute;\n  height: 2px;\n  width: 10px;\n  left: -4px;\n  top: 4px;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross {\n  transform: rotate(45deg);\n}\n.ss-content {\n  position: absolute;\n  width: 100%;\n  margin: -1px 0 0 0;\n  box-sizing: border-box;\n  border: solid 1px #dcdee2;\n  z-index: 1010;\n  background-color: #fff;\n  transform-origin: center top;\n  transition: transform .2s, opacity .2s;\n  opacity: 0;\n  transform: scaleY(0);\n}\n.ss-content.ss-open {\n  display: block;\n  opacity: 1;\n  transform: scaleY(1);\n}\n.ss-content .ss-search {\n  display: flex;\n  flex-direction: row;\n  padding: 8px 8px 6px 8px;\n}\n.ss-content .ss-search.ss-hide {\n  height: 0px;\n  opacity: 0;\n  padding: 0px 0px 0px 0px;\n  margin: 0px 0px 0px 0px;\n}\n.ss-content .ss-search.ss-hide input {\n  height: 0px;\n  opacity: 0;\n  padding: 0px 0px 0px 0px;\n  margin: 0px 0px 0px 0px;\n}\n.ss-content .ss-search input {\n  display: inline-flex;\n  font-size: inherit;\n  line-height: inherit;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0px;\n  height: 30px;\n  padding: 6px 8px;\n  margin: 0;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  text-align: left;\n  box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  -webkit-appearance: textfield;\n}\n.ss-content .ss-search input::placeholder {\n  color: #8a8a8a;\n  vertical-align: middle;\n}\n.ss-content .ss-search input:focus {\n  box-shadow: 0 0 5px #5897fb;\n}\n.ss-content .ss-search .ss-addable {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  font-size: 22px;\n  font-weight: bold;\n  flex: 0 0 30px;\n  height: 30px;\n  margin: 0 0 0 8px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n.ss-content .ss-addable {\n  padding-top: 0px;\n}\n.ss-content .ss-list {\n  max-height: 200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n}\n.ss-content .ss-list .ss-optgroup .ss-optgroup-label {\n  padding: 6px 10px 6px 10px;\n  font-weight: bold;\n}\n.ss-content .ss-list .ss-optgroup .ss-option {\n  padding: 6px 6px 6px 25px;\n}\n.ss-content .ss-list .ss-optgroup-label-selectable {\n  cursor: pointer;\n}\n.ss-content .ss-list .ss-optgroup-label-selectable:hover {\n  color: #fff;\n  background-color: #5897fb;\n}\n.ss-content .ss-list .ss-option {\n  padding: 6px 10px 6px 10px;\n  cursor: pointer;\n  user-select: none;\n}\n.ss-content .ss-list .ss-option * {\n  display: inline-block;\n}\n.ss-content .ss-list .ss-option:hover,\n.ss-content .ss-list .ss-option.ss-highlighted {\n  color: #fff;\n  background-color: #5897fb;\n}\n.ss-content .ss-list .ss-option.ss-disabled {\n  cursor: not-allowed;\n  color: #dedede;\n  background-color: #fff;\n}\n.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {\n  color: #666;\n  background-color: rgba(88, 151, 251, 0.1);\n}\n.ss-content .ss-list .ss-option.ss-hide {\n  display: none;\n}\n.ss-content .ss-list .ss-option .ss-search-highlight {\n  background-color: #fffb8c;\n}\n';
+export {
+  slimselect as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/core",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "This is a series of web component respecting both the web components standards and the Linked Data Platform convention.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/slimselect-WIZK5Hmq.js

@@ -1,4 +0,0 @@
-const slimselect = '.ss-main {\n  position: relative;\n  display: inline-block;\n  user-select: none;\n  color: #666;\n  width: 100%;\n}\n.ss-main .ss-single-selected {\n  display: flex;\n  cursor: pointer;\n  width: 100%;\n  height: 30px;\n  padding: 6px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  box-sizing: border-box;\n  transition: background-color .2s;\n}\n.ss-main .ss-single-selected.ss-disabled {\n  background-color: #dcdee2;\n  cursor: not-allowed;\n}\n.ss-main .ss-single-selected.ss-open-above {\n  border-top-left-radius: 0px;\n  border-top-right-radius: 0px;\n}\n.ss-main .ss-single-selected.ss-open-below {\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n}\n.ss-main .ss-single-selected .placeholder {\n  display: flex;\n  flex: 1 1 100%;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  width: calc(100% - 30px);\n  line-height: 1em;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n.ss-main .ss-single-selected .placeholder * {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: auto;\n}\n.ss-main .ss-single-selected .placeholder .ss-disabled {\n  color: #dedede;\n}\n.ss-main .ss-single-selected .ss-deselect {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 0 1 auto;\n  margin: 0 6px 0 6px;\n  font-weight: bold;\n}\n.ss-main .ss-single-selected .ss-deselect.ss-hide {\n  display: none;\n}\n.ss-main .ss-single-selected .ss-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 0 1 auto;\n  margin: 0 6px 0 6px;\n}\n.ss-main .ss-single-selected .ss-arrow span {\n  border: solid #666;\n  border-width: 0 2px 2px 0;\n  display: inline-block;\n  padding: 3px;\n  transition: transform .2s, margin .2s;\n}\n.ss-main .ss-single-selected .ss-arrow span.arrow-up {\n  transform: rotate(-135deg);\n  margin: 3px 0 0 0;\n}\n.ss-main .ss-single-selected .ss-arrow span.arrow-down {\n  transform: rotate(45deg);\n  margin: -3px 0 0 0;\n}\n.ss-main .ss-multi-selected {\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  min-height: 30px;\n  width: 100%;\n  padding: 0 0 0 3px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  box-sizing: border-box;\n  transition: background-color .2s;\n}\n.ss-main .ss-multi-selected.ss-disabled {\n  background-color: #dcdee2;\n  cursor: not-allowed;\n}\n.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled {\n  color: #666;\n}\n.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {\n  cursor: not-allowed;\n}\n.ss-main .ss-multi-selected.ss-open-above {\n  border-top-left-radius: 0px;\n  border-top-right-radius: 0px;\n}\n.ss-main .ss-multi-selected.ss-open-below {\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n}\n.ss-main .ss-multi-selected .ss-values {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  flex: 1 1 100%;\n  width: calc(100% - 30px);\n}\n.ss-main .ss-multi-selected .ss-values .ss-disabled {\n  display: flex;\n  padding: 4px 5px;\n  margin: 2px 0px;\n  line-height: 1em;\n  align-items: center;\n  width: 100%;\n  color: #dedede;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n@keyframes scaleIn {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes scaleOut {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(0);\n    opacity: 0;\n  }\n}\n.ss-main .ss-multi-selected .ss-values .ss-value {\n  display: flex;\n  user-select: none;\n  align-items: center;\n  font-size: 12px;\n  padding: 3px 5px;\n  margin: 3px 5px 3px 0px;\n  color: #fff;\n  background-color: #5897fb;\n  border-radius: 4px;\n  animation-name: scaleIn;\n  animation-duration: .2s;\n  animation-timing-function: ease-out;\n  animation-fill-mode: both;\n}\n.ss-main .ss-multi-selected .ss-values .ss-value.ss-out {\n  animation-name: scaleOut;\n  animation-duration: .2s;\n  animation-timing-function: ease-out;\n}\n.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {\n  margin: 0 0 0 5px;\n  cursor: pointer;\n}\n.ss-main .ss-multi-selected .ss-add {\n  display: flex;\n  flex: 0 1 3px;\n  margin: 9px 12px 0 5px;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #666;\n  position: relative;\n  height: 10px;\n  width: 2px;\n  transition: transform .2s;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus:after {\n  background: #666;\n  content: "";\n  position: absolute;\n  height: 2px;\n  width: 10px;\n  left: -4px;\n  top: 4px;\n}\n.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross {\n  transform: rotate(45deg);\n}\n.ss-content {\n  position: absolute;\n  width: 100%;\n  margin: -1px 0 0 0;\n  box-sizing: border-box;\n  border: solid 1px #dcdee2;\n  z-index: 1010;\n  background-color: #fff;\n  transform-origin: center top;\n  transition: transform .2s, opacity .2s;\n  opacity: 0;\n  transform: scaleY(0);\n}\n.ss-content.ss-open {\n  display: block;\n  opacity: 1;\n  transform: scaleY(1);\n}\n.ss-content .ss-search {\n  display: flex;\n  flex-direction: row;\n  padding: 8px 8px 6px 8px;\n}\n.ss-content .ss-search.ss-hide {\n  height: 0px;\n  opacity: 0;\n  padding: 0px 0px 0px 0px;\n  margin: 0px 0px 0px 0px;\n}\n.ss-content .ss-search.ss-hide input {\n  height: 0px;\n  opacity: 0;\n  padding: 0px 0px 0px 0px;\n  margin: 0px 0px 0px 0px;\n}\n.ss-content .ss-search input {\n  display: inline-flex;\n  font-size: inherit;\n  line-height: inherit;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0px;\n  height: 30px;\n  padding: 6px 8px;\n  margin: 0;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  background-color: #fff;\n  outline: 0;\n  text-align: left;\n  box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  -webkit-appearance: textfield;\n}\n.ss-content .ss-search input::placeholder {\n  color: #8a8a8a;\n  vertical-align: middle;\n}\n.ss-content .ss-search input:focus {\n  box-shadow: 0 0 5px #5897fb;\n}\n.ss-content .ss-search .ss-addable {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  font-size: 22px;\n  font-weight: bold;\n  flex: 0 0 30px;\n  height: 30px;\n  margin: 0 0 0 8px;\n  border: 1px solid #dcdee2;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n.ss-content .ss-addable {\n  padding-top: 0px;\n}\n.ss-content .ss-list {\n  max-height: 200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n}\n.ss-content .ss-list .ss-optgroup .ss-optgroup-label {\n  padding: 6px 10px 6px 10px;\n  font-weight: bold;\n}\n.ss-content .ss-list .ss-optgroup .ss-option {\n  padding: 6px 6px 6px 25px;\n}\n.ss-content .ss-list .ss-optgroup-label-selectable {\n  cursor: pointer;\n}\n.ss-content .ss-list .ss-optgroup-label-selectable:hover {\n  color: #fff;\n  background-color: #5897fb;\n}\n.ss-content .ss-list .ss-option {\n  padding: 6px 10px 6px 10px;\n  cursor: pointer;\n  user-select: none;\n}\n.ss-content .ss-list .ss-option * {\n  display: inline-block;\n}\n.ss-content .ss-list .ss-option:hover,\n.ss-content .ss-list .ss-option.ss-highlighted {\n  color: #fff;\n  background-color: #5897fb;\n}\n.ss-content .ss-list .ss-option.ss-disabled {\n  cursor: not-allowed;\n  color: #dedede;\n  background-color: #fff;\n}\n.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {\n  color: #666;\n  background-color: rgba(88, 151, 251, 0.1);\n}\n.ss-content .ss-list .ss-option.ss-hide {\n  display: none;\n}\n.ss-content .ss-list .ss-option .ss-search-highlight {\n  background-color: #fffb8c;\n}\n';
-export {
-  slimselect as default
-};