@zanichelli/albe-web-components 2.33.2 → 2.33.5-rc1

package/dist/collection/components/buttons/z-button/styles.css

@@ -1,231 +0,0 @@
-:host {
-  display: inline-block;
-
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-  --z-icon-right-margin: var(--space-unit);
-  --rgb-white: 240, 240, 240
-}
-
-button:disabled,
-::slotted(button:disabled) {
-  pointer-events: none;
-}
-
-button,
-::slotted(button),
-::slotted(a) {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 1;
-  letter-spacing: 0.3px;
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-radius: var(--border-radius);
-  vertical-align: middle;
-  text-transform: uppercase;
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  outline: none;
-  fill: currentColor;
-}
-
-button.big,
-:host([size="big"]) ::slotted(button),
-:host([size="big"]) ::slotted(a) {
-  height: 44px;
-  min-width: 44px;
-}
-
-button.small,
-:host([size="small"]) ::slotted(button),
-:host([size="small"]) ::slotted(a) {
-  height: 36px;
-  min-width: 36px;
-}
-
-button.issmall,
-:host([issmall]) ::slotted(button),
-:host([issmall]) ::slotted(a) {
-  height: 36px;
-  min-width: 36px;
-}
-
-button.x-small,
-:host([size="x-small"]) ::slotted(button),
-:host([size="x-small"]) ::slotted(a) {
-  height: 32px;
-  min-width: 32px;
-}
-
-button:not(.square),
-:host(:not([square])) ::slotted(button),
-:host(:not([square])) ::slotted(a) {
-  min-width: calc(var(--space-unit) * 8);
-  padding: 0 calc(var(--space-unit) * 2);
-}
-
-button.square,
-:host([square]) {
-  --z-icon-right-margin: 0;
-}
-
-button.primary,
-:host([variant="primary"]) ::slotted(button),
-:host([variant="primary"]) ::slotted(a) {
-  background-color: var(--color-primary01);
-  border-color: var(--color-primary01);
-  color: var(--color-text-inverse);
-}
-
-@media (hover: hover) {
-  button.primary:hover,
-  :host([variant="primary"]) ::slotted(button:hover),
-  :host([variant="primary"]) ::slotted(a:hover) {
-    background-color: var(--color-hover-primary);
-    border-color: var(--color-hover-primary);
-    color: var(--color-text-inverse);
-  }
-}
-
-button:focus:focus-visible,
-::slotted(button:focus:focus-visible),
-::slotted(a:focus:focus-visible) {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-button.primary:active,
-:host([variant="primary"]) ::slotted(button:active),
-:host([variant="primary"]) ::slotted(a:active) {
-  background-color: var(--color-pressed-primary);
-  border-color: var(--color-pressed-primary);
-  color: var(--color-text-inverse);
-  box-shadow: var(--shadow-2);
-}
-
-button.primary:disabled,
-:host([variant="primary"]) ::slotted(button:disabled) {
-  background-color: var(--color-disabled01);
-  border-color: var(--color-disabled01);
-  color: var(--color-disabled02);
-}
-
-button.secondary,
-:host([variant="secondary"]) ::slotted(button),
-:host([variant="secondary"]) ::slotted(a) {
-  background-color: var(--color-surface01);
-  border-color: var(--color-primary01);
-  color: var(--color-primary01);
-}
-
-@media (hover: hover) {
-  button.secondary:hover,
-  :host([variant="secondary"]) ::slotted(button:hover),
-  :host([variant="secondary"]) ::slotted(a:hover) {
-    background-color: var(--color-surface01);
-    border-color: var(--color-hover-primary);
-    color: var(--color-hover-primary);
-  }
-}
-
-button.secondary:active,
-:host([variant="secondary"]) ::slotted(button:active),
-:host([variant="secondary"]) ::slotted(a:active) {
-  background-color: var(--color-surface01);
-  border-color: var(--color-pressed-primary);
-  color: var(--color-pressed-primary);
-  box-shadow: var(--shadow-2);
-}
-
-button.secondary:disabled,
-:host([variant="secondary"]) ::slotted(button:disabled) {
-  background-color: var(--color-surface01);
-  border-color: var(--color-disabled01);
-  color: var(--color-disabled02);
-}
-
-button.tertiary,
-:host([variant="tertiary"]) ::slotted(button),
-:host([variant="tertiary"]) ::slotted(a) {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--color-primary01);
-}
-
-button.tertiary.hasContent {
-  padding: 0 var(--space-unit);
-}
-
-@media (hover: hover) {
-  button.tertiary:hover,
-  :host([variant="tertiary"]) ::slotted(button:hover),
-  :host([variant="tertiary"]) ::slotted(a:hover) {
-    background-color: var(--color-primary03);
-    border-color: var(--color-primary03);
-    color: var(--color-hover-primary);
-  }
-}
-
-button.tertiary:focus:focus-visible,
-:host([variant="tertiary"]) ::slotted(button:focus:focus-visible),
-:host([variant="tertiary"]) ::slotted(a:focus:focus-visible) {
-  background-color: var(--color-surface01);
-  border-color: var(--color-surface01);
-  color: var(--color-primary01);
-}
-
-button.tertiary:active,
-:host([variant="tertiary"]) ::slotted(button:active),
-:host([variant="tertiary"]) ::slotted(a:active) {
-  background-color: var(--color-surface01);
-  border-color: var(--color-surface01);
-  color: var(--color-primary01);
-  box-shadow: var(--shadow-2);
-}
-
-button.tertiary:disabled,
-:host([variant="tertiary"]) ::slotted(button:disabled) {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--color-disabled02);
-}
-
-button.dark-bg,
-:host([variant="dark-bg"]) ::slotted(button),
-:host([variant="dark-bg"]) ::slotted(a) {
-  background-color: rgba(var(--rgb-white), 0.2);
-  border-color: transparent;
-  color: var(--color-text04);
-}
-
-button.dark-bg.hasContent {
-  padding: 0 var(--space-unit);
-}
-
-@media (hover: hover) {
-  button.dark-bg:hover,
-  :host([variant="dark-bg"]) ::slotted(button:hover),
-  :host([variant="dark-bg"]) ::slotted(a:hover) {
-    background-color: rgba(var(--rgb-white), 0.1);
-  }
-}
-
-button.dark-bg:active,
-:host([variant="dark-bg"]) ::slotted(button:active),
-:host([variant="dark-bg"]) ::slotted(a:active) {
-  background-color: rgba(var(--rgb-white), 0.3);
-}
-
-button.dark-bg:disabled,
-:host([variant="dark-bg"]) ::slotted(button:disabled) {
-  color: var(--color-disabled03);
-  background-color: rgba(var(--rgb-white), 0.05);
-}

