@roadtrip/components 3.30.0 → 3.31.0

package/dist/collection/components/navbar-item-v2/navbar-item-v2.js

@@ -0,0 +1,268 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot  - Content of the item, it should be road-icon and road-label elements.
+ *
+ * @part native - The native HTML anchor element that wraps all child elements.
+ */
+export class NavbarItem {
+  constructor() {
+    this.onKeyUp = (ev) => {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        this.selectTab(ev);
+      }
+    };
+    this.onClick = (ev) => {
+      this.selectTab(ev);
+    };
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.rel = undefined;
+    this.selected = false;
+    this.tab = undefined;
+    this.target = undefined;
+  }
+  onNavbarChanged(ev) {
+    this.selected = this.tab === ev.detail.tab;
+  }
+  /**
+   * Watch for changes to `selected` and move focus to this element if `selected` is true.
+   */
+  handleSelectedChange(newValue) {
+    if (newValue) {
+      this.el.focus();
+    }
+  }
+  selectTab(ev) {
+    if (this.tab !== undefined) {
+      if (!this.disabled) {
+        this.roadnavbaritemclick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
+        this.roadNavbarItemClick.emit({
+          tab: this.tab,
+          href: this.href,
+          selected: this.selected,
+        });
+      }
+      if (this.href === undefined) {
+        ev.preventDefault();
+      }
+    }
+  }
+  render() {
+    const { href, rel, target, selected, tab, disabled } = this;
+    const attrs = {
+      download: this.download,
+      href,
+      rel,
+      target,
+    };
+    return (h(Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "menuitem", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
+        'navbar-item': true,
+        'tab-selected': selected,
+        'tab-disabled': disabled,
+      } }, h("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), h("span", { class: "button-inner" }, h("slot", null)))));
+  }
+  static get is() { return "road-navbar-item-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["navbar-item-v2.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["navbar-item-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user cannot interact with the tab button."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
+        },
+        "attribute": "download",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The selected tab component"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A tab id must be provided for each `road-tab`. It's used internally to reference\nthe selected tab."
+        },
+        "attribute": "tab",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
+        },
+        "attribute": "target",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "roadnavbaritemclick",
+        "name": "roadnavbaritemclick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Emitted when the tab bar is clicked"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "roadNavbarItemClick",
+        "name": "roadNavbarItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "handleSelectedChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "roadNavbarChanged",
+        "method": "onNavbarChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "roadnavbarchanged",
+        "method": "onNavbarChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=navbar-item-v2.js.map

