lintje 0.2.0 → 0.3.0

package/dist-elements/tag/session-expiry.js

@@ -1,184 +0,0 @@
-import { Bt as e, Gt as t, Ht as n, It as r, Lt as i, Nt as a, qt as o, zt as s } from "../chunks/base-Bg-IFOPG.js";
-import { n as c, t as l } from "../chunks/focus-trap-9BnE-xWv.js";
-import "./announcement.js";
-import { t as u } from "../chunks/confirm-dialog-D5EVGuil.js";
-//#region src/components/frame/session-expiry/session-expiry.css?inline
-var d = "/* The warning is a fixed window in `confirm-dialog.css`'s frame. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n@media (max-width: 767px) {\n  .lintje-session-expiry__primary { order: 1; }\n  .lintje-session-expiry__logout { order: 2; }\n}\n", f = 20;
-function p(e, t, n, r = !1) {
-	if (r) return "expired";
-	if (e === null || Number.isNaN(e)) return "active";
-	let i = e - t;
-	return i <= 0 ? "expired" : i <= n * 1e3 ? "warning" : "active";
-}
-function m(e) {
-	let t = Math.max(1, Math.ceil(e / 6e4));
-	return `Je sessie verloopt over ${t} ${t === 1 ? "minuut" : "minuten"}`;
-}
-function h(e) {
-	let t = new Date(e);
-	return Number.isNaN(t.getTime()) ? null : t.toLocaleTimeString("nl-NL", {
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-var g = class extends s {
-	constructor(...e) {
-		super(...e), this.warnBefore = 120, this.restoredReason = "logout", this.busy = !1, this.expired = !1, this.now = Date.now, this.clock = 0, this.#e = new i(this, r), this.#t = null, this.#n = null, this.#r = new l(), this.#i = null, this.#a = (e) => {
-			e.key === "Escape" && this.#r.isTopmost() && (e.stopPropagation(), e.preventDefault());
-		};
-	}
-	static {
-		this.styles = [n(u), n(d)];
-	}
-	static {
-		this.properties = {
-			expiresAt: {
-				type: String,
-				attribute: "expires-at"
-			},
-			warnBefore: {
-				type: Number,
-				attribute: "warn-before"
-			},
-			restoredAt: {
-				type: String,
-				attribute: "restored-at"
-			},
-			restoredReason: {
-				type: String,
-				attribute: "restored-reason"
-			},
-			busy: {
-				type: Boolean,
-				reflect: !0
-			},
-			expired: {
-				type: Boolean,
-				reflect: !0
-			},
-			now: { attribute: !1 },
-			clock: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	#i;
-	#a;
-	get phase() {
-		let e = this.expiresAt ? new Date(this.expiresAt).getTime() : null, t = Number.isFinite(this.warnBefore) ? this.warnBefore : 120;
-		return p(e, this.clock, Math.max(20, t), this.expired);
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.clock = this.now(), this.#o();
-	}
-	disconnectedCallback() {
-		this.#s(), this.#c(), super.disconnectedCallback();
-	}
-	willUpdate(e) {
-		super.willUpdate(e), (e.has("expiresAt") || e.has("now")) && (this.clock = this.now());
-	}
-	#o() {
-		if (!this.expiresAt || !this.isConnected) return this.#s();
-		this.#t === null && (this.#t = setInterval(() => this.clock = this.now(), 1e3));
-	}
-	#s() {
-		this.#t !== null && clearInterval(this.#t), this.#t = null;
-	}
-	updated(e) {
-		super.updated(e), e.has("expiresAt") && this.#o();
-		let t = this.phase;
-		if (t === "active") this.#c();
-		else {
-			if (!this.#n) {
-				this.#n = a(), document.addEventListener("keydown", this.#a, !0);
-				let e = this.renderRoot.querySelector(".lintje-session-expiry");
-				e && this.#r.activate(e, { focus: !1 });
-			}
-			if (this.#i !== t) {
-				this.#i = t;
-				let e = this.renderRoot.querySelector(".lintje-session-expiry__primary");
-				e && e.updateComplete.then(() => {
-					this.#r.isTopmost() && c(e).focus();
-				});
-			}
-		}
-	}
-	#c() {
-		this.#i = null, this.#n && (document.removeEventListener("keydown", this.#a, !0), this.#n(), this.#n = null, this.#r.deactivate());
-	}
-	renderRestored() {
-		if (!this.restoredAt) return t;
-		let e = h(this.restoredAt), n = this.restoredReason === "reload" ? {
-			kind: "ok",
-			text: e ? `Je concept van ${e} is teruggezet.` : "Je concept is teruggezet."
-		} : {
-			kind: "ok",
-			title: "Je concept is teruggezet.",
-			text: e ? `Het is van ${e}, van voor het afmelden.` : "Het is van voor het afmelden."
-		};
-		return o`<lintje-announcement compact .data=${n}>
-      <lintje-button slot="action" variant="link" @click=${() => this.emit("lintje-draft-discard")}
-        >Concept weggooien</lintje-button
-      >
-    </lintje-announcement>`;
-	}
-	renderDialog(e) {
-		if (e === "active") return t;
-		let n = this.#e.matches, r = e === "expired", i = this.expiresAt ? new Date(this.expiresAt).getTime() : this.clock;
-		return o`<div class="lintje-confirm-dialog__scrim">
-      <div
-        class="lintje-confirm-dialog lintje-session-expiry"
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="lintje-session-expiry-heading"
-        tabindex="-1"
-        aria-describedby="lintje-session-expiry-text"
-      >
-        <h2 id="lintje-session-expiry-heading" class="lintje-confirm-dialog__heading">
-          ${r ? "Je bent afgemeld" : m(i - this.clock)}
-        </h2>
-        <div id="lintje-session-expiry-text" class="lintje-confirm-dialog__text">
-          ${r ? o`<slot name="expired"
-                  >Je sessie is verlopen. Meld je opnieuw aan; je komt terug op deze pagina.</slot
-                >` : o`<slot
-                  >Je invoer wordt bewaard in deze browser. Blijf aangemeld om door te werken.</slot
-                >`}
-        </div>
-        <div class="lintje-confirm-dialog__actions">
-          ${r ? o`<lintje-button
-                class="lintje-session-expiry__primary"
-                variant="primary"
-                ?block=${n}
-                @click=${() => this.emit("lintje-login")}
-                >Opnieuw aanmelden</lintje-button
-              >` : o`<lintje-button
-                  class="lintje-session-expiry__logout"
-                  variant="tertiary"
-                  ?block=${n}
-                  ?disabled=${this.busy}
-                  @click=${() => this.emit("lintje-logout")}
-                  >Afmelden</lintje-button
-                >
-                <lintje-button
-                  class="lintje-session-expiry__primary"
-                  variant="primary"
-                  ?block=${n}
-                  ?busy=${this.busy}
-                  @click=${() => {
-			this.busy || this.emit("lintje-session-extend");
-		}}
-                  >Aangemeld blijven</lintje-button
-                >`}
-        </div>
-      </div>
-    </div>`;
-	}
-	render() {
-		return o`${this.renderRestored()}${this.renderDialog(this.phase)}`;
-	}
-};
-e("lintje-session-expiry", g);
-//#endregion
-export { g as LintjeSessionExpiry, f as MIN_WARNING, h as clockTime, p as sessionPhase, m as warningTitle };

package/dist-elements/tag/shortcuts.d.ts

@@ -1 +0,0 @@
-export * from '../types/components/frame/shortcuts/shortcuts.js'

package/dist-elements/tag/shortcuts.js

@@ -1,104 +0,0 @@
-import { Bt as e, Ct as t, Gt as n, Ht as r, Nt as i, St as a, qt as o, vt as s, wt as c, xt as l, yt as u, zt as d } from "../chunks/base-Bg-IFOPG.js";
-import { t as f } from "../chunks/focus-trap-9BnE-xWv.js";
-import { t as p } from "../chunks/key-CuuOw1KE.js";
-import "./toggle.js";
-import { t as m } from "../chunks/confirm-dialog-D5EVGuil.js";
-//#region src/components/frame/shortcuts/shortcuts.css?inline
-var h = "/* The frame is `confirm-dialog.css`. The host takes no space: a closed overview renders nothing. */\n:host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The window takes focus when it opens so Escape and the screen reader start there. */\n\n.lintje-shortcuts__list {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-shortcuts__what,\n.lintje-shortcuts__keys {\n  margin: 0;\n  padding: var(--space-2) 0;\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-shortcuts__keys {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  padding-left: var(--space-4);\n}\n.lintje-shortcuts__what:nth-last-of-type(1),\n.lintje-shortcuts__keys:nth-last-of-type(1) { border-bottom: 0; }\n\n/* The switch for the one-character keys, under the list. */\n.lintje-shortcuts__setting { display: block; margin-top: var(--space-4); }\n", g = class extends d {
-	constructor(...e) {
-		super(...e), this.open = !1, this.heading = "Sneltoetsen", this.list = [], this.characterKeys = !0, this.#e = null, this.#t = null, this.#n = new f(), this.#r = (e) => {
-			e.key === "Escape" && this.#n.isTopmost() && this.close("escape");
-		};
-	}
-	static {
-		this.styles = [
-			r(m),
-			r(p),
-			r(h)
-		];
-	}
-	static {
-		this.properties = {
-			open: {
-				type: Boolean,
-				reflect: !0
-			},
-			heading: { type: String },
-			list: { state: !0 },
-			characterKeys: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	connectedCallback() {
-		super.connectedCallback(), this.#e = a({
-			keys: "?",
-			description: "Dit overzicht",
-			handler: () => {
-				this.open || this.emit("lintje-open");
-			}
-		});
-	}
-	disconnectedCallback() {
-		this.#e?.(), this.#e = null, this.#a(), super.disconnectedCallback();
-	}
-	close(e) {
-		this.emit("lintje-close", { reason: e });
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("open") && this.open && (this.list = c(), this.characterKeys = s());
-	}
-	updated(e) {
-		super.updated(e), this.open && !this.#t ? this.#i() : !this.open && this.#t && this.#a();
-	}
-	#i() {
-		this.#t = i(), document.addEventListener("keydown", this.#r);
-		let e = this.renderRoot.querySelector(".lintje-confirm-dialog");
-		e && this.#n.activate(e);
-	}
-	#a() {
-		this.#t && (document.removeEventListener("keydown", this.#r), this.#t(), this.#t = null, this.#n.deactivate());
-	}
-	renderRow(e) {
-		return o`<dt class="lintje-shortcuts__what">${e.description}</dt>
-      <dd class="lintje-shortcuts__keys">
-        ${l(e.keys).map((e) => o`<kbd class="lintje-key">${e}</kbd>`)}
-      </dd>`;
-	}
-	onCharacterKeys(e) {
-		this.characterKeys = e.detail, t(e.detail);
-	}
-	renderSetting() {
-		return this.list.some((e) => u(e.keys)) ? o`<lintje-toggle
-      class="lintje-shortcuts__setting"
-      label="Sneltoetsen van één teken"
-      hint="Uit werken alleen de sneltoetsen met Ctrl, Alt of Cmd."
-      .checked=${this.characterKeys}
-      @lintje-change=${this.onCharacterKeys}
-    ></lintje-toggle>` : n;
-	}
-	render() {
-		return this.open ? o`<div class="lintje-confirm-dialog__scrim" @click=${() => this.close("scrim")}>
-      <div
-        class="lintje-confirm-dialog lintje-shortcuts"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="lintje-shortcuts-heading"
-        tabindex="-1"
-        @click=${(e) => e.stopPropagation()}
-      >
-        <h2 id="lintje-shortcuts-heading" class="lintje-confirm-dialog__heading">${this.heading}</h2>
-        <dl class="lintje-shortcuts__list">${this.list.map((e) => this.renderRow(e))}</dl>
-        ${this.renderSetting()}
-        <div class="lintje-confirm-dialog__actions">
-          <lintje-button variant="secondary" @click=${() => this.close("button")}>Sluiten</lintje-button>
-        </div>
-      </div>
-    </div>` : n;
-	}
-};
-e("lintje-shortcuts", g);
-//#endregion
-export { g as LintjeShortcuts };

