@zanichelli/albe-web-components 19.2.6 → 19.2.7

package/dist/collection/components/table/cells/z-th/styles.css

@@ -1,75 +1,3 @@
-:host {
-  position: relative;
-  display: flex;
-  max-width: 100%;
-  align-items: center;
-  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));
-  background-color: var(--color-surface01);
-  gap: calc(var(--space-unit) * 2) var(--space-unit);
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-:host([sticky]) {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  box-shadow: 8px 0 16px -8px var(--shadow-color-base);
-}
-
-:host([menu-open]) {
-  z-index: 2;
-}
-
-.cell--content {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-}
-
-:host([show-menu]) .cell--content {
-  column-gap: var(--space-unit);
-}
-
-.cell--menu-container {
-  margin-left: auto;
-}
-
-:host(:not([show-menu])) .cell--menu-container {
-  opacity: 0;
-  pointer-events: none;
-}
-
-:host(:is([show-menu], [menu-open])) .cell--menu-container,
-:host([show-menu]) .cell--menu-container:focus-within {
-  z-index: 1;
-  opacity: 1;
-  pointer-events: all;
-}
-
-:host .cell-popover {
-  z-index: 100;
-}
-
-@media (min-width: 768px) and (hover: hover) {
-  :host([show-menu="hover"]) .cell--menu-container {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host([show-menu="hover"]:hover) .cell--menu-container {
-    z-index: 1;
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-
-
 :host {
   z-index: 1;
   padding: 0;

package/dist/collection/components/z-combobox/index.js

@@ -294,18 +294,18 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '23cd031ec2894308960df94374713e9395521a56', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/z-combobox/styles.css

@@ -1,15 +1,3 @@
-.z-label {
-  display: block;
-  padding-bottom: var(--space-unit);
-  color: var(--color-default-text);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  text-align: left;
-  text-transform: uppercase;
-}
-
-
 :host {
   display: block;
   min-width: 290px;

package/dist/collection/components/z-input/index.js

@@ -266,18 +266,18 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: 'e3f830979b2d6306b19c5a0357ca48b42d142a74' }, input);
+        return h(Host, { key: '0b363c20732600ca303b84a78e36bdc710c411e2' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles-general.css", "styles-text.css", "styles-textarea.css", "styles-checkbox-radio.css"]
         };
     }
     static get properties() {

package/dist/collection/components/z-input/styles-checkbox-radio.css

@@ -0,0 +1,130 @@
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-default-text);
+  fill: var(--color-primary01);
+  font-family: var(--font-family-sans);
+}
+
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
+}
+
+.radio-wrapper > input,
+.checkbox-wrapper > input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
+  text-transform: inherit;
+}
+
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
+  cursor: pointer;
+}
+
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
+  cursor: pointer;
+  fill: inherit;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label z-icon,
+:host([size="small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+:host([size="small"]) .radio-wrapper .radio-label,
+:host([size="small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-2);
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label z-icon,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+:host([size="x-small"]) .radio-wrapper .radio-label,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label {
+  font-size: var(--font-size-1);
+}
+
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
+  flex-direction: row;
+}
+
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
+  flex-direction: row-reverse;
+}
+
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
+  margin-left: var(--space-unit);
+}
+
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
+  margin-right: var(--space-unit);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.after > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.after > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.after > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.after > span {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+:host([size="small"]) .radio-wrapper .radio-label.before > span,
+:host([size="small"]) .checkbox-wrapper .checkbox-label.before > span,
+:host([size="x-small"]) .radio-wrapper .radio-label.before > span,
+:host([size="x-small"]) .checkbox-wrapper .checkbox-label.before > span {
+  margin-right: calc(var(--space-unit) * 0.5);
+}
+
+/* focus */
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon {
+  border-radius: 50%;
+}
+
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  border-radius: var(--border-radius-small);
+}
+
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* disabled */
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
+  color: var(--color-disabled03);
+}
+
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
+  cursor: default;
+  fill: var(--color-disabled01);
+}

package/dist/collection/components/z-input/styles-general.css

