@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/reveal/reveal.js

@@ -0,0 +1,352 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+/** One observer per offset, shared by every reveal on the page. */
+const observers = new Map();
+const instances = new WeakMap();
+function observerFor(offset) {
+    let observer = observers.get(offset);
+    if (!observer) {
+        // Shrinking the bottom of the viewport makes content reveal once it has travelled `offset`%
+        // into view, and works for elements taller than the screen (a ratio threshold would not).
+        observer = new IntersectionObserver((entries) => entries.forEach((entry) => instances.get(entry.target)?.handleIntersection(entry)), { rootMargin: `0px 0px -${offset}% 0px` });
+        observers.set(offset, observer);
+    }
+    return observer;
+}
+/** False for people who prefer reduced motion and when a page opts out with `data-reveal="off"`. */
+function canAnimate() {
+    if (typeof IntersectionObserver === "undefined")
+        return false;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return false;
+    return document.documentElement.dataset.reveal !== "off";
+}
+/** The hidden look. Used for the host itself, or for each child when `stagger` is set. */
+const hidden = css `
+  opacity: 0;
+  transform: translate3d(var(--_tx), var(--_ty), 0) scale(var(--_scale));
+  filter: blur(var(--_blur));
+  will-change: opacity, transform;
+`;
+const shown = css `
+  opacity: 1;
+  transform: none;
+  filter: none;
+`;
+const transitions = css `
+  transition:
+    opacity var(--_duration) var(--_ease),
+    transform var(--_duration) var(--_ease),
+    filter var(--_duration) var(--_ease);
+`;
+/**
+ * Animates its content into view as it is scrolled to, and optionally back out as it leaves.
+ *
+ * The content always stays in the DOM, so search engines, screen readers and find-in-page see
+ * all of it. Content is only visually hidden once the element is armed in the browser, and only
+ * when it starts below the fold. Without JavaScript, with reduced motion, or with
+ * `<html data-reveal="off">`, everything is simply visible.
+ *
+ * Set `stagger` (milliseconds) to animate the direct children one after another instead of the
+ * element as a whole.
+ *
+ * Events: `st-reveal-in` and `st-reveal-out` (bubbles, composed) when the state changes.
+ */
+let StReveal = class StReveal extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.effect = "slide-up";
+        /** Length of the animation in milliseconds. */
+        this.duration = 600;
+        /** Wait before the animation starts, in milliseconds. */
+        this.delay = 0;
+        /** How far slide effects travel (any CSS length). */
+        this.distance = "2rem";
+        /** Any CSS timing function. Defaults to a gentle ease-out. */
+        this.easing = "";
+        /** Percentage of the viewport height the element must travel into view before it reveals. */
+        this.offset = 10;
+        /** Milliseconds between each child when animating children in sequence (0 animates as one). */
+        this.stagger = 0;
+        /** Animate out as the content leaves the viewport, and back in when it returns. */
+        this.out = false;
+        this._armFrame = 0;
+        /** Keyboard users must never land on invisible content. */
+        this._onFocusIn = () => {
+            if (this._state === "pending" || this._state === "out")
+                this._setState("in");
+        };
+    }
+    /** Current phase, or undefined while the content is simply visible (never armed). */
+    get state() {
+        return this._state;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusin", this._onFocusIn);
+        this._arm();
+    }
+    disconnectedCallback() {
+        this.removeEventListener("focusin", this._onFocusIn);
+        this._disarm();
+        super.disconnectedCallback();
+    }
+    /** Hides the content again and plays the entry animation, for demos and previews. */
+    replay() {
+        if (this.effect === "none" || !canAnimate())
+            return;
+        if (!this._observed)
+            this._arm();
+        this._hideInstantly();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (this._isInViewport())
+                    this._setState("in");
+            });
+        });
+    }
+    updated(changed) {
+        this.style.setProperty("--_duration", `${this.duration}ms`);
+        this.style.setProperty("--_delay", `${this.delay}ms`);
+        this.style.setProperty("--_stagger", `${this.stagger}ms`);
+        this.style.setProperty("--_distance", this.distance);
+        if (this.easing)
+            this.style.setProperty("--_ease", this.easing);
+        else
+            this.style.removeProperty("--_ease");
+        // Only a genuine change re-arms: on the first update every property is "changed".
+        const retune = ["effect", "offset", "out", "stagger"].some((key) => changed.has(key) && changed.get(key) !== undefined);
+        if (retune) {
+            this._disarm();
+            this._arm();
+        }
+    }
+    // ------------------------------------------------------------------ arming
+    _arm(allowRetry = true) {
+        if (this._observed || this.effect === "none" || !canAnimate())
+            return;
+        // Content that has just been added may not have a box yet. Give it one frame to get laid out
+        // before judging where it is, so content already on screen is never made to fade in.
+        if (allowRetry && this.getClientRects().length === 0) {
+            cancelAnimationFrame(this._armFrame);
+            this._armFrame = requestAnimationFrame(() => this._arm(false));
+            return;
+        }
+        this.toggleAttribute("data-staggered", this.stagger > 0);
+        const belowFold = this._startsBelowFold();
+        // Content already on screen, or already scrolled past, is shown straight away.
+        if (belowFold)
+            this._hideInstantly();
+        else
+            this._setState("in", false);
+        this._observed = observerFor(this.offset);
+        instances.set(this, this);
+        this._observed.observe(this);
+    }
+    /** Whether the content starts below the visible part of the screen. */
+    _startsBelowFold() {
+        const limit = window.innerHeight * (1 - this.offset / 100);
+        if (this.getClientRects().length > 0)
+            return this.getBoundingClientRect().top > limit;
+        // Not displayed. Inside a row that skips off-screen work (content-visibility) the nearest
+        // displayed ancestor says where we are; inside something hidden we have no position, so we
+        // wait and reveal as soon as we are shown on screen.
+        let node = this.parentElement ?? this.getRootNode().host ?? null;
+        while (node && node.getClientRects().length === 0) {
+            node = node.parentElement ?? node.getRootNode().host ?? null;
+        }
+        if (node && getComputedStyle(node).contentVisibility === "auto") {
+            return node.getBoundingClientRect().top > limit;
+        }
+        return true;
+    }
+    _disarm() {
+        cancelAnimationFrame(this._armFrame);
+        this._observed?.unobserve(this);
+        this._observed = undefined;
+        this._state = undefined;
+        this.removeAttribute("data-reveal");
+        this.removeAttribute("data-exit");
+    }
+    /** Moves to the hidden state without animating there (the hide itself must never be seen). */
+    _hideInstantly() {
+        this.toggleAttribute("data-instant", true);
+        this._setState("pending", false);
+        void this.offsetWidth; // flush the hidden style while transitions are off
+        // Wait for the settings (distance, duration...) to be applied so they too skip the transition.
+        void this.updateComplete.then(() => {
+            void this.offsetWidth;
+            requestAnimationFrame(() => this.removeAttribute("data-instant"));
+        });
+    }
+    /** @internal Called by the shared observer. */
+    handleIntersection(entry) {
+        if (entry.isIntersecting) {
+            if (this._state !== "in")
+                this._setState("in");
+            if (!this.out)
+                this._unobserve();
+        }
+        else if (this.out && this._state === "in") {
+            const rect = entry.boundingClientRect;
+            this.setAttribute("data-exit", rect.top + rect.height / 2 < window.innerHeight / 2 ? "top" : "bottom");
+            this._setState("out");
+        }
+    }
+    _unobserve() {
+        this._observed?.unobserve(this);
+        this._observed = undefined;
+    }
+    _setState(state, announce = true) {
+        if (this._state === state)
+            return;
+        this._state = state;
+        this.setAttribute("data-reveal", state);
+        if (announce && state !== "pending") {
+            this.dispatchEvent(new CustomEvent(`st-reveal-${state}`, { bubbles: true, composed: true }));
+        }
+    }
+    _isInViewport() {
+        const rect = this.getBoundingClientRect();
+        return rect.bottom > 0 && rect.top < window.innerHeight * (1 - this.offset / 100);
+    }
+    _onSlotChange(e) {
+        e.target
+            .assignedElements()
+            .forEach((child, i) => child.style.setProperty("--st-reveal-i", String(i)));
+    }
+    render() {
+        return html `<slot @slotchange=${this._onSlotChange}></slot>`;
+    }
+};
+StReveal.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        --_distance: 2rem;
+        --_duration: var(--st-duration-reveal, 600ms);
+        --_delay: 0ms;
+        --_ease: var(--st-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
+        --_stagger: 0ms;
+        --_tx: 0;
+        --_ty: var(--_distance);
+        --_scale: 1;
+        --_blur: 0;
+      }
+
+      :host([effect="fade"]) {
+        --_ty: 0;
+      }
+      :host([effect="slide-up"]) {
+        --_ty: var(--_distance);
+      }
+      :host([effect="slide-down"]) {
+        --_ty: calc(var(--_distance) * -1);
+      }
+      :host([effect="slide-left"]) {
+        --_tx: var(--_distance);
+        --_ty: 0;
+      }
+      :host([effect="slide-right"]) {
+        --_tx: calc(var(--_distance) * -1);
+        --_ty: 0;
+      }
+      :host([effect="zoom"]) {
+        --_ty: 0;
+        --_scale: 0.92;
+      }
+      :host([effect="blur"]) {
+        --_ty: 0;
+        --_blur: 0.75rem;
+      }
+
+      /* Vertical slides keep travelling the way the content left the screen. */
+      :host([data-reveal="out"][data-exit="top"][effect="slide-up"]),
+      :host([data-reveal="out"][data-exit="top"][effect="slide-down"]) {
+        --_ty: calc(var(--_distance) * -1);
+      }
+      :host([data-reveal="out"][data-exit="bottom"][effect="slide-up"]),
+      :host([data-reveal="out"][data-exit="bottom"][effect="slide-down"]) {
+        --_ty: var(--_distance);
+      }
+
+      /* Whole element */
+      :host([data-reveal]:not([data-staggered])) {
+        ${transitions}
+        transition-delay: var(--_delay);
+      }
+      :host([data-reveal="pending"]:not([data-staggered])),
+      :host([data-reveal="out"]:not([data-staggered])) {
+        ${hidden}
+      }
+      :host([data-reveal="in"]:not([data-staggered])) {
+        ${shown}
+      }
+
+      /* Children in sequence */
+      :host([data-staggered][data-reveal]) ::slotted(*) {
+        ${transitions}
+        transition-delay: calc(var(--_delay) + var(--st-reveal-i, 0) * var(--_stagger));
+      }
+      :host([data-staggered][data-reveal="pending"]) ::slotted(*),
+      :host([data-staggered][data-reveal="out"]) ::slotted(*) {
+        ${hidden}
+      }
+      :host([data-staggered][data-reveal="in"]) ::slotted(*) {
+        ${shown}
+      }
+
+      /* Replay jumps back to the hidden state without animating there. */
+      :host([data-instant]),
+      :host([data-instant]) ::slotted(*) {
+        transition: none !important;
+      }
+
+      @media (prefers-reduced-motion: reduce), print {
+        :host,
+        :host ::slotted(*) {
+          opacity: 1 !important;
+          transform: none !important;
+          filter: none !important;
+          transition: none !important;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StReveal.prototype, "effect", void 0);
+__decorate([
+    property({ type: Number })
+], StReveal.prototype, "duration", void 0);
+__decorate([
+    property({ type: Number })
+], StReveal.prototype, "delay", void 0);
+__decorate([
+    property({ type: String })
+], StReveal.prototype, "distance", void 0);
+__decorate([
+    property({ type: String })
+], StReveal.prototype, "easing", void 0);
+__decorate([
+    property({ type: Number })
+], StReveal.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], StReveal.prototype, "stagger", void 0);
+__decorate([
+    property({ type: Boolean })
+], StReveal.prototype, "out", void 0);
+StReveal = __decorate([
+    customElement("st-reveal")
+], StReveal);
+export { StReveal };
+//# sourceMappingURL=reveal.js.map

