@oslokommune/punkt-elements 12.12.3 → 12.13.0

package/dist/index.d.ts

@@ -15,6 +15,15 @@ declare type ICardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
 declare type IDirection = 'portrait' | 'landscape';
 
+declare interface IPktLinkCard {
+    title?: string;
+    href?: string;
+    iconName?: string;
+    external?: boolean;
+    openInNewTab?: boolean;
+    skin?: LinkCardSkin;
+}
+
 declare interface IPktModal {
     headingText?: string;
     removePadding?: boolean;
@@ -33,6 +42,8 @@ declare interface IPktTag {
     ariaLabel?: string;
 }
 
+declare type LinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
+
 declare type MessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
 
 declare type ModalSize = 'small' | 'medium' | 'large';
@@ -382,6 +393,18 @@ export declare class PktLink extends PktElement {
     private handleClick;
 }
 
+export declare class PktLinkCard extends PktElement implements IPktLinkCard {
+    defaultSlot: Ref<HTMLElement>;
+    title: string;
+    href: string;
+    iconName: string;
+    external: boolean;
+    openInNewTab: boolean;
+    skin: LinkCardSkin;
+    constructor();
+    render(): TemplateResult<1>;
+}
+
 export declare class PktMessagebox extends PktElement {
     defaultSlot: Ref<HTMLElement>;
     constructor();

package/dist/linkcard-BQh5exrq.js

@@ -0,0 +1,54 @@
+import { P as f, x as c, n } from "./index-CZvL4lft.js";
+import { t as h } from "./custom-element-CWfU4dcr.js";
+import { e as k, P as m, n as u } from "./ref-_n0LCr-4.js";
+import "./index-CSOOyHCM.js";
+var _ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (l, i, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? d(i, s) : i, a = l.length - 1, p; a >= 0; a--)
+    (p = l[a]) && (e = (o ? p(i, s, e) : p(e)) || e);
+  return o && e && _(i, s, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(), this.defaultSlot = k(), this.title = "", this.href = "#", this.iconName = "", this.external = !1, this.openInNewTab = !1, this.skin = "normal", this.slotController = new m(this, this.defaultSlot);
+  }
+  render() {
+    const l = ["pkt-linkcard", this.skin && `pkt-linkcard--${this.skin}`].filter(Boolean).join(" "), i = ["pkt-linkcard__title", this.external && "pkt-link pkt-link--external"].filter(Boolean).join(" ");
+    return c`
+      <a
+        href=${this.href}
+        class=${l}
+        target=${this.openInNewTab ? "_blank" : "_self"}
+        rel=${this.openInNewTab ?? "noopener noreferrer"}
+      >
+        ${this.iconName && c`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title && c`<div class=${i}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text" ${u(this.defaultSlot)}></div>
+      </a>
+    `;
+  }
+};
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "title", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "iconName", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "external", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "openInNewTab", 2);
+r([
+  n({ type: String, reflect: !0 })
+], t.prototype, "skin", 2);
+t = r([
+  h("pkt-linkcard")
+], t);
+export {
+  t as P
+};

package/dist/linkcard-BgnHfuNJ.cjs

