@spectric/ui 0.0.4

package/src/components/configurations/classifications.ts

@@ -0,0 +1,194 @@
+import { StyleInfo } from "lit/directives/style-map.js";
+
+/*
+
+[US] Department of Defense (DoD)
+
+CONTROLLED UNCLASSIFIED INFORMATION (CUI, color code: #3D1E5A)
+CLASSIFIED (color code: #723D9A)
+UNCLASSIFIED (U, color code: #007A33)
+CONFIDENTIAL (C, color code: #0033A0)
+SECRET (S, color code: #C8102E)
+TOP SECRET (TS, color code: #FF671F)
+TOP SECRET//SENSITIVE COMPARTMENT INFORMATION (TS//SCI, color code: #F7EA48)
+NOTICE: According to CI Policy Publications Update (dodcui.mil), the CUI is not a CNSI classification.
+The cyber intel classification banner is designed to fulfill the requirements of Executive Order 13526, ODNI CG v2.1 § 2.3.1, 32 CFR Part 2001.23 / Part 2002.16.a.3, DoDI 5200.48, DoD Manual 5200.1R, ISOO Rev4, STIG V-6146, STIG V-222643, and ECML-1 for marking/labeling sensitive/classified information electronically.
+
+[UK] Government Communications Headquarters (GCHQ)
+
+PROTECTIVE MARKING NOT SET (color code: #616161)
+UK OFFICIAL (color code: #2B71C7)
+UK OFFICIAL SENSITIVE (color code: #2B71C7)
+UK SECRET (color code: #F39C2C)
+UK TOP SECRET (color code: #AA0000)
+NOTICE: The above color code is defined by the UK Secret Intelligence Service (MI6) – Intelligence Community Design System.
+
+[CA] Canadian Security Intelligence Service (CSIS)
+
+PROTECTED A (color code: #227ABC)
+PROTECTED B (color code: #900FB5)
+PROTECTED C (color code: #460FB5)
+CONFIDENTIAL (color code: #0033a0)
+SECRET (color code: #c8102e)
+TOP SECRET (color code: #ff671f)
+NOTICE: The above color code is defined by the Government of Canada.
+
+[AU] Australian Secret Intelligence Service (ASIS)
+
+UNOFFICIAL
+OFFICIAL
+OFFICIAL: Sensitive
+Confidential (color code: #4F81BD)
+SECRET (color code: #E5B8B7)
+TOP SECRET (color code: #AA0000)
+NOTICE: The above color code is defined by the Australian Government Attorney-General’s Department | Protective Security Policy Framework | Policy 8 – Classification System.
+*/
+export enum ClassificationVariants {
+  None = "none",
+  Uscui = "us.cui",
+  Usclassified = "us.classified",
+  Usunclassified = "us.unclassified",
+  Usconfidential = "us.confidential",
+  Ussecret = "us.secret",
+  Ustopsecret = "us.topsecret",
+  UstopsecretSi = "us.topsecret.si",
+  Uknotset = "uk.notset",
+  Ukofficial = "uk.official",
+  Uksecret = "uk.secret",
+  Uktopsecret = "uk.topsecret",
+  Caprotected_a = "ca.protected_a",
+  Caprotected_b = "ca.protected_b",
+  Caprotected_c = "ca.protected_c",
+  Caconfidential = "ca.confidential",
+  Casecret = "ca.secret",
+  Catopsecret = "ca.topsecret",
+  Auunofficial = "au.unofficial",
+  Auofficial = "au.official",
+  Auofficialsensitive = "au.officialsensitive",
+  Auconfidential = "au.confidential",
+  Ausecret = "au.secret",
+  Autopsecret = "au.topsecret",
+}
+export type Classifications = `${ClassificationVariants}`
+export const ClassificationStyles: Record<Classifications, StyleInfo> = {
+  "none": {
+
+  },
+  //US Department of Defense spec CFR-2002-title31-vol1-sec2-7
+  "us.cui": { //controlled unclassified information
+    color: "white",
+    backgroundColor: "#3D1E5A",
+    content: "Controlled Unclassified Information"
+  },
+  "us.classified": {
+    color: "white",
+    backgroundColor: "#723D9A",
+    content: "Classified"
+  },
+  "us.unclassified": {
+    color: "white",
+    backgroundColor: "#007A33",
+    content: "Unclassified"
+  },
+  "us.confidential": {
+    color: "white",
+    backgroundColor: "#0033A0",
+    content: "Confidential"
+  },
+  "us.secret": {
+    color: "white",
+    backgroundColor: "#C8102E",
+    content: "Secret"
+  },
+  "us.topsecret": {
+    color: "white",
+    backgroundColor: "#FF671F",
+    content: "Top Secret"
+  },
+  "us.topsecret.si": {
+    color: "black",
+    backgroundColor: "#F7EA48",
+    content: "Top Secret//SI"
+  },
+  "uk.notset": {
+    color: "white",
+    backgroundColor: " #616161",
+    content: "Not Set"
+
+  },
+  "uk.official": {
+    color: "white",
+    backgroundColor: "#2B71C7",
+    content: "For Offical Use"
+  },
+  "uk.secret": {
+    color: "white",
+    backgroundColor: "#F39C2C",
+    content: "Secret"
+  },
+  "uk.topsecret": {
+    color: "white",
+    backgroundColor: "#AA0000",
+    content: "Top Secret"
+  },
+  "ca.protected_a": {
+    color: "white",
+    backgroundColor: "#227ABC",
+    content: "PROTECTED A"
+  },
+  "ca.protected_b": {
+    color: "white",
+    backgroundColor: "#900FB5",
+    content: "PROTECTED B"
+  },
+  "ca.protected_c": {
+    color: "white",
+    backgroundColor: "#460FB5",
+    content: "PROTECTED C"
+  },
+  "ca.confidential": {
+    color: "white",
+    backgroundColor: "#0033a0",
+    content: "Confidential"
+  },
+  "ca.secret": {
+    color: "white",
+    backgroundColor: "#c8102e",
+    content: "Secret"
+  },
+  "ca.topsecret": {
+    color: "white",
+    backgroundColor: "#ff671f",
+    content: "Top Secret"
+  },
+  "au.unofficial": {
+    color: "#666",
+    backgroundColor: "#ffffffff",
+    content: "Unofficial"
+  },
+  "au.official": {
+    color: "#666",
+    backgroundColor: "#ffffffff",
+    content: "Official"
+  },
+  "au.officialsensitive": {
+    color: "#666",
+    backgroundColor: "#ffffffff",
+    content: "Official Sentitive"
+  },
+  "au.confidential": {
+    color: "white",
+    backgroundColor: "#4F81BD",
+    content: "Confidential"
+  },
+  "au.secret": {
+    color: "black",
+    backgroundColor: " #E5B8B7",
+    content: "Secret"
+  },
+  "au.topsecret": {
+    color: "black",
+    backgroundColor: "#AA0000",
+    content: "Top Secret"
+  },
+}

