@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/collection/components/input/input.css

@@ -7,107 +7,9 @@
 *::after {
   box-sizing: border-box;
 }
-:host {
-  /**
-  * @prop --placeholder-color: defaults to var(--nano-input-placeholder-color, initial);
-  * @prop --placeholder-font-style: defaults to var(--nano-input-placeholder-style, initial);
-  * @prop --placeholder-font-weight: defaults to var(--nano-input-placeholder-weight, initial);
-  * @prop --placeholder-opacity: defaults to var(--nano-input-placeholder-opacity, 0.5);
-
-  * @prop --padding-top: defaults to var(--nano-input-padding-top, var(--nano-input-padding, 8px));;
-  * @prop --padding-end: defaults to var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
-  * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-
-  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
-  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));
-
-  * @prop --input-font-size: defaults to var(--nano-input-font-size, 0.87em);
-  * @prop --input-text-color: defaults to var(--nano-input-text-color, #4a4a4a);
-
-  * @prop --input-border-width: defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));
-  * @prop --input-border-radius: defaults to var(--nano-input-border-radius, 0);
-
-  * @prop --input-border-style: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
-  * @prop --input-border-style--focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
-  * @prop --input-border-style--invalid: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);
-  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
-
-  * @prop --input-bg-color: defaults to var(--nano-input-background-color, #fff);
-  * @prop --input-bg-color--focus: defaults to var(--input-bg-color);
-  * @prop --input-bg-color--invalid: defaults to var(--nano-input-background-color, #fee8de);
-
-  * @prop --invalid-msg-color: defaults to rgba(var(--color-invalid), 1);
-  * @prop --invalid-msg-font-size: defaults to var(--nano-input-help-font-size, 0.75em);
-
-  * @prop --clear-btn-color: defaults to var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
-  * @prop --clear-btn-color--hover: defaults to rgba(var(--color--focus-rgb), 1);
-  * @prop --clear-btn-color--invalid: defaults to rgba(var(--color-invalid), 1);
-
-  * @prop --label-color: defaults to var(--nano-input-label-color, "currentColor");
-  * @prop --label-color--focus: defaults to var(--label-color);
-  * @prop --label-color-invalid: defaults to var(--nano-input-label-color-invalid, "currentColor");
-  * @prop --label-font-size: defaults to var(--nano-input-label-color, 1em);
-
-  * @prop --multi-input-value-bg: Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186, 220, 240);
-  * @prop --multi-input-value-text-color: Tag / multivalue text. defaults to var(--nano-input-tag-color, #455556);
-  * @prop --multi-input-value-border: Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);
-  */
-  --placeholder-color: var(--nano-input-placeholder-color, initial);
-  --placeholder-font-style: var(--nano-input-placeholder-style, initial);
-  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);
-  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);
-  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));
-  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));
-  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
-  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
-  --color-invalid: var(--nano-color-danger-rgb, 239, 65, 53);
-  --color--focus-rgb:
-    var(
-      --nano-color-base-rgb,
-      var(--nano-color-primary-rgb, 0, 116, 149)
-    );
-  --input-font-size: var(--nano-input-font-size, 0.87em);
-  --input-text-color: var(--nano-input-text-color, #4a4a4a);
-  --input-border-width: var(--input-border-width-sh, var(--nano-input-border-width, 2px));
-  --input-border-color: var(--nano-input-border-color, #e4e6e8);
-  --input-border-radius: var(--nano-input-border-radius, 0);
-  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
-  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
-  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);
-  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
-  --input-bg-color: var(--nano-input-background-color, #fff);
-  --input-bg-color--focus: var(--input-bg-color);
-  --input-bg-color--invalid: var(--nano-input-background-color, #fee8de);
-  --invalid-msg-color: rgba(var(--color-invalid), 1);
-  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);
-  --help-msg-color: var(--nano-input-help-color, #616d6e);
-  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
-  --clear-btn-color--hover: rgba(var(--color--focus-rgb), 1);
-  --clear-btn-color--invalid: rgba(var(--color-invalid), 1);
-  --label-color: var(--nano-input-label-color, "currentColor");
-  --label-color--focus: var(--label-color);
-  --label-color--invalid: var(--nano-input-label-color-invalid, "currentColor");
-  --label-font-size: var(--nano-input-label-color, 1em);
-  --multi-input-value-bg: var(--nano-input-tag-bg, 186, 220, 240);
-  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);
-  --multi-input-value-border: var(--nano-input-tag-color, #90c6e7);
-  position: relative;
-  width: 100%;
-  padding: 0 !important;
-  color: currentColor;
-  display: inline-block;
-}
-
-:host(.nano-color) {
-  color: var(--nano-color-base);
-  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));
+[hidden] {
+  display: none !important;
 }
-
-:host([disabled]:not([disabled=false])) {
-  opacity: 0.7;
-}
-
 label,
 .more,
 .error,
@@ -164,11 +66,6 @@ label.visually-hide,
     padding-inline-end: 0;
   }
 }
