@mmlogic/components 0.1.24 → 0.1.25

package/dist/collection/dev/app.js

@@ -41,12 +41,97 @@ function logEvent(type, data) {
    ===================================================================== */
 
 function showTab(name) {
+  const names = ['embedded', 'field-types', 'detail-view', 'live-api'];
   document.querySelectorAll('.tab-btn').forEach((btn, i) => {
-    const names = ['embedded', 'live-api'];
     btn.classList.toggle('active', names[i] === name);
   });
-  document.getElementById('tab-embedded').classList.toggle('active', name === 'embedded');
-  document.getElementById('tab-live-api').classList.toggle('active', name === 'live-api');
+  names.forEach(n => {
+    document.getElementById('tab-' + n).classList.toggle('active', n === name);
+  });
+  if (name === 'detail-view') initDetailViewTab();
+}
+
+/* =====================================================================
+   DETAIL VIEW TAB
+   ===================================================================== */
+
+let _detailViewInitialized = false;
+
+function initDetailViewTab() {
+  if (_detailViewInitialized) return;
+  _detailViewInitialized = true;
+
+  const table = document.getElementById('companies-table');
+  const meta  = window.EXAMPLE_COMPANY_METADATA;
+
+  table.columns      = window.EXAMPLE_COMPANY_COLUMNS;
+  table.totalElements = window.EXAMPLE_COMPANIES.length;
+  table.pageSize     = 20;
+  table.locale       = 'nl-NL';
+
+  table.addEventListener('mrdLoadPage', async (e) => {
+    await table.setPage(e.detail.page, window.EXAMPLE_COMPANIES);
+  });
+
+  table.addEventListener('mrdRowClick', (e) => {
+    showCompanyDetail(e.detail);
+  });
+
+  table.init().then(() => table.setPage(0, window.EXAMPLE_COMPANIES));
+}
+
+function showCompanyDetail(row) {
+  document.getElementById('detail-table-panel').style.display = 'none';
+  document.getElementById('detail-record-panel').style.display = 'block';
+
+  // Use the static example company (in a real app: fetch /data/:tenant/companies/:id)
+  const company  = window.EXAMPLE_COMPANY;
+  const meta     = window.EXAMPLE_COMPANY_METADATA;
+  const container = document.getElementById('detail-sections');
+  container.innerHTML = '';
+
+  meta.layouts.forEach((layout, idx) => {
+    const wrapper = document.createElement('div');
+    wrapper.style.marginBottom = '2rem';
+
+    if (layout.label) {
+      const heading = document.createElement('h3');
+      heading.style.cssText = 'font-size:1.1rem;font-weight:600;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid #e5e7eb';
+      heading.textContent = layout.label;
+      wrapper.appendChild(heading);
+    }
+
+    const section = document.createElement('mrd-layout-section');
+    section.items = layout.items;
+    section.data  = company;
+    section.views = meta.views;
+    section.locale = 'nl-NL';
+
+    section.addEventListener('mrdNavigate', (e) => {
+      logEvent('mrdNavigate', e.detail);
+    });
+
+    section.addEventListener('mrdLoadView', async (e) => {
+      const { name, viewConfig } = e.detail;
+      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
+      await section.setViewPage(name, 0, mockRows, mockRows.length);
+    });
+
+    section.addEventListener('mrdLoadViewPage', async (e) => {
+      // No more pages in the mock — just set the same rows again
+      const { name } = e.detail;
+      const mockRows = name === 'view0' ? window.EXAMPLE_APPOINTMENTS : window.EXAMPLE_SHARE_CLASSES;
+      await section.setViewPage(name, e.detail.page, mockRows);
+    });
+
+    wrapper.appendChild(section);
+    container.appendChild(wrapper);
+  });
+}
+
+function showCompanyList() {
+  document.getElementById('detail-record-panel').style.display = 'none';
+  document.getElementById('detail-table-panel').style.display = 'block';
 }
 
 /* =====================================================================
@@ -204,6 +289,7 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
 
     // Mutable closure state — reassigned on view switch so subsequent handlers see new values
     let _activeFilters   = [];
+    let _pageLinks       = {};  // _links from the most recent page 0 response (self, excel, etc.)
     let viewLabel        = initialViewLabel;
     let alternativeViews = initialAlternativeViews;
     let viewFilter       = initialViewFilter; // static filters from view definition
@@ -639,6 +725,26 @@ document.getElementById('btn-inject-results').addEventListener('click', () => {
    ===================================================================== */
 
 document.addEventListener('DOMContentLoaded', async () => {
+  // Initialize Field Types tab (static, no auth needed)
+  const ftSection = document.getElementById('field-types-section');
+  ftSection.items = window.EXAMPLE_FIELD_TYPES_ITEMS;
+  ftSection.data  = window.EXAMPLE_FIELD_TYPES_DATA;
+  ftSection.locale = 'nl-NL';
+
+  // Simulate host resolving a signed URL for IMAGE fields (thumbnail on load).
+  ftSection.addEventListener('mrdLoadImage', (e) => {
+    const staticUrl = 'https://picsum.photos/seed/mosterd/800/600';
+    ftSection.setImagePreview(e.detail.fieldName, staticUrl);
+  });
+
+  ftSection.addEventListener('mrdNavigate', (e) => {
+    logEvent('mrdNavigate', e.detail);
+  });
+
+  ftSection.addEventListener('mrdDownload', (e) => {
+    logEvent('mrdDownload', e.detail);
+  });
+
   authRestoreSession();
   await authHandleCallback();
 

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

@@ -254,3 +254,327 @@ window.EXAMPLE_VALUES = {
   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', field: { name: 'name', dataType: 'TEXT', required: true } },
+  { type: 'FIELD', label: 'Reg. number', field: { name: 'registrationNumber', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Legal form', field: { name: 'legalForm', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Start date', field: { name: 'startDate', dataType: 'DATE', required: false } },
+  { type: 'FIELD', label: 'Employees', field: { 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', field: { name: 'name', dataType: 'TEXT', required: true, header: true } },
+        { type: 'FIELD', label: 'legal name', field: { name: 'legalName', dataType: 'TEXT', required: true } },
+        { type: 'FIELD', label: 'registration number', field: { name: 'registrationNumber', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'registration date', field: { 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', field: { name: 'legalForm', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'legal form extended', field: { name: 'legalFormExtended', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'rsin', field: { name: 'rsin', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'start date', field: { name: 'startDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'end date', field: { name: 'endDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'primary activity description', field: { name: 'primaryActivityDescription', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'primary activity code', field: { name: 'primaryActivityCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'total employees', field: { name: 'totalEmployees', dataType: 'INTEGER', required: false } },
+        { type: 'FIELD', label: 'no mailing', field: { name: 'noMailing', dataType: 'BOOLEAN', required: false } },
+        { type: 'FIELD', label: 'verification date', field: { name: 'verificationDate', dataType: 'DATETIME', required: false } },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Contact information',
+      tabPage: true,
+      items: [
+        { type: 'FIELD', label: 'visit address', field: { name: 'visitAddress', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'visit postal code', field: { name: 'visitPostalCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'visit city', field: { name: 'visitCity', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing address', field: { name: 'mailingAddress', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing postal code', field: { name: 'mailingPostalCode', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'mailing city', field: { name: 'mailingCity', dataType: 'TEXT', required: false } },
+        {
+          type: 'RELATION',
+          label: 'country',
+          relation: { name: 'country', label: 'country', relatedClass: 'commons.country', mostSignificantClass: 'countries', required: false },
+        },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Appointments',
+      tabPage: true,
+      items: [
+        {
+          type: 'RELATED_VIEW',
+          label: 'Appointments',
+          name: 'view0',
+          relatedView: { name: 'view0', relatedClass: 'appointments', showTitle: false },
+        },
+      ],
+    },
+    {
+      type: 'OBJECT_DASHBOARD',
+      label: 'Share classes',
+      tabPage: true,
+      items: [
+        {
+          type: 'RELATED_VIEW',
+          label: 'Share classes',
+          name: 'view1',
+          relatedView: { name: 'view1', relatedClass: 'shareClasses', showTitle: false },
+        },
+      ],
+    },
+  ],
+  views: {
+    view0: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', field: { name: 'name', dataType: 'TEXT', required: true } },
+        {
+          type: 'RELATION', label: 'Officer',
+          relation: { name: 'officer', label: 'Officer', relatedClass: 'housekeeping.officer', mostSignificantClass: 'entities', required: true },
+        },
+        {
+          type: 'FIELD', label: 'Authority',
+          field: {
+            name: 'authority', dataType: 'LIST', required: false,
+            listItems: [
+              { key: 'SOLE', label: 'Sole authority' },
+              { key: 'JOINT', label: 'Joint authority' },
+            ],
+          },
+        },
+        { type: 'FIELD', label: 'start date', field: { name: 'activeDate', dataType: 'DATE', required: false } },
+        { type: 'FIELD', label: 'end date', field: { name: 'inactiveDate', dataType: 'DATE', required: false } },
+      ],
+      type: 'appointments',
+      singularLabel: 'Appointment',
+      pluralLabel: 'Appointments',
+    },
+    view1: {
+      name: null,
+      defaultView: true,
+      defaultSort: 'name',
+      values: [
+        { type: 'FIELD', label: 'name', field: { name: 'name', dataType: 'TEXT', required: true } },
+        { type: 'FIELD', label: 'Nominal value', field: { name: 'nominalValue', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'Currency', field: { name: 'currency', dataType: 'TEXT', required: false } },
+        { type: 'FIELD', label: 'Authorised shares', field: { 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)', field: { name: 'fHeader', dataType: 'TEXT', required: false, header: true } },
+  { type: 'FIELD', label: 'Text', field: { name: 'fText', dataType: 'TEXT', required: false } },
+  { type: 'FIELD', label: 'Email', field: { name: 'fEmail', dataType: 'EMAIL', required: false } },
+  { type: 'FIELD', label: 'Hyperlink', field: { name: 'fHyperlink', dataType: 'HYPERLINK', required: false } },
+  { type: 'FIELD', label: 'Integer', field: { name: 'fInteger', dataType: 'INTEGER', required: false } },
+  { type: 'FIELD', label: 'Decimal', field: { name: 'fDecimal', dataType: 'DECIMAL', required: false } },
+  { type: 'FIELD', label: 'Percentage', field: { name: 'fPercentage', dataType: 'PERCENTAGE', required: false } },
+  { type: 'FIELD', label: 'Currency', field: { name: 'fCurrency', dataType: 'CURRENCY', required: false } },
+  { type: 'FIELD', label: 'Boolean (true)', field: { name: 'fBoolTrue', dataType: 'BOOLEAN', required: false } },
+  { type: 'FIELD', label: 'Boolean (false)', field: { name: 'fBoolFalse', dataType: 'BOOLEAN', required: false } },
+  { type: 'FIELD', label: 'Date', field: { name: 'fDate', dataType: 'DATE', required: false } },
+  { type: 'FIELD', label: 'DateTime', field: { name: 'fDatetime', dataType: 'DATETIME', required: false } },
+  { type: 'FIELD', label: 'Time', field: { name: 'fTime', dataType: 'TIME', required: false } },
+  {
+    type: 'FIELD', label: 'List (no color)', field: {
+      name: 'fListPlain', dataType: 'LIST', required: false,
+      listItems: [{ key: 'a', label: 'Option A' }, { key: 'b', label: 'Option B' }],
+    },
+  },
+  {
+    type: 'FIELD', label: 'List (color only)', field: {
+      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)', field: {
+      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: 'RELATION', label: 'Relation (single)', relation: { name: 'fRelation', label: 'Relation', relatedClass: 'demo.entity', required: false } },
+  { type: 'FIELD', label: 'File', field: { name: 'fFile', dataType: 'FILE', required: false } },
+  { type: 'FIELD', label: 'Image', field: { name: 'fImage', dataType: 'IMAGE', required: false } },
+  { type: 'FIELD', label: 'Textblock', field: { name: 'fTextblock', dataType: 'TEXTBLOCK', required: false } },
+  { type: 'FIELD', label: 'Longtext', field: { name: 'fLongtext', dataType: 'LONGTEXT', required: false } },
+  { type: 'FIELD', label: 'JSON', field: { name: 'fJson', dataType: 'JSON', 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 } },
+  _links: {
+    fRelation: { href: '/data/demo/entities/person-1', name: 'A. Jansen' },
+  },
+};

package/dist/collection/utils/cell-renderer.js

@@ -72,4 +72,30 @@ export class CellRenderer {
                 return String(value);
         }
     }
+    /**
+     * Returns syntax-highlighted JSON as an HTML string with inline styles.
+     * compact=true → single line (no indentation); compact=false → pretty-printed.
+     */
+    static formatJson(value, compact = false) {
+        try {
+            const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+            const json = compact ? JSON.stringify(parsed) : JSON.stringify(parsed, null, 2);
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
+                let style = 'color:#2aa198';
+                if (/^"/.test(match)) {
+                    style = /:$/.test(match) ? 'color:#881391' : 'color:#268bd2';
+                }
+                else if (/true|false/.test(match)) {
+                    style = 'color:#b58900';
+                }
+                else if (/null/.test(match)) {
+                    style = 'color:#dc322f';
+                }
+                return `<span style="${style}">${match}</span>`;
+            });
+        }
+        catch (_a) {
+            return String(value);
+        }
+    }
 }

package/dist/components/mrd-layout-section.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MrdLayoutSection extends Components.MrdLayoutSection, HTMLElement {}
+export const MrdLayoutSection: {
+    prototype: MrdLayoutSection;
+    new (): MrdLayoutSection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mrd-layout-section.js

@@ -0,0 +1 @@
+import{proxyCustomElement as r,HTMLElement as t,createEvent as o,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{a as s,b as n}from"./client-layout.js";import{C as l,d}from"./mrd-table2.js";import{t as c}from"./i18n.js";const u=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdNavigate=o(this,"mrdNavigate",7),this.mrdSearch=o(this,"mrdSearch",7),this.mrdDownload=o(this,"mrdDownload",7),this.mrdLoadView=o(this,"mrdLoadView",7),this.mrdLoadViewPage=o(this,"mrdLoadViewPage",7),this.mrdLoadImage=o(this,"mrdLoadImage",7),this.mrdViewAction=o(this,"mrdViewAction",7),this.items=[],this.data={},this.views={},this.links={},this.locale=navigator.language,this.searchQueryMap={},this.searchResultsMap={},this.imagePreviewUrl=null,this.imagePreviews={},this.viewLinksMap={},this.searchTimers={},this.handleViewLoadPage=(r,t)=>{r.stopPropagation(),this.mrdLoadViewPage.emit({name:t,page:r.detail.page,sort:r.detail.sort})},this.handleSearchInput=(r,t)=>{this.searchQueryMap=Object.assign(Object.assign({},this.searchQueryMap),{[r]:t}),this.searchTimers[r]&&clearTimeout(this.searchTimers[r]),t.length<2?this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[r]:[]}):this.searchTimers[r]=setTimeout((()=>{this.mrdSearch.emit({query:t,dataClass:r})}),300)}}componentDidLoad(){setTimeout((()=>{this.emitLoadViews(),this.emitLoadImages()}),0)}linksChanged(r){Object.keys(null!=r?r:{}).length>0&&this.emitLoadViews()}dataChanged(r){var t;r&&Object.keys(null!==(t=null==r?void 0:r._links)&&void 0!==t?t:{}).length>0&&this.emitLoadViews()}emitLoadViews(){var r,t,o,e,i,a;const n=null!==(t=null===(r=this.data)||void 0===r?void 0:r._links)&&void 0!==t?t:{};for(const r of this.flattenItems(this.items))if(r.type===s.RELATED_VIEW&&r.relatedView){const t=r.relatedView,e=this.views[t.name];if(!e)continue;const i=null===(o=n[t.relatedClass])||void 0===o?void 0:o.href;this.mrdLoadView.emit({name:t.name,href:i,viewConfig:e})}else if(r.type===s.VIEW){const t=null!==(i=null===(e=r.view)||void 0===e?void 0:e.name)&&void 0!==i?i:r.name;if(!t)continue;const o=this.views[t];if(!o)continue;const s=null===(a=this.links[t])||void 0===a?void 0:a.href;this.mrdLoadView.emit({name:t,href:s,viewConfig:o})}}emitLoadImages(){var r;for(const t of this.flattenItems(this.items))if(t.type===s.FIELD&&(null===(r=t.field)||void 0===r?void 0:r.dataType)===n.IMAGE){const r=t.field.name,o=this.data[r],e=null==o?void 0:o.href;e&&this.mrdLoadImage.emit({fieldName:r,href:e})}}flattenItems(r){const t=[];for(const o of r)t.push(o),o.items&&t.push(...this.flattenItems(o.items));return t}async setSearchResults(r,t){const o=null!=t?t:this.resolveSearchKey();o&&(this.searchResultsMap=Object.assign(Object.assign({},this.searchResultsMap),{[o]:r}))}async setViewPage(r,t,o,e,i){i&&(this.viewLinksMap=Object.assign(Object.assign({},this.viewLinksMap),{[r]:i}));const a=this.el.querySelector(`mrd-table[data-view="${r}"]`);a&&(void 0!==e&&(a.totalElements=e,await a.init()),await a.setPage(t,o))}async setImagePreview(r,t){this.imagePreviews=Object.assign(Object.assign({},this.imagePreviews),{[r]:t})}async openImagePreview(r){this.imagePreviewUrl=r}resolveSearchKey(){const r=this.flattenItems(this.items).filter((r=>r.type===s.SEARCH));return 1===r.length&&r[0].search?r[0].search.dataClass:null}renderSingleFieldValue(r,t){var o,i,a,s,d,u,m,h,v,y;const f=r.field,p=f.dataType;switch(p){case n.HYPERLINK:{const r=null!==(o=null==t?void 0:t.href)&&void 0!==o?o:t+"",s=null!==(a=null!==(i=null==t?void 0:t.text)&&void 0!==i?i:null==t?void 0:t.label)&&void 0!==a?a:r;return e("a",{class:"mrd-layout-section__link",href:r,target:"_blank",rel:"noopener noreferrer"},s)}case n.TEXTBLOCK:return e("span",{innerHTML:t+""});case n.LONGTEXT:return e("pre",{class:"mrd-layout-section__pre"},t+"");case n.JSON:return e("pre",{class:"mrd-layout-section__pre",innerHTML:l.formatJson(t)});case n.FILE:{const r=null!==(s=null==t?void 0:t.fileName)&&void 0!==s?s:t+"",o=null!==(d=null==t?void 0:t.href)&&void 0!==d?d:"";return e("button",{class:"mrd-layout-section__download-link",onClick:()=>o&&this.mrdDownload.emit({href:o,fileName:r})},c("download",this.locale))}case n.IMAGE:{const r=null!==(u=null==t?void 0:t.href)&&void 0!==u?u:"",o=null!==(m=null==t?void 0:t.fileName)&&void 0!==m?m:"",i=this.imagePreviews[f.name];return i?e("button",{class:"mrd-layout-section__image-thumb-btn",onClick:()=>{this.imagePreviewUrl=i},title:o||void 0},e("img",{class:"mrd-layout-section__image-thumb",src:i,alt:o})):e("button",{class:"mrd-layout-section__download-link",onClick:()=>r&&this.mrdDownload.emit({href:r,fileName:o})},o||r)}case n.BOOLEAN:return e("span",{class:"mrd-layout-section__boolean mrd-layout-section__boolean--"+(t?"true":"false")},c(t?"yes":"no",this.locale));case n.LIST:{const r=(null!==(h=f.listItems)&&void 0!==h?h:[]).find((r=>r.key===t+"")),o=null!==(v=null==r?void 0:r.label)&&void 0!==v?v:t+"",i=null==r?void 0:r.color,a=null==r?void 0:r.backgroundColor;return i&&a?e("span",{class:"mrd-layout-section__badge",style:{color:i,backgroundColor:a}},o):i?e("span",{class:"mrd-layout-section__badge-dot-row"},e("span",{class:"mrd-layout-section__badge-dot",style:{backgroundColor:i}}),o):o}default:return l.renderValue(p,t,null!==(y=f.listItems)&&void 0!==y?y:[],this.locale)||null}}renderFieldValue(r,t){if(null==t||""===t)return null;if(r.field.multiple&&Array.isArray(t)){const o=t.map((t=>this.renderSingleFieldValue(r,t)));return o.every((r=>"string"==typeof r||null==r))?o.filter(Boolean).join(", ")||null:e("span",null,o.map(((r,t)=>e("span",{key:t+""},r,t<o.length-1?", ":""))))}return this.renderSingleFieldValue(r,t)}renderField(r){if(!r.field)return null;const t=r.field,o=this.data[t.name],i=this.renderFieldValue(r,o);return t.header?e("h1",{class:"mrd-layout-section__field-header",key:t.name},"string"==typeof i?i:null!=o?o+"":r.label):null==i?null:e("div",{class:"mrd-layout-section__field"+(t.dataType===n.TEXTBLOCK||t.dataType===n.LONGTEXT||t.dataType===n.JSON?" mrd-layout-section__field--block":""),key:t.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},i))}renderRelation(r){var t,o,i;if(!r.relation)return null;const a=(null!==(o=null===(t=this.data)||void 0===t?void 0:t._links)&&void 0!==o?o:{})[r.relation.name];if(!a)return null;const s=(r,t)=>e("button",{key:r,class:"mrd-layout-section__relation-link",onClick:()=>this.mrdNavigate.emit({href:r,label:t})},t);let n;return(null===(i=a.values)||void 0===i?void 0:i.length)?n=a.values.map((r=>s(r.href,r.name))):a.name&&(n=s(a.href,a.name)),n?e("div",{class:"mrd-layout-section__field",key:r.relation.name},e("span",{class:"mrd-layout-section__field-label"},r.label),e("span",{class:"mrd-layout-section__field-value"},n)):null}renderSearch(r){var t,o,i;if(!r.search)return null;const a=r.search.dataClass,s=null!==(t=this.searchQueryMap[a])&&void 0!==t?t:"",n=null!==(o=this.searchResultsMap[a])&&void 0!==o?o:[];return e("div",{class:"mrd-layout-section__search",key:"search-"+a},e("input",{class:"mrd-layout-section__search-input",type:"text",value:s,placeholder:null!==(i=r.label)&&void 0!==i?i:"",onInput:r=>this.handleSearchInput(a,r.target.value)}),n.length>0&&e("ul",{class:"mrd-layout-section__search-results"},n.map((r=>e("li",{key:r.id,class:"mrd-layout-section__search-result"},e("button",{class:"mrd-layout-section__search-result-btn",onClick:()=>this.mrdNavigate.emit({href:r.id,label:r.label})},e("span",{class:"mrd-layout-section__search-result-label"},r.label),r.description&&e("span",{class:"mrd-layout-section__search-result-desc"},r.description)))))))}renderRelatedView(r){var t,o,i,a,n,l,d,u,m;const h=r.type===s.RELATED_VIEW,v=h?null===(t=r.relatedView)||void 0===t?void 0:t.name:null!==(i=null===(o=r.view)||void 0===o?void 0:o.name)&&void 0!==i?i:r.name;if(!v)return null;const y=this.views[v];if(!y)return null;const f=h?null===(a=r.relatedView)||void 0===a?void 0:a.showTitle:null!==(d=null!==(l=null===(n=r.view)||void 0===n?void 0:n.showTitle)&&void 0!==l?l:r.showTitle)&&void 0!==d&&d,p=h?void 0:r.alternativeViews,_=(null!==(u=r.actions)&&void 0!==u?u:["NEW","EXPORT"]).reduce(((r,t)=>("NEW"===t&&r.push({action:"create",label:c("table_new_record",this.locale),icon:"assets/sprites.svg#icon-plus",variant:"primary"}),"EXPORT"===t&&r.push({action:"export",label:c("table_export_excel",this.locale),icon:"assets/sprites.svg#icon-file-excel"}),r)),[]);return e("div",{class:"mrd-layout-section__related-view",key:"view-"+v},f&&r.label&&e("h3",{class:"mrd-layout-section__related-view-title"},r.label),e("mrd-table",{"data-view":v,columns:y.values,locale:this.locale,defaultSort:null!==(m=y.defaultSort)&&void 0!==m?m:"",alternativeViews:p,actions:_,onMrdLoadPage:r=>this.handleViewLoadPage(r,v),onMrdAction:r=>{var t,o,e;r.stopPropagation();const i=null!==(t=this.viewLinksMap[v])&&void 0!==t?t:{},a="export"===r.detail.action?null===(o=i.excel)||void 0===o?void 0:o.href:null===(e=i.self)||void 0===e?void 0:e.href;this.mrdViewAction.emit({name:v,action:r.detail.action,href:a})}}))}renderItem(r){var t,o;switch(r.type){case s.FIELD:return this.renderField(r);case s.RELATION:return this.renderRelation(r);case s.HEADER:return e("h2",{class:"mrd-layout-section__header",key:"header-"+r.label},r.label);case s.TEXT:return e("div",{class:"mrd-layout-section__text",key:"text-"+r.label,innerHTML:null!==(t=r.label)&&void 0!==t?t:""});case s.NAVIGATE:return e("button",{class:"mrd-layout-section__navigate",key:"nav-"+r.label,onClick:()=>{var t;return this.mrdNavigate.emit({label:null!==(t=r.label)&&void 0!==t?t:"",navigate:r.navigate})}},r.label);case s.SEARCH:return this.renderSearch(r);case s.SECTION:case s.GROUP:return e("div",{class:"mrd-layout-section__group",key:"group-"+r.label},r.label&&e("h3",{class:"mrd-layout-section__group-title"},r.label),(null!==(o=r.items)&&void 0!==o?o:[]).map((r=>this.renderItem(r))));case s.RELATED_VIEW:case s.VIEW:return this.renderRelatedView(r);default:return null}}renderImageModal(){return this.imagePreviewUrl?e("div",{class:"mrd-layout-section__modal-backdrop",onClick:()=>{this.imagePreviewUrl=null}},e("div",{class:"mrd-layout-section__modal",onClick:r=>r.stopPropagation()},e("button",{class:"mrd-layout-section__modal-close",onClick:()=>{this.imagePreviewUrl=null}},"✕"),e("img",{class:"mrd-layout-section__modal-image",src:this.imagePreviewUrl,alt:""}))):null}render(){return e(i,{key:"007077c73ddcc5c9e6ce546f083f42c07f8b94a4"},e("div",{key:"e9904536e9361d9a36d613c20af55ddf8d9acda6",class:"mrd-layout-section"},this.items.map((r=>this.renderItem(r)))),this.renderImageModal())}get el(){return this}static get watchers(){return{links:[{linksChanged:0}],data:[{dataChanged:0}]}}static get style(){return".mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-decoration:underline;text-align:left}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}"}},[2,"mrd-layout-section",{items:[16],data:[16],views:[16],links:[16],locale:[1],searchQueryMap:[32],searchResultsMap:[32],imagePreviewUrl:[32],imagePreviews:[32],setSearchResults:[64],setViewPage:[64],setImagePreview:[64],openImagePreview:[64]},void 0,{links:[{linksChanged:0}],data:[{dataChanged:0}]}]),m=u,h=function(){"undefined"!=typeof customElements&&["mrd-layout-section","mrd-table"].forEach((r=>{switch(r){case"mrd-layout-section":customElements.get(a(r))||customElements.define(a(r),u);break;case"mrd-table":customElements.get(a(r))||d()}}))};export{m as MrdLayoutSection,h as defineCustomElement}

package/dist/components/mrd-longtext-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as d,Host as o,transformTag as i}from"@stencil/core/internal/client";import{t as l}from"./i18n.js";import{v as a}from"./validation.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=t(this,"mrdChange",7),this.mrdBlur=t(this,"mrdBlur",7),this.name="",this.label="",this.value="",this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.error="",this.handleInput=r=>{this.mrdChange.emit({name:this.name,value:r.target.value})},this.handleBlur=r=>{const e=r.target.value;this.error=this.required&&!a(e)?l("required",this.locale):"",this.mrdBlur.emit({name:this.name,value:e})}}render(){const r=!!this.error;return d(o,{key:"0b1764adfb7ddce8c5e645a5d96c69c715652365"},d("div",{key:"3c0c6bf77bfcd3f1bc97103baf9e5f6588f541f2",class:"mrd-longtext-field"},this.label&&d("label",{key:"f096b24c785a8c4b473fe0491a8cfdd7da4770bc",class:"mrd-longtext-field__label"+(this.required?" mrd-longtext-field__label--required":"")},this.label),this.disabled?d("pre",{class:"mrd-longtext-field__content"},this.value):d("textarea",{class:"mrd-longtext-field__input"+(r?" mrd-longtext-field__input--error":""),name:this.name,placeholder:this.placeholder,required:this.required,rows:10,onInput:this.handleInput,onBlur:this.handleBlur},this.value),r&&d("span",{key:"74b6bcecf81ca86172015abd5e3512ad288ae88e",class:"mrd-longtext-field__error"},this.error)))}static get style(){return".sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-longtext-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}]);function s(){"undefined"!=typeof customElements&&["mrd-longtext-field"].forEach((r=>{"mrd-longtext-field"===r&&(customElements.get(i(r))||customElements.define(i(r),n))}))}export{n as M,s as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as t,h as d,Host as o,transformTag as i}from"@stencil/core/internal/client";import{t as l}from"./i18n.js";import{v as n}from"./validation.js";const a=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=t(this,"mrdChange",7),this.mrdBlur=t(this,"mrdBlur",7),this.name="",this.label="",this.value="",this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.error="",this.handleInput=r=>{this.mrdChange.emit({name:this.name,value:r.target.value})},this.handleBlur=r=>{const e=r.target.value;this.error=this.required&&!n(e)?l("required",this.locale):"",this.mrdBlur.emit({name:this.name,value:e})}}render(){const r=!!this.error;return d(o,{key:"3142f97e26fdef5547c8dd9d236ed8bc40d5c65f"},d("div",{key:"b78567596d8c6459c8e9b28ea6b02d3fe65fd16c",class:"mrd-longtext-field"},this.label&&d("label",{key:"e85d8657fcc49fc7e15c06b8a98b34c03738ef5b",class:"mrd-longtext-field__label"+(this.required?" mrd-longtext-field__label--required":"")},this.label),this.disabled?d("pre",{class:"mrd-longtext-field__content"},this.value):d("textarea",{class:"mrd-longtext-field__input"+(r?" mrd-longtext-field__input--error":""),name:this.name,placeholder:this.placeholder,required:this.required,rows:10,onInput:this.handleInput,onBlur:this.handleBlur},this.value),r&&d("span",{key:"63cdcaf136e345197c42516f150752ec1d8665fa",class:"mrd-longtext-field__error"},this.error)))}static get style(){return".sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-longtext-field",{name:[1],label:[1],value:[1],placeholder:[1],required:[4],disabled:[4],locale:[1],error:[32]}]);function s(){"undefined"!=typeof customElements&&["mrd-longtext-field"].forEach((r=>{"mrd-longtext-field"===r&&(customElements.get(i(r))||customElements.define(i(r),a))}))}export{a as M,s as d}

package/dist/components/mrd-number-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{t as o}from"./i18n.js";import{c as a,v as l}from"./validation.js";import{p as n,f as m}from"./format.js";import{b as c}from"./client-layout.js";const u=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=e(this,"mrdChange",7),this.mrdBlur=e(this,"mrdBlur",7),this.name="",this.label="",this.value=null,this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.dataType=c.INTEGER,this.decimalPrecision=2,this.displayValue="",this.error="",this.handleInput=r=>{this.displayValue=r.target.value},this.handleBlur=r=>{const i=r.target.value,e=n(i,this.locale);this.error=!this.required||null!==e&&""!==i?""===i||a(e,this.dataType)?"":o("invalid_number",this.locale):o("required",this.locale),null!==e&&l(i)&&(this.displayValue=this.formatForDisplay(e)),this.mrdChange.emit({name:this.name,value:e}),this.mrdBlur.emit({name:this.name,value:e})},this.handleFocus=()=>{if(null!=this.value){const r=String(this.value);this.displayValue=r}}}componentWillLoad(){null!=this.value&&(this.displayValue=this.formatForDisplay(this.value))}formatForDisplay(r){return this.dataType===c.PERCENTAGE?m(r,this.locale,{minimumFractionDigits:0,maximumFractionDigits:this.decimalPrecision})+"%":m(r,this.locale,this.dataType===c.DECIMAL?{minimumFractionDigits:this.decimalPrecision,maximumFractionDigits:this.decimalPrecision}:{maximumFractionDigits:0})}render(){const r=!!this.error,i=this.dataType===c.PERCENTAGE?"%":"";return d(t,{key:"676e773fd4cc22936e64626b16e58c76f74ad8a7"},d("div",{key:"c646eab29793326f439d9838ecdab68249c487f1",class:"mrd-number-field"},this.label&&d("label",{key:"fb4fdac8f71b513fed52262ed8f5b5a5258f8f0b",class:"mrd-number-field__label"+(this.required?" mrd-number-field__label--required":"")},this.label),d("div",{key:"5f7540318761da01f9793430ca709ba014204a11",class:"mrd-number-field__input-wrapper"},d("input",{key:"a102a89f9b7d91b29cf65afd5772552002d4c4cc",class:"mrd-number-field__input"+(r?" mrd-number-field__input--error":""),type:"text",inputMode:"decimal",name:this.name,value:this.displayValue,placeholder:this.placeholder||(i?`0${i}`:"0"),required:this.required,disabled:this.disabled,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:this.handleFocus})),r&&d("span",{key:"eb00631f61d2c9ee6a94343a0c79847a21e8316c",class:"mrd-number-field__error"},this.error)))}static get style(){return".sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}]);function f(){"undefined"!=typeof customElements&&["mrd-number-field"].forEach((r=>{"mrd-number-field"===r&&(customElements.get(s(r))||customElements.define(s(r),u))}))}export{u as M,f as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{t as a}from"./i18n.js";import{c as o,v as l}from"./validation.js";import{p as n,f as m}from"./format.js";import{b as c}from"./client-layout.js";const u=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.name="",this.label="",this.value=null,this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.dataType=c.INTEGER,this.decimalPrecision=2,this.displayValue="",this.error="",this.handleInput=r=>{this.displayValue=r.target.value},this.handleBlur=r=>{const e=r.target.value,i=n(e,this.locale);this.error=!this.required||null!==i&&""!==e?""===e||o(i,this.dataType)?"":a("invalid_number",this.locale):a("required",this.locale),null!==i&&l(e)&&(this.displayValue=this.formatForDisplay(i)),this.mrdChange.emit({name:this.name,value:i}),this.mrdBlur.emit({name:this.name,value:i})},this.handleFocus=()=>{if(null!=this.value){const r=String(this.value);this.displayValue=r}}}componentWillLoad(){null!=this.value&&(this.displayValue=this.formatForDisplay(this.value))}formatForDisplay(r){return this.dataType===c.PERCENTAGE?m(r,this.locale,{minimumFractionDigits:0,maximumFractionDigits:this.decimalPrecision})+"%":m(r,this.locale,this.dataType===c.DECIMAL?{minimumFractionDigits:this.decimalPrecision,maximumFractionDigits:this.decimalPrecision}:{maximumFractionDigits:0})}render(){const r=!!this.error,e=this.dataType===c.PERCENTAGE?"%":"";return d(t,{key:"ba3488fb12f72bb04164e3e94c028fb8a085f1f2"},d("div",{key:"582e30a2a256c16cc3b0cab6e64460a0a5ec1fa2",class:"mrd-number-field"},this.label&&d("label",{key:"87fe77ce80e888406ecedaa450e8c3d2a61c790a",class:"mrd-number-field__label"+(this.required?" mrd-number-field__label--required":"")},this.label),d("div",{key:"e3d8cf06f585add372e385d6e6ef7d60ece8071b",class:"mrd-number-field__input-wrapper"},d("input",{key:"04710b67ee0dcb9db327e25b2467b1b3499bc9a8",class:"mrd-number-field__input"+(r?" mrd-number-field__input--error":""),type:"text",inputMode:"decimal",name:this.name,value:this.displayValue,placeholder:this.placeholder||(e?`0${e}`:"0"),required:this.required,disabled:this.disabled,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:this.handleFocus})),r&&d("span",{key:"9713244d784c82213ea835a5a6d47d468ccb0bb9",class:"mrd-number-field__error"},this.error)))}static get style(){return".sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}]);function b(){"undefined"!=typeof customElements&&["mrd-number-field"].forEach((r=>{"mrd-number-field"===r&&(customElements.get(s(r))||customElements.define(s(r),u))}))}export{u as M,b as d}