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

package/dist/web-components-library/z-typography.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-44936066.js';
+
+const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}";
+
+const ZTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = "regular";
+  }
+  render() {
+    const el = document.createElement(this.component || "span");
+    el.innerHTML = `<slot />`;
+    this.hostElement.shadowRoot.appendChild(el);
+    return (h(Host, { class: {
+        [this.level]: Boolean(this.level),
+        regular: this.variant === "regular",
+        semibold: this.variant === "semibold",
+        light: this.variant === "light"
+      } }));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZTypography.style = stylesCss;
+
+export { ZTypography as z_typography };

package/dist/web-components-library/z-user-dropdown.entry.js

@@ -0,0 +1,91 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-44936066.js';
+import { m as mobileBreakpoint } from './breakpoints-14432d05.js';
+
+const stylesCss = ":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--gray900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--gray700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);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;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--color-white);border-color:var(--color-white);color:var(--gray800)}#guestbutton.inverse{background-color:var(--gray800);border-color:var(--gray800);color:var(--color-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--gray800)}.useremail{color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--color-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--color-white);border-top:var(--border-size-small) solid var(--color-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{color:var(--gray800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{color:var(--gray800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
+
+const ZUserDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.userButtonClick = createEvent(this, "userButtonClick", 7);
+    this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
+    /** if inner components colors are inverted, or not, default false */
+    this.useInverseColors = false;
+    this.isMenuOpen = false;
+    this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
+    this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
+  }
+  componentDidLoad() {
+    this.setMobileAndDivToResizeWidth();
+  }
+  componentWillUpdate() {
+    this.setMobileAndDivToResizeWidth();
+  }
+  componentWillRender() {
+    if (this.menuContent) {
+      this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
+    }
+  }
+  setMobileAndDivToResizeWidth() {
+    var _a;
+    if (this.divToResize) {
+      this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+      if (this.logged && !this.isMobile && this.isMenuOpen) {
+        this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+      }
+      else {
+        this.divToResize.removeAttribute('style');
+      }
+    }
+  }
+  emitUserButtonClick() {
+    this.userButtonClick.emit(this.isMenuOpen);
+  }
+  emitDropdownMenuLinkClick(e) {
+    this.isMenuOpen = false;
+    this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  handleOrientationChange() {
+    this.isMobile = screen.width <= mobileBreakpoint;
+  }
+  handleClickOutside(e) {
+    if (e.target.nodeName !== "Z-USER-DROPDOWN") {
+      this.isMenuOpen = false;
+    }
+  }
+  handleLoggedButtonClick() {
+    this.isMenuOpen = !this.isMenuOpen;
+    this.emitUserButtonClick();
+  }
+  renderGuestButton() {
+    return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
+  }
+  renderLoggedButton() {
+    const direction = this.isMenuOpen ? "up" : "down";
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick }, h("div", null, h("div", { class: "firstline" }, h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }), !this.isMobile && h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })), !this.isMobile && this.isMenuOpen && h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
+  }
+  getZLinkTextcolor() {
+    if (this.isMobile) {
+      return this.useInverseColors ? "black" : "white";
+    }
+    else {
+      return this.useInverseColors ? "white" : "black";
+    }
+  }
+  renderDropdownMenu() {
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (this.isMenuOpen && (h("ul", { class: colorClass }, this.isMobile &&
+      h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("div", { class: `useremail ${colorClass}` }, this.userEmail)), this.linkArray && this.linkArray.map((link) => h("li", { id: link.id, class: colorClass }, h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label))))));
+  }
+  render() {
+    const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.divToResize = el), class: openClass }, h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
+  }
+};
+ZUserDropdown.style = stylesCss;
+
+export { ZUserDropdown as z_user_dropdown };

package/dist/{esm → web-components-library}/z-visually-hidden.entry.js

@@ -1,15 +1,15 @@
-import { r as registerInstance, h } from './index-fa9e549c.js';
+import { r as registerInstance, h } from './index-44936066.js';
 
 const stylesCss = ":host{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}";
 
-const ZVisuallyHidden = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return h("slot", null);
-  }
-};
+const ZVisuallyHidden = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
+};
 ZVisuallyHidden.style = stylesCss;
 
 export { ZVisuallyHidden as z_visually_hidden };

package/package.json

