@nldd/design-system 0.8.57 → 0.8.59

package/dist/components/layout/page-sections/hero/hero.js

@@ -0,0 +1,168 @@
+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;
+};
+/**
+ * NLDD Design System Hero Component (Lit + TypeScript)
+ *
+ * Een paginakop volgens de rijkshuisstijl-vormtaal: een mediavlak met exact
+ * één afgeronde hoek (radius afgeleid van de lintbreedte) en een tekstpaneel
+ * (de main) dat op zes posities kan staan. De radius is van het component en
+ * niet instelbaar: 1,5X lintbreedte op smalle containers, 2X op md/lg.
+ *
+ * De media-hoek volgt automatisch uit `main-position` (zie de tabel in de
+ * stories) en is per geval te overschrijven met `media-corner`. Het paneel
+ * krijgt zijn eigen afgeronde hoek — op halve maat, zodat de tekst niet
+ * tegen de rand komt — op de hoek die diagonaal het mediavlak in wijst.
+ * Beslaat het paneel een volledige rand (`left`/`right`, `main-width="full"`
+ * of de gestapelde mobiele weergave), dan is het hoekloos. Bij
+ * `main-width="full"` staat het mediavlak als losse strook boven of onder het
+ * paneel — niet erachter — en schuift de media-hoek mee naar de buitenrand van
+ * die strook (weg van het paneel), zodat hij zichtbaar blijft. Op mobiel zit de
+ * media-hoek altijd aan de bovenkant (een onderhoek klapt naar zijn
+ * bovenhoek) en is hij een halve stap groter (1,5X). Zonder media vult de
+ * main het volledige vlak; met `main-background="base"` krijgt het vlak dan
+ * een rand op de zijden die de afgeronde hoek raken, zoals blockquote.
+ *
+ * Met `main-background` krijgt het paneel een vlakkleur uit de
+ * filled-categories; die leveren een pure witte of zwarte contentkleur mee,
+ * zodat componenten met `color="inherit"` (title, rich-text) gegarandeerd
+ * contrast houden.
+ *
+ * Per de rijkshuisstijl wordt de radius nooit geanimeerd.
+ *
+ * @element nldd-hero
+ *
+ * @attr {'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left'|'right'} main-position -
+ *   Positie van het tekstpaneel (default: 'bottom-left'); 'left'/'right' beslaan de volle hoogte
+ * @attr {'1/2'|'2/3'|'3/4'|'full'} main-width - Breedte van het paneel (default: '1/2');
+ *   'full' maakt een volle boven- of onderstrook en wordt bij 'left'/'right' genegeerd
+ * @attr {string} main-background - Vlakkleur van het paneel: 'base' (de base surface)
+ *   of een categoriekleur — 'accent' (default) of een rijkskleur zoals
+ *   'lintblauw'|'donkerblauw'|'oranje'
+ * @attr {'auto'|'top-left'|'top-right'|'bottom-left'|'bottom-right'} media-corner -
+ *   Afgeronde hoek van het mediavlak; 'auto' (default) volgt main-position
+ * @attr {'inherit'|'base'|'tinted'} background - Surface achter de hero (sectie-API)
+ * @attr {'inherit'|'light'|'dark'|'inverted'} scheme - Kleurschema (sectie-API)
+ * @attr {string} width - Body max-width; 'full' verwijdert de begrenzing (sectie-API)
+ * @attr {string} height - Minimale hoogte van de sectie (sectie-API)
+ * @attr {string} padding-block - Blokpadding-override, ook per rand en responsief (sectie-API)
+ *
+ * @slot media - Afbeelding of illustratie (img of nldd-image); vult het vlak en wordt geclipt.
+ *   Zet `alt=""` wanneer de afbeelding decoratief is; geef anders een beschrijvende alt-tekst op.
+ * @slot - Inhoud van het tekstpaneel (bijv. nldd-title en nldd-rich-text met color="inherit")
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
+import { heroStyles } from './hero.styles.js';
+import { heroTemplate } from './hero.template.js';
+/* The media corner per panel position — a curated lookup straight from the
+ * rijkshuisstijl examples, not a formula. */
+const AUTO_CORNER = {
+    'bottom-left': 'top-right',
+    'bottom-right': 'bottom-left',
+    'top-left': 'top-right',
+    'top-right': 'top-left',
+    'left': 'top-right',
+    'right': 'top-left',
+};
+/* The panel's own single corner: the one pointing diagonally into the media. */
+const MAIN_CORNER = {
+    'bottom-left': 'top-right',
+    'bottom-right': 'top-left',
+    'top-left': 'bottom-right',
+    'top-right': 'bottom-left',
+    'left': null,
+    'right': null,
+};
+let NLDDHero = class NLDDHero extends PageSectionMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mainPosition = 'bottom-left';
+        this.mainWidth = '1/2';
+        this.mainBackground = 'accent';
+        this.mediaCorner = 'auto';
+        /** Width mode: 'full' (removes body max-width) or any CSS length. */
+        this.width = '';
+        this._hasMedia = false;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // Resolve the corner logic once per update and expose it as host data
+        // attributes the stylesheet keys off — keeps the per-corner CSS flat.
+        // mainPosition is typed, but HTML attributes are not — fall back to the
+        // default for an unknown or empty value (the design-system convention).
+        const position = AUTO_CORNER[this.mainPosition] ? this.mainPosition : 'bottom-left';
+        const edge = position === 'left' || position === 'right';
+        let mediaCorner = this.mediaCorner !== 'auto'
+            ? this.mediaCorner
+            : AUTO_CORNER[position];
+        // At main-width="full" the media stacks above or below the full-width
+        // panel instead of sitting behind it, so its rounded corner must land on
+        // the strip's outer edge to stay visible: a bottom panel puts the media
+        // (and its corner) on top, a top panel puts it below. Keep the horizontal
+        // side, force the vertical side away from the panel — even when the corner
+        // was set explicitly, mirroring the mobile rule. The full-height left/right
+        // panels ignore main-width="full", so they keep their curated corner.
+        if (this.mainWidth === 'full' && this._hasMedia && !edge) {
+            const panelAtTop = position === 'top-left' || position === 'top-right';
+            const side = mediaCorner.endsWith('left') ? 'left' : 'right';
+            mediaCorner = `${panelAtTop ? 'bottom' : 'top'}-${side}`;
+        }
+        this.setAttribute('data-media-corner', mediaCorner);
+        const mainCorner = (!this._hasMedia || edge || this.mainWidth === 'full')
+            ? null
+            : MAIN_CORNER[position];
+        this.setAttribute('data-main-corner', mainCorner ?? 'none');
+        this.toggleAttribute('data-has-media', this._hasMedia);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('width')) {
+            // Same contract as the other page sections: the keyword 'full' is
+            // handled by CSS; CSS lengths feed --_max-width inline.
+            const w = this.width;
+            if (w && w !== 'full' && CSS.supports('max-width', w)) {
+                this.style.setProperty('--_max-width', w);
+            }
+            else {
+                this.style.removeProperty('--_max-width');
+            }
+        }
+    }
+    /** @internal Tracks the media slot so the no-media mode can collapse it. */
+    _onMediaSlotChange(e) {
+        const slot = e.target;
+        this._hasMedia = slot.assignedElements().length > 0;
+    }
+    render() {
+        return heroTemplate(this);
+    }
+};
+NLDDHero.styles = heroStyles;
+__decorate([
+    property({ type: String, reflect: true, attribute: 'main-position' })
+], NLDDHero.prototype, "mainPosition", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'main-width' })
+], NLDDHero.prototype, "mainWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'main-background' })
+], NLDDHero.prototype, "mainBackground", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'media-corner' })
+], NLDDHero.prototype, "mediaCorner", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDHero.prototype, "width", void 0);
+__decorate([
+    state()
+], NLDDHero.prototype, "_hasMedia", void 0);
+NLDDHero = __decorate([
+    customElement('nldd-hero')
+], NLDDHero);
+export { NLDDHero };
+//# sourceMappingURL=hero.js.map

package/dist/components/layout/page-sections/hero/hero.js.map

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

package/dist/components/layout/page-sections/hero/hero.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const heroStyles: import("lit").CSSResult;
+//# sourceMappingURL=hero.styles.d.ts.map

package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/hero/hero.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,yBA2ftB,CAAC"}