@zanichelli/albe-web-components 19.6.1 → 20.0.0

package/dist/collection/components/deprecated/z-app-header-deprecated/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/deprecated/z-app-header-deprecated/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEjG,MAAM,6BAA6B,GAAG,OAAO,oBAAoB,KAAK,WAAW,CAAC;AAElF;;;;;GAKG;AAMH,MAAM,OAAO,oBAAoB;IAyG/B;QAtGA;;;WAGG;QAEH,UAAK,GAAG,KAAK,CAAC;QASd;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;;WAKG;QAEH,SAAI,GAAmC,MAAM,CAAC;QAE9C;;WAEG;QAEH,eAAU,GAAG,KAAK,CAAC;QAEnB;;WAEG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QAEH,sBAAiB,GAAG,OAAO,CAAC;QAE5B;;WAEG;QAEH,iBAAY,GAAG,EAAE,CAAC;QAUlB;;WAEG;QAEK,WAAM,GAAG,KAAK,CAAC;QAEvB;;;WAGG;QAEK,oBAAe,GAAoC,QAAQ,CAAC;QAkB5D,aAAQ,GACd,6BAA6B;YAC7B,IAAI,oBAAoB,CACtB,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;gBACV,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;YACtC,CAAC,EACD;gBACE,SAAS,EAAE,GAAG;aACf,CACF,CAAC;QAGF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChE;IAGD,gBAAgB;QACd,IAAI,MAAM,CAAC,UAAU,GAAG,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QAClC,CAAC;aAAM,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,IAAI,MAAM,CAAC,UAAU,GAAG,IAAI,EAAE,CAAC;YAChE,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QAClC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACnC,CAAC;IACH,CAAC;IAGD,OAAO;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;QACnC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC1B,OAAsC,CAAC,IAAI,GAAG,KAAK,CAAC;YACpD,OAAsC,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACnE,OAAsC,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAY,KAAK;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,IAAY,YAAY;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,MAAM,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;YACpE,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IAC5F,CAAC;IAED,IAAY,gBAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,uEAAuE;QACvE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC;QAC5C,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;OAEG;IACH,IAAY,OAAO;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/E,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAEO,mBAAmB;QACzB,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9F,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,mBAAmB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAGD,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;YACpF,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,gBACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,WAAW,CAAC,OAAO,GACf,CACb,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,oBAA6B;QAClD,OAAO,CACL,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAC3C,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,GACrD,CACH,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAc,IAAI,CAAC,UAAU;YAC/B,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,CACZ,4DACE,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,IAAI,CAAC,IAAI,GACd,CACH,CACI,CACH,CACP;YAED,4DACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAElC,4DAAK,KAAK,EAAC,mBAAmB;oBAC5B,4DAAK,KAAK,EAAC,kBAAkB;wBAC3B,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;oBACN,4DAAK,KAAK,EAAC,eAAe;wBACvB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CACtB,+DACE,KAAK,EAAC,gBAAgB,gBACX,WAAW,EACtB,OAAO,EAAE,IAAI,CAAC,UAAU;4BAExB,+DAAQ,IAAI,EAAC,aAAa,GAAU,CAC7B,CACV;wBAED,6DAAM,IAAI,EAAC,OAAO,GAAQ;wBAEzB,IAAI,CAAC,sBAAsB,EAAE,CAC1B;oBAEN,4DAAK,KAAK,EAAC,kBAAkB;wBAC3B,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF;gBAEL,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAC9C,4DAAK,KAAK,EAAC,gBAAgB;oBACxB,IAAI,CAAC,WAAW,IAAI,CACnB,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GAChC,CACT;oBAEA,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC,CAC7E,CACP,CACG;YAEN,oEACE,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAC9C,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,yBAAyB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC;gBAEhE,+DACE,KAAK,EAAC,cAAc,gBACT,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,eAAe,iBACP,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;oBAE1B,+DAAQ,IAAI,EAAC,OAAO,GAAU,CACvB;gBAET,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,eAAe,iBACP,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE;oBAElC,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GAChC,CACJ,CACM;YAEb,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAC,eAAe;gBACxB,4DAAK,KAAK,EAAC,uBAAuB;oBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CACtB,+DACE,KAAK,EAAC,gBAAgB,gBACX,WAAW,EACtB,OAAO,EAAE,IAAI,CAAC,UAAU;wBAExB,+DAAQ,IAAI,EAAC,aAAa,GAAU,CAC7B,CACV;oBAED,4DAAK,KAAK,EAAC,eAAe;wBACxB,6DAAM,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C;oBAEL,IAAI,CAAC,sBAAsB,EAAE;oBAC7B,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CACtF,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n */\n@Component({\n  tag: \"z-app-header-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeaderDeprecated implements ComponentInterface {\n  @Element() hostElement: HTMLZAppHeaderDeprecatedElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * Set the hero image source for the header.\n   * You can also use a [slot=\"hero\"] node for advanced customization.\n   */\n  @Prop()\n  hero: string;\n\n  /**\n   * Should place an overlay over the hero image.\n   * Useful for legibility purpose.\n   */\n  @Prop({reflect: true})\n  overlay = false;\n\n  /**\n   * Control menu bar position in the header.\n   * - auto: the menu bar is positioned near the title\n   * - stack: the menu bar is positioned below the title\n   * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n   */\n  @Prop({reflect: true})\n  flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({reflect: true})\n  drawerOpen = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current viewport.\n   * Used to change the aspect of the search button (icon only) on mobile and tablet.\n   */\n  @State()\n  private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  menuLength: number;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  private container?: HTMLDivElement;\n\n  private menuElements?: NodeListOf<HTMLElement>;\n\n  private observer?: IntersectionObserver =\n    SUPPORT_INTERSECTION_OBSERVER &&\n    new IntersectionObserver(\n      ([entry]) => {\n        this._stuck = !entry.isIntersecting;\n      },\n      {\n        threshold: 0.5,\n      }\n    );\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n  }\n\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  evaluateViewport(): void {\n    if (window.innerWidth < 768) {\n      this.currentViewport = \"mobile\";\n    } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n      this.currentViewport = \"tablet\";\n    } else {\n      this.currentViewport = \"desktop\";\n    }\n  }\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    const elements = this.menuElements;\n    elements.forEach((element) => {\n      (element as HTMLZMenuDeprecatedElement).open = false;\n      (element as HTMLZMenuDeprecatedElement).floating = !this.drawerOpen;\n      (element as HTMLZMenuDeprecatedElement).verticalContext = this.drawerOpen;\n    });\n  }\n\n  private get title(): string {\n    const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n    if (titleElement === null) {\n      return \"\";\n    }\n\n    return titleElement.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n  }\n\n  private get canShowSearchbar(): boolean {\n    if (!this.enableSearch) {\n      return false;\n    }\n\n    // Always show the searchbar on desktop, even if a searchPageUrl is set\n    if (this.searchPageUrl) {\n      return this.currentViewport === \"desktop\";\n    }\n\n    return true;\n  }\n\n  /**\n   * Whether the header has a hero image, either as a prop or as a slot.\n   */\n  private get hasHero(): boolean {\n    return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n  }\n\n  private collectMenuElements(): void {\n    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuLength = menuElements.length;\n    this.setMenuFloatingMode();\n  }\n\n  private enableStuckObserver(): void {\n    if (this.observer) {\n      this.observer.observe(this.container);\n    }\n  }\n\n  private disableStuckMode(): void {\n    this._stuck = false;\n    if (this.observer) {\n      this.observer.unobserve(this.container);\n    }\n  }\n\n  @Watch(\"stuck\")\n  onStuckMode(): void {\n    if (this.stuck) {\n      this.enableStuckObserver();\n    } else {\n      this.disableStuckMode();\n    }\n  }\n\n  private renderSearchLinkButton(): HTMLZButtonElement | null {\n    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n      return null;\n    }\n\n    return (\n      <z-button\n        class=\"search-page-button\"\n        variant={ButtonVariant.SECONDARY}\n        href={this.searchPageUrl}\n        icon=\"search\"\n        size={ControlSize.X_SMALL}\n      ></z-button>\n    );\n  }\n\n  private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={searchButtonIconOnly}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  componentDidLoad(): void {\n    this.collectMenuElements();\n    this.onStuckMode();\n    this.evaluateViewport();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    return (\n      <Host menu-length={this.menuLength}>\n        {this.hasHero && (\n          <div class=\"hero-container\">\n            <slot name=\"hero\">\n              {this.hero && (\n                <img\n                  alt=\"\"\n                  src={this.hero}\n                />\n              )}\n            </slot>\n          </div>\n        )}\n\n        <div\n          class=\"heading-panel\"\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            <div class=\"heading-subtitle\">\n              <slot name=\"top-subtitle\"></slot>\n            </div>\n            <div class=\"heading-title\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <slot name=\"title\"></slot>\n\n              {this.renderSearchLinkButton()}\n            </div>\n\n            <div class=\"heading-subtitle\">\n              <slot name=\"subtitle\"></slot>\n            </div>\n          </div>\n\n          {(this.canShowMenu || this.canShowSearchbar) && (\n            <div class=\"menu-container\">\n              {this.canShowMenu && (\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                ></slot>\n              )}\n\n              {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n            </div>\n          )}\n        </div>\n\n        <z-offcanvas\n          variant={OffCanvasVariant.OVERLAY}\n          transitiondirection={TransitionDirection.RIGHT}\n          open={this.drawerOpen}\n          onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        >\n          <button\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\"></z-icon>\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            slot=\"canvasContent\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            ></slot>\n          </div>\n        </z-offcanvas>\n\n        {this._stuck && (\n          <div class=\"heading-stuck\">\n            <div class=\"heading-stuck-content\">\n              {this.menuLength > 0 && (\n                <button\n                  class=\"drawer-trigger\"\n                  aria-label=\"Apri menu\"\n                  onClick={this.openDrawer}\n                >\n                  <z-icon name=\"burger-menu\"></z-icon>\n                </button>\n              )}\n\n              <div class=\"heading-title\">\n                <slot name=\"stucked-title\">{this.title}</slot>\n              </div>\n\n              {this.renderSearchLinkButton()}\n              {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/deprecated/z-app-header-deprecated/styles.css

@@ -1,490 +0,0 @@
-:host {
-  /**
-   * @prop --app-header-typography-1-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.
-   * @prop --app-header-typography-2-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.
-   * @prop --app-header-typography-3-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.
-   * @prop --app-header-typography-4-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.
-   * @prop --app-header-typography-5-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.
-   * @prop --app-header-typography-6-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.
-   * @prop --app-header-typography-7-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.
-   * @prop --app-header-typography-8-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.
-   * @prop --app-header-typography-9-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.
-   * @prop --app-header-typography-10-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.
-   * @prop --app-header-typography-11-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.
-   * @prop --app-header-typography-12-size: Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.
-   * @prop --app-header-typography-1-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.
-   * @prop --app-header-typography-2-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.
-   * @prop --app-header-typography-3-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-   * @prop --app-header-typography-4-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-   * @prop --app-header-typography-5-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-   * @prop --app-header-typography-6-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.
-   * @prop --app-header-typography-7-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-   * @prop --app-header-typography-8-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-   * @prop --app-header-typography-9-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.
-   * @prop --app-header-typography-10-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.
-   * @prop --app-header-typography-11-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-   * @prop --app-header-typography-12-lineheight: Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.
-   * @prop --app-header-typography-1-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.
-   * @prop --app-header-typography-2-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.
-   * @prop --app-header-typography-3-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.
-   * @prop --app-header-typography-4-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.
-   * @prop --app-header-typography-5-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.
-   * @prop --app-header-typography-6-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.
-   * @prop --app-header-typography-7-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.
-   * @prop --app-header-typography-8-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.
-   * @prop --app-header-typography-9-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.
-   * @prop --app-header-typography-10-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.
-   * @prop --app-header-typography-11-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.
-   * @prop --app-header-typography-12-tracking: Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.
-   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
-   * @prop --app-header-height: Defaults to `auto`.
-   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
-   * @prop --app-header-drawer-trigger-size: The size of the drawer icon. Defaults to `--space-unit * 4`.
-   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
-   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
-   * @prop --app-header-text-color: Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.
-   * @prop --app-header-title-font-size: Variable to customize the title's font size. NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. Defaults to `--app-header-typography-3-size`.
-   * @prop --app-header-title-lineheight: Variable to customize the title's line-height. NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-lineheight`.
-   * @prop --app-header-title-letter-spacing: Variable to customize the title's letter-spacing. NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size. Defaults to `--app-header-typography-3-tracking`.
-   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
-   */
-  --app-header-typography-1-size: 24px;
-  --app-header-typography-2-size: 28px;
-  --app-header-typography-3-size: 32px;
-  --app-header-typography-4-size: 36px;
-  --app-header-typography-5-size: 42px;
-  --app-header-typography-6-size: 48px;
-  --app-header-typography-7-size: 54px;
-  --app-header-typography-8-size: 60px;
-  --app-header-typography-9-size: 68px;
-  --app-header-typography-10-size: 76px;
-  --app-header-typography-11-size: 84px;
-  --app-header-typography-12-size: 92px;
-  --app-header-typography-1-lineheight: 1.33;
-  --app-header-typography-2-lineheight: 1.29;
-  --app-header-typography-3-lineheight: 1.25;
-  --app-header-typography-4-lineheight: 1.24;
-  --app-header-typography-5-lineheight: 1.24;
-  --app-header-typography-6-lineheight: 1.25;
-  --app-header-typography-7-lineheight: 1.2;
-  --app-header-typography-8-lineheight: 1.26;
-  --app-header-typography-9-lineheight: 1.24;
-  --app-header-typography-10-lineheight: 1.26;
-  --app-header-typography-11-lineheight: 1.2;
-  --app-header-typography-12-lineheight: 1.2;
-  --app-header-typography-1-tracking: calc(-0.2 / 1em);
-  --app-header-typography-2-tracking: calc(-0.4 / 1em);
-  --app-header-typography-3-tracking: calc(-0.6 / 1em);
-  --app-header-typography-4-tracking: calc(-0.8 / 1em);
-  --app-header-typography-5-tracking: calc(-1 / 1em);
-  --app-header-typography-6-tracking: calc(-1.2 / 1em);
-  --app-header-typography-7-tracking: calc(-1.4 / 1em);
-  --app-header-typography-8-tracking: calc(-1.6 / 1em);
-  --app-header-typography-9-tracking: calc(-1.8 / 1em);
-  --app-header-typography-10-tracking: calc(-2 / 1em);
-  --app-header-typography-11-tracking: calc(-2.2 / 1em);
-  --app-header-typography-12-tracking: calc(-2.4 / 1em);
-  --app-header-content-max-width: 100%;
-  --app-header-height: auto;
-
-  /* Variable to set stuck header and drawer's top offset.
-  Useful when something is absolutely positioned above the header. */
-  --app-header-top-offset: 48px;
-  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
-
-  /* Variable to customize header background color. */
-  --app-header-bg: var(--color-surface01);
-
-  /* Variable to customize stuck header background color. */
-  --app-header-stucked-bg: var(--color-surface01);
-
-  /* Variable to customize text and icon color. */
-  --app-header-text-color: var(--color-default-text);
-
-  /* Variable to customize the title's font size.
-  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */
-  --app-header-title-font-size: var(--app-header-typography-3-size);
-
-  /* Variable to customize the title's line-height.
-  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
-  and use the same level as the one of the font size. */
-  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);
-
-  /* Variable to customize the title's letter-spacing.
-  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value
-  and use the same level as the one of the font size. */
-  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);
-
-  /* Variable to customize stuck header's text and icon color. */
-  --app-header-stucked-text-color: var(--color-default-text);
-
-  position: relative;
-  display: block;
-  height: var(--app-header-height);
-  color: var(--app-header-text-color);
-}
-
-:host,
-* {
-  box-sizing: border-box;
-}
-
-.heading-panel {
-  position: relative;
-  display: flex;
-  width: 100%;
-  max-width: var(--app-header-content-max-width);
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  align-items: baseline;
-  padding: var(--grid-margin);
-  margin: 0 auto;
-  background: var(--app-header-bg);
-  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
-}
-
-.hero-container + .heading-panel {
-  background: transparent;
-}
-
-:host(:empty) .heading-panel {
-  padding: 0;
-}
-
-.heading-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: 100%;
-  max-width: 100%;
-  flex: 1 auto;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.heading-title {
-  display: flex;
-  max-width: 100%;
-  flex-direction: row;
-  align-items: flex-start;
-  column-gap: calc(var(--space-unit) * 2);
-}
-
-::slotted([slot="title"]),
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
-  margin: 0;
-  font-family: "IBM Plex Serif", serif;
-  font-weight: var(--font-bd);
-}
-
-::slotted([slot="title"]) {
-  font-size: var(--app-header-title-font-size);
-  letter-spacing: var(--app-header-title-letter-spacing);
-  line-height: var(--app-header-title-lineheight);
-}
-
-.heading-stuck .heading-title > *,
-::slotted([slot="stucked-title"]) {
-  font-size: var(--app-header-typography-3-size);
-  letter-spacing: var(--app-header-typography-3-tracking);
-  line-height: var(--app-header-typography-3-lineheight);
-}
-
-:host(:not([menu-length="0"])) .heading-subtitle {
-  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));
-}
-
-::slotted([slot="top-subtitle"]),
-::slotted([slot="subtitle"]) {
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-size: 20px;
-  font-style: italic;
-  line-height: 26px;
-}
-
-::slotted([slot="subtitle"]) {
-  font-weight: 500;
-}
-
-::slotted([slot="top-subtitle"]) {
-  font-weight: 400;
-}
-
-.menu-container {
-  display: flex;
-  width: 100%;
-  flex: 1 auto;
-  flex-flow: row wrap;
-}
-
-:host([menu-length="0"]:not([enable-search])) .menu-container,
-.menu-container:empty {
-  display: none;
-}
-
-.menu-container ::slotted([open]) {
-  position: relative;
-  z-index: 3;
-}
-
-z-searchbar {
-  z-index: 0;
-  display: flex;
-  width: auto;
-  min-width: calc(var(--space-unit) * 32);
-  flex: 1 auto;
-  align-items: center;
-  margin-left: auto;
-}
-
-.heading-stuck {
-  position: fixed;
-  z-index: 20;
-  top: var(--app-header-top-offset);
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  animation: slide-stuck-heading-in 250ms ease-out;
-  background: var(--app-header-stucked-bg);
-  box-shadow: var(--shadow-2);
-  color: var(--app-header-stucked-text-color);
-}
-
-.heading-stuck-content {
-  display: flex;
-  max-width: var(--app-header-content-max-width);
-  align-items: center;
-  padding: var(--space-unit) var(--grid-margin);
-  margin: 0 auto;
-  column-gap: calc(var(--space-unit) * 2);
-}
-
-.heading-stuck .heading-title {
-  overflow: hidden;
-}
-
-.heading-stuck .heading-title > *,
-.heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.heading-stuck-content z-button {
-  margin-left: auto;
-}
-
-.drawer-trigger {
-  padding: 0;
-  border: 0;
-  margin: 0;
-  appearance: none;
-  background: none;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-}
-
-.drawer-trigger z-icon {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
-
-  fill: currentcolor;
-}
-
-/* Simulate the height of the first line of text,
-to correctly align drawer icon and search page button with the title */
-.heading-container :is(.drawer-trigger, z-button.search-page-button) {
-  display: flex;
-  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
-  align-items: center;
-}
-
-.heading-container z-button.search-page-button {
-  margin-left: auto;
-}
-
-.drawer-content {
-  display: none;
-}
-
-z-offcanvas[open] .drawer-content {
-  display: flex;
-  width: 100%;
-  flex: 1 auto;
-  flex-direction: column;
-  row-gap: calc(var(--space-unit) * 2.5);
-}
-
-z-offcanvas[open] .drawer-content ::slotted(z-menu) {
-  width: 100%;
-}
-
-.drawer-close {
-  --z-icon-width: var(--app-header-drawer-trigger-size);
-  --z-icon-height: var(--app-header-drawer-trigger-size);
-
-  padding: 0;
-  border: 0;
-  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);
-  appearance: none;
-  background: transparent;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-  fill: currentcolor;
-  font-size: inherit;
-  outline: none;
-}
-
-.drawer-close:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-.hero-container {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-:host([overlay]) .heading-panel .drawer-trigger z-icon,
-:host([overlay]) .heading-panel .heading-container,
-:host([overlay]) .heading-panel .menu-container {
-  color: var(--color-white);
-  fill: var(--color-white);
-}
-
-:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {
-  --z-menu-label-color: var(--color-white);
-}
-
-:host([overlay]) .hero-container::after {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--color-black);
-  content: "";
-  opacity: 0.5;
-}
-
-.hero-container img,
-.hero-container ::slotted(*) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-  -webkit-user-drag: none;
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-6-size);
-    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);
-  }
-
-  .heading-panel {
-    flex-flow: row wrap;
-    align-items: center;
-    padding-bottom: calc(var(--space-unit) * 2);
-  }
-
-  .heading-container {
-    margin-right: auto;
-  }
-
-  :host(:is([flow="offcanvas"], [menu-length="0"])) :is(.heading-container, .menu-container) {
-    width: auto;
-  }
-
-  :host(:not([flow="offcanvas"])) .heading-subtitle {
-    padding-left: 0;
-  }
-
-  .menu-container {
-    flex: initial;
-    align-items: center;
-  }
-
-  :host([menu-length="0"]) .menu-container:not(:empty) {
-    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
-  }
-
-  :host(:not([flow="offcanvas"])) .menu-container {
-    gap: var(--space-unit) calc(var(--space-unit) * 5);
-  }
-
-  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
-    display: none;
-  }
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-7-size);
-    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);
-  }
-
-  .heading-panel {
-    justify-content: flex-start;
-    padding-bottom: calc(var(--space-unit) * 3);
-  }
-
-  .heading-container,
-  .menu-container {
-    width: auto;
-  }
-
-  :host([flow="stack"]) .heading-panel {
-    flex-flow: column;
-    align-items: flex-start;
-  }
-
-  :host([flow="stack"]) .menu-container {
-    width: 100%;
-  }
-
-  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-panel {
-    row-gap: calc(var(--space-unit) * 3);
-  }
-
-  z-searchbar {
-    min-width: calc(var(--space-unit) * 45);
-    flex: initial;
-  }
-}
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  :host {
-    --app-header-title-font-size: var(--app-header-typography-9-size);
-    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);
-    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);
-  }
-}
-
-@keyframes slide-stuck-heading-in {
-  0% {
-    transform: translate3d(0, -100%, 0);
-  }
-
-  100% {
-    transform: none;
-  }
-}