@spectric/ui 0.0.6 → 0.0.8

package/src/components/table/table.css

@@ -0,0 +1,36 @@
+spectric-table{
+    display: flex;
+    flex-direction: column;
+}
+spectric-table tr{
+    text-align: center;
+}
+
+spectric-table-header{
+    display: table-header-group;
+}
+spectric-table div[role="table"]{
+    display: table;
+}
+spectric-table-body {
+    display: table-row-group;
+}
+spectric-table-cell{
+    display: contents;
+}
+spectric-table-cell td{
+    position: relative;
+}
+spectric-table .filterable {
+    padding-top: 10px;
+}
+spectric-table-cell .table-cell-actions{
+    position: absolute;
+    display: flex;
+    width: 100%;
+    flex-direction: row-reverse;
+    visibility: hidden;
+}
+spectric-table-cell td:hover .table-cell-actions{
+    visibility: unset;
+}

package/src/components/table/table.ts

@@ -0,0 +1,131 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import "../pagination";
+import "./header"
+import "./body"
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./table.css"
+export const TableElementTag = "spectric-table"
+import { spreadProps } from '../../utils/spread';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
+import { FilterEvent } from './cell';
+export type { TableProps, TableEvents }
+
+export type DomRenderable = HTMLElement | TemplateResult | string | number | null
+
+export type ColumnSettings<T> = {
+    hidden?: boolean
+    sortable?: boolean
+    filterable?: boolean
+    title?: string
+    key?: string
+    render?: (row: T, table: TableElement<T>) => DomRenderable
+}
+interface TableProps<T> {
+    pagination?: PaginationProps
+    columns: ColumnSettings<T>[]
+    data: T[]
+}
+
+/**
+ * Table Element
+ * 
+ * The table element is a bit more complex and the column settings and data can only be set through the properties
+ * 
+ * 
+ * React
+ * 
+ * ``` tsx
+ * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
+ * ```
+ * 
+ * Javascript
+ * 
+ * ``` js
+ * table = document.createElement("spectric-table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * ```
+ * 
+ * HTML 
+ * 
+ * ``` html
+ * <spectric-table id="table"></spectric-table>
+ * <script>
+ * document.querySelector("#table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * </script>
+ * ```
+ */
+@customElement(TableElementTag)
+export class TableElement<T> extends LitElement implements TableProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Object, attribute: false })
+    pagination?: PaginationProps | undefined;
+    @property({ attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (this.pagination) {
+            this.pagination.size
+            this.pagination = { ...this.pagination, ...e.detail }
+        }
+        this._emitChange()
+    };
+    private _emitChange = () => {
+        let { pagination } = this
+        this.dispatchEvent(new CustomEvent<{ pagination?: PaginationChangeProps }>("change", { detail: { pagination } }))
+    }
+    //@ts-ignore
+    private __DO_NOT_USE_filter = () => {
+        //This is only here to document events that bubble up from lower components
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
+    }
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+
+    protected render(): unknown {
+        let columns = this.columns.filter(column => !column.hidden)
+        return html`
+        <div role="table">
+            <spectric-table-header .columns=${columns}></spectric-table-header>
+            <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+        </div>
+        ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
+        `;
+    }
+}
+
+interface TableEvents {
+    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
+            }
+        }
+    }
+}

package/src/stories/Button.stories.ts

