@besaitech/ng-design-system 0.0.47 → 0.0.49

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

@@ -80,6 +80,8 @@ const SDS_ICONS = {
     'chevrons-up-down': '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
     filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
     table: '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
+    // Contactless ordering: every restaurant table gets its own QR code (Belvigo merchant nav).
+    'qr-code': '<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>',
     eye: '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
     // Pairs with `eye` for password reveal. Without it a show/hide toggle has no second state to draw,
     // and aria-pressed alone leaves sighted users with no visible change.
@@ -10260,26 +10262,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 +10308,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 +10346,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 +10375,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();
 /**