package/dist-elements/types/components/frame/session-expiry/session-expiry.d.ts

@@ -1,55 +0,0 @@
-/**
- * `<lintje-session-expiry>` — the warning before the session runs out, the notice after it, and
- * the "Je concept is teruggezet" announcement (`restored-at`).
- *
- * The window is a `role="alertdialog"` in `<lintje-confirm-dialog>`'s frame (its stylesheet).
- * Escape and the scrim do nothing, because the session runs out either way. The element never
- * calls a server: the host sets `busy`, moves `expires-at` or sets `expired`.
- *
- * Events: `lintje-session-extend`, `lintje-logout`, `lintje-login`, `lintje-draft-discard`.
- */
-import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../../core/element.js';
-import '../../feedback/announcement/announcement.js';
-import '../../../primitives/button/button.js';
-export type SessionPhase = 'active' | 'warning' | 'expired';
-export type RestoredReason = 'logout' | 'reload';
-/** The shortest warning, in seconds: time to read the question and answer it. */
-export declare const MIN_WARNING = 20;
-/** Where the session stands at `now`. Without an `expiresAt` it is active, unless `expired`. */
-export declare function sessionPhase(expiresAt: number | null, now: number, warnBeforeSeconds: number, expired?: boolean): SessionPhase;
-export declare function warningTitle(remainingMs: number): string;
-/** "10:42", or null for a moment that does not parse. */
-export declare function clockTime(moment: string): string | null;
-export declare class LintjeSessionExpiry extends LintjeElement {
-    #private;
-    static styles: import("lit").CSSResult[];
-    static properties: PropertyDeclarations;
-    /** When the session ends, as an ISO moment. */
-    expiresAt?: string;
-    /** Seconds before the end that the warning opens; at least `MIN_WARNING`. */
-    warnBefore: number;
-    /** When the restored draft was saved; set, the announcement shows. */
-    restoredAt?: string;
-    /** Why the draft came back; it picks the announcement's words. */
-    restoredReason: RestoredReason;
-    busy: boolean;
-    /** The host's word that the session is gone (extending failed). */
-    expired: boolean;
-    /** The clock, read once a second while there is an `expires-at`. A test replaces it. */
-    now: () => number;
-    protected clock: number;
-    get phase(): SessionPhase;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected updated(changed: PropertyValues<this>): void;
-    private renderRestored;
-    private renderDialog;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lintje-session-expiry': LintjeSessionExpiry;
-    }
-}