-:host(.has-focus) .placeholder-as-label {
-  -webkit-transform: translateY(-120%);
-          transform: translateY(-120%);
-  font-size: 0.9em;
-}
 :host(.is-invalid) .placeholder-as-label {
   color: var(--invalid-msg-color);
 }
@@ -177,9 +74,6 @@ label.visually-hide,
           transform: translateY(-120%);
   font-size: 0.9em;
 }
-.placeholder-as-label ~ .native-input-wrap {
-  font-size: 1.1em;
-}
 .textarea .placeholder-as-label {
   top: 50%;
 }
@@ -352,7 +246,6 @@ label.visually-hide,
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
-  z-index: 1;
 }
 :host(.is-invalid) .input {
   background: var(--input-bg-color--invalid);
@@ -377,6 +270,234 @@ label.visually-hide,
           flex: 1;
 }
 
+.input-clear-icon,
+.end,
+.start,
+.value-end {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  background-position: center;
+  --nano-icon-size: 1.4em;
+  font-size: 1em;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  width: auto;
+}
+
+.has-float-label .start {
+  display: none;
+}
+
+.start::slotted(*),
+.start ::slotted(*),
+.end::slotted(*),
+.end ::slotted(*),
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+  --nano-icon-size: 1.4em;
+  font-size: 1em;
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
+  padding-top: 0;
+  padding-bottom: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+}
+@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
+  .start::slotted(*),
+.start ::slotted(*),
+.end::slotted(*),
+.end ::slotted(*),
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+    padding-left: unset;
+    padding-right: unset;
+    /* autoprefixer: ignore next */
+    -webkit-padding-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    padding-inline-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    -webkit-padding-end: var(--padding-end);
+    /* autoprefixer: ignore next */
+    padding-inline-end: var(--padding-end);
+  }
+}
+:host([disabled]:not([disabled=false])) .start::slotted(*),
+:host([disabled]:not([disabled=false])) .start ::slotted(*),
+:host([disabled]:not([disabled=false])) .end::slotted(*),
+:host([disabled]:not([disabled=false])) .end ::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end ::slotted(*),
+:host([disabled]:not([disabled=false])) .value-end * {
+  pointer-events: none;
+}
+
+.value-end::slotted(*),
+.value-end ::slotted(*),
+.value-end * {
+  pointer-events: none;
+}
+
+.input-clear-icon {
+  color: var(--clear-btn-color);
+  padding: 0;
+  opacity: 0;
+  width: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  overflow: hidden;
+}
+:host(.is-invalid) .input-clear-icon {
+  color: var(--clear-btn-color--invalid);
+}
+:host(.has-value) .input-clear-icon {
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 1;
+  width: auto;
+}
+@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
+  :host(.has-value) .input-clear-icon {
+    padding-left: unset;
+    padding-right: unset;
+    /* autoprefixer: ignore next */
+    -webkit-padding-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    padding-inline-start: var(--padding-start);
+    /* autoprefixer: ignore next */
+    -webkit-padding-end: var(--padding-end);
+    /* autoprefixer: ignore next */
+    padding-inline-end: var(--padding-end);
+  }
+}
+.input-clear-icon:hover {
+  color: var(--clear-btn-color--hover);
+}
+
+:host {
+  /**
+  * @prop --placeholder-color: defaults to var(--nano-input-placeholder-color, initial);
+  * @prop --placeholder-font-style: defaults to var(--nano-input-placeholder-style, initial);
+  * @prop --placeholder-font-weight: defaults to var(--nano-input-placeholder-weight, initial);
+  * @prop --placeholder-opacity: defaults to var(--nano-input-placeholder-opacity, 0.5);
+
+  * @prop --padding-top: defaults to var(--nano-input-padding-top, var(--nano-input-padding, 8px));;
+  * @prop --padding-end: defaults to var(--nano-input-padding-end, var(--nano-input-padding, 8px));
+  * @prop --padding-bottom: defaults to var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+  * @prop --padding-start: defaults to var(--nano-input-padding-start, var(--nano-input-padding, 8px));
+
+  * @prop --color-invalid: defaults to var(--nano-color-danger-rgb, 239, 65, 53);
+  * @prop --color--focus-rgb: defaults to var(--nano-color-base-rgb, var(--nano-color-primary-rgb, 0, 116, 149));
+
+  * @prop --input-font-size: defaults to var(--nano-input-font-size, 0.87em);
+  * @prop --input-text-color: defaults to var(--nano-input-text-color, #4a4a4a);
+
+  * @prop --input-border-width: defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));
+  * @prop --input-border-radius: defaults to var(--nano-input-border-radius, 0);
+
+  * @prop --input-border-style: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
+  * @prop --input-border-style--focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
+  * @prop --input-border-style--invalid: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);
+  * @prop --input-border-style--invalid-focus: defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+
+  * @prop --input-bg-color: defaults to var(--nano-input-background-color, #fff);
+  * @prop --input-bg-color--focus: defaults to var(--input-bg-color);
+  * @prop --input-bg-color--invalid: defaults to var(--nano-input-background-color, #fee8de);
+
+  * @prop --invalid-msg-color: defaults to rgba(var(--color-invalid), 1);
+  * @prop --invalid-msg-font-size: defaults to var(--nano-input-help-font-size, 0.75em);
+
+  * @prop --clear-btn-color: defaults to var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
+  * @prop --clear-btn-color--hover: defaults to rgba(var(--color--focus-rgb), 1);
+  * @prop --clear-btn-color--invalid: defaults to rgba(var(--color-invalid), 1);
+
+  * @prop --label-color: defaults to var(--nano-input-label-color, "currentColor");
+  * @prop --label-color--focus: defaults to var(--label-color);
+  * @prop --label-color-invalid: defaults to var(--nano-input-label-color-invalid, "currentColor");
+  * @prop --label-font-size: defaults to var(--nano-input-label-color, 1em);
+
+  * @prop --multi-input-value-bg: Tag / multivalue bg. defaults to var(--nano-input-tag-bg, 186, 220, 240);
+  * @prop --multi-input-value-text-color: Tag / multivalue text. defaults to var(--nano-input-tag-color, #455556);
+  * @prop --multi-input-value-border: Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);
+  */
+  --placeholder-color: var(--nano-input-placeholder-color, initial);
+  --placeholder-font-style: var(--nano-input-placeholder-style, initial);
+  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);
+  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);
+  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));
+  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));
+  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));
+  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));
+  --color-invalid: var(--nano-color-danger-rgb, 239, 65, 53);
+  --color--focus-rgb:
+    var(
+      --nano-color-base-rgb,
+      var(--nano-color-primary-rgb, 0, 116, 149)
+    );
+  --input-font-size: var(--nano-input-font-size, 0.87em);
+  --input-text-color: var(--nano-input-text-color, #4a4a4a);
+  --input-border-width: var(--input-border-width-sh, var(--nano-input-border-width, 2px));
+  --input-border-color: var(--nano-input-border-color, #e4e6e8);
+  --input-border-radius: var(--nano-input-border-radius, 0);
+  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);
+  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);
+  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);
+  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);
+  --input-bg-color: var(--nano-input-background-color, #fff);
+  --input-bg-color--focus: var(--input-bg-color);
+  --input-bg-color--invalid: var(--nano-input-background-color, #fee8de);
+  --invalid-msg-color: rgba(var(--color-invalid), 1);
+  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);
+  --help-msg-color: var(--nano-input-help-color, #616d6e);
+  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));
+  --clear-btn-color--hover: rgba(var(--color--focus-rgb), 1);
+  --clear-btn-color--invalid: rgba(var(--color-invalid), 1);
+  --label-color: var(--nano-input-label-color, "currentColor");
+  --label-color--focus: var(--label-color);
+  --label-color--invalid: var(--nano-input-label-color-invalid, "currentColor");
+  --label-font-size: var(--nano-input-label-color, 1em);
+  --multi-input-value-bg: var(--nano-input-tag-bg, 186, 220, 240);
+  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);
+  --multi-input-value-border: var(--nano-input-tag-color, #90c6e7);
+  position: relative;
+  width: 100%;
+  padding: 0 !important;
+  color: currentColor;
+  display: inline-block;
+}
+
+:host(.nano-color) {
+  color: var(--nano-color-base);
+  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));
+}
+
+:host([disabled]:not([disabled=false])) {
+  opacity: 0.7;
+}
+
 .native-input {
   border-radius: var(--input-border-radius);
   padding-left: var(--padding-start);
@@ -431,6 +552,9 @@ label.visually-hide,
     padding-inline-end: var(--padding-end);
   }
 }