@@ -1,90 +1,90 @@
-{
-  "name": "@zanichelli/albe-web-components",
-  "version": "2.33.2",
-  "description": "The Web Components implementation of Albe, the Zanichelli's design system.",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/web-components-library/web-components-library.esm.js",
-  "files": [
-    "dist/",
-    "loader/",
-    "www/",
-    "react/"
-  ],
-  "scripts": {
-    "build": "mkdirp react && yarn build.wc && yarn build.react",
-    "build.wc": "stencil build --docs",
-    "build.react": "rimraf react && tsc --build tsconfig.react.json",
-    "start": "stencil build --dev --watch --serve --no-open",
-    "generate": "plop --plopfile internals/generators/index.js",
-    "test": "stencil test --spec",
-    "test.watch": "stencil test --spec --watch",
-    "test.e2e": "stencil test --e2e",
-    "release": "standard-version",
-    "start-storybook": "yarn build && start-storybook -p 3003 -s ./dist,./src/assets --ci",
-    "build-storybook": "yarn build && build-storybook -c .storybook -s ./dist,./src/assets . -o storybook"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "@commitlint/cli": "^12.0.0",
-    "@commitlint/config-conventional": "^12.0.0",
-    "@stencil/core": "^2.4.0",
-    "@stencil/react-output-target": "^0.0.9",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-docs": "^6.1.20",
-    "@storybook/addon-knobs": "^6.1.20",
-    "@storybook/addon-viewport": "^6.1.20",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/web-components": "^6.1.20",
-    "@types/hammerjs": "^2.0.39",
-    "@types/jest": "26.0.20",
-    "@types/puppeteer": "5.4.3",
-    "@types/react-dom": "^17.0.0",
-    "babel-loader": "^8.2.2",
-    "husky": "^5.1.1",
-    "jest": "26.6.3",
-    "jest-cli": "26.6.3",
-    "lit-html": "^1.3.0",
-    "mkdirp": "^1.0.4",
-    "plop": "^2.1.0",
-    "puppeteer": "8.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "standard-version": "^9.1.1",
-    "storybook-addons-abstract": "^6.0.3",
-    "typescript": "^4.2.3"
-  },
-  "pre-commit": {
-    "colors": true,
-    "silent": false,
-    "run": [
-      "test"
-    ]
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@zanichelli/albe-design-tokens": "^0.2.11",
-    "classnames": "^2.3.1",
-    "hammerjs": "^2.0.8"
-  },
-  "standard-version": {
-    "scripts": {
-      "prerelease": "yarn build"
-    }
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  }
-}
+{
+  "name": "@zanichelli/albe-web-components",
+  "version": "2.33.5-rc1",
+  "description": "The Web Components implementation of Albe, the Zanichelli's design system.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/web-components-library/web-components-library.esm.js",
+  "files": [
+    "dist/",
+    "loader/",
+    "www/",
+    "react/"
+  ],
+  "scripts": {
+    "build": "mkdirp react && yarn build.wc && yarn build.react",
+    "build.wc": "stencil build --docs",
+    "build.react": "rimraf react && tsc --build tsconfig.react.json",
+    "start": "stencil build --dev --watch --serve --no-open",
+    "generate": "plop --plopfile internals/generators/index.js",
+    "test": "stencil test --spec",
+    "test.watch": "stencil test --spec --watch",
+    "test.e2e": "stencil test --e2e",
+    "release": "standard-version",
+    "start-storybook": "yarn build && start-storybook -p 3003 -s ./dist,./src/assets --ci",
+    "build-storybook": "yarn build && build-storybook -c .storybook -s ./dist,./src/assets . -o storybook"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.1",
+    "@commitlint/cli": "^12.0.0",
+    "@commitlint/config-conventional": "^12.0.0",
+    "@stencil/core": "^2.4.0",
+    "@stencil/react-output-target": "^0.0.9",
+    "@storybook/addon-a11y": "^6.2.9",
+    "@storybook/addon-docs": "^6.1.20",
+    "@storybook/addon-knobs": "^6.1.20",
+    "@storybook/addon-viewport": "^6.1.20",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/web-components": "^6.1.20",
+    "@types/hammerjs": "^2.0.39",
+    "@types/jest": "26.0.20",
+    "@types/puppeteer": "5.4.3",
+    "@types/react-dom": "^17.0.0",
+    "babel-loader": "^8.2.2",
+    "husky": "^5.1.1",
+    "jest": "26.6.3",
+    "jest-cli": "26.6.3",
+    "lit-html": "^1.3.0",
+    "mkdirp": "^1.0.4",
+    "plop": "^2.1.0",
+    "puppeteer": "8.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "standard-version": "^9.1.1",
+    "storybook-addons-abstract": "^6.0.3",
+    "typescript": "^4.2.3"
+  },
+  "pre-commit": {
+    "colors": true,
+    "silent": false,
+    "run": [
+      "test"
+    ]
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@zanichelli/albe-design-tokens": "^0.2.11",
+    "classnames": "^2.3.1",
+    "hammerjs": "^2.0.8"
+  },
+  "standard-version": {
+    "scripts": {
+      "prerelease": "yarn build"
+    }
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  }
+}