package/dist-elements/types/components/frame/shortcuts/shortcuts.d.ts

@@ -1,41 +0,0 @@
-/**
- * `<lintje-shortcuts>` — the overview of the keyboard shortcuts this page has registered.
- *
- * The list is the register's (`core/shortcuts.ts`), read when the window opens. The element
- * registers `?` itself and asks to be opened (`lintje-open`). The owner holds `open`, as with
- * `<lintje-confirm-dialog>`, whose frame and stylesheet this uses. Under the list a switch turns
- * the one-character keys off and on (WCAG 2.1.4); with them off, `?` opens nothing, so a page
- * also opens the overview from a button or a menu.
- *
- * Events: `lintje-open`, `lintje-close` `{ reason: 'escape' | 'scrim' | 'button' }`.
- */
-import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../../core/element.js';
-import { type ShortcutInfo } from '../../../core/shortcuts.js';
-import '../../../primitives/button/button.js';
-import '../../inputs/toggle/toggle.js';
-export type ShortcutsCloseReason = 'escape' | 'scrim' | 'button';
-export declare class LintjeShortcuts extends LintjeElement {
-    #private;
-    static styles: import("lit").CSSResult[];
-    static properties: PropertyDeclarations;
-    /** The owner's: the window asks to be closed and never closes itself. */
-    open: boolean;
-    heading: string;
-    protected list: ShortcutInfo[];
-    protected characterKeys: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private close;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected updated(changed: PropertyValues<this>): void;
-    private renderRow;
-    private onCharacterKeys;
-    private renderSetting;
-    protected render(): TemplateResult | typeof nothing;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lintje-shortcuts': LintjeShortcuts;
-    }
-}

