ds-one 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/2-core/ds-viewtoggle.js

@@ -0,0 +1,49 @@
+import { LitElement, html } from "lit";
+import { getText } from "../utils/language";
+import { getViewMode, setViewMode } from "../utils/viewMode";
+/**
+ * A component for toggling between text and image view modes
+ *
+ * @element ds-viewtoggle
+ */
+export class ViewToggle extends LitElement {
+    constructor() {
+        super();
+        this._toggle = () => {
+            const next = this._mode === "image" ? "text" : "image";
+            setViewMode(next);
+        };
+        this._mode = getViewMode();
+        this.boundHandlers = {
+            viewModeChanged: ((e) => {
+                const mode = e.detail === "image" ? "image" : "text";
+                if (this._mode !== mode) {
+                    this._mode = mode;
+                }
+            }),
+            languageChanged: (() => {
+                this.requestUpdate();
+            }),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("view-mode-changed", this.boundHandlers.viewModeChanged);
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("view-mode-changed", this.boundHandlers.viewModeChanged);
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+    }
+    render() {
+        const label = this._mode === "image" ? getText("hideImage") : getText("viewImage");
+        return html `
+      <ds-button variant="primary" @click=${this._toggle}>${label}</ds-button>
+    `;
+    }
+}
+ViewToggle.properties = {
+    _mode: { type: String, state: true },
+};
+customElements.define("ds-viewtoggle", ViewToggle);

package/dist/2-core/ds-year.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying the current year
+ *
+ * @element ds-year
+ */
+export declare class Year extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-year": Year;
+    }
+}
+//# sourceMappingURL=ds-year.d.ts.map

package/dist/2-core/ds-year.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-year.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-year.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;GAIG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-year.js

@@ -0,0 +1,21 @@
+import { LitElement, html, css } from "lit";
+/**
+ * A component for displaying the current year
+ *
+ * @element ds-year
+ */
+export class Year extends LitElement {
+    render() {
+        const year = new Date().getFullYear();
+        return html `<span>${year}</span>`;
+    }
+}
+Year.styles = css `
+    :host {
+      display: inline;
+      font-family: var(--typeface, var(--typeface-regular));
+      font-size: inherit;
+      color: inherit;
+    }
+  `;
+customElements.define("ds-year", Year);

package/dist/3-unit/ds-doublenav.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from "lit";
+/**
+ * A component for double navigation (previous/next)
+ *
+ * @element ds-doublenav
+ * @prop {string} previous - URL for previous link
+ * @prop {string} next - URL for next link
+ * @prop {string} previousText - Text for previous link
+ * @prop {string} nextText - Text for next link
+ * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
+ */
+export declare class DoubleNav extends LitElement {
+    static get properties(): {
+        previous: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        next: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        previousText: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        nextText: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        overlay: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    previous: string;
+    next: string;
+    previousText: string;
+    nextText: string;
+    overlay?: string;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-doublenav": DoubleNav;
+    }
+}
+//# sourceMappingURL=ds-doublenav.d.ts.map

package/dist/3-unit/ds-doublenav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-doublenav.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-doublenav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;;;;;GASG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;MAQpB;IAEO,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;;IAWzB,MAAM,CAAC,MAAM,0BAoCX;IAEF,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/3-unit/ds-doublenav.js

@@ -0,0 +1,88 @@
+import { LitElement, html, css } from "lit";
+/**
+ * A component for double navigation (previous/next)
+ *
+ * @element ds-doublenav
+ * @prop {string} previous - URL for previous link
+ * @prop {string} next - URL for next link
+ * @prop {string} previousText - Text for previous link
+ * @prop {string} nextText - Text for next link
+ * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
+ */
+export class DoubleNav extends LitElement {
+    static get properties() {
+        return {
+            previous: { type: String, reflect: true },
+            next: { type: String, reflect: true },
+            previousText: { type: String, reflect: true, attribute: "previous-text" },
+            nextText: { type: String, reflect: true, attribute: "next-text" },
+            overlay: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.previous = "";
+        this.next = "";
+        this.previousText = "";
+        this.nextText = "";
+        this.overlay = "";
+    }
+    render() {
+        return html `
+      ${this.previous
+            ? html `
+            <a href="${this.previous}" class="nav-previous">
+              <ds-icon type="left"></ds-icon>
+              <ds-text>${this.previousText || "Previous"}</ds-text>
+            </a>
+          `
+            : html `<div></div>`}
+      ${this.next
+            ? html `
+            <a href="${this.next}" class="nav-next">
+              <ds-text>${this.nextText || "Next"}</ds-text>
+              <ds-icon type="right"></ds-icon>
+            </a>
+          `
+            : html `<div></div>`}
+    `;
+    }
+}
+DoubleNav.styles = css `
+    :host {
+      display: flex;
+      justify-content: space-between;
+      gap: calc(5px * var(--scaling-factor));
+      padding: calc(2px * var(--scaling-factor));
+      align-items: center;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(5px * var(--scaling-factor));
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .nav-previous {
+      justify-self: start;
+    }
+
+    .nav-next {
+      justify-self: end;
+    }
+
+    .nav-previous ds-icon {
+      order: -1;
+    }
+
+    .nav-next ds-icon {
+      padding-top: 3px;
+    }
+
+    .nav-previous ds-icon {
+      padding-top: 3px;
+    }
+  `;
+customElements.define("ds-doublenav", DoubleNav);

package/dist/3-unit/ds-list.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class List extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-list": List;
+    }
+}
+//# sourceMappingURL=ds-list.d.ts.map