+.native-input[disabled] {
+  opacity: 0.4;
+}
 .native-input::-webkit-input-placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -529,129 +653,15 @@ label.visually-hide,
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
 }
-
-.native-input[disabled] {
-  opacity: 0.4;
+:host([readonly]:not([readonly=false])) .native-input {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
-.input-clear-icon,
-.inline-button {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-position: center;
-  font-size: 1.4em;
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  width: auto;
-}
-.has-float-label .input-clear-icon,
-.has-float-label .inline-button {
-  right: 0;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: auto;
-}
-.rtl.has-float-label .input-clear-icon,
-.rtl.has-float-label .inline-button {
-  right: auto;
-  left: 0;
-}
-
-.inline-button::slotted(*),
-.inline-button ::slotted(*) {
-  font-size: 1em;
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
-  padding-top: 0;
-  padding-bottom: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  .inline-button::slotted(*),
-.inline-button ::slotted(*) {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    padding-inline-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: var(--padding-end);
-    /* autoprefixer: ignore next */
-    padding-inline-end: var(--padding-end);
-  }
-}
-:host([disabled]:not([disabled=false])) .inline-button::slotted(*),
-:host([disabled]:not([disabled=false])) .inline-button ::slotted(*) {
-  pointer-events: none;
-}
-
-.input-clear-icon {
-  color: var(--clear-btn-color);
-  padding: 0;
-  opacity: 0;
-  width: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  overflow: hidden;
-}
-:host(.is-invalid) .input-clear-icon {
-  color: var(--clear-btn-color--invalid);
-}
-:host(.has-value) .input-clear-icon {
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 1;
-  width: auto;
-}
-@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {
-  :host(.has-value) .input-clear-icon {
-    padding-left: unset;
-    padding-right: unset;
-    /* autoprefixer: ignore next */
-    -webkit-padding-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    padding-inline-start: var(--padding-start);
-    /* autoprefixer: ignore next */
-    -webkit-padding-end: var(--padding-end);
-    /* autoprefixer: ignore next */
-    padding-inline-end: var(--padding-end);
-  }
-}
-.input-clear-icon:hover {
-  color: var(--clear-btn-color--hover);
-}
-.has-inline-button.has-float-label .input-clear-icon {
-  right: 1.5em;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: auto;
-}
-.rtl.has-float-label.has-inline-button .input-clear-icon {
-  right: auto;
-  left: 1.5em;
+:host(.has-focus) .placeholder-as-label {
+  -webkit-transform: translateY(-120%);
+          transform: translateY(-120%);
+  font-size: 0.9em;
 }