@oslokommune/punkt-elements 19.4.0 → 19.5.1

package/dist/{datepicker-53rj_Qqx.cjs → datepicker-CeUpoQuG.cjs}

@@ -1,4 +1,4 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./element-with-slot-2PHu2w7O.cjs");require("./calendar-D-Ow5DAp.cjs"),require("./icon-CoBsgGUR.cjs");const i=require("./ref-Emu5PNxk.cjs"),a=require("./converters-BJ9Fe0kW.cjs");require("./tag-HTYKd-iG.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./utils-63cRpWut.cjs"),c=require("./input-element-W6Gklt2E.cjs");require("./input-wrapper-CSPPa4uc.cjs");var l=class extends e.t{constructor(...e){super(...e),this.dates=[],this.dateformat=`dd.MM.yyyy`,this.className=`pkt-datepicker__tags`,this.idBase=s.n()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},e._`
+const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./element-with-slot-D7sTqOr3.cjs");require("./icon-Dnv6LtPC.cjs"),require("./calendar-TcxvS-1_.cjs");const r=require("./if-defined-2mkIDgOm.cjs"),i=require("./ref-Emu5PNxk.cjs"),a=require("./converters-BJ9Fe0kW.cjs");require("./tag-B5dUg7AD.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./utils-63cRpWut.cjs"),c=require("./input-element-Ctkz5fQk.cjs");require("./input-wrapper-Cf__-4E-.cjs");var l=class extends e.t{constructor(...e){super(...e),this.dates=[],this.dateformat=`dd.MM.yyyy`,this.className=`pkt-datepicker__tags`,this.idBase=s.n()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},e._`
       <div class=${t.t(this.classes)} aria-live="polite">
         ${Array.isArray(this.dates)&&this.dates[0]?o.t(a.h((this.dates??[]).filter(Boolean)),e=>e,t=>e._` <pkt-tag
                   id=${this.idBase+t+`-tag`}
@@ -54,13 +54,13 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
           .type=${this.inputType}
           id="${this.id}-input"
           .value=${this.value}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
           @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
           ?disabled=${this.disabled}
@@ -73,21 +73,21 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         />
         ${this.renderCalendarButton()}
       </div>
-    `}};e.n([e.u({type:String})],M.prototype,`value`,void 0);try{e.d(`pkt-datepicker-single`)(M)}catch{console.warn(`Forsøker å definere <pkt-datepicker-single>, men den er allerede definert`)}var N=class extends j{constructor(...e){super(...e),this.value=[],this.label=``,this.showRangeLabels=!1,this.inputRefTo=i.t()}get inputElementTo(){return this.inputRefTo.value}render(){let r=D.getRangeLabelClasses(this.showRangeLabels);return e._`
+    `}};e.n([e.u({type:String})],M.prototype,`value`,void 0);try{e.d(`pkt-datepicker-single`)(M)}catch{console.warn(`Forsøker å definere <pkt-datepicker-single>, men den er allerede definert`)}var N=class extends j{constructor(...e){super(...e),this.value=[],this.label=``,this.showRangeLabels=!1,this.inputRefTo=i.t()}get inputElementTo(){return this.inputRefTo.value}render(){let n=D.getRangeLabelClasses(this.showRangeLabels);return e._`
       <div class="pkt-input__container">
         ${this.showRangeLabels?e._` <div class="pkt-input-prefix">${this.pktStrings.get(`generic`).from}</div> `:e.h}
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
           aria-label="${this.label} ${this.pktStrings.get(`generic`).from}"
           .value=${this.value[0]??``}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -99,22 +99,22 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
           @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
           ${i.n(this.inputRef)}
         />
-        <div class="${t.t(r)}" id="${this.id}-to-label">
+        <div class="${t.t(n)}" id="${this.id}-to-label">
           ${this.pktStrings.get(`generic`).to}
         </div>
         ${this.showRangeLabels?e.h:e._` <div class="pkt-input-separator">–</div> `}
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-to"
           aria-label="${this.label} ${this.pktStrings.get(`generic`).to}"
           .value=${this.value[1]??``}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -131,15 +131,15 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
     `}};e.n([e.u({type:Array})],N.prototype,`value`,void 0),e.n([e.u({type:String})],N.prototype,`label`,void 0),e.n([e.u({type:Boolean})],N.prototype,`showRangeLabels`,void 0);try{e.d(`pkt-datepicker-range`)(N)}catch{console.warn(`Forsøker å definere <pkt-datepicker-range>, men den er allerede definert`)}var P=class extends j{constructor(...e){super(...e),this.value=[]}get isInputDisabled(){return this.disabled||this.maxlength!==void 0&&this.maxlength!==null&&this.value.length>=this.maxlength}dispatchAddToSelected(e){this.dispatchEvent(new CustomEvent(`add-to-selected`,{detail:e,bubbles:!0,composed:!0}))}render(){return e._`
       <div class="pkt-input__container">
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.isInputDisabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -167,7 +167,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -194,7 +194,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -222,7 +222,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -254,6 +254,7 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
       ></pkt-datepicker-popup>
     `}render(){return this.inputClasses=D.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range,this.readonly,this.inputType,this.inputSize),e._`
       <pkt-input-wrapper
+        ${n.n(this,[`helptext`])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
@@ -278,7 +279,6 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .ariaDescribedby=${this.ariaDescribedby}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${r.r(this,`helptext`)}</div>
         ${this.multiple?e._`<pkt-date-tags
               .dates=${this._value}
               dateformat=${this.dateformat}

package/dist/directives/slot-content.d.ts

@@ -1,11 +1,15 @@
 import { LitElement } from 'lit';
 import { AsyncDirective, PartInfo } from 'lit/async-directive.js';
-import { ChildPart } from 'lit/directive.js';
+import { ChildPart, ElementPart } from 'lit/directive.js';
 /**
  * Returns the SlotManager for a host, creating one if it doesn't exist.
  * Call this in connectedCallback() to eagerly collect children before Lit renders.
  */
 export declare function getSlotManager(host: LitElement): SlotManager;
+declare const DEFAULT_SLOT: unique symbol;
+type SlotKey = string | typeof DEFAULT_SLOT;
+type SlotMapping = Array<[from: SlotKey, to: SlotKey]>;
+type ForwardedSlots = string[] | Record<string, string | null>;
 /**
  * Per-host singleton that manages node collection and observation.
  * Scans host children, categorizes them by slot attribute, and notifies
@@ -28,6 +32,8 @@ export declare class SlotManager {
     private placeholderToNode;
     private nodeToPlaceholder;
     private static PLACEHOLDER_PREFIX;
+    private sources;
+    private subscribers;
     constructor(host: LitElement);
     /**
      * Collect original children BEFORE Lit's first render.
@@ -43,6 +49,8 @@ export declare class SlotManager {
      * Unregister a directive instance. Stops observing if no directives remain.
      */
     removeDirective(d: SlotContentDirective): void;
+    addSource(token: object, manager: SlotManager, mapping: SlotMapping): void;
+    removeSource(token: object): void;
     /**
      * Returns nodes matching the given slot name.
      */
@@ -59,6 +67,10 @@ export declare class SlotManager {
      * the placeholder removal and clean up the real node.
      */
     ensurePlaceholder(node: Node): void;
+    private nodesFor;
+    private detachFrom;
+    private handleChange;
+    private stopObservingIfUnused;
     /**
      * Start MutationObserver for dynamic child changes.
      * Deferred via setTimeout to avoid catching Lit's first render mutations.
@@ -125,4 +137,27 @@ declare class SlotContentDirective extends AsyncDirective {
  * html`<div class="help">${slotContent(this, 'helptext')}</div>`
  */
 export declare const slotContent: (_host: LitElement, _slotName?: string | undefined) => import('lit-html/directive.js').DirectiveResult<typeof SlotContentDirective>;
+declare class ForwardSlotsDirective extends AsyncDirective {
+    private target;
+    private source;
+    private mapping;
+    constructor(partInfo: PartInfo);
+    render(_host: LitElement, _slots: ForwardedSlots): unknown;
+    update(part: ElementPart, [host, slots]: [LitElement, ForwardedSlots]): unknown;
+    disconnected(): void;
+    reconnected(): void;
+}
+/**
+ * Element directive that gives a child element the host's slot content without an
+ * intermediate element. The child renders the nodes with its own `slotContent()`.
+ *
+ * @param host - The component instance (typically `this`)
+ * @param slots - Slot names forwarded under the same name, or a map from the host's slot
+ *   name to the child's slot name (`null` for the child's default slot)
+ *
+ * @example
+ * html`<pkt-input-wrapper ${forwardSlots(this, ['helptext'])}></pkt-input-wrapper>`
+ * html`<pkt-helptext ${forwardSlots(this, { helptext: null })}></pkt-helptext>`
+ */
+export declare const forwardSlots: (_host: LitElement, _slots: ForwardedSlots) => import('lit-html/directive.js').DirectiveResult<typeof ForwardSlotsDirective>;
 export {};

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

@@ -0,0 +1 @@
+const e=require("./element-BOmr9YLv.cjs"),t=require("./async-directive-BGoo_npW.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=>[e,e]):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}});

package/dist/{element-with-slot-FD826ooP.js → element-with-slot-DQv0cbbD.js}

@@ -15,67 +15,109 @@ function s(e) {
 var c = /* @__PURE__ */ new WeakMap();
 function l(e) {
 	let t = c.get(e);
-	return t || (t = new m(e), c.set(e, t)), t;
+	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, t) {
+function f(e) {
+	return Array.isArray(e) ? e.map((e) => [e, e]) : 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) ? (p(t, u, e), !0) : !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) p(t, r, n);
+			for (let n of e) h(t, r, n);
 			return !0;
 		}
 		let r = n.getAttribute("slot");
-		return p(t, r === null ? u : d(r), e), !0;
+		return h(t, r === null ? u : d(r), e), !0;
 	}
 	return !1;
 }
-function p(e, t, n) {
+function h(e, t, n) {
 	let r = e.get(t);
 	r || (r = [], e.set(t, r)), r.push(n);
 }
-var m = class e {
+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.host = 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) f(t, this.nodesBySlot) && this.trackedNodes.add(t);
+		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.directives.size === 0 && this.stopObserving();
+		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.nodesBySlot.get(d(e)) ?? [];
+		return this.nodesFor(d(e));
 	}
 	hasContent(e) {
 		return this.getNodes(e).length > 0;
 	}
 	ensurePlaceholder(t) {
-		if (this.nodeToPlaceholder.has(t) || t.parentNode !== this.host) return;
+		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 && (this.observer = new MutationObserver((e) => {
+			!this.observing || typeof MutationObserver > "u" || (this.observer = new MutationObserver((e) => {
 				this.handleMutations(e);
-			}), this.observer.observe(this.host, { childList: !0 }));
+			}), this.observer.observe(this.host, {
+				childList: !0,
+				subtree: !0
+			}));
 		}, 0));
 	}
 	stopObserving() {
@@ -85,22 +127,22 @@ var m = class e {
 		if (this.processingMutations) return;
 		this.processingMutations = !0;
 		let t = !1;
-		for (let n of e) if (n.target === this.host) {
+		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)) {
+				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;
 				}
 			}
