@operato/context 7.0.0-rc.9 → 7.0.1

package/.storybook/preview.js

@@ -0,0 +1,52 @@
+import { i18next } from '@operato/i18n'
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'ko', right: '🇰🇷', title: '한국어' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'ja', right: '🇯🇵', title: '日本語' },
+        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
+      ],
+      showName: true
+    }
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ],
+      showName: true
+    }
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    const { locale, theme } = context.globals
+
+    if (locale) {
+      i18next.changeLanguage(locale)
+    }
+
+    // Set the theme class for the document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.add('light')
+      document.documentElement.classList.remove('dark')
+    }
+
+    return Story()
+  }
+]

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [7.0.1](https://github.com/hatiolab/operato/compare/v7.1.0...v7.0.1) (2024-07-01)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
+
+
+### :bug: Bug Fix
+
+* storybook preview.js ([84d7682](https://github.com/hatiolab/operato/commit/84d7682af452554e8b0e83aa683bdc3726e264bb))
+* storybook preview.js ([117928b](https://github.com/hatiolab/operato/commit/117928b7b87246e8fef9519e1e5022131f8592b6))
+
+
+
+## [7.0.0-rc.11](https://github.com/hatiolab/operato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
+## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
+
+**Note:** Version bump only for package @operato/context
+
+
+
+
+
 ## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
 
 **Note:** Version bump only for package @operato/context

package/dist/src/tools/ox-page-action-context-bar.js

@@ -96,9 +96,7 @@ let PageActionContextBar = class PageActionContextBar extends connect(store)(Lit
     get overflownUpdater() {
         if (!this.overflownUpdaterThrottle) {
             this.overflownUpdaterThrottle = throttle(() => {
-                var _a, _b;
                 this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth;
-                console.log('overflown', (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollWidth, (_b = this.container) === null || _b === void 0 ? void 0 : _b.clientWidth, this.overflown);
             }, 100);
         }
         return this.overflownUpdaterThrottle;

package/dist/src/tools/ox-page-action-context-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      ButtonContainerStyles,\n      css`\n        :host {\n          display: flex;\n          position: relative;\n          overflow-x: clip;\n          overflow-y: hidden;\n        }\n\n        :host *:focus {\n          outline: none;\n        }\n\n        [container] {\n          flex: 1;\n\n          display: flex;\n          overflow: hidden;\n          gap: var(--spacing-small);\n          padding: 2px; /* only for button shadow */\n          align-items: center;\n        }\n\n        [more] {\n          position: absolute;\n          bottom: 0;\n          right: 0;\n          background-color: var(--md-sys-color-inverse-surface);\n          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n          padding: var(--context-action-bar-more-button-padding, 11px 10px);\n          color: var(--md-sys-color-inverse-on-surface);\n          font-size: 2rem;\n          z-index: 10;\n        }\n\n        select,\n        input[type='text'] {\n          box-sizing: border-box;\n          padding: 0 var(--spacing-small);\n          height: var(--form-element-height-medium);\n          border: 1px solid var(--md-sys-color-outline);\n          border-radius: var(--md-sys-shape-corner-small);\n          background-color: var(--md-sys-color-on-primary);\n          font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n          color: var(--md-sys-color-on-primary-container);\n          outline: none;\n        }\n\n        md-icon[working] {\n          animation: rotate 1s linear infinite;\n        }\n\n        md-assist-chip[icon-only] {\n          --md-assist-chip-trailing-space: 0;\n        }\n\n        @media screen and (max-width: 460px) {\n          [container] {\n            padding: 0;\n            gap: 0;\n            --md-assist-chip-container-shape: 0;\n          }\n        }\n\n        @keyframes rotate {\n          from {\n            transform: rotate(0deg);\n          }\n          to {\n            transform: rotate(360deg);\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) actions: {\n    title: string\n    action: () => void\n    icon: string\n    type: string\n    select: string[]\n    href?: string\n    emphasis?: boolean\n  }[] = []\n\n  @state() private overflown: boolean = false\n  @query('[container]') container?: HTMLDivElement\n\n  private overflownUpdaterThrottle: any\n  private resizeCallback: any\n\n  get overflownUpdater() {\n    if (!this.overflownUpdaterThrottle) {\n      this.overflownUpdaterThrottle = throttle(() => {\n        this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth\n        console.log('overflown', this.container?.scrollWidth, this.container?.clientWidth, this.overflown)\n      }, 100)\n    }\n\n    return this.overflownUpdaterThrottle\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.resizeCallback = () => this.overflownUpdater()\n\n    window.addEventListener('resize', this.resizeCallback)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    window.removeEventListener('resize', this.resizeCallback)\n  }\n\n  render() {\n    return this.actions.length > 0\n      ? html`\n          <div container>${this.renderActions()}</div>\n          ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n        `\n      : nothing\n  }\n\n  renderActions() {\n    return html`\n      ${this.actions.map(($action, idx) => {\n        let { type, title, icon, action, select, href, emphasis } = $action as any\n        let { raised, danger } = emphasis || {}\n\n        return type == 'text'\n          ? html` <span @click=${action}>${title}</span> `\n          : type == 'select' || (select && select.length > 0)\n            ? html`\n                <select @change=${action}>\n                  ${select.map((option: any) => html` <option>${option}</option> `)}\n                </select>\n              `\n            : type == 'link'\n              ? html` <a href=${href}>${title}</a> `\n              : html`\n                  <md-assist-chip\n                    ?icon-only=${type == 'icon' || !title}\n                    ?elevated=${raised}\n                    ?danger=${danger}\n                    label=${title}\n                    @click=${async (e: MouseEvent) => {\n                      /* all actions should be bloked for a second */\n                      const button = e.currentTarget as any\n                      const iconElement = button.querySelector('[slot=\"icon\"]')\n                      if (iconElement) {\n                        icon = this.actions[idx].icon\n                        this.actions[idx].icon = 'refresh'\n                        this.requestUpdate()\n                        iconElement.setAttribute('working', true)\n                      }\n                      button.disabled = true\n\n                      try {\n                        await action()\n                      } finally {\n                        await sleep(1000) /* waiting for additionla 1 second */\n\n                        /* because icon can be changed after sleep, don't use closure 'icon'. */\n                        if (iconElement) {\n                          this.actions[idx].icon = icon\n                          this.requestUpdate()\n                          iconElement.removeAttribute('working')\n                        }\n\n                        button.disabled = false\n                      }\n                    }}\n                  >\n                    <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n                  </md-assist-chip>\n                `\n      })}\n    `\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('actions')) {\n      requestAnimationFrame(this.overflownUpdater)\n    }\n  }\n\n  stateChanged(state: any) {\n    const { actions } = state.route?.context || {}\n\n    if (actions) {\n      this.actions = actions.filter((action: any) => !!action)\n    }\n  }\n\n  showMore() {\n    openOverlay('context-toolbar-overlay', {\n      template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-page-action-context-bar.js","sourceRoot":"","sources":["../../../src/tools/ox-page-action-context-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/chips/assist-chip.js'\nimport './ox-page-action-overlay-template.js'\n\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport throttle from 'lodash-es/throttle'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { openOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\nimport { sleep } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('ox-page-action-context-bar')\nexport class PageActionContextBar extends connect(store)(LitElement) {\n  static get styles() {\n    return [\n      ButtonContainerStyles,\n      css`\n        :host {\n          display: flex;\n          position: relative;\n          overflow-x: clip;\n          overflow-y: hidden;\n        }\n\n        :host *:focus {\n          outline: none;\n        }\n\n        [container] {\n          flex: 1;\n\n          display: flex;\n          overflow: hidden;\n          gap: var(--spacing-small);\n          padding: 2px; /* only for button shadow */\n          align-items: center;\n        }\n\n        [more] {\n          position: absolute;\n          bottom: 0;\n          right: 0;\n          background-color: var(--md-sys-color-inverse-surface);\n          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);\n          padding: var(--context-action-bar-more-button-padding, 11px 10px);\n          color: var(--md-sys-color-inverse-on-surface);\n          font-size: 2rem;\n          z-index: 10;\n        }\n\n        select,\n        input[type='text'] {\n          box-sizing: border-box;\n          padding: 0 var(--spacing-small);\n          height: var(--form-element-height-medium);\n          border: 1px solid var(--md-sys-color-outline);\n          border-radius: var(--md-sys-shape-corner-small);\n          background-color: var(--md-sys-color-on-primary);\n          font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n          color: var(--md-sys-color-on-primary-container);\n          outline: none;\n        }\n\n        md-icon[working] {\n          animation: rotate 1s linear infinite;\n        }\n\n        md-assist-chip[icon-only] {\n          --md-assist-chip-trailing-space: 0;\n        }\n\n        @media screen and (max-width: 460px) {\n          [container] {\n            padding: 0;\n            gap: 0;\n            --md-assist-chip-container-shape: 0;\n          }\n        }\n\n        @keyframes rotate {\n          from {\n            transform: rotate(0deg);\n          }\n          to {\n            transform: rotate(360deg);\n          }\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) actions: {\n    title: string\n    action: () => void\n    icon: string\n    type: string\n    select: string[]\n    href?: string\n    emphasis?: boolean\n  }[] = []\n\n  @state() private overflown: boolean = false\n  @query('[container]') container?: HTMLDivElement\n\n  private overflownUpdaterThrottle: any\n  private resizeCallback: any\n\n  get overflownUpdater() {\n    if (!this.overflownUpdaterThrottle) {\n      this.overflownUpdaterThrottle = throttle(() => {\n        this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth\n      }, 100)\n    }\n\n    return this.overflownUpdaterThrottle\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.resizeCallback = () => this.overflownUpdater()\n\n    window.addEventListener('resize', this.resizeCallback)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    window.removeEventListener('resize', this.resizeCallback)\n  }\n\n  render() {\n    return this.actions.length > 0\n      ? html`\n          <div container>${this.renderActions()}</div>\n          ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}\n        `\n      : nothing\n  }\n\n  renderActions() {\n    return html`\n      ${this.actions.map(($action, idx) => {\n        let { type, title, icon, action, select, href, emphasis } = $action as any\n        let { raised, danger } = emphasis || {}\n\n        return type == 'text'\n          ? html` <span @click=${action}>${title}</span> `\n          : type == 'select' || (select && select.length > 0)\n            ? html`\n                <select @change=${action}>\n                  ${select.map((option: any) => html` <option>${option}</option> `)}\n                </select>\n              `\n            : type == 'link'\n              ? html` <a href=${href}>${title}</a> `\n              : html`\n                  <md-assist-chip\n                    ?icon-only=${type == 'icon' || !title}\n                    ?elevated=${raised}\n                    ?danger=${danger}\n                    label=${title}\n                    @click=${async (e: MouseEvent) => {\n                      /* all actions should be bloked for a second */\n                      const button = e.currentTarget as any\n                      const iconElement = button.querySelector('[slot=\"icon\"]')\n                      if (iconElement) {\n                        icon = this.actions[idx].icon\n                        this.actions[idx].icon = 'refresh'\n                        this.requestUpdate()\n                        iconElement.setAttribute('working', true)\n                      }\n                      button.disabled = true\n\n                      try {\n                        await action()\n                      } finally {\n                        await sleep(1000) /* waiting for additionla 1 second */\n\n                        /* because icon can be changed after sleep, don't use closure 'icon'. */\n                        if (iconElement) {\n                          this.actions[idx].icon = icon\n                          this.requestUpdate()\n                          iconElement.removeAttribute('working')\n                        }\n\n                        button.disabled = false\n                      }\n                    }}\n                  >\n                    <md-icon slot=\"icon\">${this.actions[idx].icon}</md-icon>\n                  </md-assist-chip>\n                `\n      })}\n    `\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('actions')) {\n      requestAnimationFrame(this.overflownUpdater)\n    }\n  }\n\n  stateChanged(state: any) {\n    const { actions } = state.route?.context || {}\n\n    if (actions) {\n      this.actions = actions.filter((action: any) => !!action)\n    }\n  }\n\n  showMore() {\n    openOverlay('context-toolbar-overlay', {\n      template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`\n    })\n  }\n}\n"]}

package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts

@@ -11,10 +11,6 @@ declare const _default: {
         label: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -25,6 +21,5 @@ interface Story<T> {
 }
 interface ArgTypes {
     label?: string;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js

@@ -10,11 +10,10 @@ export default {
     title: 'ox-context-page-toolbar select buttons',
     component: 'ox-context-page-toolbar',
     argTypes: {
-        label: { control: 'string' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        label: { control: 'string' }
     }
 };
-const Template = ({ label = '', theme = 'light' }) => html `
+const Template = ({ label = '' }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -54,10 +53,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <div class="header">
       <div class="title">${label}</div>

package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-page-toolbar-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select-buttons.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar select buttons',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\">\n        <label>Filter-X</label><input type=\"text\" name=\"name\" />\n        <ox-input-select-buttons\n          @change=${(e: Event) => {\n            console.log((e.target as HTMLInputElement).value)\n          }}\n          name=\"wearables\"\n          .value=${'Gloves'}\n          .options=${[\n            { display: 'SHOOSE', value: 'Shoose' },\n            { display: 'CHOTHES', value: 'Clothes' },\n            { display: 'GLOVES', value: 'Gloves' }\n          ]}\n          multiple\n        ></ox-input-select-buttons>\n      </div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                },\n                {\n                  title: 'copy',\n                  action: () => {},\n                  icon: 'content_copy',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'edit',\n                  action: () => {},\n                  icon: 'content_copy',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'hoppaang',\n                  action: () => {},\n                  icon: '',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'delete',\n                  action: () => {},\n                  icon: 'delete',\n                  emphasis: {\n                    danger: true,\n                    filled: true\n                  }\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n        }\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}
+{"version":3,"file":"ox-context-page-toolbar-select-buttons.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select-buttons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB9D,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;2BAqBJ,KAAK;;;;;oBAKZ,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;;mBAEQ,QAAQ;qBACN;IACT,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACxC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACvC;;;;;;;iBAOM;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;yBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE;oBACR,QAAQ,EAAE,IAAI;iBACf;aACF;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI;oBACZ,MAAM,EAAE,IAAI;iBACb;aACF;SACF;2CAC4B;KAChC;CACF;mBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;;CAMR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar select buttons',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\">\n        <label>Filter-X</label><input type=\"text\" name=\"name\" />\n        <ox-input-select-buttons\n          @change=${(e: Event) => {\n            console.log((e.target as HTMLInputElement).value)\n          }}\n          name=\"wearables\"\n          .value=${'Gloves'}\n          .options=${[\n            { display: 'SHOOSE', value: 'Shoose' },\n            { display: 'CHOTHES', value: 'Clothes' },\n            { display: 'GLOVES', value: 'Gloves' }\n          ]}\n          multiple\n        ></ox-input-select-buttons>\n      </div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                },\n                {\n                  title: 'copy',\n                  action: () => {},\n                  icon: 'content_copy',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'edit',\n                  action: () => {},\n                  icon: 'content_copy',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'hoppaang',\n                  action: () => {},\n                  icon: '',\n                  emphasis: {\n                    outlined: true\n                  }\n                },\n                {\n                  title: 'delete',\n                  action: () => {},\n                  icon: 'delete',\n                  emphasis: {\n                    danger: true,\n                    filled: true\n                  }\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n        }\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}

package/dist/stories/ox-context-page-toolbar-select.stories.d.ts

@@ -10,10 +10,6 @@ declare const _default: {
         label: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -24,6 +20,5 @@ interface Story<T> {
 }
 interface ArgTypes {
     label?: string;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-page-toolbar-select.stories.js

@@ -10,11 +10,10 @@ export default {
     title: 'ox-context-page-toolbar-select',
     component: 'ox-context-page-toolbar',
     argTypes: {
-        label: { control: 'string' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        label: { control: 'string' }
     }
 };
-const Template = ({ label = '', theme = 'light' }) => html `
+const Template = ({ label = '' }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -54,10 +53,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <div class="header">
       <div class="title">${label}</div>

package/dist/stories/ox-context-page-toolbar-select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-page-toolbar-select.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB/E,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;mCAoBI,KAAK;;;;;2BAKb,KAAK;;;;;;iBAMf;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;yBACD;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,KAAK,IAAI,EAAE;oBACjB,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA;gBACnB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;aAC3C;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;SACF;2CAC4B;KAChC;CACF;mBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { sleep } from '@operato/utils'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar-select',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  type: 'icon',\n                  title: 'favorite',\n                  icon: 'favorite',\n                  action: async () => {\n                    await sleep(1000)\n                  }\n                },\n                {\n                  title: 'smile',\n                  action: () => {},\n                  select: ['', 'delete', 'hahaha', 'hohoho']\n                },\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}
+{"version":3,"file":"ox-context-page-toolbar-select.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB9D,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;2BAqBJ,KAAK;;;;;;iBAMf;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;yBACD;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,KAAK,IAAI,EAAE;oBACjB,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA;gBACnB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;aAC3C;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;SACF;2CAC4B;KAChC;CACF;mBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\nimport { sleep } from '@operato/utils'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar-select',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  type: 'icon',\n                  title: 'favorite',\n                  icon: 'favorite',\n                  action: async () => {\n                    await sleep(1000)\n                  }\n                },\n                {\n                  title: 'smile',\n                  action: () => {},\n                  select: ['', 'delete', 'hahaha', 'hohoho']\n                },\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}

package/dist/stories/ox-context-page-toolbar.stories.d.ts

@@ -10,10 +10,6 @@ declare const _default: {
         label: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -24,6 +20,5 @@ interface Story<T> {
 }
 interface ArgTypes {
     label?: string;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-page-toolbar.stories.js

@@ -9,11 +9,10 @@ export default {
     title: 'ox-context-page-toolbar',
     component: 'ox-context-page-toolbar',
     argTypes: {
-        label: { control: 'string' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        label: { control: 'string' }
     }
 };
-const Template = ({ label = '', theme = 'light' }) => html `
+const Template = ({ label = '' }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -53,10 +52,6 @@ const Template = ({ label = '', theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <div class="header">
       <div class="title">${label}</div>

package/dist/stories/ox-context-page-toolbar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-page-toolbar.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB/E,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;mCAoBI,KAAK;;;;;2BAKb,KAAK;;;;;;iBAMf;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;yBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI;iBACb;aACF;SACF;2CAC4B;KAChC;CACF;mBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;;CAMR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                },\n                {\n                  title: 'copy',\n                  action: () => {},\n                  icon: 'content_copy'\n                },\n                {\n                  title: 'delete',\n                  action: () => {},\n                  icon: 'delete',\n                  emphasis: {\n                    danger: true\n                  }\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n        }\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}
+{"version":3,"file":"ox-context-page-toolbar.stories.js","sourceRoot":"","sources":["../../stories/ox-context-page-toolbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2CAA2C,CAAA;AAClD,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB9D,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;2BAqBJ,KAAK;;;;;;iBAMf;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;QAC7C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,KAAK;QAC7B,QAAQ,EAAE,IAAI,CAAA,6BAA6B;QAC3C,OAAO,EAAE,YAAY;KACtB;IACD;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA;yBACD;YACT;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,cAAc;aACrB;YACD;gBACE,KAAK,EAAE,QAAQ;gBACf,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;gBAChB,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE;oBACR,MAAM,EAAE,IAAI;iBACb;aACF;SACF;2CAC4B;KAChC;CACF;mBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;CACf;;;;;;CAMR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,sBAAsB;CAC9B,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-page-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { CommonHeaderStyles } from '@operato/styles'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-page-toolbar',\n  component: 'ox-context-page-toolbar',\n  argTypes: {\n    label: { control: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  label?: string\n}\n\nconst Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <div class=\"header\">\n      <div class=\"title\">${label}</div>\n\n      <div class=\"filters\"><label>Filter</label><input type=\"text\" /></div>\n\n      <ox-context-page-toolbar\n        class=\"actions\"\n        .tools=${[\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>download</md-icon> `,\n            context: 'exportable'\n          },\n          {\n            position: TOOL_POSITION.FRONT,\n            template: html` <md-icon>upload</md-icon> `,\n            context: 'importable'\n          },\n          {\n            position: TOOL_POSITION.CENTER,\n            template: html`<ox-page-action-context-bar\n              .actions=${[\n                {\n                  title: 'save',\n                  action: () => {},\n                  icon: 'save'\n                },\n                {\n                  title: 'copy',\n                  action: () => {},\n                  icon: 'content_copy'\n                },\n                {\n                  title: 'delete',\n                  action: () => {},\n                  icon: 'delete',\n                  emphasis: {\n                    danger: true\n                  }\n                }\n              ]}\n            ></ox-page-action-context-bar>`\n          }\n        ]}\n        .context=${{\n          exportable: true,\n          importable: true,\n          toolbar: false\n        }}\n        }\n      >\n      </ox-context-page-toolbar>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'common header styles'\n}\n"]}

package/dist/stories/ox-context-toolbar-complex.stories.d.ts

@@ -20,6 +20,5 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-toolbar-complex.stories.js

@@ -12,7 +12,7 @@ export default {
         theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ theme = 'light' }) => html `
+const Template = ({}) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -52,10 +52,6 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[

package/dist/stories/ox-context-toolbar-complex.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-toolbar-complex.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-complex.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar complex',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.FRONT_END,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT_END,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete',\n                emphasis: {\n                  danger: true\n                }\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-context-toolbar-complex.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-complex.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar complex',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.FRONT_END,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT_END,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete',\n                emphasis: {\n                  danger: true\n                }\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.REAR_END,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-context-toolbar-empty.stories.d.ts

@@ -19,6 +19,5 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-toolbar-empty.stories.js

@@ -11,7 +11,7 @@ export default {
         theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ theme = 'light' }) => html `
+const Template = ({}) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -51,10 +51,6 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[]}

package/dist/stories/ox-context-toolbar-empty.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-toolbar-empty.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-empty.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAI/C,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;mCAoBI,KAAK;;;;;eAKzB,EAAE;iBACA;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport { sleep } from '@operato/utils'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar empty',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-context-toolbar-empty.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-empty.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,4CAA4C,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAI/C,OAAO,EAAO,IAAI,EAA0B,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;eAqBhB,EAAE;iBACA;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;;eAKQ;IACP;QACE,QAAQ,EAAE,aAAa,CAAC,MAAM;QAC9B,QAAQ,EAAE,IAAI,CAAA,wCAAwC,EAAE,gCAAgC;KACzF;CACF;iBACU;IACT,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;CACd;;;;CAIN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport { sleep } from '@operato/utils'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar empty',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-context-toolbar-overflow.stories.d.ts

@@ -20,6 +20,5 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-context-toolbar-overflow.stories.js

@@ -12,7 +12,7 @@ export default {
         theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ theme = 'light' }) => html `
+const Template = ({}) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -52,10 +52,6 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-context-toolbar
       .tools=${[

package/dist/stories/ox-context-toolbar-overflow.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-context-toolbar-overflow.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-overflow.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar overflow',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save',\n                emphasis: {\n                  raised: true\n                }\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete',\n                emphasis: {\n                  danger: true\n                }\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-context-toolbar-overflow.stories.js","sourceRoot":"","sources":["../../stories/ox-context-toolbar-overflow.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/layouts/ox-context-toolbar.js'\nimport '../src/tools/ox-page-action-context-bar.js'\nimport { TOOL_POSITION } from '@operato/layout'\n\nimport '@operato/styles'\n\nimport { css, html, render, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-context-toolbar overflow',\n  component: 'ox-context-toolbar',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n\n      padding: 20px;\n    }\n\n    ox-buttons-radio {\n      padding: 20px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-context-toolbar\n      .tools=${[\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>download</md-icon> `,\n          context: 'exportable'\n        },\n        {\n          position: TOOL_POSITION.FRONT,\n          template: html` <md-icon>upload</md-icon> `,\n          context: 'importable'\n        },\n        {\n          position: TOOL_POSITION.CENTER,\n          template: html`<ox-page-action-context-bar\n            .actions=${[\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save',\n                emphasis: {\n                  raised: true\n                }\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete'\n              },\n              {\n                title: 'save',\n                action: () => {},\n                icon: 'save'\n              },\n              {\n                title: 'copy',\n                action: () => {},\n                icon: 'content_copy'\n              },\n              {\n                title: 'delete',\n                action: () => {},\n                icon: 'delete',\n                emphasis: {\n                  danger: true\n                }\n              }\n            ]}\n          ></ox-page-action-context-bar>`\n        }\n      ]}\n      .context=${{\n        exportable: true,\n        importable: true,\n        toolbar: true\n      }}\n    >\n    </ox-context-toolbar>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-context-toolbar.stories.d.ts

@@ -15,6 +15,5 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;