package/dist/collection/components/buttons/z-button-filter/index.js

@@ -1,155 +0,0 @@
-import { Component, Prop, Event, h } from "@stencil/core";
-export class ZButtonFilter {
-  constructor() {
-    /** disable action on button */
-    this.isfixed = false;
-    /** add icon to button */
-    this.hasicon = true;
-    /** reduce button size (optional) */
-    this.issmall = false;
-    this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
-  }
-  handleRemovingFilterClick() {
-    this.removefilter.emit({
-      filterid: this.filterid,
-    });
-  }
-  renderFixedPillow(filtername) {
-    return (h("button", { class: `container ${this.issmall ? "small" : ""}` },
-      this.renderIcon(),
-      this.renderContent(filtername)));
-  }
-  renderDynamicPillow(filtername) {
-    return (h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick },
-      this.renderIcon(),
-      this.renderContent(filtername)));
-  }
-  renderIcon() {
-    if (!this.hasicon)
-      return null;
-    return (h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 }));
-  }
-  renderContent(filtername) {
-    return h("span", { class: "text-container" }, filtername);
-  }
-  render() {
-    if (this.isfixed) {
-      return this.renderFixedPillow(this.filtername);
-    }
-    return this.renderDynamicPillow(this.filtername);
-  }
-  static get is() { return "z-button-filter"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "filtername": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "filter text content"
-      },
-      "attribute": "filtername",
-      "reflect": false
-    },
-    "isfixed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "disable action on button"
-      },
-      "attribute": "isfixed",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hasicon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "add icon to button"
-      },
-      "attribute": "hasicon",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "filterid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "filter id"
-      },
-      "attribute": "filterid",
-      "reflect": false
-    },
-    "issmall": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "reduce button size (optional)"
-      },
-      "attribute": "issmall",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "removefilter",
-      "name": "removefilter",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "remove filter click event, returns filterid"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}

