ds-one 0.2.0-alpha.2 → 0.2.5-alpha.1

package/DS1/2-core/ds-attributes.ts

@@ -1,155 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-
-/**
- * A component for displaying project/work attributes (year, category, status)
- *
- * @element ds-attributes
- * @prop {string} year - Year key for translation
- * @prop {string} category - Category key for translation
- * @prop {string} status - Status key for translation
- * @prop {string} type - Type of attributes: "project" or "work"
- */
-export class Attributes extends LitElement {
-  static get properties() {
-    return {
-      year: { type: String, reflect: true },
-      category: { type: String, reflect: true },
-      status: { type: String, reflect: true },
-      type: { type: String, reflect: true },
-    };
-  }
-
-  declare year: string;
-  declare category: string;
-  declare status: string;
-  declare type: string;
-
-  private boundHandlers: { languageChanged: EventListener };
-
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      gap: calc(16px * var(--scaling-factor));
-      align-items: flex-start;
-    }
-
-    .attribute-row {
-      display: inline-flex;
-      height: calc(20px * var(--scaling-factor));
-      padding: 0px calc(2px * var(--scaling-factor));
-      align-items: flex-start;
-      gap: calc(5px * var(--scaling-factor));
-      font-family: var(--typeface);
-      font-size: calc(14px * var(--scaling-factor));
-      color: light-dark(var(--slate), var(--slate-dark));
-    }
-
-    .status-indicator {
-      width: calc(8px * var(--scaling-factor));
-      height: calc(8px * var(--scaling-factor));
-      display: inline-block;
-      transition:
-        background 0.2s,
-        border-radius 0.2s;
-    }
-
-    .status-indicator.done {
-      background-color: green;
-    }
-
-    .status-indicator.ongoing {
-      background-color: #30adec;
-    }
-
-    .status-indicator.pending {
-      background-color: #f6c71c;
-    }
-
-    .status-indicator.not-started {
-      background-color: #b1b4b9;
-    }
-  `;
-
-  constructor() {
-    super();
-    this.year = "";
-    this.category = "";
-    this.status = "";
-    this.type = "project";
-
-    this.boundHandlers = {
-      languageChanged: (() => {
-        this.requestUpdate();
-      }) as EventListener,
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  _getStatusClass(status: string): string {
-    if (status.includes("Done")) return "done";
-    if (status.includes("Ongoing")) return "ongoing";
-    if (status.includes("Pending")) return "pending";
-    if (status.includes("NotStarted")) return "not-started";
-    return "pending";
-  }
-
-  render() {
-    return html`
-      ${this.year
-        ? html`
-            <div class="attribute-row">${getText(this.year) || this.year}</div>
-          `
-        : ""}
-      ${this.category
-        ? html`
-            <div class="attribute-row">
-              ${this.type === "work"
-                ? html`<span
-                    class="status-indicator ${this._getStatusClass(
-                      this.status
-                    )}"
-                  ></span>`
-                : ""}
-              ${getText(this.category) || this.category}
-            </div>
-          `
-        : ""}
-      ${this.status && this.type === "project"
-        ? html`
-            <div class="attribute-row">
-              <span
-                class="status-indicator ${this._getStatusClass(this.status)}"
-              ></span>
-              ${getText(this.status) || this.status}
-            </div>
-          `
-        : ""}
-    `;
-  }
-}
-
-customElements.define("ds-attributes", Attributes);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-attributes": Attributes;
-  }
-}
-

package/DS1/2-core/ds-downloadcv.ts

@@ -1,146 +0,0 @@
-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 {
-  static 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 },
-  };
-
-  declare urlEn: string;
-  declare urlDa: string;
-  declare urlJa: string;
-  declare filename: string;
-  declare _activeUrl: string;
-
-  constructor() {
-    super();
-    this.urlEn = "";
-    this.urlDa = "";
-    this.urlJa = "";
-    this.filename = "cv";
-    this._activeUrl = "";
-  }
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._resolveUrl();
-    window.addEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("language-changed", this._handleLanguageChange);
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("urlEn") || changed.has("urlDa") || changed.has("urlJa")) {
-      this._resolveUrl();
-    }
-  }
-
-  private _handleLanguageChange = () => {
-    this._resolveUrl();
-  };
-
-  private _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 || "";
-  }
-
-  private 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");
-    }
-  }
-
-  private _inferExtFromUrl(u: string): string | null {
-    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>
-    `;
-  }
-}
-
-customElements.define("ds-downloadcv", DownloadCV);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-downloadcv": DownloadCV;
-  }
-}
-

