@nectary/components 5.0.1 → 5.0.2

package/bundle.js

@@ -6662,7 +6662,7 @@ const doFilesSatisfySize = (files, size) => {
     return file.size <= size;
   });
 };
-const templateHTML$E = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML$E = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
 const template$E = document.createElement("template");
 template$E.innerHTML = templateHTML$E;
 class FileDrop extends NectaryElement {

package/file-drop/index.js

@@ -4,7 +4,7 @@ import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getBo
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { areItemsAccepted, areFilesAccepted, doFilesSatisfySize } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class FileDrop extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",