package/dist/collection/components/buttons/z-button-filter/styles.css

@@ -1,74 +0,0 @@
-button.container {
-  min-height: 32px;
-  line-height: 32px;
-
-  border: var(--border-size-small) solid var(--bg-grey-200);
-  border-radius: 16px;
-
-  box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-  -webkit-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-  -moz-box-shadow: 0px 2px 5px 0px var(--bg-neutral-300);
-
-  text-align: center;
-
-  padding: 0 calc(var(--space-unit) * 2);
-
-  cursor: pointer;
-
-  letter-spacing: 0.17px;
-  font-family: var(--dashboard-font);
-  font-size: 12px;
-  font-weight: var(--font-sb);
-
-  opacity: 1;
-
-  transition: all 200ms linear;
-}
-
-button.container.small {
-  min-height: 24px;
-  line-height: 24px;
-}
-
-button.container:focus {
-  outline: 0;
-}
-
-button.container::-moz-focus-inner {
-  border: 0;
-}
-
-.text-container {
-  margin-left: 4px;
-}
-
-button.container,
-button.container:focus,
-button.container:hover {
-  background-color: var(--bg-white);
-  color: var(--text-grey-700);
-  fill: var(--text-grey-700);
-}
-
-button.container.isactive {
-  background-color: var(--bg-white);
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
-}
-
-button.container.isactive:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-button.container.isactive:focus {
-  background-color: var(--myz-blue-dark);
-  border-color: var(--myz-blue-dark);
-  box-shadow: 0px 0px 4px 0px var(--text-grey-800);
-  color: var(--bg-white);
-  fill: var(--bg-white);
-}
-
-button z-icon {
-  display: inline-block;
-}

package/dist/collection/components/buttons/z-button-sort/index.js

@@ -1,216 +0,0 @@
-import { Component, Prop, State, h, Event } from "@stencil/core";
-import { tabletBreakpoint } from "../../../constants/breakpoints";
-export class ZButtonSort {
-  constructor() {
-    /** sort label content (ascending) (optional) */
-    this.sortlabelasc = "A-Z";
-    /** sort label content (descending) (optional) */
-    this.sortlabeldesc = "Z-A";
-    /** selected flag (optional) */
-    this.isselected = false;
-    /** sortable flag (optional) */
-    this.sortasc = true;
-    this.allowTooltip = false;
-  }
-  emitButtonSortClick() {
-    if (!this.isselected) {
-      this.isselected = true;
-    }
-    else {
-      this.sortasc = !this.sortasc;
-    }
-    this.buttonSortClick.emit({
-      buttonid: this.buttonid,
-      sortAsc: this.sortasc,
-    });
-  }
-  componentDidLoad() {
-    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
-      this.allowTooltip = true;
-  }
-  setButtonTitle() {
-    return this.allowTooltip
-      ? `${this.sortasc ? this.label : this.desclabel}`
-      : "";
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  render() {
-    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() },
-      h("label", null,
-        h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label),
-        h("span", { class: "counter" }, this.counter && ` (${this.counter})`),
-        h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc),
-        h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
-  }
-  static get is() { return "z-button-sort"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "buttonid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "id, should be unique"
-      },
-      "attribute": "buttonid",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "label content (ascending)"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "desclabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "label content (descending)"
-      },
-      "attribute": "desclabel",
-      "reflect": false
-    },
-    "counter": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "occurrencies counter (optional)"
-      },
-      "attribute": "counter",
-      "reflect": false
-    },
-    "sortlabelasc": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "sort label content (ascending) (optional)"
-      },
-      "attribute": "sortlabelasc",
-      "reflect": false,
-      "defaultValue": "\"A-Z\""
-    },
-    "sortlabeldesc": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "sort label content (descending) (optional)"
-      },
-      "attribute": "sortlabeldesc",
-      "reflect": false,
-      "defaultValue": "\"Z-A\""
-    },
-    "isselected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "selected flag (optional)"
-      },
-      "attribute": "isselected",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "sortasc": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "sortable flag (optional)"
-      },
-      "attribute": "sortasc",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "allowTooltip": {}
-  }; }
-  static get events() { return [{
-      "method": "buttonSortClick",
-      "name": "buttonSortClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "sorting direction click event, returns buttonid and sortAsc"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}