-			for (let e of n.addedNodes) this.placeholderToNode.has(e) || !this.trackedNodes.has(e) && this.isUserContent(e) && f(e, this.nodesBySlot) && (this.trackedNodes.add(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.generation++, this.notifyDirectives()), this.observer?.takeRecords(), this.processingMutations = !1;
+		t && this.handleChange(), this.observer?.takeRecords(), this.processingMutations = !1;
 	}
 	isUserContent(e) {
 		if (e.nodeType === Node.COMMENT_NODE) return !1;
@@ -123,7 +165,7 @@ var m = class e {
 	notifyDirectives() {
 		for (let e of this.directives) e.handleNodesChanged();
 	}
-}, h = e(class extends i {
+}, _ = 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");
 	}
@@ -153,7 +195,24 @@ var m = class e {
 		let e = this.manager.generation;
 		return e === this.lastGeneration ? t : (this.lastGeneration = e, this.manager.getNodes(this.slotName));
 	}
-}), g = class extends r {
+}), 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();
 	}
@@ -162,4 +221,4 @@ var m = class e {
 	}
 };
 //#endregion
-export { o as i, l as n, h as r, g as t };
+export { o as a, _ as i, v as n, l as r, y as t };

package/dist/{fileupload-BxfBFhFt.js → fileupload-CUPl41uN.js}

