@roadtrip/components 3.30.0 → 3.31.0

package/dist/collection/components/global-navigation-v2/global-navigation-v2.js

@@ -0,0 +1,231 @@
+import { Host, h } from "@stencil/core";
+import "./../../utils/polyfill";
+/**
+ * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer
+ */
+export class GlobalNavigationV2 {
+  constructor() {
+    this.selectedTab = undefined;
+  }
+  selectedTabChanged() {
+    if (this.selectedTab !== undefined) {
+      this.roadnavbarchanged.emit({
+        tab: this.selectedTab,
+      });
+      this.roadNavbarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
+  }
+  onNavbarChanged(ev) {
+    this.selectedTab = ev.detail.tab;
+  }
+  /** Toggles the compact attribute on <road-navbar-v2> */
+  toggleCompactMode() {
+    const navbar = this.host.querySelector('road-navbar-v2');
+    const toolbar = this.host.querySelector('road-toolbar-v2');
+    // Toggle "compact" attribute on <road-navbar-v2>
+    if (navbar) {
+      if (navbar.hasAttribute('compact')) {
+        navbar.removeAttribute('compact');
+      }
+      else {
+        navbar.setAttribute('compact', 'true');
+      }
+    }
+    else {
+      console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>');
+    }
+    // Replace class "toolbar" with "toolbar-compact" on <road-toolbar-v2>
+    if (toolbar) {
+      if (toolbar.classList.contains('toolbar-compact')) {
+        toolbar.classList.remove('toolbar-compact');
+        toolbar.classList.add('toolbar');
+      }
+      else {
+        toolbar.classList.remove('toolbar');
+        toolbar.classList.add('toolbar-compact');
+      }
+    }
+    else {
+      console.warn('<road-toolbar-v2> not found inside <road-global-navigation-v2>');
+    }
+  }
+  /** Toggles the "justify-content-center" class on the element with "compact-logo" */
+  toggleCompactLogoClass() {
+    const logoElement = this.host.querySelector('.compact-logo');
+    if (logoElement) {
+      if (logoElement.classList.contains('justify-content-center')) {
+        logoElement.classList.remove('justify-content-center');
+      }
+      else {
+        logoElement.classList.add('justify-content-center');
+      }
+    }
+    else {
+      console.warn('Element with class "compact-logo" not found inside <road-global-navigation-v2>');
+    }
+  }
+  /** Toggles the "rotate" attribute on the <road-icon> inside the <road-button> */
+  toggleIconRotation(button) {
+    const icon = button.querySelector('road-icon');
+    if (icon) {
+      if (icon.getAttribute('rotate') === '180') {
+        icon.removeAttribute('rotate');
+      }
+      else {
+        icon.setAttribute('rotate', '180');
+      }
+    }
+    else {
+      console.warn('<road-icon> not found inside <road-button>');
+    }
+  }
+  /** Toggles the "trigger" attribute on <road-tooltip> elements based on the presence of the "compact" attribute on <road-navbar-v2> */
+  toggleTooltips() {
+    const navbar = this.host.querySelector('road-navbar-v2');
+    if (navbar) {
+      const hasCompactAttribute = navbar.hasAttribute('compact');
+      const tooltips = navbar.querySelectorAll('road-tooltip');
+      if (tooltips.length > 0) {
+        // Mettre à jour l'attribut "trigger" en fonction de l'attribut "compact"
+        tooltips.forEach((tooltip) => {
+          if (hasCompactAttribute) {
+            tooltip.setAttribute('trigger', 'hover'); // Définir sur "hover" si "compact" est présent
+          }
+          else {
+            tooltip.setAttribute('trigger', 'focus'); // Définir sur "focus" si "compact" est absent
+          }
+        });
+      }
+      else {
+        console.warn('<road-tooltip> elements not found inside <road-navbar-v2>.');
+      }
+    }
+    else {
+      console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>.');
+    }
+  }
+  /** Toggles the compact mode and performs all related updates */
+  /** Handles click events on road-button or its children */
+  onButtonClick(event) {
+    let target = event.target;
+    // Traverse up the DOM tree to find the parent road-button
+    while (target && target.tagName !== 'ROAD-BUTTON' && target !== document.body) {
+      target = target.parentElement;
+    }
+    if ((target === null || target === void 0 ? void 0 : target.tagName) === 'ROAD-BUTTON' && target.classList.contains('compact-button')) {
+      this.toggleCompactMode();
+      this.toggleIconRotation(target);
+      this.toggleCompactLogoClass();
+      this.toggleTooltips();
+    }
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    return (h(Host, { role: "application" }, h("slot", null)));
+  }
+  static get is() { return "road-global-navigation-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["global-navigation-v2.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["global-navigation-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The selected tab component"
+        },
+        "attribute": "selected-tab",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadnavbarchanged",
+        "name": "roadnavbarchanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "roadNavbarChanged",
+        "name": "roadNavbarChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedTab",
+        "methodName": "selectedTabChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "roadNavbarItemClick",
+        "method": "onNavbarChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadnavbaritemclick",
+        "method": "onNavbarChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "onButtonClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=global-navigation-v2.js.map

package/dist/collection/components/global-navigation-v2/global-navigation-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-navigation-v2.js","sourceRoot":"","sources":["../../../src/components/global-navigation-v2/global-navigation-v2.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot navbar - it should be road-navbar-item elements. Max 5 items on Mobile or add them to the drawer\n */\n@Component({\n  tag: 'road-global-navigation-v2',\n  styleUrl: 'global-navigation-v2.css',\n  shadow: true,\n})\nexport class GlobalNavigationV2 {\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadnavbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadNavbarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadnavbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarChanged!: EventEmitter;\n\n  /** Root element of the component */\n  @Element() host!: HTMLElement;\n\n  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  /** Toggles the compact attribute on <road-navbar-v2> */\n  private toggleCompactMode() {\n    const navbar = this.host.querySelector('road-navbar-v2');\n    const toolbar = this.host.querySelector('road-toolbar-v2');\n\n    // Toggle \"compact\" attribute on <road-navbar-v2>\n    if (navbar) {\n      if (navbar.hasAttribute('compact')) {\n        navbar.removeAttribute('compact');\n      } else {\n        navbar.setAttribute('compact', 'true');\n      }\n    } else {\n      console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>');\n    }\n\n    // Replace class \"toolbar\" with \"toolbar-compact\" on <road-toolbar-v2>\n    if (toolbar) {\n      if (toolbar.classList.contains('toolbar-compact')) {\n        toolbar.classList.remove('toolbar-compact');\n        toolbar.classList.add('toolbar');\n      } else {\n        toolbar.classList.remove('toolbar');\n        toolbar.classList.add('toolbar-compact');\n      }\n    } else {\n      console.warn('<road-toolbar-v2> not found inside <road-global-navigation-v2>');\n    }\n  }\n\n  /** Toggles the \"justify-content-center\" class on the element with \"compact-logo\" */\n  private toggleCompactLogoClass() {\n    const logoElement = this.host.querySelector('.compact-logo');\n    if (logoElement) {\n      if (logoElement.classList.contains('justify-content-center')) {\n        logoElement.classList.remove('justify-content-center');\n      } else {\n        logoElement.classList.add('justify-content-center');\n      }\n    } else {\n      console.warn('Element with class \"compact-logo\" not found inside <road-global-navigation-v2>');\n    }\n  }\n\n  /** Toggles the \"rotate\" attribute on the <road-icon> inside the <road-button> */\n  private toggleIconRotation(button: HTMLElement) {\n    const icon = button.querySelector('road-icon');\n    if (icon) {\n      if (icon.getAttribute('rotate') === '180') {\n        icon.removeAttribute('rotate');\n      } else {\n        icon.setAttribute('rotate', '180');\n      }\n    } else {\n      console.warn('<road-icon> not found inside <road-button>');\n    }\n  }\n\n/** Toggles the \"trigger\" attribute on <road-tooltip> elements based on the presence of the \"compact\" attribute on <road-navbar-v2> */\nprivate toggleTooltips() {\n  const navbar = this.host.querySelector('road-navbar-v2');\n  if (navbar) {\n    const hasCompactAttribute = navbar.hasAttribute('compact');\n    const tooltips = navbar.querySelectorAll('road-tooltip');\n\n    if (tooltips.length > 0) {\n      // Mettre à jour l'attribut \"trigger\" en fonction de l'attribut \"compact\"\n      tooltips.forEach((tooltip) => {\n        if (hasCompactAttribute) {\n          tooltip.setAttribute('trigger', 'hover'); // Définir sur \"hover\" si \"compact\" est présent\n        } else {\n          tooltip.setAttribute('trigger', 'focus'); // Définir sur \"focus\" si \"compact\" est absent\n        }\n      });\n    } else {\n      console.warn('<road-tooltip> elements not found inside <road-navbar-v2>.');\n    }\n  } else {\n    console.warn('<road-navbar-v2> not found inside <road-global-navigation-v2>.');\n  }\n}\n\n\n\n\n\n\n\n  \n    /** Toggles the compact mode and performs all related updates */\n\n  /** Handles click events on road-button or its children */\n  @Listen('click', { target: 'window' })\n  onButtonClick(event: MouseEvent) {\n    let target = event.target as HTMLElement;\n\n    // Traverse up the DOM tree to find the parent road-button\n    while (target && target.tagName !== 'ROAD-BUTTON' && target !== document.body) {\n      target = target.parentElement as HTMLElement;\n    }\n\n    if (target?.tagName === 'ROAD-BUTTON' && target.classList.contains('compact-button')) {\n      this.toggleCompactMode();\n      this.toggleIconRotation(target);\n      this.toggleCompactLogoClass();\n      this.toggleTooltips();\n    }\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    return (\n      <Host role=\"application\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}