package/dist-elements/types/components/overlays/confirm-dialog/confirm-dialog.d.ts

@@ -1,41 +0,0 @@
-/**
- * `<lintje-confirm-dialog>` — a question that needs an answer before anything goes on.
- *
- * The owner holds `open`; Escape, the scrim and cancel only ask (`lintje-close`). The cancel
- * button has the focus on open, so Enter never confirms by itself. While `busy` nothing closes.
- * A dialog on the shared focus-trap stack.
- *
- * Events: `lintje-confirm`, `lintje-close` `{ reason: 'cancel' | 'escape' | 'scrim' }`,
- * `lintje-action` from the third button.
- */
-import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
-export type ConfirmTone = 'danger' | 'primary';
-export type ConfirmCloseReason = 'cancel' | 'escape' | 'scrim';
-export declare class LintjeConfirmDialog extends LintjeElement {
-    #private;
-    static styles: import("lit").CSSResult;
-    static properties: PropertyDeclarations;
-    /** The owner's: the dialog asks to be closed and never closes itself. */
-    open: boolean;
-    /** The question, and the dialog's accessible name. */
-    heading: string;
-    /** The verb of the action ("Verwijderen"), never "OK". */
-    confirmLabel: string;
-    cancelLabel: string;
-    /** A third, tertiary button in front ("Weggooien"). */
-    actionLabel?: string;
-    tone: ConfirmTone;
-    /** The confirmed action is under way: nothing else can be pressed, Escape does nothing. */
-    busy: boolean;
-    private cancel;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues<this>): void;
-    protected render(): TemplateResult | typeof nothing;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lintje-confirm-dialog': LintjeConfirmDialog;
-    }
-}