@@ -13,6 +13,7 @@ const meta = {
   <spectric-button
     ?disabled=${args.disabled}
     ?danger=${args.danger}
+    ?icon=${args.icon}
     variant=${ifDefined(args.variant)}
     size=${ifDefined(args.size)}
     backgroundColor=${ifDefined(args.backgroundColor)}
@@ -31,11 +32,11 @@ const meta = {
     backgroundColor: { control: 'color', description: "sets the background color for the element" },
     size: {
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.values(ButtonSizes),
     },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'text'],
+      options: Object.values(ButtonVariants),
     },
     disabled: {
       control: { type: 'boolean' },

package/src/stories/QueryBar.stories.ts

@@ -25,6 +25,7 @@ const meta = {
   <spectric-query
   .fields=${args.fields}
   .getValuesForField=${fakevalues}
+  value=${ifDefined(args.value)}
   @change=${(e: CustomEvent<any>) => {
         code = e.detail
         updateArgs({ ...args })
@@ -61,3 +62,9 @@ export const Basic: Story = {
   },
 };
 
+export const ShouldHaveValue: Story = {
+  args: {
+    outputLanguage: "toCql",
+    value:"test: * and test_num  > 10"
+  },
+};

package/src/stories/fixtures/data.ts

@@ -15,6 +15,9 @@ export const modulations = [
 //pulled from https://www.sigidwiki.com/wiki/Category:Digital signals that don't have a space or -
 export const signals = ["802.11n", "8PSK", "ASCII", "AUTOSPEC", "Aprizesat", "Autocab", "Bluetooth", "CCITT", "CDMA420", "CHIP", "CHU", "COFDMTV", "CompuLert", "Contestia", "Coquelet", "DCF77", "DominoEX", "DominoF", "EIA", "FLEX", "FSK441", "FSQ", "FST4W", "FT4", "FT8", "Hellschreiber", "ISCAT", "JS8", "JT4", "JT65", "JT6M", "JT9", "JTMS", "Kiwi", "Lentus", "LoRa", "MDC1200", "MOBITEX", "MSK144", "MT63", "Milstar", "NML", "NOV", "NPM", "NWC", "Olivia", "OpenSky", "Orbcomm", "PACKET", "PAX", "PI4", "POCSAG", "PSK2K", "Piccolo", "ProVoice", "Q15X25", "ROS", "RTTYM", "ReFLEX", "SIGFOX", "SPREAD", "Serdolik", "SkyOFDM", "THOR", "THROB", "TT2300", "TWINPLEX", "Tetrapol", "VISEL", "VOICE", "WSPR", "WiMAX", "WinDRM"]
 export const filterByColumn = async (field, text) => {
+  if(field === "time_seen"){
+    return []
+  }
   if (field === "modulations") {
     return modulations.filter(v => v.match(new RegExp(text, "gi")))
   }

package/src/stories/pagination.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { PaginationChangeProps, type PaginationProps as Props } from "../components/pagination/pagination";
+import { html } from "lit";
+import '../components';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { useArgs } from "@storybook/client-api";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "UI/Pagination",
+  tags: ["autodocs"],
+  component: "spectric-pagination",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+      <spectric-pagination
+        page=${ifDefined(args.page)}
+        pageSize=${ifDefined(args.pageSize)}
+        totalItems=${ifDefined(args.totalItems)}
+        size=${args.size}
+        @change=${(e: CustomEvent<PaginationChangeProps>) => {
+        updateArgs({ ...e.detail });
+      }}
+      >
+      </spectric-pagination>
+    `;
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: {
+    page: 1,
+    pageSize: 3,
+    size: "small",
+    totalItems: 103,
+  },
+} satisfies Meta<Props>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    page: 1,
+    pageSize: 3,
+    totalItems: 103,
+  },
+};
+/**
+ * When the total items is unknown pagination will only shows page size
+ */
+export const NoTotalItems: Story = {
+  args: {
+    page: 1,
+    pageSize: 3,
+    totalItems: undefined,
+  },
+};

package/src/stories/table.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { PaginationChangeProps, type TableProps as Props } from "../components/";
+import { html } from "lit";
+import '../components';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { useArgs } from "@storybook/client-api";
+import { FilterEvent } from "../components/table/cell";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+type TestData = {
+  name: string
+  company: string
+  contact: string
+  country: string
+}
+
+const data: TestData[] = [
+  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
+  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
+const meta = {
+  title: "UI/Table",
+  tags: ["autodocs"],
+  component: "spectric-table",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+      <spectric-table
+        .pagination=${args.pagination}
+        .columns=${args.columns}
+        .data=${!args.pagination ? data : data.slice((args.pagination.page - 1) * args.pagination.pageSize, (args.pagination.page) * args.pagination.pageSize)}
+        @filter=${(e: CustomEvent<FilterEvent<any>>) => {
+        alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
+      }}
+        @change=${(e: CustomEvent<PaginationChangeProps>) => {
+        console.log(e)
+        updateArgs({ ...e.detail });
+      }}
+      >
+      </spectric-table>
+    `;
+  },
+  argTypes: {
+  },
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 3,
+      size: "small",
+      totalItems: data.length,
+    },
+    columns: [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]
+  },
+} satisfies Meta<Props<TestData>>;
+
+export default meta;
+type Story = StoryObj<Props<TestData>>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 3,
+      size: "small",
+      totalItems: data.length,
+    }
+  },
+};

package/dist/assets/Banner-CZ3qKIQC.js

