lintje 0.6.0 → 0.7.0

package/dist-elements/tag/card.js

@@ -1,65 +1,65 @@
-import{$t as e,Jt as t,U as n,Xt as r,Y as i,Zt as a,dt as o,ft as s,in as c,lt as l,nn as u,qt as d}from"../chunks/base-DuuwEY22.js";import{t as f}from"../chunks/live-message-CYZ-Ch7D.js";var p=`:host{min-width:0;height:100%;display:block}:host([hidden]){display:none}@media print{:host{break-inside:avoid}}.lintje-card{box-sizing:border-box;background:var(--color-bg-surface);border:1px solid var(--color-border-default);height:100%;color:var(--color-text-primary);transition:background var(--dur-hover) var(--ease-in-motion);flex-direction:column;display:flex}.lintje-card.is-link{cursor:pointer}.lintje-card.is-link:hover{background:var(--color-bg-subtle)}.lintje-card.is-link:hover .lintje-card__link{text-decoration:underline}.lintje-card.is-link:has(.lintje-card__link:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-card.is-link .lintje-card__link:focus-visible{outline:none}.lintje-card__image{aspect-ratio:16/9;object-fit:cover;object-position:top left;width:100%;display:block}.lintje-card__logo{width:var(--w-card-logo);height:var(--w-card-logo);object-fit:contain;flex:none}.lintje-card__main{flex-direction:column;flex:auto;min-width:0;display:flex}.lintje-card__body{gap:var(--space-2);padding:var(--tile-pad-y) var(--tile-pad-x) var(--tile-pad-x);flex-direction:column;flex:auto;display:flex}.lintje-card__head{align-items:center;gap:var(--space-4);min-width:0;display:flex}.lintje-card__heading{gap:var(--space-1);flex-direction:column;flex:auto;min-width:0;display:flex}.lintje-card__meta{font:var(--text-small);color:var(--color-text-muted);margin:0}.lintje-card__title{font:var(--text-h2);overflow-wrap:break-word;hyphens:auto;margin:0}.lintje-card__link{color:var(--color-link);text-decoration:none}.lintje-card__link:hover{color:var(--color-link-hover);text-decoration:underline}.lintje-card__icon-action{flex:none}.lintje-card__chevron{color:var(--color-link);flex:none}.lintje-card__description{font:var(--text-body);margin:0}.lintje-card__facts{margin:var(--space-2) 0 0;font:var(--text-small)}.lintje-card__fact{justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-1) 0;border-top:1px solid var(--color-border-default);display:flex}.lintje-card__fact:last-child{border-bottom:1px solid var(--color-border-default)}.lintje-card__fact-label{color:var(--color-text-muted)}.lintje-card__fact-value{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:0}.lintje-card__missing{color:var(--color-text-muted)}.lintje-card__status{align-items:center;gap:var(--space-2);padding-top:var(--space-2);font:var(--text-small);margin:auto 0 0;font-weight:700;display:flex}.lintje-card__status-icon{flex:none}.lintje-card__status--neutral{color:var(--color-text-muted)}.lintje-card__status--success .lintje-card__status-icon{color:var(--color-success-line)}.lintje-card__status--info .lintje-card__status-icon{color:var(--color-info-line)}.lintje-card__status--error .lintje-card__status-icon{color:var(--color-error-line)}.lintje-card__status--attention .lintje-card__status-icon,.lintje-card__status--warning .lintje-card__status-icon{color:var(--color-attention-line)}.lintje-card__status--busy .lintje-card__status-icon{color:var(--color-accent-text)}.lintje-card__status--neutral .lintje-card__status-icon,.lintje-card__status--subtle .lintje-card__status-icon{color:var(--color-text-muted)}.lintje-card__status--live .lintje-card__status-icon{color:var(--color-error-line)}.lintje-card__actions{align-items:center;gap:var(--space-2) var(--space-3);padding:0 var(--tile-pad-x) var(--tile-pad-x);flex-wrap:wrap;display:flex}.lintje-card__action--link{margin-left:auto}.lintje-card.is-horizontal{flex-direction:row}.lintje-card.is-horizontal .lintje-card__media{width:var(--w-card-media);border-right:1px solid var(--color-border-default);flex:none}.lintje-card.is-horizontal .lintje-card__image{aspect-ratio:auto;height:100%}.lintje-card.is-horizontal.has-logo .lintje-card__media{padding-top:var(--space-6);box-sizing:border-box;background:var(--color-bg-subtle);justify-content:center;display:flex}.lintje-card.is-horizontal .lintje-card__logo{width:var(--w-card-logo-wide);height:var(--w-card-logo-wide)}.lintje-card.is-compact .lintje-card__body{gap:var(--space-1);padding:var(--space-4)}.lintje-card.is-compact .lintje-card__title{font:var(--text-tile-title)}.lintje-card.is-compact .lintje-card__actions{padding:0 var(--space-4) var(--space-4)}@media (prefers-reduced-motion:reduce){.lintje-card{transition:none}}@media (forced-colors:active){.lintje-card.is-link:hover{border-color:highlight}}`,m=class extends r{constructor(...e){super(...e),this.layout=`vertical`,this.headingLevel=3,this.compact=!1,this.loading=!1,this.hasRegion=!1,this.wasBusy=!1,this.#e=new f(this),this.#t=new t(this,d)}static{this.styles=[o,e(p)]}static{this.properties={data:{attribute:!1},layout:{type:String,reflect:!0},headingLevel:{type:Number,attribute:`heading-level`},compact:{type:Boolean,reflect:!0},loading:{type:Boolean,reflect:!0}}}#e;get busy(){return this.loading||!this.data}willUpdate(e){super.willUpdate(e);let t=this.busy;t&&(this.hasRegion=!0),t!==this.wasBusy&&(this.wasBusy=t,this.#e.say(t?`Gegevens laden…`:`Gegevens geladen.`))}#t;get horizontal(){return this.layout===`horizontal`&&!this.#t.matches}get actions(){return(this.data?.actions??[]).slice(0,this.compact?1:2)}get isLink(){return!!this.data?.href&&this.actions.length===0}onCardClick(e){let t=this.data?.href;if(!t||!this.isLink||!n(e)||getSelection()?.toString())return;let r=e.composedPath(),i=e=>r.some(t=>t instanceof HTMLElement&&t.classList.contains(e));i(`lintje-card__icon-action`)||(i(`lintje-card__link`)?this.followLink(t,e):(e.preventDefault(),this.followLink(t)))}onTitleClick(e){!this.isLink&&this.data?.href&&n(e)&&this.followLink(this.data.href,e)}onAction(e,t){this.data&&(e.href?!e.external&&n(t)&&this.followLink(e.href,t):this.emit(`lintje-card-action`,{id:this.data.id,value:e.value??e.label}))}renderIconAction(e,t){let n=e.pressed!==void 0,r=e.pressed===!0,i=n?{id:t.id,value:e.value,pressed:!r}:{id:t.id,value:e.value};return c`<lintje-icon-button
+import{Q as e,Qt as t,U as n,Zt as r,cn as i,en as a,gt as o,ht as s,on as c,pt as l,rn as u,tn as d}from"../chunks/base-BsZyWDre.js";import{t as f}from"../chunks/live-message-CYZ-Ch7D.js";var p=`:host{min-width:0;height:100%;display:block}:host([hidden]){display:none}@media print{:host{break-inside:avoid}}.lintje-card{box-sizing:border-box;background:var(--color-bg-surface);border:1px solid var(--color-border-default);height:100%;color:var(--color-text-primary);transition:background var(--dur-hover) var(--ease-in-motion);flex-direction:column;display:flex}.lintje-card.is-link{cursor:pointer}.lintje-card.is-link:hover{background:var(--color-bg-subtle)}.lintje-card.is-link:hover .lintje-card__link{text-decoration:underline}.lintje-card.is-link:has(.lintje-card__link:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-card.is-link .lintje-card__link:focus-visible{outline:none}.lintje-card__image{aspect-ratio:16/9;object-fit:cover;object-position:top left;width:100%;display:block}.lintje-card__logo{width:var(--w-card-logo);height:var(--w-card-logo);object-fit:contain;flex:none}.lintje-card__main{flex-direction:column;flex:auto;min-width:0;display:flex}.lintje-card__body{gap:var(--space-2);padding:var(--tile-pad-y) var(--tile-pad-x) var(--tile-pad-x);flex-direction:column;flex:auto;display:flex}.lintje-card__head{align-items:center;gap:var(--space-4);min-width:0;display:flex}.lintje-card__heading{gap:var(--space-1);flex-direction:column;flex:auto;min-width:0;display:flex}.lintje-card__meta{font:var(--text-small);color:var(--color-text-muted);margin:0}.lintje-card__title{font:var(--text-h2);overflow-wrap:break-word;hyphens:auto;margin:0}.lintje-card__link{color:var(--color-link);text-decoration:none}.lintje-card__link:hover{color:var(--color-link-hover);text-decoration:underline}.lintje-card__icon-action{flex:none}.lintje-card__chevron{color:var(--color-link);flex:none}.lintje-card__description{font:var(--text-body);margin:0}.lintje-card__facts{margin:var(--space-2) 0 0;font:var(--text-small)}.lintje-card__fact{justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-1) 0;border-top:1px solid var(--color-border-default);display:flex}.lintje-card__fact:last-child{border-bottom:1px solid var(--color-border-default)}.lintje-card__fact-label{color:var(--color-text-muted)}.lintje-card__fact-value{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:0}.lintje-card__missing{color:var(--color-text-muted)}.lintje-card__status{align-items:center;gap:var(--space-2);padding-top:var(--space-2);font:var(--text-small);margin:auto 0 0;font-weight:700;display:flex}.lintje-card__status-icon{flex:none}.lintje-card__status--neutral{color:var(--color-text-muted)}.lintje-card__status--success .lintje-card__status-icon{color:var(--color-success-line)}.lintje-card__status--info .lintje-card__status-icon{color:var(--color-info-line)}.lintje-card__status--error .lintje-card__status-icon{color:var(--color-error-line)}.lintje-card__status--attention .lintje-card__status-icon,.lintje-card__status--warning .lintje-card__status-icon{color:var(--color-attention-line)}.lintje-card__status--busy .lintje-card__status-icon{color:var(--color-accent-text)}.lintje-card__status--neutral .lintje-card__status-icon,.lintje-card__status--subtle .lintje-card__status-icon{color:var(--color-text-muted)}.lintje-card__status--live .lintje-card__status-icon{color:var(--color-error-line)}.lintje-card__actions{align-items:center;gap:var(--space-2) var(--space-3);padding:0 var(--tile-pad-x) var(--tile-pad-x);flex-wrap:wrap;display:flex}.lintje-card__action--link{margin-left:auto}.lintje-card.is-horizontal{flex-direction:row}.lintje-card.is-horizontal .lintje-card__media{width:var(--w-card-media);border-right:1px solid var(--color-border-default);flex:none}.lintje-card.is-horizontal .lintje-card__image{aspect-ratio:auto;height:100%}.lintje-card.is-horizontal.has-logo .lintje-card__media{padding-top:var(--space-6);box-sizing:border-box;background:var(--color-bg-subtle);justify-content:center;display:flex}.lintje-card.is-horizontal .lintje-card__logo{width:var(--w-card-logo-wide);height:var(--w-card-logo-wide)}.lintje-card.is-compact .lintje-card__body{gap:var(--space-1);padding:var(--space-4)}.lintje-card.is-compact .lintje-card__title{font:var(--text-tile-title)}.lintje-card.is-compact .lintje-card__actions{padding:0 var(--space-4) var(--space-4)}@media (prefers-reduced-motion:reduce){.lintje-card{transition:none}}@media (forced-colors:active){.lintje-card.is-link:hover{border-color:highlight}}`,m=class extends a{constructor(...e){super(...e),this.layout=`vertical`,this.headingLevel=3,this.compact=!1,this.loading=!1,this.hasRegion=!1,this.wasBusy=!1,this.#e=new f(this),this.#t=new t(this,r)}static{this.styles=[s,u(p)]}static{this.properties={data:{attribute:!1},layout:{type:String,reflect:!0},headingLevel:{type:Number,attribute:`heading-level`},compact:{type:Boolean,reflect:!0},loading:{type:Boolean,reflect:!0}}}#e;get busy(){return this.loading||!this.data}willUpdate(e){super.willUpdate(e);let t=this.busy;t&&(this.hasRegion=!0),t!==this.wasBusy&&(this.wasBusy=t,this.#e.say(t?`Gegevens laden…`:`Gegevens geladen.`))}#t;get horizontal(){return this.layout===`horizontal`&&!this.#t.matches}get actions(){return(this.data?.actions??[]).slice(0,this.compact?1:2)}get isLink(){return!!this.data?.href&&this.actions.length===0}onCardClick(e){let t=this.data?.href;if(!t||!this.isLink||!n(e)||getSelection()?.toString())return;let r=e.composedPath(),i=e=>r.some(t=>t instanceof HTMLElement&&t.classList.contains(e));i(`lintje-card__icon-action`)||(i(`lintje-card__link`)?this.followLink(t,e):(e.preventDefault(),this.followLink(t)))}onTitleClick(e){!this.isLink&&this.data?.href&&n(e)&&this.followLink(this.data.href,e)}onAction(e,t){this.data&&(e.href?!e.external&&n(t)&&this.followLink(e.href,t):this.emit(`lintje-card-action`,{id:this.data.id,value:e.value??e.label}))}renderIconAction(e,t){let n=e.pressed!==void 0,r=e.pressed===!0,a=n?{id:t.id,value:e.value,pressed:!r}:{id:t.id,value:e.value};return i`<lintje-icon-button
       class="lintje-card__icon-action"
       variant="flat"
       icon=${r&&e.iconPressed?e.iconPressed:e.icon}
       label=${`${e.label}: ${t.title}`}
       .pressed=${n?r:void 0}
       ?active=${r}
-      @click=${()=>this.emit(`lintje-card-action`,i)}
-    ></lintje-icon-button>`}heading(e){return this.headingLevel===2?c`<h2 class="lintje-card__title">${e}</h2>`:this.headingLevel===4?c`<h4 class="lintje-card__title">${e}</h4>`:c`<h3 class="lintje-card__title">${e}</h3>`}renderTitle(e){let t=e.href?c`<a class="lintje-card__link" href=${e.href} @click=${this.onTitleClick}
+      @click=${()=>this.emit(`lintje-card-action`,a)}
+    ></lintje-icon-button>`}heading(e){return this.headingLevel===2?i`<h2 class="lintje-card__title">${e}</h2>`:this.headingLevel===4?i`<h4 class="lintje-card__title">${e}</h4>`:i`<h3 class="lintje-card__title">${e}</h3>`}renderTitle(e){let t=e.href?i`<a class="lintje-card__link" href=${e.href} @click=${this.onTitleClick}
           >${e.title}</a
-        >`:c`${e.title}`;return this.heading(t)}renderStatus(e){let t=e.tone??`neutral`,n=e.icon??i[t];return c`<p class="lintje-card__status lintje-card__status--${t}">
-      ${n?s(n,{size:16,className:`lintje-card__status-icon`}):u}
-      <span>${e.label}</span>
-    </p>`}renderFacts(e){return c`<dl class="lintje-card__facts">
-      ${e.map(e=>c`<div class="lintje-card__fact">
+        >`:i`${e.title}`;return this.heading(t)}renderStatus(t){let n=t.tone??`neutral`,r=t.icon??e[n];return i`<p class="lintje-card__status lintje-card__status--${n}">
+      ${r?o(r,{size:16,className:`lintje-card__status-icon`}):c}
+      <span>${t.label}</span>
+    </p>`}renderFacts(e){return i`<dl class="lintje-card__facts">
+      ${e.map(e=>i`<div class="lintje-card__fact">
           <dt class="lintje-card__fact-label">${e.label}</dt>
           <dd class="lintje-card__fact-value">
-            ${e.value===null||e.value===``?c`<span class="lintje-card__missing"
+            ${e.value===null||e.value===``?i`<span class="lintje-card__missing"
                     ><span aria-hidden="true">—</span
                     ><span class="visually-hidden">geen waarde</span></span
                   >`:e.value}
           </dd>
         </div>`)}
-    </dl>`}renderAction(e,t){let n=c`${e.label}<span class="visually-hidden"
+    </dl>`}renderAction(e,t){let n=i`${e.label}<span class="visually-hidden"
         >: ${t}${e.external?` (opent in een nieuw tabblad)`:``}</span
-      >`;return c`<lintje-button
+      >`;return i`<lintje-button
       class=${e.variant===`link`?`lintje-card__action lintje-card__action--link`:`lintje-card__action`}
       variant=${e.variant??`secondary`}
-      href=${e.href??u}
-      target=${e.external?`_blank`:u}
-      icon-right=${e.external?`functioneel-externe-link`:u}
+      href=${e.href??c}
+      target=${e.external?`_blank`:c}
+      icon-right=${e.external?`functioneel-externe-link`:c}
       @click=${t=>this.onAction(e,t)}
       >${n}</lintje-button
-    >`}renderMedia(e){return(e.kind??`image`)===`logo`?c`<img class="lintje-card__logo" src=${e.src} alt=${e.alt} />`:c`<img class="lintje-card__image" src=${e.src} alt=${e.alt} loading="lazy" />`}renderLoading(){return c`<div class="lintje-card is-loading">
+    >`}renderMedia(e){return(e.kind??`image`)===`logo`?i`<img class="lintje-card__logo" src=${e.src} alt=${e.alt} />`:i`<img class="lintje-card__image" src=${e.src} alt=${e.alt} loading="lazy" />`}renderLoading(){return i`<div class="lintje-card is-loading">
       <div class="lintje-card__body">
         <lintje-skeleton width="40%" height="14px"></lintje-skeleton>
         <lintje-skeleton width="70%" height="24px"></lintje-skeleton>
-        ${this.compact?u:c`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
+        ${this.compact?c:i`<lintje-skeleton width="100%" height="16px"></lintje-skeleton>
                 <lintje-skeleton width="85%" height="16px"></lintje-skeleton>`}
       </div>
-    </div>`}render(){return c`${this.hasRegion?c`<span class="visually-hidden" role="status">${this.#e.text}</span>`:u}${this.renderCard()}`}renderCard(){let e=this.data;if(this.busy||!e)return this.renderLoading();let t=this.compact?void 0:e.media,n=t?.kind===`logo`,r=this.horizontal,i=t&&(r||!n),a=(e.meta??[]).filter(e=>e.trim()!==``).join(` · `),o=this.actions;return c`<article
-      class=${l({"lintje-card":!0,"is-link":this.isLink,"is-compact":this.compact,"is-horizontal":r,"has-media":!!i,"has-logo":n})}
+    </div>`}render(){return i`${this.hasRegion?i`<span class="visually-hidden" role="status">${this.#e.text}</span>`:c}${this.renderCard()}`}renderCard(){let e=this.data;if(this.busy||!e)return this.renderLoading();let t=this.compact?void 0:e.media,n=t?.kind===`logo`,r=this.horizontal,a=t&&(r||!n),s=(e.meta??[]).filter(e=>e.trim()!==``).join(` · `),u=this.actions;return i`<article
+      class=${l({"lintje-card":!0,"is-link":this.isLink,"is-compact":this.compact,"is-horizontal":r,"has-media":!!a,"has-logo":n})}
       @click=${this.onCardClick}
     >
-      ${i?c`<div class="lintje-card__media">${this.renderMedia(t)}</div>`:u}
+      ${a?i`<div class="lintje-card__media">${this.renderMedia(t)}</div>`:c}
       <div class="lintje-card__main">
         <div class="lintje-card__body">
           <div class="lintje-card__head">
-            ${t&&n&&!i?this.renderMedia(t):u}
+            ${t&&n&&!a?this.renderMedia(t):c}
             <div class="lintje-card__heading">
-              ${a?c`<p class="lintje-card__meta">${a}</p>`:u}
+              ${s?i`<p class="lintje-card__meta">${s}</p>`:c}
               ${this.renderTitle(e)}
             </div>
             ${(e.iconActions??[]).slice(0,2).map(t=>this.renderIconAction(t,e))}
-            ${this.isLink?s(`functioneel-delta-rechts`,{size:20,className:`lintje-card__chevron`}):u}
+            ${this.isLink?o(`functioneel-delta-rechts`,{size:20,className:`lintje-card__chevron`}):c}
           </div>
-          ${e.description&&!this.compact?c`<p class="lintje-card__description">${e.description}</p>`:u}
-          ${e.facts?.length&&!this.compact?this.renderFacts(e.facts):u}
-          ${e.status?this.renderStatus(e.status):u}
+          ${e.description&&!this.compact?i`<p class="lintje-card__description">${e.description}</p>`:c}
+          ${e.facts?.length&&!this.compact?this.renderFacts(e.facts):c}
+          ${e.status?this.renderStatus(e.status):c}
         </div>
-        ${o.length?c`<div class="lintje-card__actions">
-                ${o.map(t=>this.renderAction(t,e.title))}
-              </div>`:u}
+        ${u.length?i`<div class="lintje-card__actions">
+                ${u.map(t=>this.renderAction(t,e.title))}
+              </div>`:c}
       </div>
-    </article>`}};a(`lintje-card`,m);export{m as LintjeCard};
+    </article>`}};d(`lintje-card`,m);export{m as LintjeCard};