@oslokommune/punkt-elements 16.7.3 → 16.7.4

package/dist/button-BIpd1xJh.js

@@ -0,0 +1,95 @@
+import { c as e, d as t, l as n, r, s as i } from "./element-cZ85T_aa.js";
+import { t as a } from "./class-map-C8HuhNzZ.js";
+import { n as o, t as s } from "./element-with-slot-4J2o3SeU.js";
+import "./icon-Co72KtgF.js";
+import { t as c } from "./if-defined-Cjj8qN-Z.js";
+//#region src/components/button/button.ts
+window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/latest/animations/";
+var l = class extends s {
+	constructor(...e) {
+		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = window.pktAnimationPath;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", (e) => {
+			(this.disabled || this.hasAttribute("disabled") || this.isLoading) && (e.preventDefault(), e.stopImmediatePropagation());
+		}, !0), this.addEventListener("keydown", (e) => {
+			(this.disabled || this.hasAttribute("disabled") || this.isLoading) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopImmediatePropagation());
+		}, !0);
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), e === "disabled" && n === "false" && (this.disabled = !1), (e === "isloading" || e === "isLoading") && n === "false" && (this.isLoading = !1);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
+	}
+	render() {
+		let e = this.form ?? this.getAttribute("form") ?? void 0;
+		return t`
+      <button
+        class=${a({
+			"pkt-btn": !0,
+			[`pkt-btn--${this.size}`]: !!this.size,
+			[`pkt-btn--${this.skin}`]: !!this.skin,
+			[`pkt-btn--${this.variant}`]: !!this.variant,
+			[`pkt-btn--${this.color}`]: !!this.color,
+			[`pkt-btn--${this.state}`]: !!this.state,
+			"pkt-btn--full": !!this.fullWidth,
+			"pkt-btn--full-small": !!this.fullWidthOnMobile,
+			"pkt-btn--disabled": !!this.disabled,
+			"pkt-btn--isLoading": !!this.isLoading
+		})}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${c(this.isLoading ? "true" : void 0)}
+        aria-disabled=${c(this.disabled || this.isLoading ? "true" : void 0)}
+        form=${c(e)}
+      >
+        ${this.isLoading ? t`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path=${c(this.loadingAnimationPath)}
+            ></pkt-icon>` : n}
+        ${this.variant === "label-only" ? n : t`<pkt-icon
+              class="pkt-btn__icon pkt-icon"
+              name=${this.iconName}
+              path=${c(this.iconPath)}
+            ></pkt-icon>`}
+        <span class="pkt-btn__text">${o(this)}</span>
+        ${this.variant === "icons-right-and-left" ? t`<pkt-icon
+              class="pkt-btn__icon"
+              name=${this.secondIconName}
+              path=${c(this.secondIconPath)}
+            ></pkt-icon>` : n}
+      </button>
+    `;
+	}
+};
+r([i({ type: String })], l.prototype, "iconName", void 0), r([i({ type: String })], l.prototype, "secondIconName", void 0), r([i({ type: String })], l.prototype, "iconPath", void 0), r([i({ type: String })], l.prototype, "secondIconPath", void 0), r([i({ type: String })], l.prototype, "mode", void 0), r([i({ type: String })], l.prototype, "size", void 0), r([i({
+	type: Boolean,
+	attribute: "full-width"
+})], l.prototype, "fullWidth", void 0), r([i({
+	type: Boolean,
+	attribute: "full-width-on-mobile"
+})], l.prototype, "fullWidthOnMobile", void 0), r([i({ type: String })], l.prototype, "color", void 0), r([i({ type: String })], l.prototype, "skin", void 0), r([i({ type: String })], l.prototype, "variant", void 0), r([i({
+	type: String,
+	reflect: !0
+})], l.prototype, "state", void 0), r([i({
+	type: String,
+	reflect: !0
+})], l.prototype, "type", void 0), r([i({ type: String })], l.prototype, "form", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "isLoading", void 0), r([i({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), r([i({ type: String })], l.prototype, "loadingAnimationPath", void 0);
+try {
+	e("pkt-button")(l);
+} catch {
+	console.warn("Forsøker å definere <pkt-button>, men den er allerede definert");
+}
+//#endregion
+//#region src/components/button/index.ts
+var u = l;
+//#endregion
+export { l as n, u as t };

package/dist/button-D-TOBaJB.cjs

@@ -0,0 +1,27 @@
+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`);window.pktAnimationPath=window.pktAnimationPath||`https://punkt-cdn.oslo.kommune.no/latest/animations/`;var i=class extends n.t{constructor(...e){super(...e),this.iconName=`user`,this.secondIconName=`user`,this.mode=`light`,this.size=`medium`,this.fullWidth=!1,this.fullWidthOnMobile=!1,this.skin=`primary`,this.variant=`label-only`,this.state=`normal`,this.type=`button`,this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.preventDefault(),e.stopImmediatePropagation())},!0),this.addEventListener(`keydown`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopImmediatePropagation())},!0)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`disabled`&&n===`false`&&(this.disabled=!1),(e===`isloading`||e===`isLoading`)&&n===`false`&&(this.isLoading=!1)}firstUpdated(e){super.firstUpdated(e),this.disabled===`false`&&(this.disabled=!1),this.isLoading===`false`&&(this.isLoading=!1)}render(){let i=this.form??this.getAttribute(`form`)??void 0;return e.d`
+      <button
+        class=${t.t({"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--full":!!this.fullWidth,"pkt-btn--full-small":!!this.fullWidthOnMobile,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading})}
+        type=${this.type}
+        ?disabled=${!!this.disabled}
+        aria-busy=${r.t(this.isLoading?`true`:void 0)}
+        aria-disabled=${r.t(this.disabled||this.isLoading?`true`:void 0)}
+        form=${r.t(i)}
+      >
+        ${this.isLoading?e.d`<pkt-icon
+              class="pkt-btn__icon pkt-btn__spinner"
+              name="spinner-blue"
+              path=${r.t(this.loadingAnimationPath)}
+            ></pkt-icon>`:e.l}
+        ${this.variant===`label-only`?e.l:e.d`<pkt-icon
+              class="pkt-btn__icon pkt-icon"
+              name=${this.iconName}
+              path=${r.t(this.iconPath)}
+            ></pkt-icon>`}
+        <span class="pkt-btn__text">${n.n(this)}</span>
+        ${this.variant===`icons-right-and-left`?e.d`<pkt-icon
+              class="pkt-btn__icon"
+              name=${this.secondIconName}
+              path=${r.t(this.secondIconPath)}
+            ></pkt-icon>`:e.l}
+      </button>
+    `}};e.r([e.s({type:String})],i.prototype,`iconName`,void 0),e.r([e.s({type:String})],i.prototype,`secondIconName`,void 0),e.r([e.s({type:String})],i.prototype,`iconPath`,void 0),e.r([e.s({type:String})],i.prototype,`secondIconPath`,void 0),e.r([e.s({type:String})],i.prototype,`mode`,void 0),e.r([e.s({type:String})],i.prototype,`size`,void 0),e.r([e.s({type:Boolean,attribute:`full-width`})],i.prototype,`fullWidth`,void 0),e.r([e.s({type:Boolean,attribute:`full-width-on-mobile`})],i.prototype,`fullWidthOnMobile`,void 0),e.r([e.s({type:String})],i.prototype,`color`,void 0),e.r([e.s({type:String})],i.prototype,`skin`,void 0),e.r([e.s({type:String})],i.prototype,`variant`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`state`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`type`,void 0),e.r([e.s({type:String})],i.prototype,`form`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`isLoading`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),e.r([e.s({type:String})],i.prototype,`loadingAnimationPath`,void 0);try{e.c(`pkt-button`)(i)}catch{console.warn(`Forsøker å definere <pkt-button>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});