package/dist/components/reveal/reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal.js","sourceRoot":"","sources":["../../../src/components/reveal/reveal.ts"],"names":[],"mappings":"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"}

package/dist/components/scroll-progress/scroll-progress.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * A thin bar showing how far down the page (or an article) the reader has scrolled.
+ *
+ * By default it tracks the whole page and sticks to the top of the screen. Point `target` at an
+ * element (such as the article) to measure progress through just that element. The bar is
+ * decorative and hidden from screen readers.
+ *
+ * Events: `st-scroll-progress` with `detail.progress` (0 to 1), only when the value changes.
+ */
+export declare class StScrollProgress extends LitElement {
+    /** CSS selector of the element to measure. Empty tracks the whole page. */
+    target: string;
+    position: "top" | "bottom";
+    private _progress;
+    private _frame;
+    static styles: import("lit").CSSResult[];
+    /** Progress through the page or target, from 0 to 1. */
+    get progress(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private _schedule;
+    private _measure;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-scroll-progress": StScrollProgress;
+    }
+}
+//# sourceMappingURL=scroll-progress.d.ts.map

package/dist/components/scroll-progress/scroll-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-progress.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-progress/scroll-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,2EAA2E;IACjD,MAAM,SAAM;IACG,QAAQ,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE5E,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,MAAM,CAAK;IAEnB,MAAM,CAAC,MAAM,4BAiCX;IAEF,wDAAwD;IACxD,IAAI,QAAQ,WAEX;IAED,iBAAiB,SAKhB;IAED,oBAAoB,SAKnB;IAED,SAAS,CAAC,OAAO,SAEhB;IAED,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,QAAQ;IAwBhB,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/scroll-progress/scroll-progress.js