@@ -1,172 +0,0 @@
-import{T as g,i as x,u as $,f as w,r as y,x as h}from"./lit-element-UdLzEcH-.js";/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const _={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},k=t=>(...e)=>({_$litDirective$:t,values:e});let E=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,r,o){this._$Ct=e,this._$AM=r,this._$Ci=o}_$AS(e,r){return this.update(e,r)}update(e,r){return this.render(...r)}};/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const v="important",C=" !"+v,m=k(class extends E{constructor(t){var e;if(super(t),t.type!==_.ATTRIBUTE||t.name!=="style"||((e=t.strings)==null?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const o=t[r];return o==null?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`},"")}update(t,[e]){const{style:r}=t.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(e)),this.render(e);for(const o of this.ft)e[o]==null&&(this.ft.delete(o),o.includes("-")?r.removeProperty(o):r[o]=null);for(const o in e){const n=e[o];if(n!=null){this.ft.add(o);const s=typeof n=="string"&&n.endsWith(C);o.includes("-")||s?r.setProperty(o,s?n.slice(0,-11):n,s?v:""):r[o]=n}}return g}}),P=x`
-:host{
-    display: inline-block;
-    --text-on-color: var(--spectric-text-on-color, #ffffff);
-    --text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);
-    --text-placeholder: var(--spectric-text-placeholder, rgba(22, 22, 22, 0.4));
-    --text-primary: var(--spectric-text-primary, #161616);
-    --text-secondary: var(--spectric-text-secondary, #525252);
-    --button-border-radius: var(--spectric-border-radius,.4em);
-    --button-separator: var(--spectric-button-separator, #e0e0e0);
-    --button-primary:  var(--spectric-button-primary,#1ea7fd);
-    --button-secondary: var(--spectric-button-secondary, #77878b);
-    --button-tertiary: var(--spectric-button-tertiary, #0f62fe);
-    --button-danger-primary: var(--spectric-button-danger-primary, #da1e28);
-    --button-danger-secondary: var(--spectric-button-danger-secondary, #da1e28);
-    --button-danger-active: var(--spectric-button-danger-active, #750e13);
-    --button-primary-active: var(--spectric-button-primary-active, #002d9c);
-    --button-secondary-active: var(--spectric-button-secondary-active, #6f6f6f);
-    --button-tertiary-active: var(--spectric-button-tertiary-active, #002d9c);
-    --button-danger-hover: var(--spectric-button-danger-hover, #b81921);
-    --button-primary-hover: var(--spectric-button-primary-hover, #0050e6);
-    --button-secondary-hover: var(--spectric-button-secondary-hover, #474747);
-    --button-tertiary-hover: var(--spectric-button-tertiary-hover, #0050e6);
-    --button-disabled: var(--spectric-button-disabled, #c6c6c6);
-}
-:host([disabled]) { pointer-events: none }
-
-.spectric-button {
-  pointer-events:none;
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: var(--button-border-radius);
-  font-weight: 700;
-  line-height: 2em;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  overflow:hidden;
-}
-.animation{
-  pointer-events: none;
-  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.animation::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0 /* rtl:ignore */;
-    width: 100%;
-    height: 100%;
-}
-:host(:active) .animation::after {
-  box-shadow: 0 0 0 0 black;
-  position: absolute;
-  opacity: 1;
-  transition: 0s;
-}
-.animation::after{
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: var(--border-radius);
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transition: all .5s;
-  box-shadow: 0 0 30px black inset;
-}
-.spectric-button.spectric-button--secondary .animation::after , .spectric-button.spectric-button--text .animation::after {
-    box-shadow: 0 0 30px white inset;
-}
-
-.spectric-button:disabled{
-  cursor: not-allowed;
-  pointer-events: none;
-  filter: contrast(0.5);
-  /* background-color:var(--button-disabled); */
-  color:var(--text-on-color-disabled);
-}
-.spectric-button:disabled .animation , :host(:disabled:hover) .animation{
-background-color: rgba(0, 0, 0, 0);
-opacity:1
-}
-.spectric-button-danger--true:hover{
-  background-color:var(--button-danger-hover);
-}
-.spectric-button--primary.spectric-button-danger--true {
-  background-color:var(--button-danger-primary);
-  box-shadow:none;
-}
-.spectric-button--secondary.spectric-button-danger--true {
-  color: var(--text-on-color);
-  background-color:color-mix(in srgb, var(--button-danger-primary) 70%, transparent);
-  box-shadow:none;
-}
-.spectric-button--text.spectric-button-danger--true {
-  color:var(--button-danger-primary);
-
-}
-:host(:hover) .spectric-button--text.spectric-button-danger--true {
-  background-color:var(--button-danger-primary);
-  color:var(--text-on-color)
-}
-:host(:hover) .animation{
-  background: currentColor;
-  opacity: 0.15;
-}
-.spectric-button--primary {
-  box-shadow: color-mix(in srgb, var(--button-primary) 50%, transparent) 0px 0px 0px 1px inset;
-  background-color: var(--button-primary);
-  color: var(--text-on-color);
-}
-.spectric-button--secondary {
-  background-color:transparent;
-  box-shadow: var(--button-secondary) 0px 0px 0px 1px inset;
-  color: var(--button-secondary);
-}
-.spectric-button--text {
-  background-color: transparent;
-  color: var(--text-secondary);
-}
-.spectric-button--small {
-  padding: 5px 10px;
-  font-size: 12px;
-}
-.spectric-button--medium {
-  padding: 6px 17px;
-  font-size: 14px;
-}
-.spectric-button--large {
-  padding: 7px 24px;
-  font-size: 16px;
-}
-`;/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const f=t=>(e,r)=>{r!==void 0?r.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)};/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const T={attribute:!0,type:String,converter:$,reflect:!1,hasChanged:w},O=(t=T,e,r)=>{const{kind:o,metadata:n}=r;let s=globalThis.litPropertyMetadata.get(n);if(s===void 0&&globalThis.litPropertyMetadata.set(n,s=new Map),s.set(r.name,t),o==="accessor"){const{name:i}=r;return{set(d){const b=e.get.call(this);e.set.call(this,d),this.requestUpdate(i,b,t)},init(d){return d!==void 0&&this.P(i,void 0,t),d}}}if(o==="setter"){const{name:i}=r;return function(d){const b=this[i];e.call(this,d),this.requestUpdate(i,b,t)}}throw Error("Unsupported decorator location: "+o)};function a(t){return(e,r)=>typeof r=="object"?O(t,e,r):((o,n,s)=>{const i=n.hasOwnProperty(s);return n.constructor.createProperty(s,i?{...o,wrapped:!0}:o),i?Object.getOwnPropertyDescriptor(n,s):void 0})(t,e,r)}var S=Object.defineProperty,A=Object.getOwnPropertyDescriptor,l=(t,e,r,o)=>{for(var n=o>1?void 0:o?A(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(n=(o?i(e,r,n):i(n))||n);return o&&n&&S(e,r,n),n},D=(t=>(t.large="large",t.medium="medium",t.small="small",t))(D||{}),j=(t=>(t.primary="primary",t.secondary="secondary",t.text="text",t))(j||{});const I={primary:"spectric-button--primary",secondary:"spectric-button--secondary",text:"spectric-button--text"};let c=class extends y{constructor(){super(...arguments),this.variant="primary",this.disabled=!1,this.size="large",this.label="",this.danger=!1,this._onClick=t=>{if(t instanceof CustomEvent)return;t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation();const e={bubbles:!0,composed:!0,detail:t};this.dispatchEvent(new CustomEvent("click",e))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._onClick)}render(){const t=I[this.variant]||"spectric-button--primary";return h`
-      <button
-        type="button"
-        ?disabled=${this.disabled}
-        class=${["spectric-button",`spectric-button-danger--${this.danger||!1}`,`spectric-button--${this.size||"medium"}`,t].join(" ")}
-        style=${m({backgroundColor:this.backgroundColor})}
-      >
-      <span class="animation"></span>
-      <slot>${this.label}</slot>
-      </button>
-    `}};c.styles=P;l([a({type:String,reflect:!0})],c.prototype,"variant",2);l([a({type:Boolean,reflect:!0})],c.prototype,"disabled",2);l([a({type:String,reflect:!0})],c.prototype,"backgroundColor",2);l([a({type:String,reflect:!0})],c.prototype,"size",2);l([a({type:String,reflect:!0})],c.prototype,"label",2);l([a({type:Boolean,reflect:!0})],c.prototype,"danger",2);c=l([f("spectric-button")],c);var z=Object.defineProperty,U=Object.getOwnPropertyDescriptor,u=(t,e,r,o)=>{for(var n=o>1?void 0:o?U(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(n=(o?i(e,r,n):i(n))||n);return o&&n&&z(e,r,n),n};const L={display:"flex",alignItems:"center",backgroundColor:"black",color:"white",textAlign:"center"};let p=class extends y{constructor(){super(...arguments),this.dismissable=!1,this.text="",this.bannerId="",this.headerStyle={},this._dismissed=!1,this.onDismiss=t=>{t.preventDefault(),t.stopPropagation();const e={bubbles:!0,composed:!0};this._dismissed=!0;let{bannerId:r,text:o,headerStyle:n,dismissable:s}=this;this.dispatchEvent(new CustomEvent("bannerDismissed",{detail:{bannerId:r,text:o,headerStyle:n,dismissable:s},...e}))}}render(){if(!this._dismissed)return h`
-        <header style=${m({...L,...this.headerStyle})}>
-        <div style="flex-grow:1"><slot name="text">${this.text}</slot><slot></slot></div>
-        ${this.dismissable?h`<spectric-button size="small" @click=${this.onDismiss}>X</spectric-button>`:null}
-        </header>
-    `}};u([a({type:Boolean,reflect:!0})],p.prototype,"dismissable",2);u([a({type:String,reflect:!0})],p.prototype,"text",2);u([a({type:String,reflect:!0})],p.prototype,"bannerId",2);u([a({type:Object})],p.prototype,"headerStyle",2);u([a({state:!0,type:Boolean,attribute:!1})],p.prototype,"_dismissed",2);p=u([f("spectric-banner")],p);export{j as B,D as a,_ as b,k as e,E as i,a as n,m as o,f as t};

package/dist/assets/Banner.stories-BMf4MBpI.js

@@ -1,19 +0,0 @@
-import"./Banner-CZ3qKIQC.js";import{x as l}from"./lit-element-UdLzEcH-.js";const u={title:"UI/Banner",tags:["autodocs"],component:"spectric-banner",render:e=>(console.log(e),l`<spectric-banner ?dismissable=${e.dismissable} .headerStyle=${e.headerStyle}>${e.text}</spectric-banner>
-`),args:{text:"Banner with default style"}},r={args:{text:"Unclassified",headerStyle:{backgroundColor:"green",color:"white"}}},s={args:{text:"Can be dismissed",dismissable:!0,headerStyle:{backgroundColor:"cornflowerblue",color:"white"}}};var n,a,o;r.parameters={...r.parameters,docs:{...(n=r.parameters)==null?void 0:n.docs,source:{originalSource:`{
-  args: {
-    text: "Unclassified",
-    headerStyle: {
-      backgroundColor: "green",
-      color: "white"
-    }
-  }
-}`,...(o=(a=r.parameters)==null?void 0:a.docs)==null?void 0:o.source}}};var t,i,c;s.parameters={...s.parameters,docs:{...(t=s.parameters)==null?void 0:t.docs,source:{originalSource:`{
-  args: {
-    text: "Can be dismissed",
-    dismissable: true,
-    headerStyle: {
-      backgroundColor: "cornflowerblue",
-      color: "white"
-    }
-  }
-}`,...(c=(i=s.parameters)==null?void 0:i.docs)==null?void 0:c.source}}};const b=["ClassificationBanner","DismissableBanner"];export{r as ClassificationBanner,s as DismissableBanner,b as __namedExportsOrder,u as default};

package/dist/assets/BitDisplay.stories-wztXxpxe.js

@@ -1,18 +0,0 @@
-import"./Banner-CZ3qKIQC.js";import"./dialog-CFHXbUTQ.js";import{x as s}from"./lit-element-UdLzEcH-.js";import{E as o}from"./Bits-C_TSTjST.js";import"./directive-helpers-IbK5tOA8.js";const n={title:"DSP Related/BitDisplay",tags:["autodocs"],component:"spectric-bit-display",render:r=>s`
-  <spectric-bit-display
-    frameWidth=${r.frameWidth}
-    scale=${r.scale}
-    .arrayBuffer=${r.arrayBuffer}
-    width=${r.width}
-    height=${r.height}
-  >
-  </spectric-bit-display>
-`},e={args:{scale:1,frameWidth:100,width:200,height:200,arrayBuffer:o.buffer}};var t,a,i;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
-  args: {
-    scale: 1,
-    frameWidth: 100,
-    width: 200,
-    height: 200,
-    arrayBuffer: ExampleBits.buffer
-  }
-}`,...(i=(a=e.parameters)==null?void 0:a.docs)==null?void 0:i.source}}};const h=["Primary"];export{e as Primary,h as __namedExportsOrder,n as default};

package/dist/assets/Bits-C_TSTjST.js

@@ -1 +0,0 @@
-const t=Array(2e4).fill(0).map((a,r)=>String.fromCharCode(r%4===0?85:r%3===0||r%2?r%255:Math.floor(Math.random()*255)));var o=t.length;const e=new Uint8Array(o);e.set(Array.from(t).map(a=>a.charCodeAt(0)));export{e as E};