@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

package/dist/collection/components/deprecated/z-menu-section-deprecated/styles.css

@@ -1,123 +0,0 @@
-:host {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0;
-  font-family: var(--font-family-sans);
-}
-
-:host,
-::slotted(*),
-* {
-  box-sizing: border-box;
-}
-
-::slotted(a) {
-  text-decoration: none;
-}
-
-::slotted(*) {
-  color: var(--color-default-text);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host(:is([active], [open])) .label,
-.label:hover {
-  border-color: var(--color-primary01);
-}
-
-:host(:is([active], [open])) .label ::slotted(*),
-.label:focus:focus-visible ::slotted(*),
-.label:hover ::slotted(*) {
-  font-weight: var(--font-bd);
-}
-
-.label {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);
-  border: 0;
-  border-bottom: var(--border-size-small) solid var(--color-surface05);
-  margin: 0;
-  background: transparent;
-  border-radius: 0;
-  cursor: pointer;
-  text-align: left;
-}
-
-::slotted([data-text]) {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-/* Trick to prevent layout shifts on font-weight changes.
-The trick is to put an hidden copy of the text already set to bold,
-so the needed space is correctly calculated before any hover/active state changes the
-font-weight of the real text.
-The hidden text has an height of 0px so it can expand the width without changing the height
-when placed below the real text using `flex-direction: column`. */
-::slotted([data-text])::after {
-  overflow: hidden;
-  height: 0;
-  content: attr(data-text);
-  content: attr(data-text) / "";
-  font-weight: var(--font-bd);
-  pointer-events: none;
-  user-select: none;
-  visibility: hidden;
-}
-
-@media speech {
-  ::slotted([data-text])::after {
-    display: none;
-  }
-}
-
-.label ::slotted(*) {
-  width: 100%;
-  margin: 0;
-  font-size: var(--font-size-3);
-  line-height: 1.25;
-}
-
-.label:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
-.label z-icon {
-  margin-left: calc(var(--space-unit) * 4);
-  fill: var(--color-default-icon);
-}
-
-.items {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  padding: calc(var(--space-unit) / 2);
-  padding-bottom: calc(var(--space-unit) * 1.5);
-}
-
-.items > ::slotted([slot="item"]) {
-  display: inline-flex;
-  padding: calc(var(--space-unit) / 2);
-  margin: 0;
-  font-size: var(--font-size-2);
-  line-height: 1.4;
-  outline: none;
-}
-
-.items > ::slotted([slot="item"]:focus:focus-visible) {
-  box-shadow: var(--shadow-focus-primary);
-  color: var(--color-primary01);
-}
-
-.items > ::slotted([slot="item"]:hover),
-.items > ::slotted([slot="item"]:focus:focus-visible),
-.items > ::slotted([slot="item"][active]) {
-  color: var(--color-primary01);
-  font-weight: var(--font-bd);
-}

package/dist/collection/components/deprecated/z-section-title/index.js

@@ -1,94 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { DividerSize, ZSectionTitleDividerPosition } from "../../../beans";
-/**
- * Section title component.
- * An optional secondary title can be put over the primary one.
- *
- * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
- * following its width and removing the one for the primary title.
- * @slot primary-title - Slot for the primary title.
- */
-export class ZSectionTitle {
-    constructor() {
-        /**
-         * Divider position for the primary title.
-         * This prop only works if the secondary title is not set.
-         */
-        this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
-        /**
-         * Whether the primary title text is uppercase.
-         */
-        this.uppercase = true;
-    }
-    componentWillRender() {
-        this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
-    }
-    render() {
-        return (h(Host, { key: '020c1a41ff7fa0881464463322b54754e7664957' }, h("slot", { key: 'c6d7baf944465d1092749cf288636fcd502e659c', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'ea70a8579ed61ba8b1d6488566473b90c47540d1', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '4cf602491394aaf97cead51bbc7f9b2da299bef3', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '47275d6411b00769db2e244bad13032d43cc9144', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
-    }
-    static get is() { return "z-section-title"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "dividerPosition": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ZSectionTitleDividerPosition",
-                    "resolved": "ZSectionTitleDividerPosition.AFTER | ZSectionTitleDividerPosition.BEFORE",
-                    "references": {
-                        "ZSectionTitleDividerPosition": {
-                            "location": "import",
-                            "path": "../../../beans",
-                            "id": "src/beans/index.tsx::ZSectionTitleDividerPosition",
-                            "referenceLocation": "ZSectionTitleDividerPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Divider position for the primary title.\nThis prop only works if the secondary title is not set."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "divider-position",
-                "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
-            },
-            "uppercase": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the primary title text is uppercase."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "uppercase",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-section-title/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACpF,OAAO,EAAC,WAAW,EAAE,4BAA4B,EAAC,MAAM,gBAAgB,CAAC;AAEzE;;;;;;;GAOG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;;WAGG;QAEH,oBAAe,GAAiC,4BAA4B,CAAC,MAAM,CAAC;QAEpF;;WAEG;QAEH,cAAS,GAAG,IAAI,CAAC;KA8BlB;IAxBC,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC/E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,iBAAiB,GAAG;YAC9B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,MAAM,IAAI,CAC1F,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH;YACD,6DAAM,IAAI,EAAC,eAAe,GAAG;YAC5B,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,eAAe,KAAK,4BAA4B,CAAC,KAAK,IAAI,CACzF,kEACE,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,KAAK,EAAC,gCAAgC,GACtC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, h, Host, Prop} from \"@stencil/core\";\nimport {DividerSize, ZSectionTitleDividerPosition} from \"../../../beans\";\n\n/**\n * Section title component.\n * An optional secondary title can be put over the primary one.\n *\n * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,\n * following its width and removing the one for the primary title.\n * @slot primary-title - Slot for the primary title.\n */\n@Component({\n  tag: \"z-section-title\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZSectionTitle implements ComponentInterface {\n  /**\n   * Divider position for the primary title.\n   * This prop only works if the secondary title is not set.\n   */\n  @Prop()\n  dividerPosition: ZSectionTitleDividerPosition = ZSectionTitleDividerPosition.BEFORE;\n\n  /**\n   * Whether the primary title text is uppercase.\n   */\n  @Prop({reflect: true})\n  uppercase = true;\n\n  @Element() host: HTMLZSectionTitleElement;\n\n  private hasSecondaryTitle: boolean;\n\n  componentWillRender(): void {\n    this.hasSecondaryTitle = !!this.host.querySelector(\"[slot=secondary-title]\");\n  }\n\n  render(): HTMLZSectionTitleElement {\n    return (\n      <Host>\n        <slot name=\"secondary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n        <slot name=\"primary-title\" />\n        {!this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (\n          <z-divider\n            size={DividerSize.LARGE}\n            color=\"z-section-title--divider-color\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/deprecated/z-section-title/styles.css

@@ -1,48 +0,0 @@
-:host {
-  /**
-   * @prop --z-section-title--divider-color: Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
-   */
-  --z-section-title--divider-color: var(--red500);
-
-  display: flex;
-  width: fit-content;
-  flex-direction: column;
-  align-items: flex-start;
-  font-family: var(--font-family-sans);
-}
-
-:host,
-:host ::slotted(*) {
-  box-sizing: border-box;
-}
-
-::slotted(*) {
-  margin: 0;
-}
-
-::slotted([slot="secondary-title"]) {
-  padding-bottom: calc(var(--space-unit) / 2);
-  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-sb);
-  line-height: 1.5rem;
-  text-transform: uppercase;
-}
-
-::slotted([slot="primary-title"]) {
-  font-size: var(--font-size-6);
-  font-weight: var(--font-sb);
-  line-height: 2rem;
-}
-
-:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]) {
-  text-transform: uppercase;
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  ::slotted([slot="primary-title"]) {
-    font-size: var(--font-size-7);
-    line-height: 2.25rem;
-  }
-}

package/dist/collection/components/deprecated/z-toggle-button/index.js

@@ -1,157 +0,0 @@
-import { h } from "@stencil/core";
-export class ZToggleButton {
-    constructor() {
-        /** disabled status flag (optional) */
-        this.isdisabled = false;
-        /** open by default (optional) */
-        this.opened = false;
-        /**  aria-label for the button */
-        this.ariaLabel = "";
-    }
-    emitToggleClick() {
-        if (this.isdisabled) {
-            return;
-        }
-        this.opened = !this.opened;
-        this.toggleClick.emit(this.opened);
-    }
-    render() {
-        return (h("button", { key: '3882d62d3d17b5eba2cafdc83096f5185a61a985', tabindex: this.avoidclick ? "-1" : "0", class: {
-                "isopen": this.opened,
-                "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '820fc24fd3394845e52156525b0881d2aa4c2c62', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
-    }
-    static get is() { return "z-toggle-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["styles.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "label text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "isdisabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "disabled status flag (optional)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "isdisabled",
-                "defaultValue": "false"
-            },
-            "avoidclick": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "avoidclick status flag"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "avoidclick"
-            },
-            "opened": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "open by default (optional)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "opened",
-                "defaultValue": "false"
-            },
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "aria-label for the button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "\"\""
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "toggleClick",
-                "name": "toggleClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "emitted on toggle button click, returns isOpen"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=index.js.map

package/dist/collection/components/deprecated/z-toggle-button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAO1F,MAAM,OAAO,aAAa;IAL1B;QAUE,sCAAsC;QAEtC,eAAU,GAAa,KAAK,CAAC;QAM7B,iCAAiC;QAEjC,WAAM,GAAa,KAAK,CAAC;QAEzB,iCAAiC;QAEjC,cAAS,GAAG,EAAE,CAAC;KAqChB;IA/BS,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,MAAM;gBACrB,cAAc,EAAE,IAAI,CAAC,UAAU;aAChC,EACD,QAAQ,EAAE,IAAI,CAAC,UAAU,mBACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YAErC,+DACE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EACjD,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV;YACD,IAAI,CAAC,KAAK,CACJ,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-toggle-button\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToggleButton implements ComponentInterface {\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** disabled status flag (optional) */\n  @Prop()\n  isdisabled?: boolean = false;\n\n  /** avoidclick status flag */\n  @Prop()\n  avoidclick: boolean;\n\n  /** open by default (optional) */\n  @Prop({mutable: true})\n  opened?: boolean = false;\n\n  /**  aria-label for the button */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** emitted on toggle button click, returns isOpen */\n  @Event()\n  toggleClick: EventEmitter;\n\n  private emitToggleClick(): void {\n    if (this.isdisabled) {\n      return;\n    }\n\n    this.opened = !this.opened;\n    this.toggleClick.emit(this.opened);\n  }\n\n  render(): HTMLButtonElement {\n    return (\n      <button\n        tabindex={this.avoidclick ? \"-1\" : \"0\"}\n        class={{\n          \"isopen\": this.opened,\n          \"avoid-clicks\": this.avoidclick,\n        }}\n        disabled={this.isdisabled}\n        aria-expanded={this.opened ? \"true\" : \"false\"}\n        aria-label={this.ariaLabel}\n        onClick={() => this.emitToggleClick()}\n      >\n        <z-icon\n          name={this.opened ? \"chevron-down\" : \"chevron-up\"}\n          width={16}\n          height={16}\n        />\n        {this.label}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/deprecated/z-toggle-button/styles.css

@@ -1,60 +0,0 @@
-button {
-  display: flex;
-  height: 36px;
-  align-items: center;
-  padding-right: calc(var(--space-unit) * 2);
-  padding-left: 0;
-  border: var(--border-size-medium) solid;
-  border-color: transparent;
-  background-color: var(--color-surface01);
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-2);
-  color: var(--color-primary01);
-  cursor: pointer;
-  fill: var(--color-primary01);
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  outline: none;
-  text-transform: uppercase;
-}
-
-button::-moz-focus-inner {
-  border: 0;
-}
-
-button:hover {
-  color: var(--color-hover-primary);
-  fill: var(--color-hover-primary);
-}
-
-button:focus {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-button:active {
-  border-color: var(--color-pressed-primary);
-  box-shadow: var(--shadow-2);
-  color: var(--color-pressed-primary);
-  fill: var(--color-pressed-primary);
-}
-
-button:disabled {
-  color: var(--color-disabled03);
-  fill: var(--color-disabled03);
-}
-
-z-icon {
-  display: inline-block;
-  margin: 0 var(--space-unit) 0 calc(var(--space-unit) * 2);
-  transform: rotate(360deg);
-  transition: all 200ms linear;
-}
-
-button.isopen {
-  top: -20px;
-}
-
-button.avoid-clicks {
-  pointer-events: none;
-}