@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
380 lines (379 loc) • 12.4 kB
JavaScript
import { c as e, d as t, o as n, r, s as i } from "./element-cZ85T_aa.js";
import { n as a, t as o } from "./element-with-slot-4J2o3SeU.js";
import { t as s } from "./if-defined-Cjj8qN-Z.js";
import { n as c, t as l } from "./ref-RS8Uv6uC.js";
//#region ../../node_modules/@lit/context/lib/context-request-event.js
var u = class extends Event {
constructor(e, t, n, r) {
super("context-request", {
bubbles: !0,
composed: !0
}), this.context = e, this.contextTarget = t, this.callback = n, this.subscribe = r ?? !1;
}
};
//#endregion
//#region ../../node_modules/@lit/context/lib/create-context.js
function d(e) {
return e;
}
//#endregion
//#region ../../node_modules/@lit/context/lib/controllers/context-consumer.js
var f = class {
constructor(e, t, n, r) {
if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (e, t) => {
this.unsubscribe && (this.unsubscribe !== t && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = e, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(e, t)), this.unsubscribe = t;
}, this.host = e, t.context !== void 0) {
let e = t;
this.context = e.context, this.callback = e.callback, this.subscribe = e.subscribe ?? !1;
} else this.context = t, this.callback = n, this.subscribe = r ?? !1;
this.host.addController(this);
}
hostConnected() {
this.dispatchRequest();
}
hostDisconnected() {
this.unsubscribe &&= (this.unsubscribe(), void 0);
}
dispatchRequest() {
this.host.dispatchEvent(new u(this.context, this.host, this.t, this.subscribe));
}
}, p = class {
get value() {
return this.o;
}
set value(e) {
this.setValue(e);
}
setValue(e, t = !1) {
let n = t || !Object.is(e, this.o);
this.o = e, n && this.updateObservers();
}
constructor(e) {
this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
for (let [e, { disposer: t }] of this.subscriptions) e(this.o, t);
}, e !== void 0 && (this.value = e);
}
addCallback(e, t, n) {
if (!n) return void e(this.value);
this.subscriptions.has(e) || this.subscriptions.set(e, {
disposer: () => {
this.subscriptions.delete(e);
},
consumerHost: t
});
let { disposer: r } = this.subscriptions.get(e);
e(this.value, r);
}
clearCallbacks() {
this.subscriptions.clear();
}
}, m = class extends Event {
constructor(e, t) {
super("context-provider", {
bubbles: !0,
composed: !0
}), this.context = e, this.contextTarget = t;
}
}, h = class extends p {
constructor(e, t, n) {
super(t.context === void 0 ? n : t.initialValue), this.onContextRequest = (e) => {
if (e.context !== this.context) return;
let t = e.contextTarget ?? e.composedPath()[0];
t !== this.host && (e.stopPropagation(), this.addCallback(e.callback, t, e.subscribe));
}, this.onProviderRequest = (e) => {
if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
let t = /* @__PURE__ */ new Set();
for (let [e, { consumerHost: n }] of this.subscriptions) t.has(e) || (t.add(e), n.dispatchEvent(new u(this.context, n, e, !0)));
e.stopPropagation();
}, this.host = e, t.context === void 0 ? this.context = t : this.context = t.context, this.attachListeners(), this.host.addController?.(this);
}
attachListeners() {
this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
}
hostConnected() {
this.host.dispatchEvent(new m(this.context, this.host));
}
};
//#endregion
//#region ../../node_modules/@lit/context/lib/decorators/provide.js
function g({ context: e }) {
return (t, n) => {
let r = /* @__PURE__ */ new WeakMap();
if (typeof n == "object") return {
get() {
return t.get.call(this);
},
set(e) {
return r.get(this).setValue(e), t.set.call(this, e);
},
init(t) {
return r.set(this, new h(this, {
context: e,
initialValue: t
})), t;
}
};
{
t.constructor.addInitializer(((t) => {
r.set(t, new h(t, { context: e }));
}));
let i = Object.getOwnPropertyDescriptor(t, n), a;
if (i === void 0) {
let e = /* @__PURE__ */ new WeakMap();
a = {
get() {
return e.get(this);
},
set(t) {
r.get(this).setValue(t), e.set(this, t);
},
configurable: !0,
enumerable: !0
};
} else {
let e = i.set;
a = {
...i,
set(t) {
r.get(this).setValue(t), e?.call(this, t);
}
};
}
Object.defineProperty(t, n, a);
return;
}
};
}
//#endregion
//#region ../../node_modules/@lit/context/lib/decorators/consume.js
function _({ context: e, subscribe: t }) {
return (n, r) => {
typeof r == "object" ? r.addInitializer((function() {
new f(this, {
context: e,
callback: (e) => {
n.set.call(this, e);
},
subscribe: t
});
})) : n.constructor.addInitializer(((n) => {
new f(n, {
context: e,
callback: (e) => {
n[r] = e;
},
subscribe: t
});
}));
};
}
//#endregion
//#region src/components/tabs/tabs-context.ts
var v = d(Symbol("pkt-tabs-context")), y = class extends o {
constructor(...e) {
super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.separatorIconName = "", this.separatorIconPath = "", this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
useArrowNav: this.useArrowNav,
registerTab: this.registerTab.bind(this),
handleClick: this.handleClick.bind(this),
handleKeyUp: this.handleKeyUp.bind(this)
};
}
get useArrowNav() {
return this.arrowNav && !this.disableArrowNav;
}
updated(e) {
(e.has("arrowNav") || e.has("disableArrowNav")) && (this.context = {
...this.context,
useArrowNav: this.useArrowNav
}), this.updateComplete.then(() => this.syncSeparators());
}
syncSeparators() {
let e = this.querySelector(".pkt-tabs__list");
if (!e || (e.querySelectorAll(".pkt-tabs__separator").forEach((e) => e.remove()), !(this.separatorIconName || this.separatorIconPath))) return;
let t = Array.from(e.children).filter((e) => !e.classList.contains("pkt-tabs__separator"));
for (let e = 0; e < t.length - 1; e++) {
let n = document.createElement("span");
if (n.className = "pkt-tabs__separator", n.setAttribute("aria-hidden", "true"), n.setAttribute("role", "presentation"), this.separatorIconPath) {
let e = document.createElement("img");
e.setAttribute("src", this.separatorIconPath), e.setAttribute("alt", ""), e.setAttribute("aria-hidden", "true"), n.appendChild(e);
} else if (this.separatorIconName) {
let e = document.createElement("pkt-icon");
e.setAttribute("name", this.separatorIconName), e.classList.add("pkt-tabs__separator-icon"), n.appendChild(e);
}
t[e].after(n);
}
}
registerTab(e, t, n = !1) {
this.tabRefs[t] = e, this.disabledMap[t] = n, this.tabCount = Math.max(this.tabCount, t + 1);
}
isTabDisabled(e) {
return !!this.disabledMap[e];
}
findEnabledIndex(e, t) {
let n = e + t;
for (; n >= 0 && n < this.tabCount;) {
if (!this.isTabDisabled(n)) return n;
n += t;
}
return null;
}
handleClick(e) {
this.isTabDisabled(e) || this.dispatchEvent(new CustomEvent("tab-selected", {
detail: { index: e },
bubbles: !0,
composed: !0
}));
}
handleKeyUp(e, t) {
if (this.useArrowNav) {
if (e.key === "ArrowLeft") {
e.preventDefault();
let n = this.findEnabledIndex(t, -1);
n !== null && this.tabRefs[n]?.focus();
}
if (e.key === "ArrowRight") {
e.preventDefault();
let n = this.findEnabledIndex(t, 1);
n !== null && this.tabRefs[n]?.focus();
}
(e.key === "Enter" || e.key === " " || e.key === "Spacebar" || e.key === "ArrowDown") && (e.preventDefault(), this.handleClick(t));
}
}
render() {
let e = this.useArrowNav ? "tablist" : "navigation";
return t`
<div class=${this.separatorIconName || this.separatorIconPath ? "pkt-tabs pkt-tabs--with-separator" : "pkt-tabs"}>
<div class="pkt-tabs__list" role=${e}>${a(this)}</div>
</div>
`;
}
};
r([i({
type: Boolean,
reflect: !0,
attribute: "arrow-nav"
})], y.prototype, "arrowNav", void 0), r([i({
type: Boolean,
reflect: !0,
attribute: "disable-arrow-nav"
})], y.prototype, "disableArrowNav", void 0), r([i({
type: String,
reflect: !0,
attribute: "separator-icon-name"
})], y.prototype, "separatorIconName", void 0), r([i({
type: String,
reflect: !0,
attribute: "separator-icon-path"
})], y.prototype, "separatorIconPath", void 0), r([n()], y.prototype, "tabRefs", void 0), r([n()], y.prototype, "disabledMap", void 0), r([n()], y.prototype, "tabCount", void 0), r([g({ context: v }), n()], y.prototype, "context", void 0);
try {
e("pkt-tabs")(y);
} catch {
console.warn("Forsøker å definere <pkt-tabs>, men den er allerede definert");
}
//#endregion
//#region src/components/tabs/tabitem.ts
var b = class extends o {
constructor() {
super(), this.active = !1, this.disabled = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = l();
}
connectedCallback() {
super.connectedCallback(), this.updateComplete.then(() => {
this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index, this.disabled);
});
}
updated() {
this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index, this.disabled);
}
handleClick(e) {
if (this.disabled) {
e.preventDefault(), e.stopPropagation();
return;
}
this.context && this.context.handleClick(this.index);
}
handleKeyDown(e) {
if (this.disabled && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
e.preventDefault(), e.stopPropagation();
return;
}
this.context && this.context.handleKeyUp(e, this.index);
}
render() {
let e = this.context?.useArrowNav ?? !0, n = this.active && !this.disabled, r = [n ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), i = e ? "tab" : void 0, o = e ? n : void 0, l = this.disabled ? -1 : n || !e ? void 0 : -1, u = `pkt-icon--small ${this.icon === "check" ? "pkt-tabs__status-icon" : ""}`, d = t`
${this.icon ? t`<pkt-icon name=${this.icon} class=${u}></pkt-icon>` : ""}
<span>${a(this)}</span>
${this.tag ? t`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
`;
return this.href ? t`
<a
${c(this.elementRef)}
href=${s(this.disabled ? void 0 : this.href)}
class="pkt-tabs__link ${r}"
role=${s(i)}
aria-selected=${s(o)}
aria-disabled=${s(this.disabled ? "true" : void 0)}
aria-controls=${s(this.controls || void 0)}
tabindex=${s(l)}
=${this.handleClick}
=${this.handleKeyDown}
>
${d}
</a>
` : t`
<button
${c(this.elementRef)}
type="button"
class="pkt-tabs__button pkt-link-button ${r}"
?disabled=${this.disabled}
aria-disabled=${s(this.disabled ? "true" : void 0)}
role=${s(i)}
aria-selected=${s(o)}
aria-controls=${s(this.controls || void 0)}
tabindex=${s(l)}
=${this.handleClick}
=${this.handleKeyDown}
>
${d}
</button>
`;
}
};
r([i({
type: Boolean,
reflect: !0
})], b.prototype, "active", void 0), r([i({
type: Boolean,
reflect: !0
})], b.prototype, "disabled", void 0), r([i({
type: String,
reflect: !0
})], b.prototype, "href", void 0), r([i({
type: String,
reflect: !0
})], b.prototype, "icon", void 0), r([i({
type: String,
reflect: !0
})], b.prototype, "controls", void 0), r([i({
type: String,
reflect: !0
})], b.prototype, "tag", void 0), r([i({
type: String,
reflect: !0,
attribute: "tag-skin"
})], b.prototype, "tagSkin", void 0), r([i({
type: Number,
reflect: !0
})], b.prototype, "index", void 0), r([_({
context: v,
subscribe: !0
}), i({ attribute: !1 })], b.prototype, "context", void 0);
try {
e("pkt-tab-item")(b);
} catch {
console.warn("Forsøker å definere <pkt-tab-item>, men den er allerede definert");
}
//#endregion
//#region src/components/tabs/index.ts
var x = y;
//#endregion
export { b as n, y as r, x as t };