package/DS1/2-core/ds-header.ts

@@ -1,82 +0,0 @@
-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 {
-  private _gridArea = "";
-
-  static get properties() {
-    return {
-      gridarea: { type: String, reflect: true },
-    };
-  }
-
-  set gridarea(value: string) {
-    const oldValue = this._gridArea;
-    this._gridArea = value;
-    this.style.gridArea = value;
-    this.requestUpdate("gridarea", oldValue);
-  }
-
-  get gridarea(): string {
-    return this._gridArea;
-  }
-
-  static 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;
-    }
-  `;
-
-  constructor() {
-    super();
-  }
-
-  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>
-    `;
-  }
-}
-
-customElements.define("ds-header", Header);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-header": Header;
-  }
-}
-

package/DS1/2-core/ds-home.ts

@@ -1,168 +0,0 @@
-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 {
-  static properties = {
-    state: { type: String, reflect: true }, // "active" | "disabled"
-  } as any;
-
-  state: "active" | "disabled" = "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.
-   */
-  private _isMobileDevice(): boolean {
-    const nav: any = (globalThis as any).navigator;
-    const win: any = (globalThis as any).window;
-    const ua: string =
-      (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);
-  }
-
-  protected updated(): void {
-    // Enforce disabled on mobile even if someone flips the state later
-    if (this._isMobileDevice() && this.state !== "disabled") {
-      this.state = "disabled";
-    }
-  }
-
-  static 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);
-    }
-  `;
-
-  // No setup needed; `state` defaults to "active" and reflects if provided
-
-  private _navigateHome() {
-    if (this.state === "disabled") return;
-    window.location.href = "./home.html";
-  }
-
-  private _onKeyDown(e: any) {
-    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>
-    `;
-  }
-}
-
-customElements.define("ds-home", Home);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-home": Home;
-  }
-}
-

package/DS1/2-core/ds-link.ts

@@ -1,121 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-
-/**
- * A component for creating localized links that open in new tabs
- *
- * @element ds-link
- * @prop {string} href - The URL to link to
- */
-export class Link extends LitElement {
-  static get properties() {
-    return {
-      href: { type: String, reflect: true },
-      _text: { type: String, state: true },
-    };
-  }
-
-  declare href: string;
-  declare _text: string;
-
-  private boundHandlers: { languageChanged: EventListener };
-
-  constructor() {
-    super();
-    this.href = "";
-    this._text = "";
-
-    // Create bound event handlers for proper cleanup
-    this.boundHandlers = {
-      languageChanged: (() => {
-        this._loadText();
-      }) as EventListener,
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: inline;
-      font-family: var(--typeface);
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    ds-icon {
-      display: inline-block;
-      vertical-align: middle;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadText();
-
-    // Listen for language changes
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-
-    // Also listen for translations loaded event
-    window.addEventListener(
-      "translations-loaded",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-    window.removeEventListener(
-      "translations-loaded",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("href")) {
-      this._loadText();
-    }
-  }
-
-  _loadText() {
-    try {
-      const text = getText("link");
-      this._text = text || "Link";
-    } catch (error) {
-      console.error("Error loading text for key 'link':", error);
-      this._text = "Link";
-    }
-    this.requestUpdate();
-  }
-
-  render() {
-    if (!this.href) {
-      return html`<span>${this._text}</span>`;
-    }
-
-    return html`
-      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
-        ${this._text}
-        <ds-icon type="open"></ds-icon>
-      </a>
-    `;
-  }
-}
-
-customElements.define("ds-link", Link);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-link": Link;
-  }
-}