@besaitech/ng-design-system 0.0.11 → 0.0.16

package/README.md

@@ -24,12 +24,7 @@ phone input, plus the app shell (top bar + sidebar).
 npm install @besaitech/ng-design-system
 ```
 
-Published to the public npm registry, so no `.npmrc` and no read token are needed.
-
-> Earlier releases were served from an internal GitLab Package Registry and this section carried the
-> `@besaitech:registry=…` + `_authToken=…` lines for it. Those instructions no longer match where the
-> package comes from — following them against a public install yields a 401 for a registry you do not
-> need to reach.
+Public npm registry — no `.npmrc`, no scope mapping and no read token required.
 
 ## 2. Tailwind setup
 
@@ -67,14 +62,17 @@ This is the step that makes the components look right. Tailwind v4 is CSS-first
    Path is relative to THIS file (src/styles.css → ../node_modules). */
 @source "../node_modules/@besaitech/ng-design-system";
 
-/* Brand ramp: pick a theme preset. Must come AFTER the tailwindcss import —
-   Tailwind v4 processes @theme in imported files and later declarations win. */
+/* Tokens. BOTH imports are required, and both must come AFTER the tailwindcss import —
+   Tailwind v4 processes @theme in imported files and later declarations win.
+   base.css = surfaces, ink, accents, status, radius, layout vars (15 tokens).
+   The brand preset = the 11 --color-brand-* steps, and nothing else. */
+@import "@besaitech/ng-design-system/themes/base.css";
 @import "@besaitech/ng-design-system/themes/saitech.css";  /* blues */
 /* @import "@besaitech/ng-design-system/themes/belvigo.css";   black */
 
-/* Everything else is yours to tune (Tailwind utilities + CSS vars). */
+/* Override any base default in your own @theme afterwards, e.g. the typeface. */
 @theme {
-  /* Neutrals / surfaces */
+  /* Neutrals / surfaces (already provided by base.css — shown for reference) */
   --color-canvas: #f5f6f8;
   --color-surface: #ffffff;
   --color-muted: #f8f9fb;
@@ -207,7 +205,6 @@ Import names are the `Sl…` classes; the markup selectors are `sds-…`.
 
 | Symptom | Cause / fix |
 | --- | --- |
-| `404 Project not found` on install | `.npmrc` missing the `@besaitech:registry` line, or token lacks access to project 922 |
 | `403 insufficient_scope` | Token is missing `read_package_registry` scope |
 | Components render unstyled | Missing/incorrect `@source` line, or no theme preset imported (step 3b) |
 | Brand colours are wrong / absent | The theme preset is imported BEFORE `@import "tailwindcss"`, so it is overridden |

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, signal, forwardRef, viewChild, numberAttribute, afterRenderEffect, ElementRef, model, output, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -59,6 +59,9 @@ const SDS_ICONS = {
     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"/>',
     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.
+    'eye-off': '<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><path d="m2 2 20 20"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/>',
     user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
     'check-circle': '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
     'arrows-clockwise': '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/>',
@@ -264,6 +267,21 @@ class SdsInput {
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     leadingIcon = input(null, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : []));
     trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
+    /**
+     * A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
+     * above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
+     * `pointer-events-none`; a consumer who needed a working control previously had to abandon
+     * `sds-input` and rebuild the whole field, losing the label/error/aria wiring with it.
+     *
+     * Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
+     * unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
+     */
+    trailingAction = input(null, ...(ngDevMode ? [{ debugName: "trailingAction" }] : []));
+    /** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
+    trailingActionLabel = input('', ...(ngDevMode ? [{ debugName: "trailingActionLabel" }] : []));
+    /** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
+    trailingActionPressed = input(null, ...(ngDevMode ? [{ debugName: "trailingActionPressed" }] : []));
+    trailingActionClick = output();
     /** Current value (driven by CVA + user input). */
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
@@ -278,7 +296,7 @@ class SdsInput {
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldPadding = computed(() => {
         const left = this.leadingIcon() ? 'pl-10' : 'pl-3.5';
-        const right = this.trailingIcon() || this.clearable() ? 'pr-10' : 'pr-3.5';
+        const right = this.trailingIcon() || this.clearable() || this.trailingAction() ? 'pr-10' : 'pr-3.5';
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
@@ -325,7 +343,7 @@ class SdsInput {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsInput),
@@ -379,6 +397,18 @@ class SdsInput {
         >
           <sds-icon name="x" [size]="15" />
         </button>
+      } @else if (trailingAction()) {
+        <button
+          type="button"
+          [attr.aria-label]="trailingActionLabel() || null"
+          [attr.aria-pressed]="trailingActionPressed()"
+          [attr.aria-controls]="inputId"
+          class="absolute right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full
+                 opacity-70 hover:opacity-100 hover:bg-black/5"
+          (click)="trailingActionClick.emit()"
+        >
+          <sds-icon [name]="trailingAction()!" [size]="18" />
+        </button>
       } @else if (trailingIcon()) {
         <sds-icon
           [name]="trailingIcon()!"
@@ -465,6 +495,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         >
           <sds-icon name="x" [size]="15" />
         </button>
+      } @else if (trailingAction()) {
+        <button
+          type="button"
+          [attr.aria-label]="trailingActionLabel() || null"
+          [attr.aria-pressed]="trailingActionPressed()"
+          [attr.aria-controls]="inputId"
+          class="absolute right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full
+                 opacity-70 hover:opacity-100 hover:bg-black/5"
+          (click)="trailingActionClick.emit()"
+        >
+          <sds-icon [name]="trailingAction()!" [size]="18" />
+        </button>
       } @else if (trailingIcon()) {
         <sds-icon
           [name]="trailingIcon()!"
@@ -489,7 +531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
 let nextId$9 = 0;
 const SIZES$7 = {