@oslokommune/punkt-elements 12.3.2 → 12.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/pkt-link.cjs +8 -3
- package/dist/pkt-link.js +49 -30
- package/package.json +2 -2
- package/src/components/link/index.ts +8 -2
package/dist/index.d.ts
CHANGED
package/dist/pkt-link.cjs
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CkBUiPHx.cjs"),c=require("./ref-BkUqMgQu.cjs"),k=require("./class-map-DfznHRRW.cjs"),h=require("./directive-19_ixLKS.cjs");require("./index-BCVyjeWS.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},p={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=c.ii(),this.href=p.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=p.props.external.default,this.target=p.props.target.default,this.slotController=new c.PktSlotController(this,this.defaultSlot)}render(){const n={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return e.ke`<a
|
|
2
|
+
class=${k.Rt(n)}
|
|
3
|
+
href=${this.href}
|
|
4
|
+
@click=${this.handleClick}
|
|
5
|
+
.target=${this.target}
|
|
6
|
+
.rel=${this.external?"noopener noreferrer":e.D}
|
|
7
|
+
>${this.iconName?e.ke`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${c.Kt(this.defaultSlot)}>Link</span></a
|
|
8
|
+
>`}handleClick(){this.dispatchEvent(new CustomEvent("click",{detail:"pkt-link-clicked",bubbles:!0}))}};i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);i([e.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);i([e.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=i([h.t("pkt-link")],exports.PktLink);
|
package/dist/pkt-link.js
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
|
-
import { P as
|
|
2
|
-
import { i as
|
|
3
|
-
import { R as
|
|
4
|
-
import { t as
|
|
1
|
+
import { P as f, k, D as h, n as i } from "./index-CINnuWkG.js";
|
|
2
|
+
import { i as m, P as d, K as u } from "./ref-Cau3ksvI.js";
|
|
3
|
+
import { R as P } from "./class-map-CEzmgstO.js";
|
|
4
|
+
import { t as y } from "./directive-DA0-wdk7.js";
|
|
5
5
|
import "./index-C7OaW8f8.js";
|
|
6
|
-
const
|
|
6
|
+
const g = "pkt-link", v = !0, _ = {
|
|
7
7
|
href: {
|
|
8
8
|
name: "URL",
|
|
9
9
|
description: "URL til lenken",
|
|
10
10
|
type: "string",
|
|
11
11
|
default: "#"
|
|
12
12
|
},
|
|
13
|
+
target: {
|
|
14
|
+
name: "Mål",
|
|
15
|
+
description: "Mål for lenken",
|
|
16
|
+
type: [
|
|
17
|
+
"_blank",
|
|
18
|
+
"_self",
|
|
19
|
+
"_parent",
|
|
20
|
+
"_top"
|
|
21
|
+
],
|
|
22
|
+
default: "_self"
|
|
23
|
+
},
|
|
13
24
|
iconName: {
|
|
14
25
|
name: "Ikon",
|
|
15
26
|
description: "Ikon som skal vises ved siden av lenketeksten",
|
|
@@ -29,36 +40,41 @@ const v = "pkt-link", y = !0, x = {
|
|
|
29
40
|
type: "boolean",
|
|
30
41
|
default: !1
|
|
31
42
|
}
|
|
32
|
-
},
|
|
43
|
+
}, x = {
|
|
33
44
|
default: {
|
|
34
45
|
description: "Innholdet i lenken"
|
|
35
46
|
}
|
|
36
|
-
},
|
|
37
|
-
name:
|
|
47
|
+
}, c = {
|
|
48
|
+
name: g,
|
|
38
49
|
"css-class": "pkt-link",
|
|
39
50
|
"dark-mode": !0,
|
|
40
|
-
isElement:
|
|
41
|
-
props:
|
|
42
|
-
slots:
|
|
51
|
+
isElement: v,
|
|
52
|
+
props: _,
|
|
53
|
+
slots: x
|
|
43
54
|
};
|
|
44
|
-
var
|
|
45
|
-
for (var t =
|
|
46
|
-
(
|
|
47
|
-
return
|
|
55
|
+
var N = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, s, l, r) => {
|
|
56
|
+
for (var t = r > 1 ? void 0 : r ? S(s, l) : s, a = o.length - 1, p; a >= 0; a--)
|
|
57
|
+
(p = o[a]) && (t = (r ? p(s, l, t) : p(t)) || t);
|
|
58
|
+
return r && t && N(s, l, t), t;
|
|
48
59
|
};
|
|
49
|
-
let e = class extends
|
|
60
|
+
let e = class extends f {
|
|
50
61
|
constructor() {
|
|
51
|
-
super(), this.defaultSlot =
|
|
62
|
+
super(), this.defaultSlot = m(), this.href = c.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = c.props.external.default, this.target = c.props.target.default, this.slotController = new d(this, this.defaultSlot);
|
|
52
63
|
}
|
|
53
64
|
render() {
|
|
54
|
-
const
|
|
65
|
+
const o = {
|
|
55
66
|
"pkt-link": !0,
|
|
56
67
|
"pkt-link--icon-left": !!this.iconName && this.iconPosition === "left" || !!(this.iconName && !this.iconPosition),
|
|
57
68
|
"pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
|
|
58
69
|
"pkt-link--external": this.external
|
|
59
70
|
};
|
|
60
|
-
return
|
|
61
|
-
|
|
71
|
+
return k`<a
|
|
72
|
+
class=${P(o)}
|
|
73
|
+
href=${this.href}
|
|
74
|
+
@click=${this.handleClick}
|
|
75
|
+
.target=${this.target}
|
|
76
|
+
.rel=${this.external ? "noopener noreferrer" : h}
|
|
77
|
+
>${this.iconName ? k`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${u(this.defaultSlot)}>Link</span></a
|
|
62
78
|
>`;
|
|
63
79
|
}
|
|
64
80
|
handleClick() {
|
|
@@ -70,20 +86,23 @@ let e = class extends h {
|
|
|
70
86
|
);
|
|
71
87
|
}
|
|
72
88
|
};
|
|
73
|
-
|
|
74
|
-
|
|
89
|
+
n([
|
|
90
|
+
i({ type: String, reflect: !0 })
|
|
75
91
|
], e.prototype, "href", 2);
|
|
76
|
-
|
|
77
|
-
|
|
92
|
+
n([
|
|
93
|
+
i({ type: String, reflect: !0 })
|
|
78
94
|
], e.prototype, "iconName", 2);
|
|
79
|
-
|
|
80
|
-
|
|
95
|
+
n([
|
|
96
|
+
i({ type: String, reflect: !0 })
|
|
81
97
|
], e.prototype, "iconPosition", 2);
|
|
82
|
-
|
|
83
|
-
|
|
98
|
+
n([
|
|
99
|
+
i({ type: Boolean, reflect: !0 })
|
|
84
100
|
], e.prototype, "external", 2);
|
|
85
|
-
|
|
86
|
-
|
|
101
|
+
n([
|
|
102
|
+
i({ type: String, reflect: !0 })
|
|
103
|
+
], e.prototype, "target", 2);
|
|
104
|
+
e = n([
|
|
105
|
+
y("pkt-link")
|
|
87
106
|
], e);
|
|
88
107
|
export {
|
|
89
108
|
e as PktLink
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.3.
|
|
3
|
+
"version": "12.3.3",
|
|
4
4
|
"description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "372dba9714e52bbd9a13eb02ea39ec2aa231ee66"
|
|
59
59
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PktElement } from '../element'
|
|
2
2
|
import { PktSlotController } from '../../controllers/pkt-slot-controller'
|
|
3
3
|
import { ref, Ref, createRef } from 'lit/directives/ref.js'
|
|
4
|
-
import { html } from 'lit'
|
|
4
|
+
import { html, nothing } from 'lit'
|
|
5
5
|
import { classMap } from 'lit/directives/class-map.js'
|
|
6
6
|
import { customElement, property } from 'lit/decorators.js'
|
|
7
7
|
import specs from 'componentSpecs/link.json'
|
|
@@ -23,6 +23,7 @@ export class PktLink extends PktElement {
|
|
|
23
23
|
@property({ type: String, reflect: true }) iconName: string | undefined = undefined
|
|
24
24
|
@property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
|
|
25
25
|
@property({ type: Boolean, reflect: true }) external: boolean = specs.props.external.default
|
|
26
|
+
@property({ type: String, reflect: true }) target: string | null = specs.props.target.default
|
|
26
27
|
|
|
27
28
|
render() {
|
|
28
29
|
const classes = {
|
|
@@ -33,7 +34,12 @@ export class PktLink extends PktElement {
|
|
|
33
34
|
'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
|
|
34
35
|
'pkt-link--external': this.external,
|
|
35
36
|
}
|
|
36
|
-
return html`<a
|
|
37
|
+
return html`<a
|
|
38
|
+
class=${classMap(classes)}
|
|
39
|
+
href=${this.href}
|
|
40
|
+
@click=${this.handleClick}
|
|
41
|
+
.target=${this.target}
|
|
42
|
+
.rel=${this.external ? 'noopener noreferrer' : nothing}
|
|
37
43
|
>${this.iconName
|
|
38
44
|
? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
|
|
39
45
|
: ''} <span ${ref(this.defaultSlot)}>Link</span></a
|