@oslokommune/punkt-elements 19.10.0 → 19.10.2

package/src/components/helptext/helptext-association.test.ts

@@ -148,6 +148,42 @@ describe('helptext association', () => {
       expectDescribedBySlot(host)
     })
 
+    const createSlotted = (text: string) => {
+      const slotted = document.createElement('div')
+      slotted.setAttribute('slot', 'helptext')
+      slotted.className = 'slotted'
+      slotted.textContent = text
+      return slotted
+    }
+
+    test.each(slotCases)('%s %s shows slotted helptext a framework hides and shows again', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext" class="slotted">Hjelp fra slot</div>')
+      const slotted = host.querySelector('.slotted')!
+      const parent = slotted.parentNode!
+      const next = slotted.nextSibling
+      parent.removeChild(slotted)
+      const anchor = document.createComment('v-if')
+      parent.insertBefore(anchor, next)
+      await settle(host)
+      expect(host.querySelector('.pkt-inputwrapper__helptext')).toBeNull()
+
+      expect(anchor.parentNode).not.toBeNull()
+      anchor.parentNode!.insertBefore(createSlotted('Hjelp fra slot'), anchor.nextSibling)
+      anchor.remove()
+      await settle(host)
+
+      expectDescribedBySlot(host)
+    })
+
+    test.each(slotCases)('%s %s shows slotted helptext that a framework replaces', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext" class="slotted">Gammel</div>')
+      const slotted = host.querySelector('.slotted')!
+      slotted.parentNode!.replaceChild(createSlotted('Hjelp fra slot'), slotted)
+      await settle(host)
+
+      expectDescribedBySlot(host)
+    })
+
     test.each(slotCases)('%s %s drops the link when slotted helptext is removed', async (tag, attrs) => {
       const host = await mountWithSlot(tag, attrs, '<div slot="helptext" class="slotted">Hjelp fra slot</div>')
       expectDescribedBySlot(host)

package/dist/element-with-slot-DDLS-aLw.js

@@ -1,227 +0,0 @@
-import { f as e, g as t, m as n, t as r } from "./element-DBugHPKM.js";
-import { t as i } from "./async-directive-yh8hG41Q.js";
-//#region src/controllers/pkt-slot-utils.ts
-function a(e) {
-	return e.classList && (e.classList.contains("_dialog_overlay") || e.classList.contains("backdrop")) ? !0 : typeof e.hasAttribute == "function" && e.hasAttribute("data-skip");
-}
-function o(e) {
-	return e.nodeName === "OPTION" || e.nodeName === "DATA";
-}
-function s(e) {
-	return e.nodeType === Node.TEXT_NODE && e.nodeValue?.trim() !== "";
-}
-//#endregion
-//#region src/directives/slot-content.ts
-var c = /* @__PURE__ */ new WeakMap();
-function l(e) {
-	let t = c.get(e);
-	return t || (t = new g(e), c.set(e, t)), t;
-}
-var u = Symbol("default");
-function d(e) {
-	return e === void 0 ? u : e;
-}
-function f(e) {
-	return Array.isArray(e) ? e.map((e) => {
-		let t = e === null ? u : e;
-		return [t, t];
-	}) : Object.entries(e).map(([e, t]) => [e, t === null ? u : t]);
-}
-function p(e, t) {
-	return e.length === t.length && e.every(([e, n], r) => t[r][0] === e && t[r][1] === n);
-}
-function m(e, t) {
-	if (e.nodeType === Node.COMMENT_NODE) return !1;
-	if (e.nodeType === Node.TEXT_NODE) return s(e) ? (h(t, u, e), !0) : !1;
-	if (e.nodeType === Node.ELEMENT_NODE) {
-		let n = e;
-		if (a(n) || o(n)) return !1;
-		if (n instanceof HTMLTemplateElement) {
-			let e = Array.from(n.content.childNodes), r = d(n.getAttribute("slot") ?? void 0);
-			for (let n of e) h(t, r, n);
-			return !0;
-		}
-		let r = n.getAttribute("slot");
-		return h(t, r === null ? u : d(r), e), !0;
-	}
-	return !1;
-}
-function h(e, t, n) {
-	let r = e.get(t);
-	r || (r = [], e.set(t, r)), r.push(n);
-}
-var g = class e {
-	static {
-		this.PLACEHOLDER_PREFIX = "pkt-slot";
-	}
-	constructor(e) {
-		this.observer = null, this.nodesBySlot = /* @__PURE__ */ new Map(), this.directives = /* @__PURE__ */ new Set(), this.observing = !1, this.trackedNodes = /* @__PURE__ */ new Set(), this.generation = 0, this.initialCollectionDone = !1, this.processingMutations = !1, this.placeholderToNode = /* @__PURE__ */ new Map(), this.nodeToPlaceholder = /* @__PURE__ */ new Map(), this.sources = /* @__PURE__ */ new Map(), this.subscribers = /* @__PURE__ */ new Set(), this.host = e;
-	}
-	collectNodes() {
-		if (this.initialCollectionDone) return;
-		this.initialCollectionDone = !0, this.generation++;
-		let e = Array.from(this.host.childNodes);
-		for (let t of e) m(t, this.nodesBySlot) && this.trackedNodes.add(t);
-	}
-	addDirective(e) {
-		this.directives.add(e), this.startObserving();
-	}
-	removeDirective(e) {
-		this.directives.delete(e), this.stopObservingIfUnused();
-	}
-	addSource(e, t, n) {
-		let r = this.sources.get(e);
-		r && r.manager === t && p(r.mapping, n) || (r && r.manager !== t && this.detachFrom(r.manager, e), this.sources.set(e, {
-			manager: t,
-			mapping: n
-		}), t.subscribers.add(this), t.startObserving(), this.handleChange());
-	}
-	removeSource(e) {
-		let t = this.sources.get(e);
-		t && (this.sources.delete(e), this.detachFrom(t.manager, e), this.handleChange());
-	}
-	getNodes(e) {
-		return this.nodesFor(d(e));
-	}
-	hasContent(e) {
-		return this.getNodes(e).length > 0;
-	}
-	ensurePlaceholder(t) {
-		if (this.nodeToPlaceholder.has(t)) return;
-		if (t.parentNode !== this.host) {
-			for (let { manager: e } of this.sources.values()) e.ensurePlaceholder(t);
-			return;
-		}
-		let n = document.createComment(e.PLACEHOLDER_PREFIX);
-		this.host.insertBefore(n, t), this.placeholderToNode.set(n, t), this.nodeToPlaceholder.set(t, n);
-	}
-	nodesFor(e) {
-		let t = this.nodesBySlot.get(e) ?? [];
-		if (this.sources.size === 0) return t;
-		let n = [];
-		for (let { manager: t, mapping: r } of this.sources.values()) for (let [i, a] of r) a === e && n.push(...t.nodesFor(i));
-		return n.length ? [...t, ...n] : t;
-	}
-	detachFrom(e, t) {
-		[...this.sources.entries()].some(([n, r]) => n !== t && r.manager === e) || (e.subscribers.delete(this), e.stopObservingIfUnused());
-	}
-	handleChange() {
-		this.generation++, this.notifyDirectives();
-		for (let e of this.subscribers) e.handleChange();
-		this.host.requestUpdate();
-	}
-	stopObservingIfUnused() {
-		this.directives.size === 0 && this.subscribers.size === 0 && this.stopObserving();
-	}
-	startObserving() {
-		this.observing || (this.observing = !0, setTimeout(() => {
-			!this.observing || typeof MutationObserver > "u" || (this.observer = new MutationObserver((e) => {
-				this.handleMutations(e);
-			}), this.observer.observe(this.host, {
-				childList: !0,
-				subtree: !0
-			}));
-		}, 0));
-	}
-	stopObserving() {
-		this.observing && (this.observing = !1, this.observer?.disconnect(), this.observer = null);
-	}
-	handleMutations(e) {
-		if (this.processingMutations) return;
-		this.processingMutations = !0;
-		let t = !1;
-		for (let n of e) {
-			for (let e of n.removedNodes) {
-				let n = this.placeholderToNode.get(e);
-				if (n) {
-					n.parentNode?.removeChild(n), this.trackedNodes.delete(n), this.removeFromSlots(n), this.placeholderToNode.delete(e), this.nodeToPlaceholder.delete(n), t = !0;
-					continue;
-				}
-				if (this.trackedNodes.has(e) && !this.host.contains(e)) {
-					this.trackedNodes.delete(e), this.removeFromSlots(e);
-					let n = this.nodeToPlaceholder.get(e);
-					n && (n.parentNode?.removeChild(n), this.placeholderToNode.delete(n), this.nodeToPlaceholder.delete(e)), t = !0;
-				}
-			}
-			if (n.target === this.host) for (let e of n.addedNodes) this.placeholderToNode.has(e) || !this.trackedNodes.has(e) && this.isUserContent(e) && m(e, this.nodesBySlot) && (this.trackedNodes.add(e), t = !0);
-		}
-		t && this.handleChange(), this.observer?.takeRecords(), this.processingMutations = !1;
-	}
-	isUserContent(e) {
-		if (e.nodeType === Node.COMMENT_NODE) return !1;
-		if (e.nodeType === Node.TEXT_NODE) return s(e);
-		if (e.nodeType === Node.ELEMENT_NODE) {
-			let t = e;
-			return !(a(t) || o(t));
-		}
-		return !1;
-	}
-	removeFromSlots(e) {
-		for (let [t, n] of this.nodesBySlot) {
-			let r = n.indexOf(e);
-			if (r !== -1) {
-				n.splice(r, 1), n.length === 0 && this.nodesBySlot.delete(t);
-				return;
-			}
-		}
-	}
-	notifyDirectives() {
-		for (let e of this.directives) e.handleNodesChanged();
-	}
-}, _ = e(class extends i {
-	constructor(e) {
-		if (super(e), this.manager = null, this.lastGeneration = -1, e.type !== n.CHILD) throw Error("slotContent() can only be used in child expressions");
-	}
-	render(e, n) {
-		return t;
-	}
-	update(e, [t, n]) {
-		return this.slotName = n, this.manager || (this.manager = l(t), this.manager.collectNodes(), this.manager.addDirective(this)), this.ensurePlaceholders(), this.getNodesOrNoChange();
-	}
-	handleNodesChanged() {
-		if (!this.isConnected || !this.manager) return;
-		this.ensurePlaceholders();
-		let e = this.getNodesOrNoChange();
-		e !== t && this.setValue(e);
-	}
-	ensurePlaceholders() {
-		if (!this.manager) return;
-		let e = this.manager.getNodes(this.slotName);
-		for (let t of e) this.manager.ensurePlaceholder(t);
-	}
-	disconnected() {
-		this.manager?.removeDirective(this), this.manager = null, this.lastGeneration = -1;
-	}
-	reconnected() {}
-	getNodesOrNoChange() {
-		if (!this.manager) return t;
-		let e = this.manager.generation;
-		return e === this.lastGeneration ? t : (this.lastGeneration = e, this.manager.getNodes(this.slotName));
-	}
-}), v = e(class extends i {
-	constructor(e) {
-		if (super(e), this.target = null, this.source = null, this.mapping = [], e.type !== n.ELEMENT) throw Error("forwardSlots() can only be used as an element directive");
-	}
-	render(e, n) {
-		return t;
-	}
-	update(e, [n, r]) {
-		let i = l(e.element);
-		return this.target && this.target !== i && this.target.removeSource(this), this.target = i, this.source = l(n), this.source.collectNodes(), this.mapping = f(r), this.target.addSource(this, this.source, this.mapping), t;
-	}
-	disconnected() {
-		this.target?.removeSource(this);
-	}
-	reconnected() {
-		this.target && this.source && this.target.addSource(this, this.source, this.mapping);
-	}
-}), y = class extends r {
-	connectedCallback() {
-		l(this).collectNodes(), super.connectedCallback();
-	}
-	hasSlotContent(e) {
-		return l(this).hasContent(e);
-	}
-};
-//#endregion
-export { o as a, _ as i, v as n, l as r, y as t };

package/dist/element-with-slot-DhiAuSjM.cjs

@@ -1 +0,0 @@
-const e=require("./element-C6WTyJFE.cjs"),t=require("./async-directive-DpyKp6qv.cjs");function n(e){return e.classList&&(e.classList.contains(`_dialog_overlay`)||e.classList.contains(`backdrop`))?!0:typeof e.hasAttribute==`function`&&e.hasAttribute(`data-skip`)}function r(e){return e.nodeName===`OPTION`||e.nodeName===`DATA`}function i(e){return e.nodeType===Node.TEXT_NODE&&e.nodeValue?.trim()!==``}var a=new WeakMap;function o(e){let t=a.get(e);return t||(t=new p(e),a.set(e,t)),t}var s=Symbol(`default`);function c(e){return e===void 0?s:e}function l(e){return Array.isArray(e)?e.map(e=>{let t=e===null?s:e;return[t,t]}):Object.entries(e).map(([e,t])=>[e,t===null?s:t])}function u(e,t){return e.length===t.length&&e.every(([e,n],r)=>t[r][0]===e&&t[r][1]===n)}function d(e,t){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e)?(f(t,s,e),!0):!1;if(e.nodeType===Node.ELEMENT_NODE){let i=e;if(n(i)||r(i))return!1;if(i instanceof HTMLTemplateElement){let e=Array.from(i.content.childNodes),n=c(i.getAttribute(`slot`)??void 0);for(let r of e)f(t,n,r);return!0}let a=i.getAttribute(`slot`);return f(t,a===null?s:c(a),e),!0}return!1}function f(e,t,n){let r=e.get(t);r||(r=[],e.set(t,r)),r.push(n)}var p=class e{static{this.PLACEHOLDER_PREFIX=`pkt-slot`}constructor(e){this.observer=null,this.nodesBySlot=new Map,this.directives=new Set,this.observing=!1,this.trackedNodes=new Set,this.generation=0,this.initialCollectionDone=!1,this.processingMutations=!1,this.placeholderToNode=new Map,this.nodeToPlaceholder=new Map,this.sources=new Map,this.subscribers=new Set,this.host=e}collectNodes(){if(this.initialCollectionDone)return;this.initialCollectionDone=!0,this.generation++;let e=Array.from(this.host.childNodes);for(let t of e)d(t,this.nodesBySlot)&&this.trackedNodes.add(t)}addDirective(e){this.directives.add(e),this.startObserving()}removeDirective(e){this.directives.delete(e),this.stopObservingIfUnused()}addSource(e,t,n){let r=this.sources.get(e);r&&r.manager===t&&u(r.mapping,n)||(r&&r.manager!==t&&this.detachFrom(r.manager,e),this.sources.set(e,{manager:t,mapping:n}),t.subscribers.add(this),t.startObserving(),this.handleChange())}removeSource(e){let t=this.sources.get(e);t&&(this.sources.delete(e),this.detachFrom(t.manager,e),this.handleChange())}getNodes(e){return this.nodesFor(c(e))}hasContent(e){return this.getNodes(e).length>0}ensurePlaceholder(t){if(this.nodeToPlaceholder.has(t))return;if(t.parentNode!==this.host){for(let{manager:e}of this.sources.values())e.ensurePlaceholder(t);return}let n=document.createComment(e.PLACEHOLDER_PREFIX);this.host.insertBefore(n,t),this.placeholderToNode.set(n,t),this.nodeToPlaceholder.set(t,n)}nodesFor(e){let t=this.nodesBySlot.get(e)??[];if(this.sources.size===0)return t;let n=[];for(let{manager:t,mapping:r}of this.sources.values())for(let[i,a]of r)a===e&&n.push(...t.nodesFor(i));return n.length?[...t,...n]:t}detachFrom(e,t){[...this.sources.entries()].some(([n,r])=>n!==t&&r.manager===e)||(e.subscribers.delete(this),e.stopObservingIfUnused())}handleChange(){this.generation++,this.notifyDirectives();for(let e of this.subscribers)e.handleChange();this.host.requestUpdate()}stopObservingIfUnused(){this.directives.size===0&&this.subscribers.size===0&&this.stopObserving()}startObserving(){this.observing||(this.observing=!0,setTimeout(()=>{!this.observing||typeof MutationObserver>`u`||(this.observer=new MutationObserver(e=>{this.handleMutations(e)}),this.observer.observe(this.host,{childList:!0,subtree:!0}))},0))}stopObserving(){this.observing&&(this.observing=!1,this.observer?.disconnect(),this.observer=null)}handleMutations(e){if(this.processingMutations)return;this.processingMutations=!0;let t=!1;for(let n of e){for(let e of n.removedNodes){let n=this.placeholderToNode.get(e);if(n){n.parentNode?.removeChild(n),this.trackedNodes.delete(n),this.removeFromSlots(n),this.placeholderToNode.delete(e),this.nodeToPlaceholder.delete(n),t=!0;continue}if(this.trackedNodes.has(e)&&!this.host.contains(e)){this.trackedNodes.delete(e),this.removeFromSlots(e);let n=this.nodeToPlaceholder.get(e);n&&(n.parentNode?.removeChild(n),this.placeholderToNode.delete(n),this.nodeToPlaceholder.delete(e)),t=!0}}if(n.target===this.host)for(let e of n.addedNodes)this.placeholderToNode.has(e)||!this.trackedNodes.has(e)&&this.isUserContent(e)&&d(e,this.nodesBySlot)&&(this.trackedNodes.add(e),t=!0)}t&&this.handleChange(),this.observer?.takeRecords(),this.processingMutations=!1}isUserContent(e){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e);if(e.nodeType===Node.ELEMENT_NODE){let t=e;return!(n(t)||r(t))}return!1}removeFromSlots(e){for(let[t,n]of this.nodesBySlot){let r=n.indexOf(e);if(r!==-1){n.splice(r,1),n.length===0&&this.nodesBySlot.delete(t);return}}}notifyDirectives(){for(let e of this.directives)e.handleNodesChanged()}},m=class extends t.t{constructor(t){if(super(t),this.manager=null,this.lastGeneration=-1,t.type!==e.m.CHILD)throw Error(`slotContent() can only be used in child expressions`)}render(t,n){return e.g}update(e,[t,n]){return this.slotName=n,this.manager||(this.manager=o(t),this.manager.collectNodes(),this.manager.addDirective(this)),this.ensurePlaceholders(),this.getNodesOrNoChange()}handleNodesChanged(){if(!this.isConnected||!this.manager)return;this.ensurePlaceholders();let t=this.getNodesOrNoChange();t!==e.g&&this.setValue(t)}ensurePlaceholders(){if(!this.manager)return;let e=this.manager.getNodes(this.slotName);for(let t of e)this.manager.ensurePlaceholder(t)}disconnected(){this.manager?.removeDirective(this),this.manager=null,this.lastGeneration=-1}reconnected(){}getNodesOrNoChange(){if(!this.manager)return e.g;let t=this.manager.generation;return t===this.lastGeneration?e.g:(this.lastGeneration=t,this.manager.getNodes(this.slotName))}},h=e.f(m),g=class extends t.t{constructor(t){if(super(t),this.target=null,this.source=null,this.mapping=[],t.type!==e.m.ELEMENT)throw Error(`forwardSlots() can only be used as an element directive`)}render(t,n){return e.g}update(t,[n,r]){let i=o(t.element);return this.target&&this.target!==i&&this.target.removeSource(this),this.target=i,this.source=o(n),this.source.collectNodes(),this.mapping=l(r),this.target.addSource(this,this.source,this.mapping),e.g}disconnected(){this.target?.removeSource(this)}reconnected(){this.target&&this.source&&this.target.addSource(this,this.source,this.mapping)}},_=e.f(g),v=class extends e.t{connectedCallback(){o(this).collectNodes(),super.connectedCallback()}hasSlotContent(e){return o(this).hasContent(e)}};Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return v}});