package/dist/3-unit/ds-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-list.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-list.js

@@ -0,0 +1,15 @@
+import { LitElement, html, css } from "lit";
+export class List extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+List.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      width: 100%;
+    }
+  `;
+customElements.define("ds-list", List);

package/dist/3-unit/ds-panel.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class Panel extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-panel": Panel;
+    }
+}
+//# sourceMappingURL=ds-panel.d.ts.map

package/dist/3-unit/ds-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-panel.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-panel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,MAAM,0BAQX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

package/dist/3-unit/ds-panel.js

@@ -0,0 +1,16 @@
+import { LitElement, html, css } from "lit";
+export class Panel extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Panel.styles = css `
+    :host {
+      display: flex;
+      flex-direction: row;
+      height: var(--08);
+      align-items: end;
+      gap: var(--025);
+    }
+  `;
+customElements.define("ds-panel", Panel);

package/dist/3-unit/ds-row.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+declare global {
+    interface CustomElementRegistry {
+        define(name: string, constructor: typeof LitElement): void;
+    }
+    var customElements: CustomElementRegistry;
+}
+export declare class Row extends LitElement {
+    static properties: {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    type: "fill" | "centered";
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-row": Row;
+    }
+}
+//# sourceMappingURL=ds-row.d.ts.map

package/dist/3-unit/ds-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-row.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;MAEf;IAEM,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;;IAOlC,MAAM,CAAC,MAAM,0BAiBX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}

package/dist/3-unit/ds-row.js

@@ -0,0 +1,32 @@
+import { LitElement, html, css } from "lit";
+export class Row extends LitElement {
+    constructor() {
+        super();
+        this.type = "fill";
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Row.properties = {
+    type: { type: String, reflect: true },
+};
+Row.styles = css `
+    :host {
+      display: flex;
+      align-items: end;
+      width: calc(240px * var(--scaling-factor));
+    }
+
+    :host([type="fill"]) {
+      justify-content: space-between;
+      height: calc(var(--1) * var(--scaling-factor));
+    }
+
+    :host([type="centered"]) {
+      justify-content: center;
+      height: calc(var(--1) * var(--scaling-factor));
+      gap: calc(var(--025) * var(--scaling-factor));
+    }
+  `;
+customElements.define("ds-row", Row);

package/dist/3-unit/ds-singlenav.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * A component for single navigation links
+ *
+ * @element ds-singlenav
+ * @prop {string} type - Type of navigation: "projects" or "work"
+ * @prop {string} to - Optional custom destination URL
+ */
+export declare class SingleNav extends LitElement {
+    static get properties(): {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        to: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    type: "projects" | "work";
+    to?: string;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    private getNavConfig;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-singlenav": SingleNav;
+    }
+}
+//# sourceMappingURL=ds-singlenav.d.ts.map

package/dist/3-unit/ds-singlenav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-singlenav.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-singlenav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;;GAMG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;;IAOpB,MAAM,CAAC,MAAM,0BAgBX;IAEF,MAAM;IAYN,OAAO,CAAC,YAAY;CAcrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/3-unit/ds-singlenav.js

@@ -0,0 +1,62 @@
+import { LitElement, html, css } from "lit";
+/**
+ * A component for single navigation links
+ *
+ * @element ds-singlenav
+ * @prop {string} type - Type of navigation: "projects" or "work"
+ * @prop {string} to - Optional custom destination URL
+ */
+export class SingleNav extends LitElement {
+    static get properties() {
+        return {
+            type: { type: String, reflect: true },
+            to: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.type = "work";
+    }
+    render() {
+        const navConfig = this.getNavConfig();
+        const href = this.to || navConfig.href;
+        return html `
+      <a href="${href}">
+        <ds-text key="${navConfig.key}"></ds-text>
+        <ds-icon type="right"></ds-icon>
+      </a>
+    `;
+    }
+    getNavConfig() {
+        switch (this.type) {
+            case "projects":
+                return {
+                    href: "/projects",
+                    key: "projects",
+                };
+            case "work":
+                return {
+                    href: "/",
+                    key: "workExperience",
+                };
+        }
+    }
+}
+SingleNav.styles = css `
+    :host {
+      display: flex;
+      justify-content: end;
+      gap: calc(5px * var(--scaling-factor));
+      padding: calc(2px * var(--scaling-factor));
+      align-items: center;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(5px * var(--scaling-factor));
+      text-decoration: none;
+      color: inherit;
+    }
+  `;
+customElements.define("ds-singlenav", SingleNav);