package/src/components/dialog/dialog.css.ts

@@ -0,0 +1,50 @@
+import { css } from "lit";
+
+export const style = css`
+:host {
+    --dialog-padding: var(--spectric-dialog-padding, 5px);
+    --dialog-background:var(--spectric-background,rgb(246, 249, 252));
+}
+dialog {
+    border: 0px solid var(--background-inverse);
+    --spectric-background: var(--dialog-background);
+    --panel-color:var(--dialog-background);
+    padding: 0;
+    border-radius: var(--spectric-border-radius);
+    overflow:hidden;
+
+}
+dialog[open]{
+    display:flex;
+}
+spectric-panel{
+    margin:0px
+}
+dialog::backdrop {
+    background-color: transparent;
+}
+dialog.backdrop::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+.modal{
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    height: 100%;
+}
+.content{
+    flex-shrink: 1;
+    overflow: auto;
+}
+
+h3 {
+    padding: 1em var(--dialog-padding);
+    margin: 0;
+}
+
+spectric-button{
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+`;

package/src/components/dialog/dialog.ts

@@ -0,0 +1,163 @@
+import { CSSResultGroup, html, LitElement, PropertyValues, render } from 'lit';
+import "../Button";
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { style } from './dialog.css';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export const DialogElementTag = "spectric-dialog"
+export type { DialogProps as Props, DialogEvents }
+interface DialogProps {
+    open?: boolean;
+    dismissable?: boolean;
+    hideBackdrop?: boolean;
+    title?: string;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+}
+
+
+
+/**
+ * Dialog Element
+ * @slot title - sets the title of the dialog attribute/property can also be use for setting the title to a string
+ */
+@customElement(DialogElementTag)
+export class DialogElement extends LitElement implements DialogProps {
+    static styles: CSSResultGroup = style;
+    static display(props: DialogProps, body: any) {
+        let dialog = document.createElement(DialogElementTag);
+        dialog.addEventListener("close", () => {
+            dialog.remove()
+        });
+        for (let prop in props) {
+            //@ts-ignore
+            dialog[prop] = props[prop];
+        }
+        let frag = document.createDocumentFragment()
+        render(body, frag);
+        dialog.appendChild(frag)
+        dialog.open = true;
+        document.body.appendChild(dialog)
+        return dialog
+    }
+    @property({ type: Boolean, reflect: true })
+    open: boolean = false;
+
+    @property({ type: Boolean, reflect: true })
+    dismissable: boolean = true;
+
+    @property({ type: Boolean, reflect: true })
+    hideBackdrop: boolean = false;
+
+    @property({ type: String, reflect: true })
+    title: string = "";
+
+    @property({ type: Boolean, reflect: true })
+    closeOnEscape: boolean = true;
+
+    @property({ type: Boolean, reflect: true })
+    closeOnOutsideClick: boolean = true;
+
+    @queryAsync("dialog")
+    dialogElement!: Promise<HTMLDialogElement>;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.dialogElement.then(dialog => dialog.addEventListener('keydown', this._handleKeyDown));
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.dialogElement.then(dialog => dialog.removeEventListener('keydown', this._handleKeyDown));
+    }
+
+    protected updated(_changedProperties: PropertyValues): void {
+        if (_changedProperties.has("open")) {
+            this.dialogElement.then(dialog => {
+                if (this.open) {
+                    dialog.showModal();
+                } else {
+                    dialog.close();
+                }
+            });
+        }
+    }
+
+    private clickHandler = async (e: PointerEvent): Promise<void> => {
+        const dialog = await this.dialogElement;
+        if (!this.dismissable || !this.closeOnOutsideClick) {
+            return;
+        }
+        if (dialog === e.target) {
+            // clicked on backdrop
+            this.open = false;
+        }
+    };
+
+    private _handleKeyDown = (e: KeyboardEvent): void => {
+        if (!this.closeOnEscape) {
+            e.preventDefault()
+        }
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.open = false;
+        }
+    };
+
+    private _onClose = (e: PointerEvent): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('close', {
+            bubbles: true,
+            composed: true,
+        }));
+    };
+
+    protected render(): unknown {
+        return html`
+            <dialog class=${this.hideBackdrop ? '' : 'backdrop'} @close=${this._onClose} @click=${this.clickHandler}>
+                <spectric-panel>
+                    <div class="modal">
+                    ${this.dismissable ? html`<spectric-button variant="text" size="small" @click=${() => { this.open = false }}>X</spectric-button>` : null}
+                        <h3 >
+                            <slot name="title">
+                                ${this.title.length ? this.title : null}
+                            </slot>
+                        </h3>
+
+                        <div class="content"><slot></slot></div>
+                        <div class="footer"><slot name="footer"></slot></div>
+                    </div>
+                </spectric-panel>
+            </dialog>
+        `;
+    }
+}
+
+interface DialogEvents {
+    'close': (event: CustomEvent) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [DialogElementTag]: HTMLElementTagWithEvents<DialogElement, DialogEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [DialogElementTag]: ReactElementWithPropsAndEvents<DialogElement, DialogProps, DialogEvents>
+            }
+        }
+    }
+}

