@oslokommune/punkt-elements 12.37.8 → 12.38.0

package/CHANGELOG.md

@@ -5,6 +5,43 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.38.0](https://github.com/oslokommune/punkt/compare/12.37.8...12.38.0) (2025-05-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Refaktorering og forbedringer av kort – klikkbart lenkekort, runde bilder, tilgjengelighet, semantikk, fleksibilitet, styling (#2511). Lagt til støtte for: 
+  - Tilgjenglig, klikkbart lenkekort
+  - Variabel tagposisjon
+  - Runde bilder
+  - Responsivitet
+  - Fokus på rammen av kortet
+  - Valgfri hover på rammen av kortet
+  - Variant uten padding
+  - Ny skin: outlined-beige
+  - forfatter
+  - dato
+  
+  Annet:
+  - Bruker ny headingkomponent
+  - Støtte for valg av headingnivå
+  - Semantisk HTML med article, header, section og footer
+  - Fokusert på UU og lagt til aria-label og roller på ulike deler av kortet
+  - Kortet går nå fra landskap til portett på små skjermer
+  - Mange stylingendringer
+  - Håndterer nå at brukere ikke cropper bilder på forhånd slik at de ved ulike størrelser allikevel får uniforme størrelser på bildene i kortene
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.37.8](https://github.com/oslokommune/punkt/compare/12.37.7...12.37.8) (2025-05-13)
 
 ### ⚠ BREAKING CHANGES

package/dist/card-CZG7XGlj.js

@@ -0,0 +1,231 @@
+import { e as c } from "./class-map-KyMqi0fa.js";
+import { o as g } from "./if-defined-BErSJCeJ.js";
+import { P as u, E as d, x as t, n as r, a as $ } from "./element-DjjF_tEh.js";
+import { P as m } from "./pkt-slot-controller-DtDaD9q_.js";
+import { e as _, n as y } from "./ref-iIffqQAI.js";
+import "./icon-Beoxup8E.js";
+import "./tag-Cu8afZy8.js";
+const b = {
+  skin: {
+    default: "outlined"
+  },
+  direction: {
+    default: "portrait"
+  },
+  padding: {
+    default: "standard"
+  }
+}, k = {
+  props: b
+};
+var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (a, s, p, o) => {
+  for (var n = o > 1 ? void 0 : o ? S(s, p) : s, h = a.length - 1, l; h >= 0; h--)
+    (l = a[h]) && (n = (o ? l(s, p, n) : l(n)) || n);
+  return o && n && f(s, p, n), n;
+};
+let e = class extends u {
+  //Constructor
+  constructor() {
+    super(), this.defaultSlot = _(), this.ariaLabel = "", this.author = null, this.borderOnHover = !0, this.clickCardLink = null, this.date = null, this.direction = k.props.direction.default, this.heading = "", this.headinglevel = 3, this.image = {
+      src: "",
+      alt: ""
+    }, this.imageShape = "square", this.openLinkInNewTab = !1, this.padding = k.props.padding.default, this.skin = k.props.skin.default, this.subheading = "", this.tagPosition = "top", this.tags = [], this.slotController = new m(this, this.defaultSlot);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  // Render methods
+  // Main render method
+  // prettier-ignore
+  render() {
+    var o, n;
+    const a = {
+      "pkt-card": !0,
+      [`pkt-card--${this.skin}`]: this.skin,
+      [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--padding-${this.padding}`]: this.padding,
+      "pkt-card--border-on-hover": this.borderOnHover
+    }, s = ((o = this.ariaLabel) == null ? void 0 : o.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), p = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
+    return t`
+      <article
+        class=${c(a)}
+        aria-label=${g(this.clickCardLink ? s : p)}
+      >
+        ${this.renderImage()}
+        <div class="pkt-card__wrapper">
+          ${this.tagPosition === "top" ? this.renderTags() : d} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition === "bottom" ? this.renderTags() : d}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `;
+  }
+  // Render methods for different parts of the card
+  renderImage() {
+    const a = {
+      "pkt-card__image": !0,
+      [`pkt-card__image-${this.imageShape}`]: this.imageShape
+    };
+    return t`
+      ${this.image.src && t`
+        <div class=${c(a)}>
+          <img src=${this.image.src} alt=${this.image.alt || ""} />
+        </div>
+      `}
+    `;
+  }
+  // Do not render heading if link is present, render link heading instead
+  // Combine the rendering for headings into a renderHeader method
+  renderHeading() {
+    return t`
+      ${this.heading && !this.clickCardLink ? t`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          ` : d}
+    `;
+  }
+  renderLinkHeading() {
+    return t`
+      ${this.clickCardLink ? t`
+            <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>
+          ` : d}
+    `;
+  }
+  renderSubheading() {
+    return t`
+      ${this.subheading ? t` <p class="pkt-card__subheading ">${this.subheading}</p> ` : d}
+    `;
+  }
+  // Render header
+  // prettier-ignore
+  renderHeader() {
+    const a = !!this.heading || !!this.subheading;
+    return t`
+      ${a ? t`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          ` : d}
+    `;
+  }
+  renderTags() {
+    const a = {
+      "pkt-card__tags": !0,
+      [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition
+    };
+    return t`
+      ${this.tags.length > 0 ? t`
+            <div
+              class=${c(a)}
+              role="list"
+              aria-label=${this.tags.length > 1 ? "merkelapper" : "merkelapp"}
+            >
+              ${this.tags.map(
+      (s) => t`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${g(s.skin)}
+                    iconName=${g(s.iconName)}
+                  >
+                    ${s.text}
+                  </pkt-tag>
+                `
+    )}
+            </div>
+          ` : d}
+    `;
+  }
+  renderSlot() {
+    return t`
+      ${this.defaultSlot && t`<section class="pkt-card__content" ${y(this.defaultSlot)}></section>`}
+    `;
+  }
+  renderCreditline() {
+    return t`
+      ${this.author || this.date ? t`
+            <footer class="pkt-card__creditline">
+              ${this.author ? t`<span class="pkt-card__creditline-author">${this.author}</span>` : d}
+              ${this.date ? t`<span class="pkt-card__creditline-date">${this.date}</span>` : d}
+            </footer>
+          ` : d}
+    `;
+  }
+};
+i([
+  r({ type: String })
+], e.prototype, "ariaLabel", 2);
+i([
+  r({ type: String })
+], e.prototype, "author", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "borderOnHover", 2);
+i([
+  r({ type: String, reflect: !0 })
+], e.prototype, "clickCardLink", 2);
+i([
+  r({ type: String })
+], e.prototype, "date", 2);
+i([
+  r({ type: String })
+], e.prototype, "direction", 2);
+i([
+  r({ type: String })
+], e.prototype, "heading", 2);
+i([
+  r({ type: Number })
+], e.prototype, "headinglevel", 2);
+i([
+  r({ type: Object })
+], e.prototype, "image", 2);
+i([
+  r({ type: String })
+], e.prototype, "imageShape", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "openLinkInNewTab", 2);
+i([
+  r({ type: String })
+], e.prototype, "padding", 2);
+i([
+  r({ type: String })
+], e.prototype, "skin", 2);
+i([
+  r({ type: String })
+], e.prototype, "subheading", 2);
+i([
+  r({ type: String })
+], e.prototype, "tagPosition", 2);
+i([
+  r({ type: Array })
+], e.prototype, "tags", 2);
+e = i([
+  $("pkt-card")
+], e);
+export {
+  e as P
+};

package/dist/card-Di1MQneh.cjs

@@ -0,0 +1,87 @@
+"use strict";const p=require("./class-map-DCyaICmy.cjs"),h=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),g=require("./pkt-slot-controller-Da-RgXfS.cjs"),c=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={skin:{default:"outlined"},direction:{default:"portrait"},padding:{default:"standard"}},l={props:k};var u=Object.defineProperty,$=Object.getOwnPropertyDescriptor,e=(d,i,a,n)=>{for(var r=n>1?void 0:n?$(i,a):i,s=d.length-1,o;s>=0;s--)(o=d[s])&&(r=(n?o(i,a,r):o(r))||r);return n&&r&&u(i,a,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.author=null,this.borderOnHover=!0,this.clickCardLink=null,this.date=null,this.direction=l.props.direction.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=l.props.padding.default,this.skin=l.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,s;const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},a=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),n=((s=this.ariaLabel)==null?void 0:s.trim())||(this.heading?this.heading:"kort");return t.x`
+      <article
+        class=${p.e(i)}
+        aria-label=${h.o(this.clickCardLink?a:n)}
+      >
+        ${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.renderCreditline()}
+        </div>
+      </article>
+    `}renderImage(){const i={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return t.x`
+      ${this.image.src&&t.x`
+        <div class=${p.e(i)}>
+          <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 i=!!this.heading||!!this.subheading;return t.x`
+      ${i?t.x`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `:t.E}
+    `}renderTags(){const i={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return t.x`
+      ${this.tags.length>0?t.x`
+            <div
+              class=${p.e(i)}
+              role="list"
+              aria-label=${this.tags.length>1?"merkelapper":"merkelapp"}
+            >
+              ${this.tags.map(a=>t.x`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${h.o(a.skin)}
+                    iconName=${h.o(a.iconName)}
+                  >
+                    ${a.text}
+                  </pkt-tag>
+                `)}
+            </div>
+          `:t.E}
+    `}renderSlot(){return t.x`
+      ${this.defaultSlot&&t.x`<section class="pkt-card__content" ${c.n(this.defaultSlot)}></section>`}
+    `}renderCreditline(){return t.x`
+      ${this.author||this.date?t.x`
+            <footer class="pkt-card__creditline">
+              ${this.author?t.x`<span class="pkt-card__creditline-author">${this.author}</span>`:t.E}
+              ${this.date?t.x`<span class="pkt-card__creditline-date">${this.date}</span>`:t.E}
+            </footer>
+          `:t.E}
+    `}};e([t.n({type:String})],exports.PktCard.prototype,"ariaLabel",2);e([t.n({type:String})],exports.PktCard.prototype,"author",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,"date",2);e([t.n({type:String})],exports.PktCard.prototype,"direction",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);

package/dist/index.d.ts

@@ -117,6 +117,30 @@ export declare interface IPktButton {
     disabled?: Booleanish;
 }
 
+declare interface IPktCard {
+    ariaLabel?: IAriaAttributes['aria-label'];
+    author?: string | null;
+    date?: string | null;
+    direction?: TDirection;
+    heading?: string;
+    headingLevel?: IPktHeading['level'];
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imageShape?: TCardImageShape;
+    clickCardLink?: string | null;
+    openLinkInNewTab?: boolean | null;
+    borderOnHover?: boolean | null;
+    padding?: TCardPadding;
+    skin?: TCardSkin;
+    subheading?: string;
+    tagPosition?: TCardTagPosition;
+    tags?: (Omit<IPktTag, 'closeTag'> & {
+        text: string;
+    })[];
+}
+
 export declare interface IPktCombobox {
     allowUserInput?: boolean;
     typeahead?: boolean;
@@ -425,22 +449,40 @@ export declare class PktCalendar extends PktElement {
     close(): void;
 }
 
-export declare class PktCard extends PktElement {
+export declare class PktCard extends PktElement implements IPktCard {
     defaultSlot: Ref<HTMLElement>;
     constructor();
-    skin: TCardSkin;
+    ariaLabel: string;
+    author: string | null;
+    borderOnHover: boolean;
+    clickCardLink: IPktCard['clickCardLink'];
+    date: string | null;
     direction: TDirection;
+    heading: string;
+    headinglevel: IPktHeading['level'];
     image: {
         src: string;
         alt: string;
     };
-    heading: string;
+    imageShape: TCardImageShape;
+    openLinkInNewTab: boolean;
+    padding: TCardPadding;
+    skin: TCardSkin;
     subheading: string;
+    tagPosition: 'top' | 'bottom';
     tags: (Omit<IPktTag, 'closeTag'> & {
         text: string;
     })[];
     connectedCallback(): void;
     render(): TemplateResult<1>;
+    renderImage(): TemplateResult<1>;
+    renderHeading(): TemplateResult<1>;
+    renderLinkHeading(): TemplateResult<1>;
+    renderSubheading(): TemplateResult<1>;
+    renderHeader(): TemplateResult<1>;
+    renderTags(): TemplateResult<1>;
+    renderSlot(): TemplateResult<1>;
+    renderCreditline(): TemplateResult<1>;
 }
 
 export declare class PktCheckbox extends PktInputElement {
@@ -1115,7 +1157,13 @@ declare type TAriaRelevant = 'additions' | 'removals' | 'text' | 'all';
 
 declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 
-declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
+declare type TCardImageShape = 'square' | 'round';
+
+declare type TCardPadding = 'none' | 'standard';
+
+declare type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
+
+declare type TCardTagPosition = 'top' | 'bottom';
 
 declare type TCounterPosition = 'top' | 'bottom';
 

package/dist/pkt-card.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-DH-3qNgp.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-Di1MQneh.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;

package/dist/pkt-card.js

@@ -1,4 +1,4 @@
-import { P as a } from "./card-Cyww1yKr.js";
+import { P as a } from "./card-CZG7XGlj.js";
 const r = a;
 export {
   a as PktCard,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-ZkEpUrbJ.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-DH-3qNgp.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-CSspmVST.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-BrDbM3GT.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-DZY4gZCQ.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-C2EPmB0W.cjs"),l=require("./accordionitem-RFwXQC_0.cjs"),d=require("./backlink-HHM21crL.cjs"),b=require("./button-ZkEpUrbJ.cjs"),k=require("./calendar-CYY42kN4.cjs"),m=require("./card-Di1MQneh.cjs"),g=require("./combobox-yUrUarU_.cjs"),h=require("./consent-CSspmVST.cjs"),f=require("./checkbox-zqd3KVfz.cjs"),t=require("./element-BSypUpzA.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-BvbyvXRH.cjs"),O=require("./class-map-DCyaICmy.cjs"),j=require("./datepicker-CH5ZmFhf.cjs"),q=require("./helptext-bMgnhZ1R.cjs"),x=require("./heading-BnJhJDMD.cjs"),C=require("./icon-BnKGwYjj.cjs"),v=require("./input-wrapper-B-f_SotM.cjs"),S=require("./link-BrDbM3GT.cjs"),$=require("./linkcard-s9yoOq90.cjs"),L=require("./loader-Bk4XPiOY.cjs"),_=require("./messagebox-B0kgftoP.cjs"),A=require("./modal-DZY4gZCQ.cjs"),B=require("./progressbar-DiRfScnB.cjs"),p=require("./radiobutton-CI2xaqAB.cjs"),T=require("./tag-B9kFYxHg.cjs"),I=require("./textarea-DxbylapQ.cjs"),M=require("./textinput-B__c4c1z.cjs"),R=require("./select-BCL790jM.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -4,7 +4,7 @@ import { P as O } from "./backlink-hvyJmwrO.js";
 import { P as T } from "./button-D39TTsjJ.js";
 import { c as f } from "./calendar-KDcOWD6V.js";
 import { P as D } from "./calendar-KDcOWD6V.js";
-import { P as G } from "./card-Cyww1yKr.js";
+import { P as G } from "./card-CZG7XGlj.js";
 import { P as K } from "./combobox-B6x7Qukm.js";
 import { P as U } from "./consent-BPZ8QV7q.js";
 import { P as q } from "./checkbox-Ds1FrhqK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.37.8",
+  "version": "12.38.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.37.0",
-    "@oslokommune/punkt-css": "^12.37.2",
+    "@oslokommune/punkt-css": "^12.38.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.18",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ff82b384dde195e97572a47eb6f9e13c5f3c9063"
+  "gitHead": "02f166beaa93cb948806b224d4af7c1aafe8d346"
 }

package/src/components/card/card.ts

@@ -6,78 +6,247 @@ import { IPktTag } from '@/components/tag'
 import { PktElement } from '@/base-elements/element'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
 import '@/components/tag'
+import { IAriaAttributes } from '@/types/aria'
 
-export type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
 export type TDirection = 'portrait' | 'landscape'
+export type TCardPadding = 'none' | 'standard'
+export type TCardImageShape = 'square' | 'round'
+export type TCardTagPosition = 'top' | 'bottom'
+
+export interface IPktCard {
+  ariaLabel?: IAriaAttributes['aria-label']
+  author?: string | null
+  date?: string | null
+  direction?: TDirection
+  heading?: string
+  headingLevel?: IPktHeading['level']
+  image?: { src: string; alt: string }
+  imageShape?: TCardImageShape
+  clickCardLink?: string | null
+  openLinkInNewTab?: boolean | null
+  borderOnHover?: boolean | null
+  padding?: TCardPadding
+  skin?: TCardSkin
+  subheading?: string
+  tagPosition?: TCardTagPosition
+  tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
+}
 
 @customElement('pkt-card')
-export class PktCard extends PktElement {
+export class PktCard extends PktElement implements IPktCard {
+  // Refs
+
   defaultSlot: Ref<HTMLElement> = createRef()
 
+  //Constructor
+
   constructor() {
     super()
     this.slotController = new PktSlotController(this, this.defaultSlot)
   }
 
-  @property({ type: String, reflect: true }) skin: TCardSkin = specs.props.skin.default as TCardSkin
-  @property({ type: String, reflect: true }) direction: TDirection = specs.props.direction
-    .default as TDirection
-  @property({ type: Object, reflect: true }) image: { src: string; alt: string } = {
+  // Properties
+
+  @property({ type: String }) ariaLabel: string = ''
+  @property({ type: String }) author: string | null = null
+  @property({ type: Boolean }) borderOnHover: boolean = true
+  @property({ type: String, reflect: true }) clickCardLink: IPktCard['clickCardLink'] = null
+  @property({ type: String }) date: string | null = null
+  @property({ type: String }) direction: TDirection = specs.props.direction.default as TDirection
+  @property({ type: String }) heading: string = ''
+  @property({ type: Number }) headinglevel: IPktHeading['level'] = 3
+  @property({ type: Object }) image: { src: string; alt: string } = {
     src: '',
     alt: '',
   }
-  @property({ type: String, reflect: true }) heading: string = ''
-  @property({ type: String, reflect: true }) subheading: string = ''
-  @property({ type: Array, reflect: true }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] =
-    []
+  @property({ type: String }) imageShape: TCardImageShape = 'square'
+  @property({ type: Boolean }) openLinkInNewTab: boolean = false
+  @property({ type: String }) padding: TCardPadding = specs.props.padding.default as TCardPadding
+  @property({ type: String }) skin: TCardSkin = specs.props.skin.default as TCardSkin
+  @property({ type: String }) subheading: string = ''
+  @property({ type: String }) tagPosition: 'top' | 'bottom' = 'top'
+  @property({ type: Array }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] = []
 
   connectedCallback() {
     super.connectedCallback()
   }
 
+  // Render methods
+
+  // Main render method
+  // prettier-ignore
   render() {
     const classes = {
       'pkt-card': true,
       [`pkt-card--${this.skin}`]: this.skin,
       [`pkt-card--${this.direction}`]: this.direction,
+      [`pkt-card--padding-${this.padding}`]: this.padding,
+      [`pkt-card--border-on-hover`]: this.borderOnHover,
+     
     }
 
+    //
+    const ariaLabelLenke =
+      this.ariaLabel?.trim() || (this.heading ? `${this.heading} lenkekort` : 'lenkekort')
+    const ariaLabelVanlig = this.ariaLabel?.trim() || (this.heading ? this.heading : 'kort')
+
     return html`
-      <div class=${classMap(classes)}>
-        ${this.image.src &&
-        html`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ''} />
-          </div>
-        `}
+      <article
+        class=${classMap(classes)}
+        aria-label=${ifDefined(this.clickCardLink ? ariaLabelLenke : ariaLabelVanlig)}
+      >
+        ${this.renderImage()}
         <div class="pkt-card__wrapper">
-          ${this.tags.length > 0
-            ? html`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-                    (tag) => html`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${ifDefined(tag.skin)}
-                        iconName=${ifDefined(tag.iconName)}
-                      >
-                        ${tag.text}
-                      </pkt-tag>
-                    `,
-                  )}
-                </div>
-              `
-            : nothing}
-          ${this.heading && html`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && html`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot &&
-          html`<div class="pkt-card__content" ${ref(this.defaultSlot)}></div>`}
+          ${this.tagPosition === 'top' ? this.renderTags() : nothing} 
+          ${this.renderHeader()}
+          ${this.renderSlot()} 
+          ${this.tagPosition === 'bottom' ? this.renderTags() : nothing}
+          ${this.renderCreditline()}
+        </div>
+      </article>
+    `
+  }
+
+  // Render methods for different parts of the card
+  renderImage() {
+    const imageClasses = {
+      'pkt-card__image': true,
+      [`pkt-card__image-${this.imageShape}`]: this.imageShape,
+    }
+
+    return html`
+      ${this.image.src &&
+      html`
+        <div class=${classMap(imageClasses)}>
+          <img src=${this.image.src} alt=${this.image.alt || ''} />
         </div>
-      </div>
+      `}
+    `
+  }
+
+  // Do not render heading if link is present, render link heading instead
+  // Combine the rendering for headings into a renderHeader method
+  renderHeading() {
+    return html`
+      ${this.heading && !this.clickCardLink
+        ? html`
+            <pkt-heading
+              class="pkt-card__heading"
+              .level=${this.headinglevel || 3}
+              size="medium"
+              nospacing
+            >
+              ${this.heading}
+            </pkt-heading>
+          `
+        : nothing}
+    `
+  }
+
+  renderLinkHeading() {
+    return html`
+      ${this.clickCardLink
+        ? html`
+            <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>
+          `
+        : nothing}
+    `
+  }
+
+  renderSubheading() {
+    return html`
+      ${this.subheading ? html` <p class="pkt-card__subheading ">${this.subheading}</p> ` : nothing}
+    `
+  }
+
+  // Render header
+
+  // prettier-ignore
+  renderHeader() {
+    const hasHeading = !!this.heading || !!this.subheading
+    return html`
+      ${hasHeading
+        ? html`
+            <header class="pkt-card__header">
+              ${this.renderHeading()} 
+              ${this.renderLinkHeading()} 
+              ${this.renderSubheading()}
+            </header>
+          `
+        : nothing}
+    `
+  }
+
+  renderTags() {
+    const tagClasses = {
+      'pkt-card__tags': true,
+      [`pkt-card__tags-${this.tagPosition}`]: this.tagPosition,
+    }
+    return html`
+      ${this.tags.length > 0
+        ? html`
+            <div
+              class=${classMap(tagClasses)}
+              role="list"
+              aria-label=${this.tags.length > 1 ? 'merkelapper' : 'merkelapp'}
+            >
+              ${this.tags.map(
+                (tag) => html`
+                  <pkt-tag
+                    role="listitem"
+                    textStyle="normal-text"
+                    size="medium"
+                    skin=${ifDefined(tag.skin)}
+                    iconName=${ifDefined(tag.iconName)}
+                  >
+                    ${tag.text}
+                  </pkt-tag>
+                `,
+              )}
+            </div>
+          `
+        : nothing}
+    `
+  }
+
+  renderSlot() {
+    return html`
+      ${this.defaultSlot &&
+      html`<section class="pkt-card__content" ${ref(this.defaultSlot)}></section>`}
+    `
+  }
+
+  renderCreditline() {
+    return html`
+      ${this.author || this.date
+        ? html`
+            <footer class="pkt-card__creditline">
+              ${this.author
+                ? html`<span class="pkt-card__creditline-author">${this.author}</span>`
+                : nothing}
+              ${this.date
+                ? html`<span class="pkt-card__creditline-date">${this.date}</span>`
+                : nothing}
+            </footer>
+          `
+        : nothing}
     `
   }
 }

package/dist/card-Cyww1yKr.js

@@ -1,94 +0,0 @@
-import { e as m } from "./class-map-KyMqi0fa.js";
-import { o as d } from "./if-defined-BErSJCeJ.js";
-import { P as u, E as g, x as i, n as a, a as f } from "./element-DjjF_tEh.js";
-import { P as k } from "./pkt-slot-controller-DtDaD9q_.js";
-import { e as $, n as v } from "./ref-iIffqQAI.js";
-import "./icon-Beoxup8E.js";
-import "./tag-Cu8afZy8.js";
-const y = {
-  skin: {
-    default: "outlined"
-  },
-  direction: {
-    default: "portrait"
-  }
-}, h = {
-  props: y
-};
-var _ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, r = (o, t, n, p) => {
-  for (var s = p > 1 ? void 0 : p ? P(t, n) : t, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (s = (p ? l(t, n, s) : l(s)) || s);
-  return p && s && _(t, n, s), s;
-};
-let e = class extends u {
-  constructor() {
-    super(), this.defaultSlot = $(), this.skin = h.props.skin.default, this.direction = h.props.direction.default, this.image = {
-      src: "",
-      alt: ""
-    }, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new k(this, this.defaultSlot);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  render() {
-    const o = {
-      "pkt-card": !0,
-      [`pkt-card--${this.skin}`]: this.skin,
-      [`pkt-card--${this.direction}`]: this.direction
-    };
-    return i`
-      <div class=${m(o)}>
-        ${this.image.src && i`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt || ""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length > 0 ? i`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(
-      (t) => i`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d(t.skin)}
-                        iconName=${d(t.iconName)}
-                      >
-                        ${t.text}
-                      </pkt-tag>
-                    `
-    )}
-                </div>
-              ` : g}
-          ${this.heading && i`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading && i`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot && i`<div class="pkt-card__content" ${v(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `;
-  }
-};
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "skin", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "direction", 2);
-r([
-  a({ type: Object, reflect: !0 })
-], e.prototype, "image", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "heading", 2);
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "subheading", 2);
-r([
-  a({ type: Array, reflect: !0 })
-], e.prototype, "tags", 2);
-e = r([
-  f("pkt-card")
-], e);
-export {
-  e as P
-};

package/dist/card-DH-3qNgp.cjs

@@ -1,28 +0,0 @@
-"use strict";const h=require("./class-map-DCyaICmy.cjs"),d=require("./if-defined-a3sotaUr.cjs"),t=require("./element-BSypUpzA.cjs"),u=require("./pkt-slot-controller-Da-RgXfS.cjs"),l=require("./ref-BvbyvXRH.cjs");require("./icon-BnKGwYjj.cjs");require("./tag-B9kFYxHg.cjs");const k={skin:{default:"outlined"},direction:{default:"portrait"}},p={props:k};var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(n,i,e,a)=>{for(var r=a>1?void 0:a?f(i,e):i,c=n.length-1,o;c>=0;c--)(o=n[c])&&(r=(a?o(i,e,r):o(r))||r);return a&&r&&g(i,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=p.props.skin.default,this.direction=p.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new u.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const i={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
-      <div class=${h.e(i)}>
-        ${this.image.src&&t.x`
-          <div class="pkt-card__image">
-            <img src=${this.image.src} alt=${this.image.alt||""} />
-          </div>
-        `}
-        <div class="pkt-card__wrapper">
-          ${this.tags.length>0?t.x`
-                <div class="pkt-card__tags">
-                  ${this.tags.map(e=>t.x`
-                      <pkt-tag
-                        textStyle="normal-text"
-                        size="medium"
-                        skin=${d.o(e.skin)}
-                        iconName=${d.o(e.iconName)}
-                      >
-                        ${e.text}
-                      </pkt-tag>
-                    `)}
-                </div>
-              `:t.E}
-          ${this.heading&&t.x`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
-          ${this.subheading&&t.x`<p class="pkt-txt-20-light">${this.subheading}</p>`}
-          ${this.defaultSlot&&t.x`<div class="pkt-card__content" ${l.n(this.defaultSlot)}></div>`}
-        </div>
-      </div>
-    `}};s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"direction",2);s([t.n({type:Object,reflect:!0})],exports.PktCard.prototype,"image",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"heading",2);s([t.n({type:String,reflect:!0})],exports.PktCard.prototype,"subheading",2);s([t.n({type:Array,reflect:!0})],exports.PktCard.prototype,"tags",2);exports.PktCard=s([t.t("pkt-card")],exports.PktCard);