@@ -0,0 +1,166 @@
+:host {
+  display: inline-block;
+  width: inherit;
+}
+
+:host * {
+  box-sizing: border-box;
+}
+
+/* GENERAL */
+input::-ms-clear,
+input::-ms-reveal {
+  display: none;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input,
+textarea {
+  background: var(--color-form-background);
+  fill: var(--color-form-default-icon);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  outline: none;
+}
+
+input,
+.textarea-wrapper {
+  border: var(--border-size-small) solid var(--color-form-surface04);
+  border-radius: var(--border-radius-small);
+  color: var(--color-form-default-text);
+}
+
+:host([size="small"]) input,
+:host([size="small"]) textarea,
+:host([size="x-small"]) input,
+:host([size="x-small"]) textarea {
+  font-size: var(--font-size-2);
+}
+
+:host.cursor-select input {
+  cursor: pointer;
+}
+
+/* HOVER */
+input:not([readonly]):hover,
+.textarea-wrapper:not(.readonly):hover {
+  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline-offset: -2px;
+}
+
+/* FOCUS */
+:host:not(.active-select) input:focus:focus-visible,
+:host:not([readonly="true"]) .textarea-wrapper:focus-within {
+  border-color: var(--color-form-active-primary);
+  box-shadow: var(--shadow-focus-primary);
+  color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible:hover,
+.textarea-wrapper:not(.readonly):focus-within:hover {
+  outline-color: var(--color-form-active-primary);
+}
+
+:host input:focus:focus-visible + .icons-wrapper {
+  fill: var(--color-form-active-primary);
+}
+
+:host.active-select input {
+  border: var(--border-size-small) solid var(--color-form-active-primary);
+}
+
+:host.cursor-select input:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+:host input[readonly]:focus:focus-visible {
+  border-color: var(--color-form-surface03);
+  box-shadow: none;
+}
+
+/* STATUSES (success, warning, error) */
+.input-success {
+  border-color: var(--color-form-success01);
+  background: var(--color-form-inverse-success);
+}
+
+.input-success:focus:focus-visible + .icons-wrapper,
+.input-success + .icons-wrapper {
+  fill: var(--color-form-success01);
+}
+
+.input-error {
+  border-color: var(--color-form-hover-error);
+  background: var(--color-form-inverse-error);
+}
+
+.input-error:focus:focus-visible + .icons-wrapper,
+.input-error + .icons-wrapper {
+  fill: var(--color-form-hover-error);
+}
+
+.input-warning {
+  border-color: var(--color-form-hover-warning);
+  background: var(--color-form-inverse-warning);
+}
+
+.input-warning:focus:focus-visible + .icons-wrapper,
+.input-warning + .icons-wrapper {
+  fill: var(--color-form-hover-warning);
+}
+
+:is(.input-success, .input-error, .input-warning):focus:focus-visible {
+  color: var(--color-form-default-text);
+}
+
+/* READONLY */
+:host:not(.active-select) input[readonly],
+.textarea-wrapper.readonly {
+  border-color: var(--color-form-surface03);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+/* DISABLED */
+:host([disabled]:not([disabled="false"])) input,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
+:host([disabled]:not([disabled="false"])) z-icon {
+  border-color: var(--color-form-disabled03);
+  box-shadow: none;
+  color: var(--color-form-disabled-text);
+  fill: var(--color-form-disabled01-icon);
+  pointer-events: none;
+}
+
+:host([disabled]:not([disabled="false"])) input:hover {
+  border-width: var(--border-size-small);
+}
+
+/* PLACEHOLDER */
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::-webkit-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:-ms-textarea-placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+::placeholder {
+  color: var(--color-form-placeholder-text);
+}
+
+:host([disabled]:not([disabled="false"])) label.z-label {
+  color: var(--color-disabled03);
+}

package/dist/collection/components/z-input/styles-text.css

@@ -0,0 +1,87 @@
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
+  fill: var(--color-form-default-icon);
+}
+
+.text-wrapper > div > input {
+  width: 100%;
+  height: calc(var(--space-unit) * 5.5);
+  box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
+}
+
+:host([size="small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4.5);
+}
+
+:host([size="x-small"]) .text-wrapper > div > input {
+  height: calc(var(--space-unit) * 4);
+}
+
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 5.25);
+}
+
+.text-wrapper > div > input.has-icon.has-clear-icon {
+  padding-right: calc(var(--space-unit) * 8);
+}
+
+.text-wrapper .icons-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: calc(var(--space-unit) * 1.5);
+  display: flex;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  pointer-events: initial;
+}
+
+.text-wrapper .icons-wrapper > .input-icon + .input-icon {
+  margin-left: calc(var(--space-unit) * 0.5);
+}
+
+.text-wrapper .icons-wrapper > button.input-icon.hidden {
+  display: none;
+}
+
+.text-wrapper .icons-wrapper > button.reset-icon,
+.text-wrapper .icons-wrapper > button.toggle-password-icon {
+  cursor: pointer;
+}
+
+.text-wrapper .icons-wrapper > .input-icon {
+  --z-icon-width: 18px;
+  --z-icon-height: 18px;
+
+  display: block;
+}
+
+.text-wrapper .icons-wrapper > .input-icon.small,
+.text-wrapper .icons-wrapper > .input-icon.x-small {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}
+
+.text-wrapper .icons-wrapper > button.input-icon:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none !important;
+}
+
+/* stylelint-disable property-no-vendor-prefix */
+.text-wrapper > div > input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #fff inset;
+  -webkit-text-fill-color: currentcolor;
+}

package/dist/collection/components/z-input/styles-textarea.css

@@ -0,0 +1,19 @@
+.textarea-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--space-unit) * 1.5);
+}
+
+.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
+  background-color: var(--color-form-background);
+}
+
+textarea {
+  width: 100%;
+  min-height: 132px;
+  padding: 0;
+  border: none;
+  margin: 0;
+  color: currentcolor;
+  resize: none;
+}