package/dist/collection/components/navbar-item-v2/navbar-item-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-item-v2.js","sourceRoot":"","sources":["../../../src/components/navbar-item-v2/navbar-item-v2.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n/**\n * @slot  - Content of the item, it should be road-icon and road-label elements.\n *\n * @part native - The native HTML anchor element that wraps all child elements.\n */\n\n@Component({\n  tag: 'road-navbar-item-v2',\n  styleUrl: 'navbar-item-v2.css',\n  shadow: true,\n})\nexport class NavbarItem {\n\n  @Element() el!: HTMLRoadNavbarItemElement;\n\n  /**\n   * If `true`, the user cannot interact with the tab button.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * This attribute instructs browsers to download a URL instead of navigating to\n   * it, so the user will be prompted to save it as a local file. If the attribute\n   * has a value, it is used as the pre-filled file name in the Save prompt\n   * (the user can still change the file name if they want).\n   */\n  @Prop() download: string | undefined;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n   */\n  @Prop() rel: string | undefined;\n\n  /**\n   * The selected tab component\n   */\n  @Prop({ mutable: true }) selected = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab.\n   */\n  @Prop() tab?: string;\n\n  /**\n   * Specifies where to display the linked URL.\n   * Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n   */\n  @Prop() target: string | undefined;\n\n  /**\n   * Emitted when the tab bar is clicked\n   * @internal\n   */\n  @Event() roadnavbaritemclick!: EventEmitter;\n  /** @internal */\n  @Event() roadNavbarItemClick!: EventEmitter;\n\n  @Listen('roadNavbarChanged', { target: 'window' })\n  @Listen('roadnavbarchanged', { target: 'window' })\n  onNavbarChanged(ev: CustomEvent) {\n    this.selected = this.tab === ev.detail.tab;\n  }\n\n  /**\n   * Watch for changes to `selected` and move focus to this element if `selected` is true.\n   */\n  @Watch('selected')\n  handleSelectedChange(newValue: boolean) {\n    if (newValue) {\n      this.el.focus();\n    }\n  }\n\n  private selectTab(ev: Event | KeyboardEvent) {\n    if (this.tab !== undefined) {\n      if (!this.disabled) {\n        this.roadnavbaritemclick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n        this.roadNavbarItemClick.emit({\n          tab: this.tab,\n          href: this.href,\n          selected: this.selected,\n        });\n      }\n      if(this.href === undefined) {\n        ev.preventDefault();\n      }\n    }\n  }\n\n  private onKeyUp = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.selectTab(ev);\n    }\n  };\n\n  private onClick = (ev: Event) => {\n    this.selectTab(ev);\n  };\n\n  render() {\n    const { href, rel, target, selected, tab, disabled } = this;\n    const attrs = {\n      download: this.download,\n      href,\n      rel,\n      target,\n    };\n\n    return (\n      <Host\n        onClick={this.onClick}\n        onKeyup={this.onKeyUp}\n        role=\"menuitem\"\n        tabindex=\"0\"\n        aria-selected={selected ? 'true' : null}\n        id={tab !== undefined ? `navbar-item-${tab}` : null}\n        disabled={disabled}\n        class={{\n          'navbar-item': true,\n          'tab-selected': selected,\n          'tab-disabled': disabled,\n        }}\n      >\n        <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n          <span class=\"button-inner\">\n            <slot/>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/navbar-v2/navbar-v2.css

@@ -0,0 +1,113 @@
+/*
+ * Navbar
+ *
+ */
+
+/**
+ * @prop --z-index: The z-index of the Navbar.
+ */
+
+:host {
+  --z-index: 3;
+
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: var(--z-index);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 5.125rem;
+  padding-left: 0;
+  margin: 0;
+  text-align: center;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: var(--road-surface);
+  border-top: 1px solid var(--road-outline-weak);
+}
+
+@media (max-width: 576px) {
+
+  :host {
+    overflow-x: auto;
+  }
+}
+
+@media (min-width: 1200px) {
+
+  :host {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 260px;
+    height: 100%;
+    padding: var(--road-spacing-05);
+    text-align: left;
+    border-top: 0;
+    border-right: 1px solid var(--road-outline-weak);
+    justify-content: space-between;
+    height: 100%;
+  }
+}
+
+
+/**
+ * Button save drawer.
+ */
+
+::slotted(.drawer-button-save) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+.button-native {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--padding-end) var(--padding-end) var(--padding-start) 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  white-space: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+
+/**
+ * Compact
+ */
+
+@media (min-width: 1200px) {
+
+  :host(.compact){
+    max-width: 5.5rem;
+  }
+
+  .compact ::slotted(.compact-container){
+    max-width: 3.5rem;
+  }
+
+  .compact ::slotted(.compact-container) .compact-logo{
+    justify-content: center;
+  }
+
+}

package/dist/collection/components/navbar-v2/navbar-v2.js

@@ -0,0 +1,143 @@
+import { Host, h } from "@stencil/core";
+import "./../../utils/polyfill";
+/**
+ * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile
+ */
+export class NavbarV2 {
+  constructor() {
+    this.compact = false;
+    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;
+  }
+  componentWillLoad() {
+    this.selectedTabChanged();
+  }
+  render() {
+    const compactClass = this.compact ? 'compact' : '';
+    return (h(Host, { role: "menubar", class: `${compactClass}` }, h("slot", null)));
+  }
+  static get is() { return "road-navbar-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["navbar-v2.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["navbar-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` for a compact navbar."
+        },
+        "attribute": "compact",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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 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
+      }];
+  }
+}
+//# sourceMappingURL=navbar-v2.js.map

package/dist/collection/components/navbar-v2/navbar-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar-v2.js","sourceRoot":"","sources":["../../../src/components/navbar-v2/navbar-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,QAAQ;;mBAKyB,KAAK;;;EAOjD,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;EACH,CAAC;EASD,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;EACnC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IAEJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnD,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,GAAG,YAAY,EAAE;MAExB,eAAO,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile\n */\n\n@Component({\n  tag: 'road-navbar-v2',\n  styleUrl: 'navbar-v2.css',\n  shadow: true,\n})\nexport class NavbarV2 {\n\n  /**\n   * Set to `true` for a compact navbar.\n   */\n  @Prop({ reflect: true }) compact: boolean = false;\n\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  @Listen('roadNavbarItemClick')\n  @Listen('roadnavbaritemclick')\n  onNavbarChanged(ev: CustomEvent) {\n    this.selectedTab = ev.detail.tab;\n  }\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n\n    const compactClass = this.compact ? 'compact' : '';\n\n    return (\n      <Host\n        role=\"menubar\"\n        class={`${compactClass}`}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n\n}\n"]}