@vectoriox/iox-ui 5.15.0 → 5.17.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -559,9 +559,11 @@ class BuilderImageComponent {
         this.alt = 'Image';
         this.nodeId = '';
         /**
-         * What a MARKED image shows while it has no source (design-system DS3) — set by each renderer from
-         * the shared `emptyImageSrc` (`@vectoriox/iox-ui/design-core`): the "Add image" label on the canvas,
-         * the blank on the live site, `null` for an unmarked image, which therefore renders as before.
+         * What a MARKED image shows WHENEVER it has no source (design-system DS3) — set by each renderer
+         * from the shared `emptyImagePlaceholder` (`@vectoriox/iox-ui/design-core`): the "Add image" label
+         * on the canvas, the blank on the live site, `null` for an unmarked image, which therefore renders
+         * as before. It does not depend on `src`, so clearing the source (a binding emptied, a context slot
+         * not yet filled) shows it with no re-render; a renderer re-sets it only when the MARKER changes.
          */
         this.emptySrc = null;
     }
@@ -578,18 +580,33 @@ class BuilderImageComponent {
     get srcAttr() {
         return this.src || this.emptySrc || null;
     }
+    get showsPlaceholder() {
+        return !this.src && !!this.emptySrc;
+    }
     /** `data-iox-empty` while the placeholder stands in — the hook the shared fill rule keys on. */
     get emptyAttr() {
-        return !this.src && this.emptySrc ? '' : null;
+        return this.showsPlaceholder ? '' : null;
+    }
+    /**
+     * The placeholder is not the author's picture, so it never carries the author's alt: it is
+     * decorative (`alt=""`) and hidden from assistive technology — on the live site, in Preview and on
+     * the canvas alike (the canvas label is painted inside the placeholder, not announced as content).
+     */
+    get altAttr() {
+        return this.showsPlaceholder ? '' : this.alt;
+    }
+    get ariaHiddenAttr() {
+        return this.showsPlaceholder ? 'true' : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderImageComponent, isStandalone: false, selector: "img[iox-img]", inputs: { src: "src", alt: "alt", nodeId: "nodeId", emptySrc: "emptySrc" }, host: { properties: { "attr.src": "srcAttr", "attr.alt": "alt", "attr.data-iox-empty": "emptyAttr", "class": "'iox-node-' + nodeId" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;max-width:100%}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderImageComponent, isStandalone: false, selector: "img[iox-img]", inputs: { src: "src", alt: "alt", nodeId: "nodeId", emptySrc: "emptySrc" }, host: { properties: { "attr.src": "srcAttr", "attr.alt": "altAttr", "attr.aria-hidden": "ariaHiddenAttr", "attr.data-iox-empty": "emptyAttr", "class": "'iox-node-' + nodeId" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;max-width:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img[iox-img]', template: '', host: {
                         '[attr.src]': 'srcAttr',
-                        '[attr.alt]': 'alt',
+                        '[attr.alt]': 'altAttr',
+                        '[attr.aria-hidden]': 'ariaHiddenAttr',
                         '[attr.data-iox-empty]': 'emptyAttr',
                         '[class]': "'iox-node-' + nodeId",
                     }, standalone: false, styles: [":host{display:block;max-width:100%}\n"] }]
@@ -737,6 +754,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /**
  * Directive-host link: the `<a>` IS the host — no wrapper. Content is the label; styles come from
  * `.iox-node` (the legacy `style` input is kept for builder compat but no longer inline-applied).
+ *
+ * Outside a preview (`IS_PREVIEW` unprovided — the editing canvas, the design sampler) the link keeps
+ * its real `href` so it LOOKS like the live site's (the UA link styles key on it) and stays clickable
+ * so the canvas can select it, but no click navigates: plain, modified (cmd/ctrl/shift) and middle
+ * clicks all have their default cancelled here.
  */
 class BuilderLinkComponent {
     constructor(isPreview) {
@@ -761,16 +783,16 @@ class BuilderLinkComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderLinkComponent, deps: [{ token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderLinkComponent, isStandalone: false, selector: "a[iox-link]", inputs: { nodeId: "nodeId", label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, host: { listeners: { "click": "onLinkClick($event)" }, properties: { "attr.href": "isPreview ? resolvedHref : null", "attr.target": "isPreview ? target : null", "style.pointer-events": "isPreview ? null : 'none'", "class": "'builder-link iox-node-' + nodeId" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline;cursor:pointer}:host:where(:not(.iox-es)){color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderLinkComponent, isStandalone: false, selector: "a[iox-link]", inputs: { nodeId: "nodeId", label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, host: { listeners: { "click": "onLinkClick($event)", "auxclick": "onLinkClick($event)" }, properties: { "attr.href": "resolvedHref", "attr.target": "target", "class": "'builder-link iox-node-' + nodeId" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline;cursor:pointer}:host:where(:not(.iox-es)){color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[iox-link]', template: `{{ label }}`, host: {
-                        '[attr.href]': "isPreview ? resolvedHref : null",
-                        '[attr.target]': "isPreview ? target : null",
-                        '[style.pointer-events]': "isPreview ? null : 'none'",
+                        '[attr.href]': 'resolvedHref',
+                        '[attr.target]': 'target',
                         '[class]': "'builder-link iox-node-' + nodeId",
                         '(click)': 'onLinkClick($event)',
+                        '(auxclick)': 'onLinkClick($event)',
                     }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline;cursor:pointer}:host:where(:not(.iox-es)){color:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -1131,6 +1153,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+/** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
+const NAVIGATING_CLICKS = ['click', 'auxclick'];
 /** Directive-host linked container: the `<a>` IS the host — no wrapper, no inner/outer split. */
 class LinkedContainerComponent {
     constructor(elRef, isPreview) {
@@ -1145,12 +1169,14 @@ class LinkedContainerComponent {
     }
     ngOnInit() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.addEventListener(type, this.capturePreventDefault, true);
         }
     }
     ngOnDestroy() {
         if (!this.isPreview) {
-            this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
+            for (const type of NAVIGATING_CLICKS)
+                this.elRef.nativeElement.removeEventListener(type, this.capturePreventDefault, true);
         }
     }
     get resolvedHref() {