@@ -0,0 +1,120 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+/**
+ * A thin bar showing how far down the page (or an article) the reader has scrolled.
+ *
+ * By default it tracks the whole page and sticks to the top of the screen. Point `target` at an
+ * element (such as the article) to measure progress through just that element. The bar is
+ * decorative and hidden from screen readers.
+ *
+ * Events: `st-scroll-progress` with `detail.progress` (0 to 1), only when the value changes.
+ */
+let StScrollProgress = class StScrollProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** CSS selector of the element to measure. Empty tracks the whole page. */
+        this.target = "";
+        this.position = "top";
+        this._progress = 0;
+        this._frame = 0;
+        this._schedule = () => {
+            cancelAnimationFrame(this._frame);
+            this._frame = requestAnimationFrame(() => this._measure());
+        };
+    }
+    /** Progress through the page or target, from 0 to 1. */
+    get progress() {
+        return this._progress;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("scroll", this._schedule, { passive: true });
+        window.addEventListener("resize", this._schedule, { passive: true });
+        this._schedule();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("scroll", this._schedule);
+        window.removeEventListener("resize", this._schedule);
+        cancelAnimationFrame(this._frame);
+        super.disconnectedCallback();
+    }
+    updated() {
+        this._schedule();
+    }
+    _measure() {
+        const element = this.target ? document.querySelector(this.target) : null;
+        let progress;
+        if (element) {
+            // Read: how much of the element has scrolled past the top of the screen.
+            const rect = element.getBoundingClientRect();
+            const scrollable = rect.height - window.innerHeight;
+            progress = scrollable > 0 ? -rect.top / scrollable : rect.top < 0 ? 1 : 0;
+        }
+        else {
+            const root = document.documentElement;
+            const scrollable = root.scrollHeight - window.innerHeight;
+            progress = scrollable > 0 ? window.scrollY / scrollable : 0;
+        }
+        progress = Math.min(1, Math.max(0, progress));
+        if (progress === this._progress)
+            return;
+        this._progress = progress;
+        this.style.setProperty("--_progress", String(progress));
+        this.dispatchEvent(new CustomEvent("st-scroll-progress", { detail: { progress }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `<div class="bar" aria-hidden="true"></div>`;
+    }
+};
+StScrollProgress.styles = [
+    resetStyles,
+    css `
+      :host {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: var(--st-scroll-progress-z, 100);
+        height: var(--st-scroll-progress-height, 0.25rem);
+        pointer-events: none;
+      }
+
+      :host([position="bottom"]) {
+        top: auto;
+        bottom: 0;
+      }
+
+      .bar {
+        width: 100%;
+        height: 100%;
+        background: var(--st-scroll-progress-color, var(--st-color-primary));
+        transform: scaleX(var(--_progress, 0));
+        transform-origin: left;
+        transition: transform 0.1s linear;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .bar {
+          transition: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StScrollProgress.prototype, "target", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StScrollProgress.prototype, "position", void 0);
+StScrollProgress = __decorate([
+    customElement("st-scroll-progress")
+], StScrollProgress);
+export { StScrollProgress };
+//# sourceMappingURL=scroll-progress.js.map

package/dist/components/scroll-progress/scroll-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-progress.js","sourceRoot":"","sources":["../../../src/components/scroll-progress/scroll-progress.ts"],"names":[],"mappings":"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"}

package/dist/components/section/card-row.d.ts

@@ -0,0 +1,30 @@
+import { PropertyValues, TemplateResult } from "lit";
+import { StSection } from "./section.js";
+/**
+ * Base for rows that list cards (blog posts, projects). Cards sit in a grid or a single column and
+ * can be filtered by topic: add `filterable` and a button appears for every topic used in the
+ * cards' `tags`.
+ */
+export declare abstract class StCardRow extends StSection {
+    /** The most columns on wide screens (grid layout). */
+    columns: number;
+    /** `grid` or one card per row. */
+    layout: "grid" | "list";
+    /** Shows topic buttons that filter the cards. */
+    filterable: boolean;
+    filterLabel: string;
+    allLabel: string;
+    private _tags;
+    private _active;
+    private _visible;
+    private _total;
+    static styles: import("lit").CSSResult[];
+    private get _cards();
+    protected updated(changed: PropertyValues<this>): void;
+    private _onCardsChange;
+    private _applyFilter;
+    private _choose;
+    private _renderFilters;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=card-row.d.ts.map

package/dist/components/section/card-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../../src/components/section/card-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAGvC;;;;GAIG;AACH,8BAAsB,SAAU,SAAQ,SAAS;IAC/C,sDAAsD;IAC5B,OAAO,SAAK;IACtC,kCAAkC;IACO,MAAM,EAAE,MAAM,GAAG,MAAM,CAAU;IAC1E,iDAAiD;IACP,UAAU,UAAS;IACR,WAAW,SAAqB;IACnC,QAAQ,SAAS;IAE1D,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAK;IAE5B,MAAM,CAAC,MAAM,4BA0DX;IAEF,OAAO,KAAK,MAAM,GAGjB;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAM9C;IAED,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,cAAc;IAqBtB,MAAM,mBAQL;CACF"}