@roadtrip/components 3.30.0 → 3.31.0

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

@@ -0,0 +1,381 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+export default {
+  title: 'Navigation/NavBarV2',
+  component: 'road-navbar-v2',
+  subcomponents: {
+    'road-navbar-item-v2': 'road-navbar-item-v2',
+    'road-tooltip': 'road-tooltip',
+  },
+  parameters: {
+    actions: {
+      handles: ['roadnavbaritemclick'],
+    },
+    backgrounds: {
+      default: 'grey',
+    },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    ' ': {
+      control: 'text',
+    },
+    'selected-tab': {
+      control: 'text',
+    },
+    compact: {
+      control: 'boolean',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '10' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    compact: null,
+    ' ': `
+    <div class="d-flex d-xl-block flex-grow-2 compact-container">
+        <a href="#" class="align-self-auto d-none mb-0 py-12 w-full d-xl-flex compact-logo">
+          <road-icon name="pass-maintain-logo-solid-color"></road-icon> <road-label class="font-weight-bold h6 mb-0 ml-8 d-xl-compact-none">App Name</road-label>
+        </a>
+        <hr class="w-full d-none d-xl-block mb-16"/>
+
+        <div class="text-left d-none d-xl-flex align-items-center mb-12">
+          <road-avatar slot="start" class="mr-16 mr-xl-compact-none">  
+            <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+          </road-avatar>
+            <road-label class="d-xl-compact-none">
+            <p class="h8 mb-4">First and last name</p>
+            <p class="text-medium text-truncate m-0 text-gray">Poste</p>
+          </road-label>
+        </div>
+        <road-button expand color="destructive" outline="true" size="sm" class="mb-0 d-none d-xl-flex m-auto-xl-compact w-full w-xl-revert-compact" icon-only>
+         <road-icon name="log-out-outline" aria-hidden="true"></road-icon>
+          <road-label class="d-xl-compact-none ml-xl-8">Se déconnecter</road-label>
+        </road-button>
+
+    <hr class="w-full d-none d-xl-block my-16"/>
+    
+
+    <road-drawer is-open="false" position="left" drawer-width="480" drawer-title="Edit profil" class="drawer-profil" has-close-icon="true">
+        <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+          <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+        </road-avatar>
+          <road-label class="mb-24">
+          <p class="h8 mb-4">First and last name</p>
+          <p class="text-medium text-truncate m-0">Email</p>
+        </road-label>
+    
+        <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+          <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+        </div>
+      </road-drawer>
+        
+        <script>
+        document.querySelector('.edit-profil').addEventListener('click', () => {
+          document.querySelector('.drawer-profil').setAttribute('is-open', 'true');
+        });
+        </script>
+
+    
+        <road-navbar-item-v2 tab="tab-home" role="tabpanel">
+        <road-tooltip content="Home" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="navigation-home-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Home</road-label>
+        </road-tooltip>
+        </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-search" role="tabpanel">
+        <road-tooltip content="Search" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="search" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Search</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-catalog" role="tabpanel">
+        <road-tooltip content="Print" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="print-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Print</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-notification" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Notifications" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="alert-notification-outline" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Notifications</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-scan" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="scan" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Scan</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-catalogue" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="file-catalog" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Catalogue</road-label>
+        </road-tooltip>
+      </road-navbar-item-v2>
+
+
+      <road-navbar-item-v2 tab="tab-diag" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Diagnostic" position="right" trigger="hover" contentalign="center" class="d-block d-xl-flex align-items-center">
+          <road-icon name="Diagnostic" role="img" class="mr-xl-12"></road-icon>
+          <road-label class="font-weight-bold d-xl-compact-none">Diagnostic</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+      </div>
+
+
+      <div class="text-gray">
+
+      <road-navbar-item-v2 tab="tab-help" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Help" position="right" trigger="hover" contentalign="center" class="d-none d-xl-flex align-items-center">
+          <road-icon name="alert-question-outline" role="img" class="mr-xl-12"></road-icon><road-label class="font-weight-bold d-xl-compact-none">Help</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+      <road-navbar-item-v2 tab="tab-feedback" class="d-none d-xl-flex" role="tabpanel">
+        <road-tooltip content="Feedback" position="right" trigger="hover" contentalign="center" class="d-none d-xl-flex align-items-center">
+          <road-icon name="speak-advice-outline" role="img" class="mr-xl-12"></road-icon></road-icon><road-label class="font-weight-bold d-xl-compact-none">Feedback</road-label>
+        </road-toolip>
+      </road-navbar-item-v2>
+
+
+
+      
+  </div>
+
+  <road-navbar-item-v2 tab="tab-menu" class="d-block d-xl-none tab-menu">
+        <road-icon name="navigation-menu" role="img"></road-icon>
+        <road-label>Menu</road-label>
+      </road-navbar-item-v2>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" class="d-xl-none drawer-menu">
+  <div class="p-16 pt-0">
+ <div class="text-left d-flex align-items-center">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0 text-gray">Poste</p>
+    </road-label>
+  </div>
+
+  <road-button expand color="destructive" outline="true" size="sm" class="d-flex  mb-16 mt-12">
+    <road-icon slot="start" name="log-out-outline" aria-hidden="true"></road-icon>
+    Se déconnecter
+  </road-button>
+
+  <road-item class="text-left bg-light profil" tabindex="0">
+  <road-label>
+    <span class="text-content mb-8 d-flex align-items-center">
+      <road-icon size="sm" class="mr-8" name="shop-outline" role="img"></road-icon>
+      Centre
+    </span>
+    <p class="h8 mb-4">054 Norauto Chambéry
+    <p class="text-content mb-0">Code collaborateur 18</p>
+  
+  </road-label>
+    <road-icon slot="end" name="navigation-chevron" size="lg" class="ml-16" role="img"></road-icon>
+  </road-item>
+
+  <road-input-group slot="secondary" class="d-block d-xl-none my-12">
+    <road-input input-id="cardNumber" sizes="lg" label="Rechercher dans le catalogue" class="mb-0"></road-input>
+    <label slot="append" for="cardNumber">
+      <road-icon name="search" aria-hidden="true" role="img"></road-icon>
+    </label>
+  </road-input-group>
+
+  <hr class="my-16">
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  <road-item class="bg-white border-0" button="true">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+  <road-item class="bg-white border-left-0 border-right-0 border-bottom-0 border-top" button="true">
+    <road-icon name="alert-question-outline" role="img"></road-icon>Help
+  </road-item>
+</div>
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+</road-navbar-v2>
+
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
+  },
+};
+
+const Template = (args) => html`
+<road-navbar-v2 selected-tab="${ifDefined(args['selected-tab'])}" compact="${ifDefined(args.compact)}">
+  ${unsafeHTML(args[' '])}
+</road-navbar-v2>
+`;
+
+export const Playground = Template.bind({});
+
+export const Selected = Template.bind({});
+Selected.args = {
+  ' ': `
+  <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+    <road-list slot="list">
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="edit-outline" size="md" aria-hidden="true"></road-icon>
+        <road-label style="font-size: 0.75rem">
+          Edit profile
+        </road-label>
+      </road-item>
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="log-out-outline" size="md" aria-hidden="true"></road-icon>
+        <road-label style="font-size: 0.75rem">
+          Log out
+        </road-label>
+      </road-item>
+    </road-list>
+    <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+  </road-profil-dropdown>
+  
+  <road-navbar-item-v2 tab="tab-home" selected="true" aria-label="Home" role="menuitem">
+    <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
+      <road-icon name="navigation-home-outline" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold">Home</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-search" aria-label="Search" role="menuitem">
+    <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
+      <road-icon name="search" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold">Search</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-print" role="menuitem">
+    <road-tooltip content="Print" position="right" trigger="hover" contentalign="center">
+      <road-icon name="print-outline" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold">Print</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-catalogue" class="d-none d-xl-flex" role="menuitem">
+    <road-tooltip content="Catalogue" position="right" trigger="hover" contentalign="center">
+      <road-icon name="file-catalog" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold">Catalogue</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+  
+  <road-navbar-item-v2 tab="tab-scan" class="d-none d-xl-flex" aria-label="Scan" role="menuitem">
+    <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
+      <road-icon name="scan" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold">Scan</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>`,
+};
+
+export const withNotifications = Template.bind({});
+withNotifications.args = {
+  ' ': `
+  <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+    <road-list slot="list">
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="edit-outline" size="md" aria-hidden="true"></road-icon>
+        <road-label style="font-size: 0.75rem">
+          Edit profile
+        </road-label>
+      </road-item>
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="log-out-outline" size="md" aria-hidden="true"></road-icon>
+        <road-label style="font-size: 0.75rem">
+          Log out
+        </road-label>
+      </road-item>
+    </road-list>
+    <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+  </road-profil-dropdown>
+
+  <road-navbar-item-v2 tab="tab-home" selected="true" aria-label="Home" role="menuitem">
+    <road-tooltip content="Home" position="right" trigger="hover" contentalign="center">
+      <road-icon name="navigation-home-outline" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold" style="font-size:0.75rem;">Home</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-search" aria-label="Search" role="menuitem">
+    <road-tooltip content="Search" position="right" trigger="hover" contentalign="center">
+      <road-icon name="search" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold" style="font-size:0.75rem;">Search</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-catalog" aria-label="Catalog" role="menuitem">
+    <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
+      <road-icon name="print-outline" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold" style="font-size:0.75rem;">Scan</road-label>
+    </road-tooltip>
+    <road-badge>3</road-badge>
+  </road-navbar-item-v2>
+
+  <road-navbar-item-v2 tab="tab-catalogue" class="d-none d-xl-flex" aria-label="Catalog" role="menuitem">
+    <road-tooltip content="Catalog" position="right" trigger="hover" contentalign="center">
+      <road-icon name="file-catalog" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold" style="font-size:0.75rem;">Catalog</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>
+  
+  <road-navbar-item-v2 tab="tab-scan" class="d-none d-xl-flex" aria-label="Scan" role="menuitem">
+    <road-tooltip content="Scan" position="right" trigger="hover" contentalign="center">
+      <road-icon name="scan" aria-hidden="true"></road-icon>
+      <road-label class="font-weight-bold" style="font-size:0.75rem;">Scan</road-label>
+    </road-tooltip>
+  </road-navbar-item-v2>`,
+};

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

@@ -0,0 +1,216 @@
+/*
+ * Toolbar
+ *
+ * Index
+ * - Container
+ * - Content
+ * - Buttons
+ * - Colors
+ */
+
+:host {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 72px;
+  contain: content;
+  padding: var(--road-spacing-04);
+  color: var(--road-on-surface);
+  background: var(--road-surface);
+  border-bottom: 1px solid var(--road-outline-weak);
+}
+
+/* CONTAINER
+ -------------------- */
+
+.toolbar-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 3.73rem;
+  contain: content;
+  overflow: hidden;
+}
+
+.toolbar-container-content-left {
+  display: flex;
+  flex: 1;
+}
+
+.toolbar-container-content-right {
+  display: none;
+}
+
+
+@media (min-width: 1200px) {
+
+  .toolbar-container-content-right {
+    display: flex;
+    flex: auto;
+  }
+
+}
+
+
+
+
+/* TOOLBAR TITLE CONTAINER
+ -------------------- */
+
+.toolbar-title-container {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+/* TOOLBAR TITLE
+ -------------------- */
+
+.toolbar-title {
+  display: block;
+  width: 100%;
+  font-size: var(--road-font-size-18);
+  font-weight: 700;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+@media (min-width: 1200px) {
+
+  :host(.toolbar) {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 260px);
+    justify-self: flex-end;
+    height: 80px;
+    padding: var(--road-spacing-05);
+  }
+
+  :host(.toolbar-compact) {
+    display: flex;
+    width: calc(100% - 5.5rem);
+    justify-self: flex-end;
+    height: 80px;
+    padding: var(--road-spacing-05);
+  }
+
+  .toolbar-title {
+    font-size: var(--road-font-size-21);
+    text-align: center;
+  }
+}
+
+/* CONTENT
+ -------------------- */
+
+.toolbar-content {
+  display: none;
+}
+
+@media (min-width: 1200px) {
+
+  .toolbar-content {
+    display: flex;
+    flex: 2;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+}
+
+/* TOOLBAR LOGO
+ -------------------- */
+
+.toolbar .logo {
+  position: relative;
+  z-index: 1;
+  padding-left: 1rem;
+  margin-bottom: 0;
+  font-size: var(--road-font-size-14);
+  font-weight: 400;
+}
+
+.toolbar .app-name {
+  margin-left: 1rem;
+  font-size: var(--road-font-size-20);
+  font-weight: 700;
+}
+
+/* BUTTONS
+ -------------------- */
+
+::slotted([slot="start"]) {
+  --margin-bottom: 0;
+  --padding-start: 0.5rem;
+  --padding-end: 0.5rem;
+
+  align-self: auto;
+  margin-right: var(--road-spacing-05);
+  font-size: var(--road-font-size-14);
+  font-weight: 400;
+  border-right: 1px solid var(--road-outline-weak);
+  border-radius: 0;
+}
+
+::slotted([slot="primary"]) {
+  --margin-bottom: 0;
+  --padding-start: 0.5rem;
+  --padding-end: 0.5rem;
+
+  flex: 1;
+  align-self: auto;
+}
+
+::slotted([slot="end"]) {
+  --margin-bottom: 0;
+  --padding-start: 0.5rem;
+  --padding-end: 0.5rem;
+
+  flex: 1;
+  padding-left: var(--road-spacing-03);
+  margin-left: var(--road-spacing-03);
+  font-size: var(--road-font-size-14);
+  font-weight: 400;
+  border-left: 1px solid var(--road-outline-weak);
+  border-radius: 0;
+}
+
+::slotted([slot="secondary"]) {
+  --margin-bottom: 0;
+  --padding-start: 0.5rem;
+  --padding-end: 0.5rem;
+
+  flex: 1;
+  padding-left: var(--road-spacing-03);
+  margin-left: var(--road-spacing-03);
+  font-size: var(--road-font-size-14);
+  font-weight: 400;
+  border-radius: 0;
+}
+
+/* COLORS
+ -------------------- */
+
+:host(.toolbar-primary) {
+  color: var(--road-on-header-surface);
+  background: var(--road-header-surface);
+}
+
+:host(.toolbar-secondary) {
+  color: var(--road-on-secondary);
+  background: var(--road-secondary);
+}

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

@@ -0,0 +1,27 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ * @slot - Content is placed between the named slots if provided without a slot.
+ * @slot start - Content is placed to the left of the toolbar text and left to primery slot if provided.
+ * @slot primary - Content is placed to the left of the toolbar text.
+ * @slot secondary - Content is placed to the right of the toolbar text.
+ * @slot end - Content is placed to the right of the toolbar text and right to secondary slot if provided.
+ */
+export class ToolbarV2 {
+  render() {
+    return (h(Host, { class: "toolbar" }, h("div", { class: "toolbar-container" }, h("div", { class: "toolbar-container-content-left" }, h("slot", { name: "start" }), h("slot", { name: "primary" })), h("div", { class: "toolbar-content" }, h("slot", null)), h("div", { class: "toolbar-container-content-right" }, h("slot", { name: "secondary" }), h("slot", { name: "end" })))));
+  }
+  static get is() { return "road-toolbar-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toolbar-v2.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toolbar-v2.css"]
+    };
+  }
+}
+//# sourceMappingURL=toolbar-v2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-v2.js","sourceRoot":"","sources":["../../../src/components/toolbar-v2/toolbar-v2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAOH,MAAM,OAAO,SAAS;EAGpB,MAAM;IAEJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,SAAS;MACnB,WAAK,KAAK,EAAC,mBAAmB;QAC5B,WAAK,KAAK,EAAC,gCAAgC;UACzC,YAAM,IAAI,EAAC,OAAO,GAAE;UACpB,YAAM,IAAI,EAAC,SAAS,GAAE,CAClB;QACN,WAAK,KAAK,EAAC,iBAAiB;UAC1B,eAAO,CACH;QACN,WAAK,KAAK,EAAC,iCAAiC;UAC1C,YAAM,IAAI,EAAC,WAAW,GAAE;UACxB,YAAM,IAAI,EAAC,KAAK,GAAE,CACd,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n *\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot start - Content is placed to the left of the toolbar text and left to primery slot if provided.\n * @slot primary - Content is placed to the left of the toolbar text.\n * @slot secondary - Content is placed to the right of the toolbar text.\n * @slot end - Content is placed to the right of the toolbar text and right to secondary slot if provided.\n */\n\n@Component({\n  tag: 'road-toolbar-v2',\n  styleUrl: 'toolbar-v2.css',\n  shadow: true,\n})\nexport class ToolbarV2 {\n\n\n  render() {\n\n    return (\n      <Host class=\"toolbar\">\n        <div class=\"toolbar-container\">\n          <div class=\"toolbar-container-content-left\">\n            <slot name=\"start\"/>\n            <slot name=\"primary\"/>\n          </div>\n          <div class=\"toolbar-content\">\n            <slot/>\n          </div>\n          <div class=\"toolbar-container-content-right\">\n            <slot name=\"secondary\"/>\n            <slot name=\"end\"/>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}