@besaitech/ng-design-system 0.0.46 → 0.0.48

package/fesm2022/besaitech-ng-design-system.mjs

@@ -10260,26 +10260,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDetails", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], avatarBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarBgClass", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 /**
- * A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders
- * an anchor when [link] is set — with the Router — or a button otherwise, and emits {@link select} on
- * activation. The parent menu closes itself when an item is activated, so an item never has to reach
- * back into the menu.
+ * A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders,
+ * in order of precedence: a plain anchor when [href] is set (an EXTERNAL or cross-origin URL), a
+ * Router anchor when [link] is set (an in-app route), or a button otherwise. It always emits
+ * {@link select} on activation. The parent menu closes itself when an item is activated, so an item
+ * never has to reach back into the menu.
  *
  * `tone="danger"` paints a destructive action (sign out, delete). Trailing content (a shortcut hint, a
  * count) projects into the default slot after the label.
  *
  * @example
- * <sds-menu-item icon="user" label="Profil" link="/profile" />
+ * <sds-menu-item icon="user" label="Profil" link="/profile" />                          <!-- in-app route -->
+ * <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
  * <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
  */
 class SdsMenuItem {
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Router link target; when null (default) the item renders as a button. */
+    /** Router link target for an in-app route; when null (default) the item is not a Router link. */
     link = input(null, ...(ngDevMode ? [{ debugName: "link" }] : []));
+    /**
+     * External / cross-origin URL. When set, the item renders a plain `<a [href]>` (NOT a Router link),
+     * so it works for another app's origin. Takes precedence over {@link link}.
+     */
+    href = input(null, ...(ngDevMode ? [{ debugName: "href" }] : []));
+    /** Anchor target for {@link href}, e.g. `_blank` to open the destination in a new tab. */
+    target = input(null, ...(ngDevMode ? [{ debugName: "target" }] : []));
+    /**
+     * `rel` for {@link href}. Defaults to `noopener noreferrer` when {@link target} is `_blank` (the safe
+     * default for a new-tab external link); pass a value to override, or `''` to clear it.
+     */
+    rel = input(null, ...(ngDevMode ? [{ debugName: "rel" }] : []));
     tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     select = output();
+    /** `noopener noreferrer` is forced for a `_blank` external link unless the consumer set `rel` explicitly. */
+    resolvedRel = computed(() => this.rel() !== null ? this.rel() : this.target() === '_blank' ? 'noopener noreferrer' : null, ...(ngDevMode ? [{ debugName: "resolvedRel" }] : []));
     rowClass = computed(() => {
         const base = 'flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ' +
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset ' +
@@ -10290,8 +10306,18 @@ class SdsMenuItem {
         return `${base} ${tone}`;
     }, ...(ngDevMode ? [{ debugName: "rowClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMenuItem, isStandalone: true, selector: "sds-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    @if (link() !== null) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMenuItem, isStandalone: true, selector: "sds-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (href() !== null) {
+      <a
+        [href]="href()"
+        [attr.target]="target()"
+        [attr.rel]="resolvedRel()"
+        [class]="rowClass()"
+        (click)="select.emit()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else if (link() !== null) {
       <a [routerLink]="link()" [class]="rowClass()" (click)="select.emit()">
         <ng-container [ngTemplateOutlet]="content" />
       </a>
@@ -10318,7 +10344,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     imports: [NgTemplateOutlet, RouterLink, SdsIcon],
                     host: { class: 'block' },
                     template: `
-    @if (link() !== null) {
+    @if (href() !== null) {
+      <a
+        [href]="href()"
+        [attr.target]="target()"
+        [attr.rel]="resolvedRel()"
+        [class]="rowClass()"
+        (click)="select.emit()"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else if (link() !== null) {
       <a [routerLink]="link()" [class]="rowClass()" (click)="select.emit()">
         <ng-container [ngTemplateOutlet]="content" />
       </a>
@@ -10337,7 +10373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </ng-template>
   `,
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 const norm = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
 /**