@oslokommune/punkt-elements/dist/card-Bx36j0q4.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const l=require("./class-map-BBG2gMX4.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-DPk3fpEg.cjs");const k={layout:{default:"vertical"},skin:{default:"outlined"},padding:{default:"default"}},h={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(d,a,i,s)=>{for(var r=s>1?void 0:s?m(a,i):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(r=(s?o(a,i,r):o(r))||r);return s&&r&&u(a,i,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=h.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=h.props.padding.default,this.skin=h.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,n;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?this.heading:"kort");return t.x`
      <article
        class=${l.e(a)}
        aria-label=${p.o(this.clickCardLink?i:s)}
      >
        ${this.renderImage()}
        <div class="pkt-card__wrapper">
          ${this.tagPosition==="top"?this.renderTags():t.E} 
          ${this.renderHeader()}
          ${this.renderSlot()} 
          ${this.tagPosition==="bottom"?this.renderTags():t.E}
          ${this.renderMetadata()}
        </div>
      </article>
    `}renderImage(){const a={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return t.x`
      ${this.image.src&&t.x`
        <div class=${l.e(a)}>
          <img src=${this.image.src} alt=${this.image.alt||""} />
        </div>
      `}
    `}renderHeading(){return t.x`
      ${this.heading&&!this.clickCardLink?t.x`
            <pkt-heading
              class="pkt-card__heading"
              .level=${this.headinglevel||3}
              size="medium"
              nospacing
            >
              ${this.heading}
            </pkt-heading>
          `:t.E}
    `}renderLinkHeading(){return t.x`
      ${this.clickCardLink?t.x`
            <pkt-heading
              class="pkt-card__link-heading pkt-card__heading"
              .level=${this.headinglevel||3}
              size="medium"
              nospacing
            >
              <a
                class="pkt-card__link"
                href=${this.clickCardLink}
                target=${this.openLinkInNewTab?"_blank":"_self"}
                >${this.heading}</a
              >
            </pkt-heading>
          `:t.E}
    `}renderSubheading(){return t.x`
      ${this.subheading?t.x` <p class="pkt-card__subheading ">${this.subheading}</p> `:t.E}
    `}renderHeader(){const a=!!this.heading||!!this.subheading;return t.x`
      ${a?t.x`
            <header class="pkt-card__header">
              ${this.renderHeading()} 
              ${this.renderLinkHeading()} 
              ${this.renderSubheading()}
            </header>
          `:t.E}
    `}renderTags(){const a={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return t.x`
      ${this.tags.length>0?t.x`
            <div
              class=${l.e(a)}
              role="list"
              aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
            >
              ${this.tags.map(i=>t.x`
                  <pkt-tag
                    role="listitem"
                    textStyle="normal-text"
                    size="medium"
                    skin=${p.o(i.skin)}
                    iconName=${p.o(i.iconName)}
                  >
                    ${i.text}
                  </pkt-tag>
                `)}
            </div>
          `:t.E}
    `}renderSlot(){return t.x`
      ${this.defaultSlot&&t.x`<section class="pkt-card__content" ${c.n(this.defaultSlot)}></section>`}
    `}renderMetadata(){return t.x`
      ${this.metaLead||this.metaTrail?t.x`
            <footer class="pkt-card__metadata">
              ${this.metaLead?t.x`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:t.E}
              ${this.metaTrail?t.x`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:t.E}
            </footer>
          `:t.E}
    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"metaLead",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"borderOnHover",2);e([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"clickCardLink",2);e([t.n({type:String})],exports.PktCard.prototype,"metaTrail",2);e([t.n({type:String})],exports.PktCard.prototype,"layout",2);e([t.n({type:String})],exports.PktCard.prototype,"heading",2);e([t.n({type:Number})],exports.PktCard.prototype,"headinglevel",2);e([t.n({type:Object})],exports.PktCard.prototype,"image",2);e([t.n({type:String})],exports.PktCard.prototype,"imageShape",2);e([t.n({type:Boolean})],exports.PktCard.prototype,"openLinkInNewTab",2);e([t.n({type:String})],exports.PktCard.prototype,"padding",2);e([t.n({type:String})],exports.PktCard.prototype,"skin",2);e([t.n({type:String})],exports.PktCard.prototype,"subheading",2);e([t.n({type:String})],exports.PktCard.prototype,"tagPosition",2);e([t.n({type:Array})],exports.PktCard.prototype,"tags",2);exports.PktCard=e([t.t("pkt-card")],exports.PktCard);