package/src/components/dialog/index.ts

@@ -0,0 +1 @@
+export * from "./dialog"

package/src/components/header.css.ts

@@ -0,0 +1,38 @@
+import { css } from "lit";
+
+export default css`.spectric-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.spectric-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+.spectric-header slot {
+  display: inline-block;
+  vertical-align: middle;
+}
+.spectric-header h1 {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.spectric-header button + button {
+  margin-left: 10px;
+}
+
+.spectric-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}
+`

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from "./Button"
+export * from "./Bitdisplay"
+export * from "./Header"
+export * from "./Page"
+export * from "./input"
+export * from "./query_bar"
+export * from "./Panel"
+export * from "./ThemeProvider"
+export * from "./dialog"
+export * from "./splitview"

package/src/components/input.css

@@ -0,0 +1,75 @@
+spectric-input {
+
+    --input-color: var(--spectric-input-color, #f4f4f4);
+    --border-radius: var(--spectric-border-radius, .4em);
+    --input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));
+    --input-bottom-focused: var(--primary, #1ea7fd);
+    --text-on-color: var(--spectric-text-on-color, #ffffff);
+    --text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);
+    --text-placeholder: rgba(22, 22, 22, 0.4);
+    --text-primary: var(--spectric-text-primary, #161616);
+    --text-secondary: var(--spectric-text-secondary, #525252);
+}
+
+spectric-input .inputWrapper {
+    color: var(--text-secondary)
+}
+
+spectric-input .inputWrapper input {
+    box-sizing: border-box;
+    margin: 0px;
+    vertical-align: baseline;
+    font-size: .875rem;
+    font-weight: 400;
+    line-height: 1.28572;
+    letter-spacing: .16px;
+    outline: transparent solid 2px;
+    outline-offset: -2px;
+    border: none;
+    padding: 0 1rem;
+    background-color: var(--input-color);
+    color: var(--text-primary, #161616);
+    font-family: inherit;
+    inline-size: 100%;
+    block-size: 2.5rem;
+}
+
+spectric-input .inputWrapper .inputContainer:active::after,
+spectric-input .inputContainer:focus-within::after {
+    border-bottom-color: var(--input-bottom-focused);
+    width: calc(100% - 5px);
+    transition: width 0.4s ease-in-out;
+}
+
+spectric-input .inputWrapper input:read-only {
+    background-color: transparent;
+    border-bottom-color: var(--border-disabled);
+}
+
+spectric-input .inputContainer {
+    position: relative;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+}
+
+spectric-input .inputContainer::after {
+    content: "";
+    width: 0px;
+    transition: background-color 0.4s cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom-color 0.4s cubic-bezier(0.2, 0, 0.38, 0.9);
+    border-bottom-color: var(--input-bottom);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    position: absolute;
+    left: 2.5px;
+    bottom: 0;
+}
+
+spectric-input #helper-text {
+    height: 18px;
+}
+
+spectric-input spectric-button {
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
+}