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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`);require(`./tag-DWtajZk6.cjs`),require(`./heading-DRJTS27k.cjs`);var i={name:`pkt-card`,react:`PktCard`,"css-class":`pkt-card`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{heading:{type:`string`,name:`Overskrift`,description:`Tittel på card`,category:`contents`},headingLevel:{type:[1,2,3,4,5,6],name:`Overskriftsnivå`,description:`Nivået på headingen. Brukes for tilgjengelighet.`,default:3,category:`accessibility`},subheading:{type:`string`,name:`Undertittel`,description:`Undertittel på card`,category:`contents`},layout:{type:[`vertical`,`horizontal`],name:`Layout`,description:`Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.`,default:`vertical`,category:`ui`},skin:{type:[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],name:`Utseende`,description:`Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.`,default:`outlined`,category:`ui`},padding:{type:[`none`,`default`],name:`Padding`,description:`Padding rundt card. Ved "none" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.`,default:`default`,category:`ui`},metaLead:{type:`string`,name:`Forfatter eller annen metadata`,description:`Undertekst med fet skriftvekt`,default:!1,category:`contents`},metaTrail:{type:`string`,name:`Dato eller annen metadata`,description:`Undertekst med normal skriftvekt`,default:!1,category:`contents`},tagPosition:{type:[`top`,`bottom`],name:`Tagplassering`,description:`Plassering av tags i card`,default:`top`,category:`ui`},clickCardLink:{type:`string`,name:`Lenke for klikkbart card`,description:`Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.`,category:`contents`},openLinkInNewTab:{type:`boolean`,name:`Åpne i ny fane`,description:`Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.`,default:!1,category:`tech`},borderOnHover:{type:`boolean`,name:`Hover border for klikkbart card`,description:`Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.`,default:!0,category:`ui`},image:{type:`object`,name:`Bilde`,description:`Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.`,properties:{src:{type:`string`,description:`Stien til bildet`,required:!0},alt:{type:`string`,description:`Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative`,required:!1}},category:`contents`},imageShape:{type:[`square`,`round`],name:`Bildeform`,description:`Valg for om bildet skal ha rektangulær eller rund form.`,default:`square`,category:`contents`},tags:{type:`array`,description:`Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text`,name:`Tags`,items:{type:`object`,name:`Tag`,properties:{skin:{type:[`blue`,`green`,`red`,`yellow`],description:`Farge på tag`},iconName:{type:`icon`,description:`Id på ikonet du ønsker å bruke til tag`},ariaLabel:{type:`string`,description:`Tekst for aria-label`},text:{type:`string`,description:`Tekst på tag`,required:!0}}},category:`contents`},ariaLabel:{type:`string`,name:`Aria-label for card`,description:`Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.`,category:`accessibility`}},slots:{default:{description:`Innholdet i card`}}},a=class extends n.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=i.props.layout.default,this.heading=``,this.headinglevel=3,this.image={src:``,alt:``},this.imageShape=`square`,this.openLinkInNewTab=!1,this.padding=i.props.padding.default,this.skin=i.props.skin.default,this.subheading=``,this.tagPosition=`top`,this.tags=[]}connectedCallback(){super.connectedCallback()}render(){let n={"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=this.ariaLabel?.trim()||(this.heading?`${this.heading} lenkekort`:`lenkekort`),a=this.ariaLabel?.trim()||(this.heading?this.heading:`kort`);return e.d`
      <article
        class=${t.t(n)}
        aria-label=${r.t(this.clickCardLink?i:a)}
      >
        ${this.renderImage()}
        <div class="pkt-card__wrapper">
          ${this.tagPosition===`top`?this.renderTags():e.l} 
          ${this.renderHeader()}
          ${this.renderSlot()} 
          ${this.tagPosition===`bottom`?this.renderTags():e.l}
          ${this.renderMetadata()}
        </div>
      </article>
    `}renderImage(){let n={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return e.d`
      ${this.image.src&&e.d`
        <div class=${t.t(n)}>
          <img src=${this.image.src} alt=${this.image.alt||``} />
        </div>
      `}
    `}renderHeading(){return e.d`
      ${this.heading&&!this.clickCardLink?e.d`
            <pkt-heading
              class="pkt-card__heading"
              .level=${this.headinglevel||3}
              size="medium"
              nospacing
              weight="regular"
            >
              ${this.heading}
            </pkt-heading>
          `:e.l}
    `}renderLinkHeading(){return e.d`
      ${this.clickCardLink?e.d`
            <pkt-heading
              class="pkt-card__link-heading pkt-card__heading"
              .level=${this.headinglevel||3}
              size="medium"
              weight="regular"
              nospacing
            >
              <a
                class="pkt-card__link"
                href=${this.clickCardLink}
                target=${this.openLinkInNewTab?`_blank`:`_self`}
                >${this.heading}</a
              >
            </pkt-heading>
          `:e.l}
    `}renderSubheading(){return e.d`
      ${this.subheading?e.d` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.l}
    `}renderHeader(){return e.d`
      ${this.heading||this.subheading?e.d`
            <header class="pkt-card__header">
              ${this.renderHeading()} 
              ${this.renderLinkHeading()} 
              ${this.renderSubheading()}
            </header>
          `:e.l}
    `}renderTags(){let n={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e.d`
      ${this.tags.length>0?e.d`
            <div
              class=${t.t(n)}
              role="list"
              aria-label=${this.tags.length>1?`merkelapper`:`merkelapp`}
            >
              ${this.tags.map(t=>e.d`
                  <pkt-tag
                    role="listitem"
                    textStyle="normal-text"
                    size="medium"
                    skin=${r.t(t.skin)}
                    iconName=${r.t(t.iconName)}
                  >
                    <span>${t.text}</span>
                  </pkt-tag>
                `)}
            </div>
          `:e.l}
    `}renderSlot(){return e.d`<section class="pkt-card__content">${n.n(this)}</section>`}renderMetadata(){return e.d`
      ${this.metaLead||this.metaTrail?e.d`
            <footer class="pkt-card__metadata">
              ${this.metaLead?e.d`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.l}
              ${this.metaTrail?e.d`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.l}
            </footer>
          `:e.l}
    `}};e.r([e.s({type:String})],a.prototype,`ariaLabel`,void 0),e.r([e.s({type:String})],a.prototype,`metaLead`,void 0),e.r([e.s({type:Boolean})],a.prototype,`borderOnHover`,void 0),e.r([e.s({type:String,reflect:!0})],a.prototype,`clickCardLink`,void 0),e.r([e.s({type:String})],a.prototype,`metaTrail`,void 0),e.r([e.s({type:String})],a.prototype,`layout`,void 0),e.r([e.s({type:String})],a.prototype,`heading`,void 0),e.r([e.s({type:Number})],a.prototype,`headinglevel`,void 0),e.r([e.s({type:Object})],a.prototype,`image`,void 0),e.r([e.s({type:String})],a.prototype,`imageShape`,void 0),e.r([e.s({type:Boolean})],a.prototype,`openLinkInNewTab`,void 0),e.r([e.s({type:String})],a.prototype,`padding`,void 0),e.r([e.s({type:String,converter:{fromAttribute:e=>{let t=i.props.skin.type;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${i.props.skin.default}".`),i.props.skin.default)},toAttribute:e=>e}})],a.prototype,`skin`,void 0),e.r([e.s({type:String})],a.prototype,`subheading`,void 0),e.r([e.s({type:String})],a.prototype,`tagPosition`,void 0),e.r([e.s({type:Array})],a.prototype,`tags`,void 0);try{e.c(`pkt-card`)(a)}catch{console.warn(`Forsøker å definere <pkt-card>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});