@mmlogic/components 0.3.6 → 0.3.8

package/dist/collection/dev/auth.js

@@ -0,0 +1,156 @@
+/* =====================================================================
+   AUTH0 PKCE
+   ===================================================================== */
+
+const AUTH0_DOMAIN   = 'login.develop.rulebooks.nl';
+const AUTH0_CLIENT   = '5zpghu11GLFrx95eg5jMl1f0BEnkIenF';
+const AUTH0_AUDIENCE = 'https://api.mosterd';
+const REDIRECT_URI   = 'http://localhost:3333';
+
+let _accessToken = null;
+let _userEmail   = null;
+
+function authRestoreSession() {
+  const token = localStorage.getItem('auth_token');
+  const exp   = parseInt(localStorage.getItem('auth_exp') || '0', 10);
+  if (!token || (exp && Date.now() / 1000 >= exp - 60)) {
+    localStorage.removeItem('auth_token');
+    localStorage.removeItem('auth_email');
+    localStorage.removeItem('auth_exp');
+    return;
+  }
+  _accessToken = token;
+  _userEmail   = localStorage.getItem('auth_email') || null;
+}
+
+function base64url(buffer) {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+async function pkceGenerateVerifier() {
+  const bytes = crypto.getRandomValues(new Uint8Array(96));
+  return base64url(bytes);
+}
+
+async function pkceGenerateChallenge(verifier) {
+  const data = new TextEncoder().encode(verifier);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return base64url(hash);
+}
+
+async function authLogin() {
+  const verifier  = await pkceGenerateVerifier();
+  const challenge = await pkceGenerateChallenge(verifier);
+  sessionStorage.setItem('pkce_verifier', verifier);
+
+  const params = new URLSearchParams({
+    response_type:         'code',
+    client_id:             AUTH0_CLIENT,
+    redirect_uri:          REDIRECT_URI,
+    audience:              AUTH0_AUDIENCE,
+    scope:                 'openid profile email',
+    code_challenge:        challenge,
+    code_challenge_method: 'S256',
+  });
+
+  window.location.href = `https://${AUTH0_DOMAIN}/authorize?${params}`;
+}
+
+async function authHandleCallback() {
+  const url   = new URL(window.location.href);
+  const code  = url.searchParams.get('code');
+  const error = url.searchParams.get('error');
+
+  if (error) {
+    showAuthError(url.searchParams.get('error_description') || error);
+    cleanUrl();
+    return;
+  }
+
+  if (!code) return;
+
+  const verifier = sessionStorage.getItem('pkce_verifier');
+  if (!verifier) {
+    showAuthError('PKCE verifier missing — please try logging in again.');
+    cleanUrl();
+    return;
+  }
+  sessionStorage.removeItem('pkce_verifier');
+
+  try {
+    const resp = await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        grant_type:    'authorization_code',
+        client_id:     AUTH0_CLIENT,
+        code,
+        redirect_uri:  REDIRECT_URI,
+        code_verifier: verifier,
+      }),
+    });
+
+    const data = await resp.json();
+    if (!resp.ok) throw new Error(data.error_description || data.error || resp.statusText);
+
+    _accessToken = data.access_token;
+
+    // Decode id_token for email (no signature validation needed on test page)
+    if (data.id_token) {
+      try {
+        const payload = JSON.parse(atob(data.id_token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+        _userEmail = payload.email || payload.name || null;
+      } catch (_) { /* ignore */ }
+    }
+
+    // Persist session in localStorage
+    try {
+      const payload = JSON.parse(atob(data.access_token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+      localStorage.setItem('auth_token', _accessToken);
+      localStorage.setItem('auth_email', _userEmail || '');
+      if (payload.exp) localStorage.setItem('auth_exp', String(payload.exp));
+    } catch (_) { /* ignore */ }
+  } catch (err) {
+    showAuthError(err.message);
+  }
+
+  cleanUrl();
+}
+
+function cleanUrl() {
+  const clean = window.location.pathname;
+  window.history.replaceState({}, document.title, clean);
+}
+
+function authGetToken() { return _accessToken; }
+
+function showAuthError(msg) {
+  document.getElementById('auth-status-area').innerHTML =
+    `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(msg)}</span>
+     <button class="btn-secondary" onclick="authLogin()">Opnieuw proberen</button>`;
+}
+
+function showAuthStatus() {
+  const area  = document.getElementById('auth-status-area');
+  const label = _userEmail ? `Ingelogd als <strong>${escHtml(_userEmail)}</strong>` : 'Ingelogd';
+  area.innerHTML =
+    `<span class="badge-ok">✓ ${label}</span>
+     <button class="btn-secondary" onclick="authLogout()">Uitloggen</button>`;
+}
+
+function authLogout() {
+  _accessToken = null;
+  _userEmail   = null;
+  localStorage.removeItem('auth_token');
+  localStorage.removeItem('auth_email');
+  localStorage.removeItem('auth_exp');
+  localStorage.removeItem('last_tenant');
+  document.getElementById('auth-status-area').innerHTML =
+    `<button class="btn-primary" id="btn-login" onclick="authLogin()">Login met Auth0</button>`;
+  document.getElementById('panel-tenant').classList.add('hidden');
+  document.getElementById('panel-type').classList.add('hidden');
+  document.getElementById('panel-table').classList.add('hidden');
+  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('panel-response').innerHTML = '';
+}

package/dist/collection/dev/example-data.js

@@ -0,0 +1,403 @@
+// Static example layout used in the "Embedded Form" tab.
+window.EXAMPLE_LAYOUT = {
+  title: "Project Intake Form",
+  items: [
+    {
+      type: "SECTION",
+      label: "Basic Information",
+      items: [
+        { type: "FIELD", name: "projectName",  label: "Project Name", dataType: "TEXT",     required: true,  placeholder: "Enter project name" },
+        { type: "FIELD", name: "description",  label: "Description",  dataType: "TEXTBLOCK", required: false, placeholder: "Describe the project..." },
+        {
+          type: "FIELD", name: "status", label: "Status", dataType: "LIST", required: true, multiple: false,
+          listItems: [
+            { key: "active",    label: "Active",    color: "#16a34a" },
+            { key: "pending",   label: "Pending",   color: "#d97706" },
+            { key: "on_hold",   label: "On Hold",   color: "#dc2626" },
+            { key: "completed", label: "Completed", color: "#2563eb" }
+          ]
+        },
+        {
+          type: "FIELD", name: "tags", label: "Tags (Multi-select)", dataType: "LIST", required: false, multiple: true,
+          listItems: [
+            { key: "frontend", label: "Frontend", color: "#7c3aed" },
+            { key: "backend",  label: "Backend",  color: "#db2777" },
+            { key: "design",   label: "Design",   color: "#0891b2" },
+            { key: "devops",   label: "DevOps",   color: "#65a30d" }
+          ]
+        }
+      ]
+    },
+    {
+      type: "SECTION",
+      label: "Financial Details",
+      items: [
+        { type: "FIELD", name: "budget",     label: "Budget",         dataType: "CURRENCY",   required: true,  currencyCode: "EUR" },
+        { type: "FIELD", name: "completion", label: "Completion (%)", dataType: "PERCENTAGE",  required: false, decimalPrecision: 1 },
+        { type: "FIELD", name: "headcount",  label: "Headcount",      dataType: "INTEGER",     required: false },
+        { type: "FIELD", name: "hourlyRate", label: "Hourly Rate",    dataType: "DECIMAL",     required: false, decimalPrecision: 2 }
+      ]
+    },
+    {
+      type: "SECTION",
+      label: "Dates & Time",
+      items: [
+        { type: "FIELD", name: "startDate",    label: "Start Date",          dataType: "DATE",     required: true  },
+        { type: "FIELD", name: "deadline",     label: "Deadline",            dataType: "DATETIME", required: false },
+        { type: "FIELD", name: "dailyStandup", label: "Daily Standup Time",  dataType: "TIME",     required: false }
+      ]
+    },
+    {
+      type: "SECTION",
+      label: "Contact & Links",
+      items: [
+        { type: "FIELD", name: "contactEmail",   label: "Contact Email",  dataType: "EMAIL",     required: true,  placeholder: "project@company.com" },
+        { type: "FIELD", name: "repositoryUrl",  label: "Repository URL", dataType: "HYPERLINK", required: false, placeholder: "https://github.com/..." }
+      ]
+    },
+    {
+      type: "SECTION",
+      label: "Settings",
+      items: [
+        { type: "FIELD", name: "isPublic",   label: "Public project", dataType: "BOOLEAN", required: false },
+        { type: "FIELD", name: "isArchived", label: "Archived",       dataType: "BOOLEAN", required: false },
+        { type: "FIELD", name: "apiToken",   label: "API Token",      dataType: "SECRET",  required: false, placeholder: "Paste token here" }
+      ]
+    },
+    {
+      type: "SECTION",
+      label: "Assets",
+      items: [
+        { type: "FIELD", name: "projectLogo",  label: "Project Logo",  dataType: "IMAGE", required: false, accept: "image/*",                   maxSize: 5242880  },
+        { type: "FIELD", name: "attachments",  label: "Attachments",   dataType: "FILE",  required: false, accept: ".pdf,.doc,.docx,.zip",      maxSize: 10485760 }
+      ]
+    },
+    { type: "RELATION", name: "projectManager",  label: "Project Manager", relatedClass: "Employee", displayType: "SEARCH",   required: true,  multiple: false },
+    {
+      type: "RELATION", name: "projectCategory", label: "Category",        relatedClass: "Category", displayType: "DROPDOWN", required: false,
+      dropdownValues: [
+        { value: "product",  label: "Product Development" },
+        { value: "internal", label: "Internal Tool" },
+        { value: "client",   label: "Client Project" },
+        { value: "research", label: "Research & Innovation" }
+      ]
+    }
+  ]
+};
+
+window.EXAMPLE_VALUES = {
+  projectName:  "Mosterd Platform",
+  status:       "active",
+  budget:       { amount: 150000, currency: "EUR" },
+  isPublic:     true,
+  startDate:    "2026-01-15",
+  contactEmail: "team@mosterd.nl"
+};
+
+// ─── Companies detail view demo ────────────────────────────────────────────────
+
+/** Column definitions for the companies list table. */
+window.EXAMPLE_COMPANY_COLUMNS = [
+  { type: 'FIELD', label: 'Company name', name: 'name', dataType: 'TEXT', required: true },
+  { type: 'FIELD', label: 'Reg. number', name: 'registrationNumber', dataType: 'TEXT', required: false },
+  { type: 'FIELD', label: 'Legal form', name: 'legalForm', dataType: 'TEXT', required: false },
+  { type: 'FIELD', label: 'Start date', name: 'startDate', dataType: 'DATE', required: false },
+  { type: 'FIELD', label: 'Employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
+];
+
+/** Rows for the companies list table. */
+window.EXAMPLE_COMPANIES = [
+  {
+    name: 'Alpha Holding B.V.',
+    registrationNumber: '10000001',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2001-03-01',
+    totalEmployees: 1,
+    _links: { self: { href: '/data/demo/companies/company-1' } },
+  },
+  {
+    name: 'Beta Services N.V.',
+    registrationNumber: '20000002',
+    legalForm: 'Naamloze Vennootschap',
+    startDate: '2010-07-15',
+    totalEmployees: 45,
+    _links: { self: { href: '/data/demo/companies/company-2' } },
+  },
+  {
+    name: 'Gamma & Partners B.V.',
+    registrationNumber: '30000003',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2008-11-01',
+    totalEmployees: 12,
+    _links: { self: { href: '/data/demo/companies/company-3' } },
+  },
+  {
+    name: 'Delta Vastgoed B.V.',
+    registrationNumber: '40000004',
+    legalForm: 'Besloten Vennootschap',
+    startDate: '2020-06-15',
+    totalEmployees: 3,
+    _links: { self: { href: '/data/demo/companies/company-4' } },
+  },
+];
+
+/** Single company data object (result of GET /data/:tenant/companies/:id). */
+window.EXAMPLE_COMPANY = {
+  name: 'Alpha Holding B.V.',
+  legalName: 'Alpha Holding B.V.',
+  registrationNumber: '10000001',
+  registrationDate: null,
+  legalForm: 'Besloten Vennootschap',
+  legalFormExtended: 'Besloten Vennootschap',
+  rsin: '100000001',
+  startDate: '2001-03-01',
+  endDate: null,
+  primaryActivityDescription: 'Activiteiten van houdstermaatschappijen',
+  primaryActivityCode: '64100',
+  totalEmployees: 1,
+  noMailing: false,
+  verificationDate: '2024-01-15T09:00:00.000Z',
+  visitAddress: 'Voorbeeldstraat 1',
+  visitPostalCode: '1234AB',
+  visitCity: 'Amsterdam',
+  mailingAddress: null,
+  mailingPostalCode: null,
+  mailingCity: null,
+  _links: {
+    self: { href: '/data/demo/companies/company-1' },
+    country: { href: '/data/demo/countries/nl', name: 'Nederland' },
+    appointments: { href: '/data/demo/companies/company-1/appointments' },
+    shareClasses: { href: '/data/demo/companies/company-1/shareClasses' },
+    shareAllocations: { href: '/data/demo/shareholders/company-1/shareAllocations' },
+  },
+};
+
+/** Dashboard metadata (GET /metadata/:tenant/dataObject?types=companies,...). */
+window.EXAMPLE_COMPANY_METADATA = {
+  layoutType: 'OBJECT_DASHBOARD',
+  layouts: [
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: '',
+      tabPage: false,
+      items: [
+        { type: 'FIELD', label: 'company name', name: 'name', dataType: 'TEXT', required: true, header: true },
+        { type: 'FIELD', label: 'legal name', name: 'legalName', dataType: 'TEXT', required: true },
+        { type: 'FIELD', label: 'registration number', name: 'registrationNumber', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'registration date', name: 'registrationDate', dataType: 'DATE', required: false },
+        // ACTION items are silently ignored by mrd-layout-section
+        { type: 'ACTION', label: 'company register', name: 'CompanyRegister' },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Registration details',
+      tabPage: true,
+      items: [
+        { type: 'FIELD', label: 'legal form', name: 'legalForm', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'legal form extended', name: 'legalFormExtended', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'rsin', name: 'rsin', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'start date', name: 'startDate', dataType: 'DATE', required: false },
+        { type: 'FIELD', label: 'end date', name: 'endDate', dataType: 'DATE', required: false },
+        { type: 'FIELD', label: 'primary activity description', name: 'primaryActivityDescription', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'primary activity code', name: 'primaryActivityCode', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'total employees', name: 'totalEmployees', dataType: 'INTEGER', required: false },
+        { type: 'FIELD', label: 'no mailing', name: 'noMailing', dataType: 'BOOLEAN', required: false },
+        { type: 'FIELD', label: 'verification date', name: 'verificationDate', dataType: 'DATETIME', required: false },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Contact information',
+      tabPage: true,
+      items: [
+        { type: 'FIELD', label: 'visit address', name: 'visitAddress', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'visit postal code', name: 'visitPostalCode', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'visit city', name: 'visitCity', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'mailing address', name: 'mailingAddress', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'mailing postal code', name: 'mailingPostalCode', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'mailing city', name: 'mailingCity', dataType: 'TEXT', required: false },
+        { type: 'RELATION', label: 'country', name: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Appointments',
+      tabPage: true,
+      items: [
+        { type: 'RELATED_VIEW', label: 'Appointments', name: 'view0', relatedClass: 'appointments', showTitle: false },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Share classes',
+      tabPage: true,
+      items: [
+        {
+          type: 'RELATED_VIEW', label: 'Share classes', name: 'view1', relatedClass: 'shareClasses', showTitle: false,
+          actions: ['NEW', 'EXPORT'],
+          createTypes: [
+            { type: 'ordinaryShares', label: 'Ordinary shares' },
+            { type: 'preferenceShares', label: 'Preference shares' },
+          ],
+        },
+      ],
+    },
+  ],
+  views: {
+    view0: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
+        { type: 'RELATION', label: 'Officer', name: 'officer', relatedClass: 'housekeeping.officer', mostSignificantClass: 'entities', required: true },
+        {
+          type: 'FIELD', label: 'Authority', name: 'authority', dataType: 'LIST', required: false,
+          listItems: [
+            { key: 'SOLE', label: 'Sole authority' },
+            { key: 'JOINT', label: 'Joint authority' },
+          ],
+        },
+        { type: 'FIELD', label: 'start date', name: 'activeDate', dataType: 'DATE', required: false },
+        { type: 'FIELD', label: 'end date', name: 'inactiveDate', dataType: 'DATE', required: false },
+      ],
+      type: 'appointments',
+      singularLabel: 'Appointment',
+      pluralLabel: 'Appointments',
+    },
+    view1: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', name: 'name', dataType: 'TEXT', required: true },
+        { type: 'FIELD', label: 'Nominal value', name: 'nominalValue', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'Currency', name: 'currency', dataType: 'TEXT', required: false },
+        { type: 'FIELD', label: 'Authorised shares', name: 'authorizedShares', dataType: 'INTEGER', required: false },
+      ],
+      type: 'shareClasses',
+      singularLabel: 'Share class',
+      pluralLabel: 'Share classes',
+    },
+  },
+  _links: {
+    view0: { href: '/data/demo/appointments' },
+    view1: { href: '/data/demo/shareClasses' },
+  },
+};
+
+/** Mock appointment rows for the embedded table. */
+window.EXAMPLE_APPOINTMENTS = [
+  {
+    name: 'Directeur',
+    authority: 'SOLE',
+    activeDate: '2001-03-01',
+    inactiveDate: null,
+    _links: {
+      self: { href: '/data/demo/appointments/apt-1' },
+      officer: { href: '/data/demo/entities/person-1', name: 'A. Jansen' },
+    },
+  },
+  {
+    name: 'Commissaris',
+    authority: 'JOINT',
+    activeDate: '2018-03-01',
+    inactiveDate: null,
+    _links: {
+      self: { href: '/data/demo/appointments/apt-2' },
+      officer: { href: '/data/demo/entities/person-2', name: 'B. de Wit' },
+    },
+  },
+];
+
+/** Mock share class rows for the embedded table. */
+window.EXAMPLE_SHARE_CLASSES = [
+  {
+    name: 'Gewone aandelen',
+    nominalValue: '1.00',
+    currency: 'EUR',
+    authorizedShares: 1800,
+    _links: { self: { href: '/data/demo/shareClasses/sc-1' } },
+  },
+  {
+    name: 'Preferente aandelen',
+    nominalValue: '1.00',
+    currency: 'EUR',
+    authorizedShares: 200,
+    _links: { self: { href: '/data/demo/shareClasses/sc-2' } },
+  },
+];
+
+// ─── Field Types demo ─────────────────────────────────────────────────────────
+
+window.EXAMPLE_FIELD_TYPES_ITEMS = [
+  { type: 'FIELD', label: 'Name (header)', name: 'fHeader', dataType: 'TEXT', required: false, header: true },
+  { type: 'FIELD', label: 'Text', name: 'fText', dataType: 'TEXT', required: false },
+  { type: 'FIELD', label: 'Email', name: 'fEmail', dataType: 'EMAIL', required: false },
+  { type: 'FIELD', label: 'Hyperlink', name: 'fHyperlink', dataType: 'HYPERLINK', required: false },
+  { type: 'FIELD', label: 'Integer', name: 'fInteger', dataType: 'INTEGER', required: false },
+  { type: 'FIELD', label: 'Decimal', name: 'fDecimal', dataType: 'DECIMAL', required: false },
+  { type: 'FIELD', label: 'Percentage', name: 'fPercentage', dataType: 'PERCENTAGE', required: false },
+  { type: 'FIELD', label: 'Currency', name: 'fCurrency', dataType: 'CURRENCY', required: false },
+  { type: 'FIELD', label: 'Boolean (true)', name: 'fBoolTrue', dataType: 'BOOLEAN', required: false },
+  { type: 'FIELD', label: 'Boolean (false)', name: 'fBoolFalse', dataType: 'BOOLEAN', required: false },
+  { type: 'FIELD', label: 'Date', name: 'fDate', dataType: 'DATE', required: false },
+  { type: 'FIELD', label: 'DateTime', name: 'fDatetime', dataType: 'DATETIME', required: false },
+  { type: 'FIELD', label: 'Time', name: 'fTime', dataType: 'TIME', required: false },
+  {
+    type: 'FIELD', label: 'List (no color)', name: 'fListPlain', dataType: 'LIST', required: false,
+    listItems: [{ key: 'a', label: 'Option A' }, { key: 'b', label: 'Option B' }],
+  },
+  {
+    type: 'FIELD', label: 'List (color only)', name: 'fListColor', dataType: 'LIST', required: false,
+    listItems: [
+      { key: 'active',   label: 'Active',   color: '#16a34a' },
+      { key: 'inactive', label: 'Inactive', color: '#dc2626' },
+    ],
+  },
+  {
+    type: 'FIELD', label: 'List (color + bg)', name: 'fListBadge', dataType: 'LIST', required: false,
+    listItems: [
+      { key: 'approved', label: 'Approved', color: '#14532d', backgroundColor: '#dcfce7' },
+      { key: 'rejected', label: 'Rejected', color: '#7f1d1d', backgroundColor: '#fee2e2' },
+      { key: 'pending',  label: 'Pending',  color: '#78350f', backgroundColor: '#fef3c7' },
+    ],
+  },
+  { type: 'SEARCH', label: 'Zoeken', dataClass: 'demo.entity' },
+  { type: 'RELATION', label: 'Relation (single)', name: 'fRelation', relatedClass: 'demo.entity', required: false },
+  { type: 'FIELD', label: 'File', name: 'fFile', dataType: 'FILE', required: false },
+  { type: 'FIELD', label: 'Image', name: 'fImage', dataType: 'IMAGE', required: false },
+  { type: 'FIELD', label: 'Textblock', name: 'fTextblock', dataType: 'TEXTBLOCK', required: false },
+  { type: 'FIELD', label: 'Longtext', name: 'fLongtext', dataType: 'LONGTEXT', required: false },
+  { type: 'FIELD', label: 'JSON', name: 'fJson', dataType: 'JSON', required: false },
+  { type: 'FIELD', label: 'Secret', name: 'fSecret', dataType: 'SECRET', required: false },
+];
+
+window.EXAMPLE_FIELD_TYPES_DATA = {
+  fHeader:     'Voorbeeld Bedrijf B.V.',
+  fText:       'Voorbeeld tekst',
+  fEmail:      'info@example.com',
+  fHyperlink:  { href: 'https://example.com', text: 'example.com' },
+  fInteger:    42,
+  fDecimal:    3.14159,
+  fPercentage: 0.7825,
+  fCurrency:   { amount: 1250.50, currency: 'EUR' },
+  fBoolTrue:   true,
+  fBoolFalse:  false,
+  fDate:       '2024-03-15',
+  fDatetime:   '2024-03-15T14:30:00.000Z',
+  fTime:       '14:30:00',
+  fListPlain:  'a',
+  fListColor:  'active',
+  fListBadge:  'approved',
+  fFile:       { href: '/api/files/example-document', fileName: 'voorbeeld-document.pdf' },
+  fImage:      { href: '/api/files/example-photo', fileName: 'voorbeeld-foto.jpg' },
+  fTextblock:  '<p>Dit is een <strong>opgemaakte</strong> tekst met <em>html</em>-inhoud. Geschikt voor langere beschrijvingen met opmaak.</p>',
+  fLongtext:   'Dit is een langere stuk platte tekst zonder opmaak.\nHet kan meerdere regels bevatten en wordt getoond in een pre-blok zodat witruimte bewaard blijft.',
+  fJson:       { id: 1, status: 'active', tags: ['alpha', 'beta'], meta: { created: '2024-01-01', valid: true } },
+  fSecret:     'sk-live-abc123xyz',
+  _links: {
+    fRelation: { href: '/data/demo/entities/person-1', name: 'A. Jansen' },
+  },
+};

package/dist/collection/dev/sprites.svg

@@ -0,0 +1,55 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+    <symbol id="icon-search" viewBox="0 0 32 32">
+    <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
+    </symbol>
+    <symbol id="icon-bin" viewBox="0 0 32 32">
+    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
+    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
+    </symbol>
+    <symbol id="icon-plus" viewBox="0 0 32 32">
+    <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
+    </symbol>
+    <symbol id="icon-cross" viewBox="0 0 32 32">
+    <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
+    </symbol>
+    <symbol id="icon-backward2" viewBox="0 0 32 32">
+    <path d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path>
+    </symbol>
+    <symbol id="icon-forward3" viewBox="0 0 32 32">
+    <path d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path>
+    </symbol>
+    <symbol id="icon-previous2" viewBox="0 0 32 32">
+    <path d="M8 28v-24h4v11l10-10v22l-10-10v11z"></path>
+    </symbol>
+    <symbol id="icon-next2" viewBox="0 0 32 32">
+    <path d="M24 4v24h-4v-11l-10 10v-22l10 10v-11z"></path>
+    </symbol>
+    <symbol id="icon-sort-alpha-asc" viewBox="0 0 32 32">
+    <path d="M10 24v-24h-4v24h-5l7 7 7-7h-5z"></path>
+    <path d="M29 32h-8c-0.369 0-0.708-0.203-0.882-0.528s-0.155-0.72 0.050-1.027l6.963-10.445h-6.131c-0.552 0-1-0.448-1-1s0.448-1 1-1h8c0.369 0 0.708 0.203 0.882 0.528s0.155 0.72-0.050 1.027l-6.963 10.445h6.131c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
+    <path d="M31.894 12.553l-6-12c-0.169-0.339-0.516-0.553-0.894-0.553s-0.725 0.214-0.895 0.553l-6 12c-0.247 0.494-0.047 1.095 0.447 1.342 0.144 0.072 0.296 0.106 0.447 0.106 0.367 0 0.72-0.203 0.895-0.553l1.724-3.447h6.764l1.724 3.447c0.247 0.494 0.848 0.694 1.342 0.447s0.694-0.848 0.447-1.342zM22.618 8l2.382-4.764 2.382 4.764h-4.764z"></path>
+    </symbol>
+    <symbol id="icon-sort-alpha-desc" viewBox="0 0 32 32">
+    <path d="M10 24v-24h-4v24h-5l7 7 7-7h-5z"></path>
+    <path d="M29 14h-8c-0.369 0-0.708-0.203-0.882-0.528s-0.155-0.72 0.050-1.027l6.963-10.445h-6.131c-0.552 0-1-0.448-1-1s0.448-1 1-1h8c0.369 0 0.708 0.203 0.882 0.528s0.155 0.72-0.050 1.027l-6.963 10.445h6.131c0.552 0 1 0.448 1 1s-0.448 1-1 1z"></path>
+    <path d="M31.894 30.553l-6-12c-0.169-0.339-0.516-0.553-0.894-0.553s-0.725 0.214-0.895 0.553l-6 12c-0.247 0.494-0.047 1.095 0.447 1.342 0.144 0.072 0.296 0.106 0.447 0.106 0.367 0 0.72-0.203 0.895-0.553l1.724-3.447h6.764l1.724 3.447c0.247 0.494 0.848 0.694 1.342 0.447s0.694-0.848 0.447-1.342zM22.618 26l2.382-4.764 2.382 4.764h-4.764z"></path>
+    </symbol>
+    <symbol id="icon-filter" viewBox="0 0 32 32">
+    <path d="M16 0c-8.837 0-16 2.239-16 5v3l12 12v10c0 1.105 1.791 2 4 2s4-0.895 4-2v-10l12-12v-3c0-2.761-7.163-5-16-5zM2.95 4.338c0.748-0.427 1.799-0.832 3.040-1.171 2.748-0.752 6.303-1.167 10.011-1.167s7.262 0.414 10.011 1.167c1.241 0.34 2.292 0.745 3.040 1.171 0.494 0.281 0.76 0.519 0.884 0.662-0.124 0.142-0.391 0.38-0.884 0.662-0.748 0.427-1.8 0.832-3.040 1.171-2.748 0.752-6.303 1.167-10.011 1.167s-7.262-0.414-10.011-1.167c-1.24-0.34-2.292-0.745-3.040-1.171-0.494-0.282-0.76-0.519-0.884-0.662 0.124-0.142 0.391-0.38 0.884-0.662z"></path>
+    </symbol>
+    <symbol id="icon-file-excel" viewBox="0 0 32 32">
+    <path d="M23.22 12h-4.228l-2.992 4.407-2.992-4.407h-4.228l5.068 7.577-5.718 8.423h7.87v-2.862h-1.567l1.567-2.344 3.481 5.205h4.389l-5.718-8.423 5.068-7.577z"></path>
+    <path d="M28.681 7.159c-0.694-0.947-1.662-2.053-2.724-3.116s-2.169-2.030-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319h-15.5c-1.378 0-2.5 1.121-2.5 2.5v27c0 1.378 1.121 2.5 2.5 2.5h23c1.378 0 2.5-1.122 2.5-2.5v-19.5c0-0.448-0.137-1.23-1.319-2.841v0zM24.543 5.457c0.959 0.959 1.712 1.825 2.268 2.543h-4.811v-4.811c0.718 0.556 1.584 1.309 2.543 2.268v0zM28 29.5c0 0.271-0.229 0.5-0.5 0.5h-23c-0.271 0-0.5-0.229-0.5-0.5v-27c0-0.271 0.229-0.5 0.5-0.5 0 0 15.499-0 15.5 0v7c0 0.552 0.448 1 1 1h7v19.5z"></path>
+    </symbol>
+    <symbol id="icon-pencil" viewBox="0 0 32 32">
+    <path d="M27.414 0.586c-0.781-0.781-2.048-0.781-2.828 0l-3.172 3.172 5.828 5.828 3.172-3.172c0.781-0.781 0.781-2.047 0-2.828l-3-3zM0 24v8h8l17.414-17.414-8-8-17.414 17.414zM6.828 28h-2.828v-2.828l12-12 2.828 2.828-12 12z"></path>
+    </symbol>
+    <symbol id="icon-ellipsis" viewBox="0 0 32 32">
+    <circle cx="4" cy="16" r="3.5"></circle>
+    <circle cx="16" cy="16" r="3.5"></circle>
+    <circle cx="28" cy="16" r="3.5"></circle>
+    </symbol>
+    </defs>
+    </svg>
+    

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './types';