@@ -1,15 +1,15 @@
 import { _ as e, d as t, l as n, n as r, s as i, t as a, u as o } from "./element-mwwC2Rra.js";
 import { t as s } from "./class-map-C4hdfSfY.js";
-import { t as c } from "./if-defined-Bebu3LXY.js";
-import { n as l, t as u } from "./format-BTeSVkED.js";
-import "./alert-BhvjSA5X.js";
-import "./icon-DmRyYNlY.js";
+import { n as c, t as l } from "./format-BTeSVkED.js";
+import "./alert-C0PiYnot.js";
+import "./icon-JigbxxF7.js";
+import { t as u } from "./if-defined-Bebu3LXY.js";
 import { t as d } from "./converters-CkjLSYpa.js";
 import { n as f } from "./utils-BwF4QSrq.js";
-import "./input-wrapper-C1zXIKBU.js";
+import "./input-wrapper-DACDx6Ie.js";
 import { r as p } from "./focus-trap-DG3pEuyJ.js";
-import "./modal-CJqe6y-V.js";
-import "./progressbar-Bd0DjiAb.js";
+import "./modal-CELmA0-8.js";
+import "./progressbar-DH5lIBpx.js";
 //#region ../../shared-utils/fileupload/size.ts
 function m(e) {
 	if (e == null || e === "") return;
@@ -246,7 +246,7 @@ var j = class extends a {
 			file: e,
 			attributes: { targetFilename: e.name }
 		})), r = this.pktStrings.get("fileupload");
