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

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

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from "lit";
+import { currentLanguage, translate } from "../utils/language";
+/**
+ * Download CV button that resolves language-specific URLs
+ *
+ * @element ds-downloadcv
+ * @prop {string} urlEn - URL for English CV
+ * @prop {string} urlDa - URL for Danish CV
+ * @prop {string} urlJa - URL for Japanese CV
+ * @prop {string} filename - Base filename for download (default: "cv")
+ */
+export class DownloadCV extends LitElement {
+    constructor() {
+        super();
+        this._handleLanguageChange = () => {
+            this._resolveUrl();
+        };
+        this.urlEn = "";
+        this.urlDa = "";
+        this.urlJa = "";
+        this.filename = "cv";
+        this._activeUrl = "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resolveUrl();
+        window.addEventListener("language-changed", this._handleLanguageChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this._handleLanguageChange);
+    }
+    updated(changed) {
+        if (changed.has("urlEn") || changed.has("urlDa") || changed.has("urlJa")) {
+            this._resolveUrl();
+        }
+    }
+    _resolveUrl() {
+        const lang = currentLanguage.value || "en-US";
+        const prefix = (lang.split("-")[0] || "en").toLowerCase();
+        let url = "";
+        if (prefix === "da")
+            url = this.urlDa || this.urlEn || this.urlJa;
+        else if (prefix === "ja")
+            url = this.urlJa || this.urlEn || this.urlDa;
+        else
+            url = this.urlEn || this.urlDa || this.urlJa;
+        this._activeUrl = url || "";
+    }
+    async _download() {
+        if (!this._activeUrl) {
+            console.warn("[ds-downloadcv] No URL available");
+            return;
+        }
+        console.log("[ds-downloadcv] Attempting download from:", this._activeUrl);
+        try {
+            // Prefer blob download (reliable filename, works cross-origin with CORS)
+            const res = await fetch(this._activeUrl, { mode: "cors" });
+            console.log("[ds-downloadcv] Fetch response:", res.status, res.statusText);
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const blob = await res.blob();
+            const langPrefix = (currentLanguage.value || "en-US")
+                .split("-")[0]
+                .toLowerCase();
+            const fileExt = this._inferExtFromUrl(this._activeUrl) || "pdf";
+            const name = `${this.filename || "cv"}-${langPrefix}.${fileExt}`;
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = name;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+            console.log("[ds-downloadcv] Download triggered successfully");
+        }
+        catch (err) {
+            console.error("[ds-downloadcv] Fetch failed, using fallback:", err);
+            // Fallback: open the file directly
+            window.open(this._activeUrl, "_blank", "noopener,noreferrer");
+        }
+    }
+    _inferExtFromUrl(u) {
+        const qIndex = u.indexOf("?");
+        const clean = qIndex >= 0 ? u.slice(0, qIndex) : u;
+        const dot = clean.lastIndexOf(".");
+        if (dot === -1)
+            return null;
+        const ext = clean.slice(dot + 1).toLowerCase();
+        if (ext.length > 5)
+            return null;
+        return ext;
+    }
+    render() {
+        const disabled = !this._activeUrl;
+        return html `
+      <ds-button
+        variant="primary"
+        .disabled=${disabled}
+        default-text=${translate("downloadCV")}
+        @click=${() => this._download()}
+      ></ds-button>
+    `;
+    }
+}
+DownloadCV.properties = {
+    urlEn: { type: String, attribute: "url-en", reflect: true },
+    urlDa: { type: String, attribute: "url-da", reflect: true },
+    urlJa: { type: String, attribute: "url-ja", reflect: true },
+    filename: { type: String, reflect: true },
+    _activeUrl: { type: String, state: true },
+};
+DownloadCV.styles = css `
+    :host {
+      display: inline-flex;
+    }
+  `;
+customElements.define("ds-downloadcv", DownloadCV);

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying page headers
+ *
+ * @element ds-header
+ * @prop {string} gridarea - Grid area placement
+ */
+export declare class Header extends LitElement {
+    private _gridArea;
+    static get properties(): {
+        gridarea: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    set gridarea(value: string);
+    get gridarea(): string;
+    static styles: import("lit").CSSResult;
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-header": Header;
+    }
+}
+//# sourceMappingURL=ds-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-header.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;GAKG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,OAAO,CAAC,SAAS,CAAM;IAEvB,MAAM,KAAK,UAAU;;;;;MAIpB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKzB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,MAAM,CAAC,MAAM,0BAuBX;;IAMF,YAAY;IAMZ,MAAM;CASP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,66 @@
+import { LitElement, html, css } from "lit";
+/**
+ * A component for displaying page headers
+ *
+ * @element ds-header
+ * @prop {string} gridarea - Grid area placement
+ */
+export class Header extends LitElement {
+    static get properties() {
+        return {
+            gridarea: { type: String, reflect: true },
+        };
+    }
+    set gridarea(value) {
+        const oldValue = this._gridArea;
+        this._gridArea = value;
+        this.style.gridArea = value;
+        this.requestUpdate("gridarea", oldValue);
+    }
+    get gridarea() {
+        return this._gridArea;
+    }
+    constructor() {
+        super();
+        this._gridArea = "";
+    }
+    firstUpdated() {
+        if (this.hasAttribute("gridarea")) {
+            this.style.gridArea = this.getAttribute("gridarea") || "";
+        }
+    }
+    render() {
+        return html `
+      <h2
+        style="display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;"
+      >
+        <slot></slot>
+      </h2>
+    `;
+    }
+}
+Header.styles = css `
+    :host {
+      display: flex;
+      padding: calc(2px * var(--scaling-factor));
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    h2 {
+      display: flex;
+      place-content: center;
+      font-family: var(--typeface);
+      color: light-dark(var(--black), var(--white));
+      align-items: center;
+      font-weight: 500;
+      font-size: calc(14px * var(--scaling-factor));
+      margin: 0;
+      width: 100%;
+    }
+
+    ::slotted(*) {
+      margin: 0;
+    }
+  `;
+customElements.define("ds-header", Header);

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

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+export declare class Home extends LitElement {
+    static properties: any;
+    state: "active" | "disabled";
+    /**
+     * Ensure Home is always disabled on mobile devices.
+     * Runs once when the element is connected to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Lightweight mobile detection. Mirrors the app's utility without importing it
+     * to keep the design system component self-contained.
+     */
+    private _isMobileDevice;
+    protected updated(): void;
+    static styles: import("lit").CSSResult;
+    private _navigateHome;
+    private _onKeyDown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-home": Home;
+    }
+}
+//# sourceMappingURL=ds-home.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-home.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-home.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU,EAEZ,GAAG,CAAC;IAET,KAAK,EAAE,QAAQ,GAAG,UAAU,CAAY;IAExC;;;OAGG;IACH,iBAAiB;IAOjB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAoBvB,SAAS,CAAC,OAAO,IAAI,IAAI;IAOzB,MAAM,CAAC,MAAM,0BAyEX;IAIF,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAQlB,MAAM;CAgBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -0,0 +1,148 @@
+import { LitElement, html, css } from "lit";
+// Home tab button that reveals on hover (active) or stays visible and non-interactive (disabled)
+export class Home extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.state = "active";
+    }
+    /**
+     * Ensure Home is always disabled on mobile devices.
+     * Runs once when the element is connected to the DOM.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this._isMobileDevice()) {
+            this.state = "disabled";
+        }
+    }
+    /**
+     * Lightweight mobile detection. Mirrors the app's utility without importing it
+     * to keep the design system component self-contained.
+     */
+    _isMobileDevice() {
+        const nav = globalThis.navigator;
+        const win = globalThis.window;
+        const ua = (nav && (nav.userAgent || nav.vendor)) || (win && win.opera) || "";
+        const uaMatchesMobile = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(ua);
+        const touchPoints = (nav && nav.maxTouchPoints) || 0;
+        const isTouchCapable = touchPoints > 1;
+        const narrowViewport = win
+            ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820
+            : false;
+        return uaMatchesMobile || (isTouchCapable && narrowViewport);
+    }
+    updated() {
+        // Enforce disabled on mobile even if someone flips the state later
+        if (this._isMobileDevice() && this.state !== "disabled") {
+            this.state = "disabled";
+        }
+    }
+    // No setup needed; `state` defaults to "active" and reflects if provided
+    _navigateHome() {
+        if (this.state === "disabled")
+            return;
+        window.location.href = "./home.html";
+    }
+    _onKeyDown(e) {
+        if (this.state === "disabled")
+            return;
+        if (e?.key === "Enter" || e?.key === " ") {
+            e.preventDefault();
+            this._navigateHome();
+        }
+    }
+    render() {
+        const isDisabled = this.state === "disabled";
+        return html `
+      <div class="hover-fill"></div>
+      <div
+        class="home ${isDisabled ? "is-disabled" : "is-active"}"
+        role="button"
+        aria-disabled="${String(isDisabled)}"
+        tabindex="${isDisabled ? -1 : 0}"
+        @click="${this._navigateHome}"
+        @keydown="${this._onKeyDown}"
+      >
+        <ds-text key="home"></ds-text>
+      </div>
+    `;
+    }
+}
+Home.properties = {
+    state: { type: String, reflect: true }, // "active" | "disabled"
+};
+Home.styles = css `
+    :host {
+      /* local sizing vars, derived from one.css */
+      --home-visible: calc(var(--1) * 0.1); /* 2px */
+
+      position: relative;
+      display: flex; /* expand hover zone horizontally */
+      width: 100%; /* take the whole row width of the app container */
+      height: calc(
+        var(--1) * var(--scaling-factor)
+      ); /* provide hover zone under the tab */
+      font-family: var(--typeface);
+      overflow: hidden; /* hide the part above the host */
+    }
+
+    /* Disabled: preserve full hover area space but keep inactive */
+    :host([state="disabled"]) {
+      height: var(--1); /* keep same layout height as active */
+      overflow: hidden;
+    }
+
+    .home {
+      position: absolute;
+      left: 0;
+      width: calc(var(--4) * var(--scaling-factor));
+      height: calc(var(--1) * var(--scaling-factor));
+      margin: 0 calc(var(--1) * var(--scaling-factor));
+      display: flex;
+      align-items: center;
+      background: var(--accent-color);
+      color: light-dark(var(--black), var(--black));
+      user-select: none;
+      transition: top 120ms ease;
+    }
+
+    /* Inner text spacing without affecting the 80px outer width */
+    .home > ds-text {
+      padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
+      box-sizing: border-box;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* invisible flex filler to extend hover area to the right */
+    .hover-fill {
+      flex: 1 1 auto;
+    }
+
+    /* Active: hidden until hover */
+    .home.is-active {
+      cursor: pointer;
+      /* Hide above, leave a 2px strip visible */
+      top: calc(var(--home-visible) - var(--1));
+    }
+
+    /* Reveal the tab when hovering anywhere in the host area
+       (the host is 80x20, while the tab starts hidden above) */
+    :host(:hover) .home.is-active {
+      top: 0;
+    }
+
+    /* Disabled: stays hidden and not interactive */
+    .home.is-disabled {
+      top: calc(var(--home-visible) - var(--1));
+      cursor: default;
+      pointer-events: none;
+      color: var(--accent-color);
+    }
+
+    .label {
+      font-size: var(--type-size-default);
+    }
+  `;
+customElements.define("ds-home", Home);

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

@@ -0,0 +1,28 @@
+import { LitElement, type PropertyValues } from "lit";
+export declare class Icon extends LitElement {
+    static properties: {
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    private _type;
+    size: string;
+    color: string;
+    background: string;
+    get type(): string;
+    set type(val: string);
+    static styles: import("lit").CSSResult;
+    private static readonly iconNameToSvgMap;
+    constructor();
+    connectedCallback(): void;
+    renderIcon(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-icon": Icon;
+    }
+}
+//# sourceMappingURL=ds-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;MAEf;IAEF,OAAO,CAAC,KAAK,CAAM;IAEnB,IAAI,SAAS;IACb,KAAK,SAAkB;IACvB,UAAU,SAAiB;IAE3B,IAAI,IAAI,WAEP;IACD,IAAI,IAAI,CAAC,GAAG,QAAA,EAIX;IAED,MAAM,CAAC,MAAM,0BA+BX;IAIF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAyBnC;;IAOL,iBAAiB;IAKjB,UAAU;IA4MV,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;CAIP;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}