@oslokommune/punkt-elements 12.29.6 → 12.29.8
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/{card-Db2Ex1cH.js → card-CGMZxbH_.js} +1 -1
- package/dist/{card-Bxe-jQD_.cjs → card-D6VEEvX3.cjs} +1 -1
- package/dist/{datepicker-gZ_eVIyS.js → datepicker-LKIwV9DD.js} +1 -1
- package/dist/{datepicker-D6ifQ2so.cjs → datepicker-NbLoqIKZ.cjs} +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-index.cjs +5 -5
- package/dist/pkt-index.js +35 -34
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -1
- package/dist/{tag-BMyii4Da.cjs → tag-B3KEILId.cjs} +3 -3
- package/dist/{tag-DVk69673.js → tag-BFqxindw.js} +6 -6
- package/package.json +3 -3
- package/src/components/index.ts +2 -2
- package/src/components/tag/tag.ts +3 -3
|
@@ -4,7 +4,7 @@ import { P as m, x as r, E as k, n as a, a as u } from "./element-D_ZgQsSr.js";
|
|
|
4
4
|
import { P as y } from "./pkt-slot-controller-Clbye6cM.js";
|
|
5
5
|
import { e as f, n as b } from "./ref-BSGI8ogR.js";
|
|
6
6
|
import "./icon-BBFK-d-X.js";
|
|
7
|
-
import "./tag-
|
|
7
|
+
import "./tag-BFqxindw.js";
|
|
8
8
|
const $ = "pkt-card", v = !0, _ = {
|
|
9
9
|
heading: {
|
|
10
10
|
type: "string",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const g=require("./class-map-Dzci3Pfe.cjs"),d=require("./if-defined-CWHk9Kqm.cjs"),t=require("./element-r-PeQ419.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),l=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");require("./tag-
|
|
1
|
+
"use strict";const g=require("./class-map-Dzci3Pfe.cjs"),d=require("./if-defined-CWHk9Kqm.cjs"),t=require("./element-r-PeQ419.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),l=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");require("./tag-B3KEILId.cjs");const u="pkt-card",h=!0,m={heading:{type:"string",name:"Heading",description:"Tittel på kortet"},subheading:{type:"string",name:"Subheading",description:"Undertittel på kortet"},skin:{type:["outlined","gray","blue","beige","green"],name:"Skin",description:"Farge på kortet",default:"outlined"},direction:{type:["landscape","portrait"],name:"Direction",description:"Retningen innholdet skal ligge i forhold til kortet",default:"portrait"},tags:{type:"array",description:"Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",name:"Tags",items:{type:"object",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}}}},image:{type:"object",name:"Bilde",description:"Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",properties:{src:{type:"string",description:"Bilde på kortet",required:!0},alt:{type:"string",description:"Tekst for aria-label",required:!0}}}},y={default:{description:"Innholdet i kortet"}},c={name:u,"css-class":"pkt-card",isElement:h,props:m,slots:y};var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,s,e,n)=>{for(var r=n>1?void 0:n?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(n?p(s,e,r):p(r))||r);return n&&r&&f(s,e,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=l.e(),this.skin=c.props.skin.default,this.direction=c.props.direction.default,this.image={src:"",alt:""},this.heading="",this.subheading="",this.tags=[],this.slotController=new k.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){const s={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.direction}`]:this.direction};return t.x`
|
|
2
2
|
<div class=${g.e(s)}>
|
|
3
3
|
${this.image.src&&t.x`
|
|
4
4
|
<div class="pkt-card__image">
|
|
@@ -7,7 +7,7 @@ import { P as U } from "./input-element-B6BTwL1q.js";
|
|
|
7
7
|
import { p as K, v as $, r as R, M as I, m as W, e as w, n as y } from "./ref-BSGI8ogR.js";
|
|
8
8
|
import "./icon-BBFK-d-X.js";
|
|
9
9
|
import "./input-wrapper-D-pEAZaj.js";
|
|
10
|
-
import "./tag-
|
|
10
|
+
import "./tag-BFqxindw.js";
|
|
11
11
|
import { P as z } from "./pkt-slot-controller-Clbye6cM.js";
|
|
12
12
|
/**
|
|
13
13
|
* @license
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const $=require("./class-map-Dzci3Pfe.cjs"),k=require("./if-defined-CWHk9Kqm.cjs"),a=require("./element-r-PeQ419.cjs"),T=require("./state-B77EXPZ9.cjs"),g=require("./calendar-DUkAC9Hx.cjs"),S=require("./input-element-KOSm5htR.cjs"),r=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");require("./input-wrapper-Dqj4uers.cjs");require("./tag-
|
|
1
|
+
"use strict";const $=require("./class-map-Dzci3Pfe.cjs"),k=require("./if-defined-CWHk9Kqm.cjs"),a=require("./element-r-PeQ419.cjs"),T=require("./state-B77EXPZ9.cjs"),g=require("./calendar-DUkAC9Hx.cjs"),S=require("./input-element-KOSm5htR.cjs"),r=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");require("./input-wrapper-Dqj4uers.cjs");require("./tag-B3KEILId.cjs");const P=require("./pkt-slot-controller-Oc32unDk.cjs");/**
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright 2017 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
package/dist/index.d.ts
CHANGED
|
@@ -633,7 +633,7 @@ export declare class PktProgressbar extends PktElement implements IPktProgressba
|
|
|
633
633
|
private _handleAttribute;
|
|
634
634
|
}
|
|
635
635
|
|
|
636
|
-
|
|
636
|
+
declare class PktRadioButton extends PktInputElement {
|
|
637
637
|
private inputRef;
|
|
638
638
|
value: string;
|
|
639
639
|
checkHelptext: string | null;
|
|
@@ -648,6 +648,8 @@ export declare class PktRadioButton extends PktInputElement {
|
|
|
648
648
|
render(): TemplateResult<1>;
|
|
649
649
|
private toggleChecked;
|
|
650
650
|
}
|
|
651
|
+
export { PktRadioButton }
|
|
652
|
+
export { PktRadioButton as PktRadiobutton }
|
|
651
653
|
|
|
652
654
|
/**
|
|
653
655
|
* Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
|
|
@@ -701,7 +703,7 @@ export declare class PktTag extends PktElement {
|
|
|
701
703
|
closeTag: boolean;
|
|
702
704
|
size: TPktSize;
|
|
703
705
|
skin: TTagSkin;
|
|
704
|
-
textStyle: string;
|
|
706
|
+
textStyle: string | null;
|
|
705
707
|
iconName: string | undefined;
|
|
706
708
|
type: TTagType;
|
|
707
709
|
ariaLabel: string;
|
package/dist/pkt-card.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-D6VEEvX3.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
|
package/dist/pkt-card.js
CHANGED
package/dist/pkt-datepicker.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-NbLoqIKZ.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
|
package/dist/pkt-datepicker.js
CHANGED
package/dist/pkt-index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
<div class="${
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./alert-CP5oN7df.cjs"),P=require("./button-DPb5WL9h.cjs"),c=require("./calendar-DUkAC9Hx.cjs"),k=require("./card-D6VEEvX3.cjs"),b=require("./checkbox-CDMUepTW.cjs"),t=require("./element-r-PeQ419.cjs"),m=require("./pkt-slot-controller-Oc32unDk.cjs"),s=require("./ref-BUWgvhgU.cjs"),g=require("./class-map-Dzci3Pfe.cjs"),h=require("./datepicker-NbLoqIKZ.cjs"),f=require("./helptext-C0mrdhRi.cjs"),y=require("./icon-DcJIqTIY.cjs"),O=require("./input-wrapper-Dqj4uers.cjs"),j=require("./link-C_bwx1Ml.cjs"),x=require("./linkcard-C6mZOE0R.cjs"),q=require("./loader-DQV1hMM3.cjs"),C=require("./messagebox-BSyLVNas.cjs"),v=require("./modal-CblCiNUi.cjs"),S=require("./progressbar-C_q48_qh.cjs"),p=require("./radiobutton-3e105CXX.cjs"),$=require("./tag-B3KEILId.cjs"),_=require("./textarea-BKCVcJ6E.cjs"),L=require("./textinput-BRupcl9v.cjs"),T=require("./select-DJu4Wr1y.cjs");var B=Object.defineProperty,M=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?M(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(i?u(e,r,n):u(n))||n);return i&&n&&B(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 m.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`
|
|
2
|
+
<div class="${g.e(e)}">
|
|
3
3
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
4
4
|
|
|
5
5
|
<h2 class="pkt-txt-22">Innhold fra attributter og funksjoner</h2>
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
<div>${this.renderList(this.doStuff(this._list))}</div>
|
|
8
8
|
|
|
9
9
|
<h2 class="pkt-txt-22">Slot</h2>
|
|
10
|
-
<div ${
|
|
10
|
+
<div ${s.n(this.defaultSlot)}>defaultSlotRef</div>
|
|
11
11
|
<h2 class="pkt-txt-22">Named slot</h2>
|
|
12
12
|
<select
|
|
13
13
|
name="named-slot"
|
|
14
|
-
${
|
|
14
|
+
${s.n(this.namedSlot)}
|
|
15
15
|
@change=${r=>alert(r.target.value)}
|
|
16
16
|
>
|
|
17
17
|
namedSlotRef
|
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
<ul>
|
|
27
27
|
${e.map(r=>t.x`<li>${r}</li>`)}
|
|
28
28
|
</ul>
|
|
29
|
-
`}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>
|
|
29
|
+
`}doStuff(e){return e.reverse()}handleGreeting(){this.dispatchEvent(new CustomEvent("pkt-greeting",{detail:"Hei på deg!"}))}};o([t.n({type:String})],exports.PktComponent.prototype,"string",2);o([t.n({converter:c.csvToArray})],exports.PktComponent.prototype,"strings",2);o([t.n({type:Boolean})],exports.PktComponent.prototype,"darkmode",2);o([t.n({type:Array})],exports.PktComponent.prototype,"_list",2);exports.PktComponent=o([t.t("pkt-component")],exports.PktComponent);Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>d.PktAlert});Object.defineProperty(exports,"PktButton",{enumerable:!0,get:()=>P.PktButton});Object.defineProperty(exports,"PktCalendar",{enumerable:!0,get:()=>c.PktCalendar});Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>k.PktCard});Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>b.PktCheckbox});Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>h.PktDatepicker});Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>f.PktHelptext});Object.defineProperty(exports,"PktIcon",{enumerable:!0,get:()=>y.PktIcon});Object.defineProperty(exports,"PktInputWrapper",{enumerable:!0,get:()=>O.PktInputWrapper});Object.defineProperty(exports,"PktLink",{enumerable:!0,get:()=>j.PktLink});Object.defineProperty(exports,"PktLinkCard",{enumerable:!0,get:()=>x.PktLinkCard});Object.defineProperty(exports,"PktLoader",{enumerable:!0,get:()=>q.PktLoader});Object.defineProperty(exports,"PktMessagebox",{enumerable:!0,get:()=>C.PktMessagebox});Object.defineProperty(exports,"PktModal",{enumerable:!0,get:()=>v.PktModal});Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>S.PktProgressbar});Object.defineProperty(exports,"PktRadioButton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktRadiobutton",{enumerable:!0,get:()=>p.PktRadioButton});Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>$.PktTag});Object.defineProperty(exports,"PktTextarea",{enumerable:!0,get:()=>_.PktTextarea});Object.defineProperty(exports,"PktTextinput",{enumerable:!0,get:()=>L.PktTextinput});Object.defineProperty(exports,"PktSelect",{enumerable:!0,get:()=>T.PktSelect});
|
package/dist/pkt-index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { P as w } from "./alert-CugVni4g.js";
|
|
2
2
|
import { P as O } from "./button-BnmFhao8.js";
|
|
3
3
|
import { c as d } from "./calendar-DevhqUoj.js";
|
|
4
|
-
import { P as
|
|
5
|
-
import { P as
|
|
6
|
-
import { P as
|
|
7
|
-
import { P as f, x as
|
|
4
|
+
import { P as T } from "./calendar-DevhqUoj.js";
|
|
5
|
+
import { P as A } from "./card-CGMZxbH_.js";
|
|
6
|
+
import { P as D } from "./checkbox-Dw2CX5zY.js";
|
|
7
|
+
import { P as f, x as P, t as k, n, a as c } from "./element-D_ZgQsSr.js";
|
|
8
8
|
import { P as x } from "./pkt-slot-controller-Clbye6cM.js";
|
|
9
|
-
import { e as
|
|
9
|
+
import { e as m, n as h } from "./ref-BSGI8ogR.js";
|
|
10
10
|
import { e as u } from "./class-map-BYCG9U47.js";
|
|
11
|
-
import { P as G } from "./datepicker-
|
|
11
|
+
import { P as G } from "./datepicker-LKIwV9DD.js";
|
|
12
12
|
import { P as M } from "./helptext-RPq_TKzJ.js";
|
|
13
13
|
import { P as N } from "./icon-BBFK-d-X.js";
|
|
14
14
|
import { P as W } from "./input-wrapper-D-pEAZaj.js";
|
|
@@ -18,19 +18,19 @@ import { P as V } from "./loader-ChVEsONa.js";
|
|
|
18
18
|
import { P as Y } from "./messagebox-Di7LUz4C.js";
|
|
19
19
|
import { P as tt } from "./modal-DZUQb_yG.js";
|
|
20
20
|
import { P as rt } from "./progressbar-CuZj4FWi.js";
|
|
21
|
-
import { P as
|
|
22
|
-
import { P as
|
|
23
|
-
import { P as
|
|
21
|
+
import { P as st, P as at } from "./radiobutton-CcZ2-z8q.js";
|
|
22
|
+
import { P as it } from "./tag-BFqxindw.js";
|
|
23
|
+
import { P as lt } from "./textarea-uzzCtHtj.js";
|
|
24
24
|
import { P as mt } from "./textinput-DRkv93vp.js";
|
|
25
|
-
import { P as
|
|
26
|
-
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor,
|
|
25
|
+
import { P as dt } from "./select-CnizDIYN.js";
|
|
26
|
+
var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, e, i, a) => {
|
|
27
27
|
for (var r = a > 1 ? void 0 : a ? v(e, i) : e, p = t.length - 1, l; p >= 0; p--)
|
|
28
28
|
(l = t[p]) && (r = (a ? l(e, i, r) : l(r)) || r);
|
|
29
29
|
return a && r && g(e, i, r), r;
|
|
30
30
|
};
|
|
31
|
-
let
|
|
31
|
+
let o = class extends f {
|
|
32
32
|
constructor() {
|
|
33
|
-
super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot =
|
|
33
|
+
super(), this.string = "", this.strings = [], this.darkmode = !1, this._list = [], this.defaultSlot = m(), this.namedSlot = m(), this.slotController = new x(this, this.defaultSlot, this.namedSlot);
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
36
|
* Runs on mount, used to set up various values and whatever you need to run
|
|
@@ -49,7 +49,7 @@ let s = class extends f {
|
|
|
49
49
|
"pkt-component--has-list": this.strings.length > 0,
|
|
50
50
|
"pkt-darkmode": this.darkmode
|
|
51
51
|
};
|
|
52
|
-
return
|
|
52
|
+
return P`
|
|
53
53
|
<div class="${u(t)}">
|
|
54
54
|
<h1 class="pkt-txt-28">${this.string}</h1>
|
|
55
55
|
|
|
@@ -76,9 +76,9 @@ let s = class extends f {
|
|
|
76
76
|
`;
|
|
77
77
|
}
|
|
78
78
|
renderList(t) {
|
|
79
|
-
return
|
|
79
|
+
return P`
|
|
80
80
|
<ul>
|
|
81
|
-
${t.map((e) =>
|
|
81
|
+
${t.map((e) => P`<li>${e}</li>`)}
|
|
82
82
|
</ul>
|
|
83
83
|
`;
|
|
84
84
|
}
|
|
@@ -99,28 +99,28 @@ let s = class extends f {
|
|
|
99
99
|
);
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
|
-
|
|
102
|
+
s([
|
|
103
103
|
n({ type: String })
|
|
104
|
-
],
|
|
105
|
-
|
|
104
|
+
], o.prototype, "string", 2);
|
|
105
|
+
s([
|
|
106
106
|
n({ converter: d })
|
|
107
|
-
],
|
|
108
|
-
|
|
107
|
+
], o.prototype, "strings", 2);
|
|
108
|
+
s([
|
|
109
109
|
n({ type: Boolean })
|
|
110
|
-
],
|
|
111
|
-
|
|
110
|
+
], o.prototype, "darkmode", 2);
|
|
111
|
+
s([
|
|
112
112
|
n({ type: Array })
|
|
113
|
-
],
|
|
114
|
-
|
|
113
|
+
], o.prototype, "_list", 2);
|
|
114
|
+
o = s([
|
|
115
115
|
c("pkt-component")
|
|
116
|
-
],
|
|
116
|
+
], o);
|
|
117
117
|
export {
|
|
118
118
|
w as PktAlert,
|
|
119
119
|
O as PktButton,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
T as PktCalendar,
|
|
121
|
+
A as PktCard,
|
|
122
|
+
D as PktCheckbox,
|
|
123
|
+
o as PktComponent,
|
|
124
124
|
G as PktDatepicker,
|
|
125
125
|
M as PktHelptext,
|
|
126
126
|
N as PktIcon,
|
|
@@ -131,9 +131,10 @@ export {
|
|
|
131
131
|
Y as PktMessagebox,
|
|
132
132
|
tt as PktModal,
|
|
133
133
|
rt as PktProgressbar,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
st as PktRadioButton,
|
|
135
|
+
at as PktRadiobutton,
|
|
136
|
+
dt as PktSelect,
|
|
137
|
+
it as PktTag,
|
|
138
|
+
lt as PktTextarea,
|
|
138
139
|
mt as PktTextinput
|
|
139
140
|
};
|
package/dist/pkt-tag.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tag-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tag-B3KEILId.cjs"),t=e.PktTag;Object.defineProperty(exports,"PktTag",{enumerable:!0,get:()=>e.PktTag});exports.default=t;
|
package/dist/pkt-tag.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";const u=require("./class-map-Dzci3Pfe.cjs"),t=require("./element-r-PeQ419.cjs"),h=require("./state-B77EXPZ9.cjs"),g=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");const k="pkt-tag",d=!0,f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"icon",required:!1},skin:{required:!1,default:"blue",type:["blue","blue-light","blue-dark","green","red","beige","yellow","gray"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"Lukk"}},y={default:{description:"Teksten til tag"}},
|
|
1
|
+
"use strict";const u=require("./class-map-Dzci3Pfe.cjs"),t=require("./element-r-PeQ419.cjs"),h=require("./state-B77EXPZ9.cjs"),g=require("./pkt-slot-controller-Oc32unDk.cjs"),c=require("./ref-BUWgvhgU.cjs");require("./icon-DcJIqTIY.cjs");const k="pkt-tag",d=!0,f={closeTag:{type:"boolean",required:!1,default:!1},size:{required:!1,default:"medium",type:["small","medium","large"]},iconName:{type:"icon",required:!1},skin:{required:!1,default:"blue",type:["blue","blue-light","blue-dark","green","red","beige","yellow","gray"]},textStyle:{required:!1,default:"normal-text",type:["thin-text","normal-text"]},type:{required:!1,default:"button",type:["button","submit","reset"]},ariaLabel:{type:"string",required:!1,default:"Lukk"}},y={default:{description:"Teksten til tag"}},l={name:k,"css-class":"pkt-tag",isElement:d,props:f,slots:y};var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(o,e,a,r)=>{for(var i=r>1?void 0:r?m(e,a):e,n=o.length-1,p;n>=0;n--)(p=o[n])&&(i=(r?p(e,a,i):p(i))||i);return r&&i&&b(e,a,i),i};exports.PktTag=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.closeTag=l.props.closeTag.default,this.size=l.props.size.default,this.skin=l.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=l.props.type.default,this.ariaLabel=l.props.ariaLabel.default,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:e},bubbles:!0,composed:!0}))},this.slotController=new g.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const e={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,"pkt-btn":!0,"pkt-btn--tertiary":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,"pkt-btn--icons-right-and-left":this.closeTag&&!!this.iconName,"pkt-hide":this._isClosed};return this.closeTag?t.x`
|
|
2
2
|
<button
|
|
3
|
-
class=${u.e(
|
|
3
|
+
class=${u.e(a)}
|
|
4
4
|
type=${this.type}
|
|
5
5
|
aria-label=${this.ariaLabel}
|
|
6
6
|
@click=${this.close}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</button>
|
|
12
12
|
`:t.x`
|
|
13
13
|
<span class=${u.e(e)}>
|
|
14
|
-
${this.iconName&&t.x
|
|
14
|
+
${this.iconName&&t.x`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
|
|
15
15
|
<span ${c.n(this.defaultSlot)}></span>
|
|
16
16
|
</span>
|
|
17
17
|
`}};s([t.n({type:Boolean,reflect:!0})],exports.PktTag.prototype,"closeTag",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"size",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"skin",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"textStyle",2);s([t.n({type:String,reflect:!0})],exports.PktTag.prototype,"iconName",2);s([t.n({type:String})],exports.PktTag.prototype,"type",2);s([t.n({type:String})],exports.PktTag.prototype,"ariaLabel",2);s([h.r()],exports.PktTag.prototype,"_isClosed",2);exports.PktTag=s([t.t("pkt-tag")],exports.PktTag);
|
|
@@ -4,7 +4,7 @@ import { r as y } from "./state-DuS4ffEQ.js";
|
|
|
4
4
|
import { P as g } from "./pkt-slot-controller-Clbye6cM.js";
|
|
5
5
|
import { e as k, n as f } from "./ref-BSGI8ogR.js";
|
|
6
6
|
import "./icon-BBFK-d-X.js";
|
|
7
|
-
const b = "pkt-tag",
|
|
7
|
+
const b = "pkt-tag", $ = !0, S = {
|
|
8
8
|
closeTag: {
|
|
9
9
|
type: "boolean",
|
|
10
10
|
required: !1,
|
|
@@ -66,8 +66,8 @@ const b = "pkt-tag", S = !0, $ = {
|
|
|
66
66
|
}, l = {
|
|
67
67
|
name: b,
|
|
68
68
|
"css-class": "pkt-tag",
|
|
69
|
-
isElement:
|
|
70
|
-
props:
|
|
69
|
+
isElement: $,
|
|
70
|
+
props: S,
|
|
71
71
|
slots: _
|
|
72
72
|
};
|
|
73
73
|
var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n, r) => {
|
|
@@ -77,7 +77,7 @@ var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (s, o, n
|
|
|
77
77
|
};
|
|
78
78
|
let t = class extends d {
|
|
79
79
|
constructor() {
|
|
80
|
-
super(), this.defaultSlot = k(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle =
|
|
80
|
+
super(), this.defaultSlot = k(), this.closeTag = l.props.closeTag.default, this.size = l.props.size.default, this.skin = l.props.skin.default, this.textStyle = null, this.iconName = void 0, this.type = l.props.type.default, this.ariaLabel = l.props.ariaLabel.default, this._isClosed = !1, this.close = (s) => {
|
|
81
81
|
this._isClosed = !0, this.dispatchEvent(
|
|
82
82
|
new CustomEvent("close", { detail: { origin: s }, bubbles: !0, composed: !0 })
|
|
83
83
|
), this.dispatchEvent(
|
|
@@ -95,9 +95,9 @@ let t = class extends d {
|
|
|
95
95
|
"pkt-tag": !0,
|
|
96
96
|
"pkt-btn": !0,
|
|
97
97
|
"pkt-btn--tertiary": !0,
|
|
98
|
+
[`pkt-tag--${this.textStyle}`]: !!this.textStyle,
|
|
98
99
|
[`pkt-tag--${this.size}`]: !!this.size,
|
|
99
100
|
[`pkt-tag--${this.skin}`]: !!this.skin,
|
|
100
|
-
[`pkt-tag--${this.textStyle}`]: !!this.textStyle,
|
|
101
101
|
"pkt-btn--icons-right-and-left": this.closeTag && !!this.iconName,
|
|
102
102
|
"pkt-hide": this._isClosed
|
|
103
103
|
};
|
|
@@ -114,7 +114,7 @@ let t = class extends d {
|
|
|
114
114
|
</button>
|
|
115
115
|
` : p`
|
|
116
116
|
<span class=${h(s)}>
|
|
117
|
-
${this.iconName && p
|
|
117
|
+
${this.iconName && p`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
|
|
118
118
|
<span ${f(this.defaultSlot)}></span>
|
|
119
119
|
</span>
|
|
120
120
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-elements",
|
|
3
|
-
"version": "12.29.
|
|
3
|
+
"version": "12.29.8",
|
|
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",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@oslokommune/punkt-assets": "^12.27.1",
|
|
33
|
-
"@oslokommune/punkt-css": "^12.29.
|
|
33
|
+
"@oslokommune/punkt-css": "^12.29.8",
|
|
34
34
|
"sass": "^1.78.0",
|
|
35
35
|
"typescript": "^5.6.2",
|
|
36
36
|
"vite": "^5.4.4",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
58
58
|
},
|
|
59
59
|
"license": "MIT",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "d6ef6c1fbcc6b2e6b30847642656af35e75287de"
|
|
61
61
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -16,6 +16,8 @@ export { PktMessagebox } from '@/components/messagebox'
|
|
|
16
16
|
export { PktModal } from '@/components/modal'
|
|
17
17
|
export { PktProgressbar } from '@/components/progressbar'
|
|
18
18
|
export { PktRadioButton } from '@/components/radiobutton'
|
|
19
|
+
// TODO: Avklar om RadioButton kan eksporteres som *kun* PktRadiobutton
|
|
20
|
+
export { PktRadioButton as PktRadiobutton } from '@/components/radiobutton'
|
|
19
21
|
export { PktTag } from '@/components/tag'
|
|
20
22
|
export { PktTextarea } from '@/components/textarea'
|
|
21
23
|
export { PktTextinput } from '@/components/textinput'
|
|
@@ -23,7 +25,6 @@ export { PktSelect } from '@/components/select'
|
|
|
23
25
|
|
|
24
26
|
// Export component types
|
|
25
27
|
|
|
26
|
-
|
|
27
28
|
export type {
|
|
28
29
|
IPktButton,
|
|
29
30
|
TPktButtonMode,
|
|
@@ -35,7 +36,6 @@ export type {
|
|
|
35
36
|
TPktButtonType,
|
|
36
37
|
} from '@/components/button'
|
|
37
38
|
|
|
38
|
-
|
|
39
39
|
export type {
|
|
40
40
|
IPktProgressbar,
|
|
41
41
|
TProgressbarRole,
|
|
@@ -49,7 +49,7 @@ export class PktTag extends PktElement {
|
|
|
49
49
|
@property({ type: Boolean, reflect: true }) closeTag: boolean = specs.props.closeTag.default
|
|
50
50
|
@property({ type: String, reflect: true }) size: TPktSize = specs.props.size.default as TPktSize
|
|
51
51
|
@property({ type: String, reflect: true }) skin: TTagSkin = specs.props.skin.default as TTagSkin
|
|
52
|
-
@property({ type: String, reflect: true }) textStyle: string =
|
|
52
|
+
@property({ type: String, reflect: true }) textStyle: string | null = null
|
|
53
53
|
@property({ type: String, reflect: true }) iconName: string | undefined = undefined
|
|
54
54
|
@property({ type: String }) type: TTagType = specs.props.type.default as TTagType
|
|
55
55
|
@property({ type: String }) ariaLabel: string = specs.props.ariaLabel.default
|
|
@@ -85,9 +85,9 @@ export class PktTag extends PktElement {
|
|
|
85
85
|
'pkt-tag': true,
|
|
86
86
|
'pkt-btn': true,
|
|
87
87
|
'pkt-btn--tertiary': true,
|
|
88
|
+
[`pkt-tag--${this.textStyle}`]: !!this.textStyle,
|
|
88
89
|
[`pkt-tag--${this.size}`]: !!this.size,
|
|
89
90
|
[`pkt-tag--${this.skin}`]: !!this.skin,
|
|
90
|
-
[`pkt-tag--${this.textStyle}`]: !!this.textStyle,
|
|
91
91
|
'pkt-btn--icons-right-and-left': this.closeTag && !!this.iconName,
|
|
92
92
|
'pkt-hide': this._isClosed,
|
|
93
93
|
}
|
|
@@ -110,7 +110,7 @@ export class PktTag extends PktElement {
|
|
|
110
110
|
return html`
|
|
111
111
|
<span class=${classMap(classes)}>
|
|
112
112
|
${this.iconName &&
|
|
113
|
-
html
|
|
113
|
+
html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
|
|
114
114
|
<span ${ref(this.defaultSlot)}></span>
|
|
115
115
|
</span>
|
|
116
116
|
`
|