@@ -0,0 +1,13 @@
+"use strict";const t=require("./index-DwUOKvXt.cjs"),p=require("./custom-element-B-TlBwRu.cjs"),k=require("./ref-HubvG-Pk.cjs");require("./index-B3C4fgLP.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
+      <a
+        href=${this.href}
+        class=${n}
+        target=${this.openInNewTab?"_blank":"_self"}
+        rel=${this.openInNewTab??"noopener noreferrer"}
+      >
+        ${this.iconName&&t.x`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title&&t.x`<div class=${i}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text" ${k.n(this.defaultSlot)}></div>
+      </a>
+    `}};r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"title",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"href",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"iconName",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"external",2);r([t.n({type:Boolean,reflect:!0})],exports.PktLinkCard.prototype,"openInNewTab",2);r([t.n({type:String,reflect:!0})],exports.PktLinkCard.prototype,"skin",2);exports.PktLinkCard=r([p.t("pkt-linkcard")],exports.PktLinkCard);

package/dist/linkcard.d.ts

@@ -0,0 +1,8 @@
+export { }
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/pkt-index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-v7tN93-p.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./helptext-C_tkSNm1.cjs"),a=require("./index-B3C4fgLP.cjs"),P=require("./pkt-input-wrapper.cjs"),c=require("./pkt-link.cjs"),i=require("./pkt-messagebox.cjs"),p=require("./modal-BJhFSFW-.cjs"),k=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>u.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>a.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>P.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>c.PktLink});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>i.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>p.PktModal});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>k.PktTag});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./pkt-alert.cjs"),t=require("./index-v7tN93-p.cjs"),r=require("./pkt-card.cjs"),n=require("./pkt-component-template.cjs"),o=require("./pkt-datepicker.cjs"),u=require("./helptext-C_tkSNm1.cjs"),a=require("./index-B3C4fgLP.cjs"),i=require("./pkt-input-wrapper.cjs"),P=require("./pkt-link.cjs"),c=require("./linkcard-BgnHfuNJ.cjs"),k=require("./pkt-messagebox.cjs"),p=require("./modal-BJhFSFW-.cjs"),b=require("./pkt-tag.cjs");Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>t.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>r.PktCard});Object.defineProperty(exports,"PktComponent",{enumerable:!0,get:()=>n.PktComponent});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>o.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>u.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>a.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>i.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>P.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>c.PktLinkCard});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>k.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>p.PktModal});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>b.PktTag});

package/dist/pkt-index.js

@@ -1,26 +1,28 @@
 import { PktAlert as o } from "./pkt-alert.js";
 import { P as p } from "./index-DX_ADdmh.js";
 import { PktCard as k } from "./pkt-card.js";
-import { PktComponent as m } from "./pkt-component-template.js";
+import { PktComponent as a } from "./pkt-component-template.js";
 import { PktDatepicker as f } from "./pkt-datepicker.js";
 import { P as s } from "./helptext-CgkMKrJP.js";
-import { P as d } from "./index-CSOOyHCM.js";
-import { PktInputWrapper as c } from "./pkt-input-wrapper.js";
-import { PktLink as i } from "./pkt-link.js";
-import { PktMessagebox as M } from "./pkt-messagebox.js";
-import { P as u } from "./modal-BfM1Nbwy.js";
-import { PktTag as D } from "./pkt-tag.js";
+import { P as l } from "./index-CSOOyHCM.js";
+import { PktInputWrapper as i } from "./pkt-input-wrapper.js";
+import { PktLink as g } from "./pkt-link.js";
+import { P as L } from "./linkcard-BQh5exrq.js";
+import { PktMessagebox as b } from "./pkt-messagebox.js";
+import { P as A } from "./modal-BfM1Nbwy.js";
+import { PktTag as H } from "./pkt-tag.js";
 export {
   o as PktAlert,
   p as PktCalendar,
   k as PktCard,
-  m as PktComponent,
+  a as PktComponent,
   f as PktDatepicker,
   s as PktHelptext,
-  d as PktIcon,
-  c as PktInputWrapper,
-  i as PktLink,
-  M as PktMessagebox,
-  u as PktModal,
-  D as PktTag
+  l as PktIcon,
+  i as PktInputWrapper,
+  g as PktLink,
+  L as PktLinkCard,
+  b as PktMessagebox,
+  A as PktModal,
+  H as PktTag
 };

package/dist/pkt-linkcard.cjs

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

package/dist/pkt-linkcard.js

@@ -0,0 +1,6 @@
+import { P as a } from "./linkcard-BQh5exrq.js";
+const k = a;
+export {
+  a as PktLinkCard,
+  k as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.12.3",
+  "version": "12.13.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.7.3",
-    "@oslokommune/punkt-css": "^12.12.3",
+    "@oslokommune/punkt-css": "^12.13.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -56,5 +56,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0dc3e24d50fb19d8298f7c6912ce7cb815d78cd0"
+  "gitHead": "fafdb670e002cbf94fd34acc45dd066344695816"
 }

package/src/components/index.ts

@@ -7,6 +7,7 @@ export { PktHelptext } from './helptext'
 export { PktIcon } from './icon'
 export { PktInputWrapper } from './input-wrapper'
 export { PktLink } from './link'
+export { PktLinkCard } from './linkcard'
 export { PktMessagebox } from './messagebox'
 export { PktModal } from './modal'
 export { PktTag } from './tag'

package/src/components/linkcard/index.ts

@@ -0,0 +1,4 @@
+import { PktLinkCard } from './linkcard'
+export { PktLinkCard } from './linkcard'
+export type { IPktLinkCard } from './linkcard'
+export default PktLinkCard

package/src/components/linkcard/linkcard.ts

@@ -0,0 +1,67 @@
+import { html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { PktElement } from '../element'
+import { ref } from 'lit/directives/ref.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+
+import '../icon'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+
+export type LinkCardSkin =
+  | 'normal'
+  | 'blue'
+  | 'beige'
+  | 'green'
+  | 'gray'
+  | 'beige-outline'
+  | 'gray-outline'
+
+export interface IPktLinkCard {
+  title?: string
+  href?: string
+  iconName?: string
+  external?: boolean
+  openInNewTab?: boolean
+  skin?: LinkCardSkin
+}
+
+@customElement('pkt-linkcard')
+export class PktLinkCard extends PktElement implements IPktLinkCard {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  @property({ type: String, reflect: true }) title: string = ''
+  @property({ type: String, reflect: true }) href: string = '#'
+  @property({ type: String, reflect: true }) iconName: string = ''
+  @property({ type: Boolean, reflect: true }) external: boolean = false
+  @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
+  @property({ type: String, reflect: true }) skin: LinkCardSkin = 'normal'
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  render() {
+    const classes = ['pkt-linkcard', this.skin && `pkt-linkcard--${this.skin}`]
+      .filter(Boolean)
+      .join(' ')
+
+    const titleClasses = ['pkt-linkcard__title', this.external && 'pkt-link pkt-link--external']
+      .filter(Boolean)
+      .join(' ')
+
+    return html`
+      <a
+        href=${this.href}
+        class=${classes}
+        target=${this.openInNewTab ? '_blank' : '_self'}
+        rel=${this.openInNewTab ?? 'noopener noreferrer'}
+      >
+        ${this.iconName && html`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
+        ${this.title && html`<div class=${titleClasses}>${this.title}</div>`}
+
+        <div class="pkt-linkcard__text" ${ref(this.defaultSlot)}></div>
+      </a>
+    `
+  }
+}