@vandeurenglenn/lite-elements 0.3.18

package/exports/bundle/demo-shell.js

@@ -0,0 +1,540 @@
+import{_ as t,a as e,e as o}from"./custom-element-c2e883ba.js";import{j as s,v as i,D as m}from"./property-58e28172.js";import{t as a}from"./query-73dacde5.js";import"./demo-icons.js";import"./section.js";import"./card.js";import"./theme.js";import"./divider.js";import"./button.js";import"./banner.js";import"./selector.js";import"./pages.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./section2.js";import"./drawer-layout.js";import"./top-app-bar-e6e33a9e.js";import"./icon.js";import"./typography.js";import"./pane.js";import"./supporting-pane.js";import"./tabs.js";import"./root.js";import"./dialog.js";import"./icon-set.js";import"./list-item.js";import"./menu.js";import"./icon-button.js";import"./dropdown-menu.js";import"./dropdown.js";import"./toggle.js";import"./toggle-button.js";import"./time-picker.js";import"./code.js";import"./elevation.js";import"./it-d4d177bf.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./index-3c006227.js";import"./tab.js";import"./input.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,g=[],b=[],y=[],w=[];return class extends d{static{u=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a("custom-selector")],r=[a("custom-pages")],t(this,null,n,{kind:"accessor",name:"selector",static:!1,private:!1,access:{has:t=>"selector"in t,get:t=>t.selector,set:(t,e)=>{t.selector=e}},metadata:e},g,b),t(this,null,r,{kind:"accessor",name:"pages",static:!1,private:!1,access:{has:t=>"pages"in t,get:t=>t.pages,set:(t,e)=>{t.pages=e}},metadata:e},y,w),t(null,c={value:u},l,{kind:"class",name:u.name,metadata:e},null,p),u=c.value,e&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,g,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,b),e(this,y,void 0));get pages(){return this.#e}set pages(t){this.#e=t}connectedCallback(){this.selector.addEventListener("selected",(async({detail:t})=>{document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:!1}})),this.pages.select(t),localStorage.setItem("last-selected",t)}));const t=localStorage.getItem("last-selected");t&&(customElements.get("custom-serlector")?this.selector.select(t):(this.selector.select(t),this.pages.select(t)))}static styles=[s`
+      custom-drawer-layout {
+        height: 100%;
+        width: 100%;
+        inset: 0;
+
+        background: var(--md-sys-color-background, #fff);
+        position: absolute;
+        display: flex;
+      }
+      .demo-container {
+        height: 100%;
+        width: 100%;
+      }
+
+      flex-column {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      .demo-container section {
+        align-items: center;
+        justify-content: center;
+      }
+
+      [non-interactive] {
+        pointer-events: none;
+      }
+
+      h4 {
+        margin: 0;
+        padding-top: 16px;
+        padding-bottom: 12px;
+      }
+
+      custom-drawer custom-divider {
+        margin-top: 16px;
+      }
+
+      flex-row:not([slot='top-app-bar-end']) {
+        width: 100%;
+      }
+    `];render(){return i`
+      <custom-theme></custom-theme>
+      <demo-icons></demo-icons>
+
+      <!-- <custom-root> -->
+      <custom-drawer-layout class="demo-container">
+        <span slot="drawer-headline"> menu </span>
+
+        <flex-column slot="drawer-content">
+          <custom-selector attr-for-selected="route" default-selected="banner">
+            <custom-drawer-item route="banner">banner</custom-drawer-item>
+            <custom-drawer-item route="dialog">dialog</custom-drawer-item>
+            <custom-drawer-item route="divider">divider</custom-drawer-item>
+            <custom-drawer-item route="buttons">buttons</custom-drawer-item>
+            <custom-drawer-item route="cards">cards</custom-drawer-item>
+            <custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
+            <custom-drawer-item route="typography">typography</custom-drawer-item>
+            <custom-drawer-item route="drawer">drawer</custom-drawer-item>
+            <custom-drawer-item route="pane">pane</custom-drawer-item>
+            <custom-drawer-item route="supporting-pane">supporting-pane</custom-drawer-item>
+            <custom-drawer-item route="tabs">tabs</custom-drawer-item>
+            <custom-drawer-item route="menu">menu</custom-drawer-item>
+            <custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
+            <custom-drawer-item route="list-item">list-item</custom-drawer-item>
+            <custom-drawer-item route="toggle">toggle</custom-drawer-item>
+            <custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
+            <custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
+          </custom-selector>
+        </flex-column>
+
+        <span slot="top-app-bar-title">custom-elements</span>
+
+        <flex-row slot="top-app-bar-end">
+          <custom-theme-mode></custom-theme-mode>
+          <custom-button>
+            <custom-icon slot="icon">more_vert</custom-icon>
+          </custom-button>
+        </flex-row>
+
+        <flex-column>
+          <custom-pages attr-for-selected="route" default-selected="banner">
+            <demo-section route="banner">
+              <custom-banner>Banner</custom-banner>
+            </demo-section>
+
+            <demo-section route="divider">
+              <custom-divider></custom-divider>
+              <custom-divider inset></custom-divider>
+              <custom-divider middle-inset></custom-divider>
+            </demo-section>
+
+            <demo-section route="cards">
+              <custom-card type="filled">
+                <span slot="headline">filled</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
+                  eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
+                  praesentium veritatis facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="filled" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+
+              <custom-card type="elevated">
+                <span slot="headline">elevated</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="elevated" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+
+              <custom-card type="outlined">
+                <span slot="headline">outlined</span>
+                <span slot="subline">subline</span>
+                <p slot="supportingText">
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
+                  magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
+                  facilis et quasi?
+                </p>
+                <flex-row slot="actions">
+                  <custom-button type="outlined" label="YES"></custom-button>
+                </flex-row>
+              </custom-card>
+
+              <custom-card type="tertiary">
+                <img
+                  loading="lazy"
+                  slot="image"
+                  src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
+                />
+                <span slot="headline">tertiary</span>
+                <span slot="subline">subline</span>
+
+                <flex-row slot="actions">
+                  <custom-button label="YES" type="tertiary"></custom-button>
+                </flex-row>
+              </custom-card>
+            </demo-section>
+
+            <demo-section route="buttons">
+              <custom-button type="text" label="text"></custom-button>
+
+              <custom-button type="text" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+
+              <custom-button type="filled" label="filled"></custom-button>
+
+              <custom-button type="filled" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+
+              <custom-button type="elevated" label="elevated"></custom-button>
+
+              <custom-button type="elevated" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+
+              <custom-button type="outlined" label="outlined"></custom-button>
+
+              <custom-button type="outlined" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+
+              <custom-button type="tonal" label="tonal"></custom-button>
+
+              <custom-button type="tonal" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+
+              <custom-button type="tertiary" label="tertiary"></custom-button>
+
+              <custom-button type="tertiary" label="with icon">
+                <span slot="icon">+</span>
+              </custom-button>
+            </demo-section>
+
+            <demo-section route="top-app-bar">
+              <custom-top-app-bar>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+
+              <custom-top-app-bar type="small">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+
+              <custom-top-app-bar type="medium">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+
+              <custom-top-app-bar type="large">
+                <custom-icon-button slot="start" icon="menu"></custom-icon-button>
+                <span slot="title">title</span>
+              </custom-top-app-bar>
+            </demo-section>
+
+            <demo-section route="typography">
+              <custom-typography>
+                <span>title</span>
+              </custom-typography>
+
+              <custom-typography size="medium">
+                <span>title medium</span>
+              </custom-typography>
+
+              <custom-typography size="small">
+                <span>title small</span>
+              </custom-typography>
+
+              <custom-typography type="body">
+                <span>body</span>
+              </custom-typography>
+
+              <custom-typography type="body" size="medium">
+                <span>body medium</span>
+              </custom-typography>
+
+              <custom-typography type="body" size="small">
+                <span>body small</span>
+              </custom-typography>
+
+              <custom-typography type="label">
+                <span>label</span>
+              </custom-typography>
+
+              <custom-typography type="label" size="medium">
+                <span>label medium</span>
+              </custom-typography>
+
+              <custom-typography type="label" size="small">
+                <span>label small</span>
+              </custom-typography>
+
+              <custom-typography type="headline">
+                <span>headline</span>
+              </custom-typography>
+
+              <custom-typography type="headline" size="medium">
+                <span>headline medium</span>
+              </custom-typography>
+
+              <custom-typography type="headline" size="small">
+                <span>headline small</span>
+              </custom-typography>
+
+              <custom-typography type="display">
+                <span>display</span>
+              </custom-typography>
+
+              <custom-typography type="display" size="medium">
+                <span>display medium</span>
+              </custom-typography>
+
+              <custom-typography type="display" size="small">
+                <span>display small</span>
+              </custom-typography>
+            </demo-section>
+
+            <demo-section route="drawer">
+              <custom-drawer open type="modal" id="demo-drawer">
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-drawer>
+
+              <custom-drawer-button id="demo-drawer"></custom-drawer-button>
+
+              <custom-selector>
+                <custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
+              </custom-selector>
+            </demo-section>
+
+            <demo-section route="pane">
+              <custom-pane open type="modal" id="demo-pane">
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-pane>
+
+              <custom-pane open type="modal" id="demo-pane" right>
+                <span slot="content">
+                  <custom-drawer-item>home</custom-drawer-item>
+                  <custom-drawer-item>about</custom-drawer-item>
+                </span>
+              </custom-pane>
+            </demo-section>
+            <demo-section route="supporting-pane">
+              <custom-supporting-pane id="demo-supporting-pane">
+                <flex-column>
+                  <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
+                    dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
+                    Quae, cum.
+                  </p>
+                </flex-column>
+                <flex-column slot="supporting"></flex-column>
+              </custom-supporting-pane>
+              <custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
+              <custom-supporting-pane open left>
+                <flex-column>
+                  <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
+                    dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
+                    Quae, cum.
+                  </p>
+                </flex-column>
+                <flex-column slot="supporting"></flex-column>
+              </custom-supporting-pane>
+            </demo-section>
+
+            <demo-section route="tabs">
+              <custom-tabs>
+                <custom-tab>home</custom-tab>
+                <custom-tab>about</custom-tab>
+              </custom-tabs>
+
+              <custom-tabs round>
+                <custom-tab>
+                  <custom-icon>home</custom-icon>
+                  home
+                </custom-tab>
+                <custom-tab>about</custom-tab>
+              </custom-tabs>
+            </demo-section>
+
+            <demo-section route="dialog">
+              <flex-container>
+                <custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-dialog fullscreen>
+                  <span slot="title">title</span>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+                  <flex-row slot="actions">
+                    <custom-button label="agree" action="agree">agree</custom-button>
+                  </flex-row>
+                </custom-dialog>
+
+                <script>
+                  const demoSection = document.querySelector('demo-section[route="dialog"]')
+                  const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
+                  demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
+                    fullscreenDialog.open = !fullscreenDialog.open
+                  })
+                </script>
+              </flex-container>
+
+              <flex-container>
+                <custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
+                <custom-dialog class="dialog">
+                  <span slot="title">title</span>
+                  <p>
+                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
+                    minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
+                    dolorem corporis.
+                  </p>
+
+                  <flex-row slot="actions">
+                    <custom-button label="agree" action="agree">agree</custom-button>
+                  </flex-row>
+                </custom-dialog>
+
+                <script>
+                  const dialog = demoSection.querySelector('custom-dialog.dialog')
+                  demoSection.querySelector('.dialog').addEventListener('click', () => {
+                    dialog.open = !dialog.open
+                  })
+                </script>
+              </flex-container>
+            </demo-section>
+
+            <demo-section route="time-picker">
+              <custom-time-picker></custom-time-picker>
+            </demo-section>
+
+            <demo-section route="menu">
+              <custom-menu>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-menu>
+            </demo-section>
+
+            <demo-section route="dropdown-menu">
+              <custom-dropdown-menu>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-dropdown-menu>
+
+              <flex-row>
+                <flex-it></flex-it>
+                <custom-dropdown-menu right>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 1
+                  </custom-list-item>
+
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 2
+                  </custom-list-item>
+
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 3
+                  </custom-list-item>
+                </custom-dropdown-menu>
+              </flex-row>
+
+              <custom-dropdown-menu bottom>
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 1
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 2
+                </custom-list-item>
+
+                <custom-list-item type="menu">
+                  <custom-icon slot="start">info</custom-icon>
+                  item 3
+                </custom-list-item>
+              </custom-dropdown-menu>
+
+              <flex-row>
+                <flex-it></flex-it>
+                <custom-dropdown-menu bottom right>
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 1
+                  </custom-list-item>
+
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 2
+                  </custom-list-item>
+
+                  <custom-list-item type="menu">
+                    <custom-icon slot="start">info</custom-icon>
+                    item 3
+                  </custom-list-item>
+                </custom-dropdown-menu>
+              </flex-row>
+            </demo-section>
+
+            <demo-section route="list-item">
+              <custom-list-item>
+                <custom-icon slot="start">info</custom-icon>
+              </custom-list-item>
+            </demo-section>
+            <demo-section route="toggle">
+              <custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
+
+              <custom-button label="next"></custom-button>
+
+              <script>
+                const toggleDemo = document.querySelector('demo-section[route="toggle"]')
+                toggleDemo.querySelector('custom-button').addEventListener('click', () => {
+                  toggleDemo.querySelector('custom-toggle').next()
+                })
+              </script>
+            </demo-section>
+
+            <demo-section route="toggle-button">
+              <custom-toggle-button .togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
+            </demo-section>
+          </custom-pages>
+        </flex-column>
+      </custom-drawer-layout>
+      <!-- </custom-root> -->
+      <!-- </flex-row> -->
+    `}constructor(){super(...arguments),e(this,w)}static{e(u,p)}},u})();export{c as DemoShell};