-		this.setAddedAnnouncement(n.length === 1 ? u(r.srFileAdded, { filename: n[0].attributes.targetFilename }) : u(r.srFilesAdded, { count: n.length }));
+		this.setAddedAnnouncement(n.length === 1 ? l(r.srFileAdded, { filename: n[0].attributes.targetFilename }) : l(r.srFilesAdded, { count: n.length }));
 		let i = this.getCurrentFiles(), a = this.multiple ? [...i, ...n] : [n[0]];
 		this.commitFiles(a, "add", n.map((e) => e.fileId)), this.uploadStrategy === "custom" && n.forEach((e) => {
 			this.dispatchEvent(new CustomEvent("file-upload-requested", {
@@ -379,20 +379,20 @@ var j = class extends a {
 		let { totalCount: e, uploadedCount: t } = k(this.getCurrentFiles(), this.transfers);
 		if (e === 0 || t === 0) return "";
 		let n = this.pktStrings.get("fileupload");
-		return u(n.srFilesUploadedOfTotal, {
+		return l(n.srFilesUploadedOfTotal, {
 			uploaded: t,
 			total: e,
-			label: l(e, n.fileLabelOne, n.fileLabelOther)
+			label: c(e, n.fileLabelOne, n.fileLabelOther)
 		});
 	}
 	getSrErrorsMessage() {
 		let { totalCount: e, failedCount: t } = k(this.getCurrentFiles(), this.transfers);
 		if (e === 0 || t === 0) return "";
 		let n = this.pktStrings.get("fileupload");
-		return u(n.srFilesFailedOfTotal, {
+		return l(n.srFilesFailedOfTotal, {
 			failed: t,
 			total: e,
-			label: l(e, n.fileLabelOne, n.fileLabelOther)
+			label: c(e, n.fileLabelOne, n.fileLabelOther)
 		});
 	}
 	get ownerForm() {
@@ -491,7 +491,7 @@ var M = "comments", N = (e, t) => {
 	let n = new Date(e);
 	if (Number.isNaN(n.getTime())) return e;
 	let r = String(n.getDate()).padStart(2, "0"), i = String(n.getMonth() + 1).padStart(2, "0"), a = n.getFullYear(), o = String(n.getHours()).padStart(2, "0"), s = String(n.getMinutes()).padStart(2, "0");
-	return u(t.commentTimestamp, {
+	return l(t.commentTimestamp, {
 		date: `${r}.${i}.${a}`,
 		time: `${o}:${s}`
 	});
@@ -730,7 +730,7 @@ var M = "comments", N = (e, t) => {
           >${o}</span
         >` : null}
   `;
-}, K = ({ file: t, disabled: n, inputName: r, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: l, setFileAttribute: u }) => {
+}, K = ({ file: t, disabled: n, inputName: r, operations: i, activeOperationId: a, onActivateOperation: o, onCloseOperation: s, getFileAttribute: c, setFileAttribute: l }) => {
 	let d = i.find((e) => e.id === a);
 	if (d?.renderInlineUI || d?.renderExtendedUI) return null;
 	let f = i.map((i) => {
@@ -742,15 +742,15 @@ var M = "comments", N = (e, t) => {
 			isActive: i.id === a,
 			onActivateOperation: o,
 			onCloseOperation: s,
-			getFileAttribute: l,
-			setFileAttribute: u
+			getFileAttribute: c,
+			setFileAttribute: l
 		}), f = typeof i.title == "function" ? i.title(t) : i.title;
 		if (!f) return null;
 		let p = typeof i.ariaLabel == "function" ? i.ariaLabel(t) : i.ariaLabel;
 		return e`<button
         type="button"
         class="pkt-fileupload__queue-display__item__operation"
-        aria-label=${c(p)}
+        aria-label=${u(p)}
         ?disabled=${n}
         @click=${() => {
 			(i.renderInlineUI || i.renderExtendedUI) && d.activate(), i.onClick?.(d);
@@ -818,8 +818,8 @@ var M = "comments", N = (e, t) => {
     ></pkt-icon>
     ${B(i, n, r)}
   `;
-}, Z = ({ file: t, thumbnailUrl: n, previewEnabled: r, canOpenPreview: i, truncateTail: a, strings: o, onOpenPreview: l, onThumbnailImageError: d }) => {
-	let f = A(t), p = !!n, m = !!r && !!i, h = m && !!l;
+}, Z = ({ file: t, thumbnailUrl: n, previewEnabled: r, canOpenPreview: i, truncateTail: a, strings: o, onOpenPreview: c, onThumbnailImageError: d }) => {
+	let f = A(t), p = !!n, m = !!r && !!i, h = m && !!c;
 	return e`
     <div
       class=${s({
@@ -830,10 +830,10 @@ var M = "comments", N = (e, t) => {
       <button
         type="button"
         class="pkt-fileupload__queue-display__item__thumbnail__image-wrapper pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--label-only"
-        aria-label=${u(o.previewImage, { filename: f })}
+        aria-label=${l(o.previewImage, { filename: f })}
         ?disabled=${!h}
         @click=${() => {
-		!h || !l || l(t.fileId);
+		!h || !c || c(t.fileId);
 	}}
       >
         <span class="pkt-btn__text">
@@ -843,7 +843,7 @@ var M = "comments", N = (e, t) => {
                 aria-hidden="true"
               ></pkt-icon>` : null}
           ${p ? e`<img
-                src=${c(n)}
+                src=${u(n)}
                 alt=${f}
                 @error=${() => d?.(t.fileId)}
               />` : e`<pkt-icon
@@ -1160,23 +1160,23 @@ var M = "comments", N = (e, t) => {
           <input
             id=${`${this.id}-input`}
             type="file"
-            name=${c(this.uploadStrategy === "form" ? this.name : void 0)}
-            form=${c(this.form)}
+            name=${u(this.uploadStrategy === "form" ? this.name : void 0)}
+            form=${u(this.form)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
             ?required=${this.required && this.uploadStrategy === "form"}
             accept=${this.getResolvedAcceptValue()}
-            aria-label=${c(this.label ? void 0 : this.multiple ? this.pktStrings.get("fileupload").openFileDialogLabelMultiple : this.pktStrings.get("fileupload").openFileDialogLabelSingle)}
-            aria-required=${c(this.required ? "true" : void 0)}
-            aria-invalid=${c(this.hasEffectiveError ? "true" : void 0)}
-            aria-describedby=${c(a)}
+            aria-label=${u(this.label ? void 0 : this.multiple ? this.pktStrings.get("fileupload").openFileDialogLabelMultiple : this.pktStrings.get("fileupload").openFileDialogLabelSingle)}
+            aria-required=${u(this.required ? "true" : void 0)}
+            aria-invalid=${u(this.hasEffectiveError ? "true" : void 0)}
+            aria-describedby=${u(a)}
             @change=${this.onNativeFileChange}
           />
           ${this.uploadStrategy === "custom" ? t.map((t) => e`<input
                     type="hidden"
                     name=${this.name}
                     value=${t.fileId}
-                    form=${c(this.form)}
+                    form=${u(this.form)}
                   />`) : null}
           <div class="pkt-fileupload__drop-zone__placeholder">
             <pkt-icon
@@ -1313,7 +1313,7 @@ var M = "comments", N = (e, t) => {
           ${i ? e`<button
                 type="button"
                 class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
-                aria-label=${u(n.previewPrevious, {
+                aria-label=${l(n.previewPrevious, {
 			index: this.previewCurrentIndex,
 			total: t.length
 		})}
@@ -1330,7 +1330,7 @@ var M = "comments", N = (e, t) => {
           <div class="pkt-fileupload__image-preview__content">
             ${o ? e`<img
                   src=${a}
-                  alt=${u(n.previewImageAlt, {
+                  alt=${l(n.previewImageAlt, {
 			filename: s,
 			index: this.previewCurrentIndex + 1,
 			total: t.length
@@ -1350,7 +1350,7 @@ var M = "comments", N = (e, t) => {
           ${i ? e`<button
                 type="button"
                 class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
-                aria-label=${u(n.previewNext, {
+                aria-label=${l(n.previewNext, {
 			index: this.previewCurrentIndex + 2,
 			total: t.length
 		})}