@ngstarter-ui/components 1.0.34 → 1.0.35

package/ai/component-registry.json

@@ -4905,8 +4905,8 @@
       "sourceRoot": "projects/components/input-mask/src",
       "docsPath": "/forms/input-mask",
       "docsOverviewSource": "projects/docs/src/app/forms/input-mask/overview/overview.html",
-      "purpose": "Constrain text entry to a specific pattern.",
-      "useWhen": "Use for phone numbers, IDs, codes, formatted numbers, and structured text.",
+      "purpose": "Format credit card input fields while the user types with ready-made mask directives.",
+      "useWhen": "Use on native inputs, usually with ngsInput inside ngs-form-field, for payment or billing fields that need credit card formatting. Available directives are ngsCreditCardNumberMask for grouped card numbers, ngsCreditCardExpiryDateMask for MM/YY expiry, and ngsCreditCardCvvMask for CVV/CVC. The directives format the visible input, set useful mobile keyboard and autocomplete attributes where applicable, and keep the Angular form value cleaned for card number and expiry. Do not use as a universal mask engine, validator, payment security layer, or compliance solution. Do not use for phone numbers; use PhoneInput. Do not use for custom IDs, tax numbers, IBAN, postal codes, arbitrary structured text, date pickers, selects, currency fields, country fields, or formatting saved display values; use dedicated components, validators, backend checks, or a custom mask directive.",
       "exampleTopics": [
         "Credit card number input mask",
         "Credit card expiry date input mask",
@@ -4964,16 +4964,19 @@
       "sourceRoot": "projects/components/input-validator/src",
       "docsPath": "/forms/input-validator",
       "docsOverviewSource": "projects/docs/src/app/forms/input-validator/overview/overview.html",
-      "purpose": "Validate user input and show validation feedback.",
-      "useWhen": "Use for forms that need reusable client-side validation behavior.",
+      "purpose": "Provide ready-made Angular ValidatorFn helpers for common reusable form validation rules.",
+      "useWhen": "Use in reactive forms with ngs-form-field, ngsInput, Angular Validators, and ngs-error when a preset client-side validator fits. Current payment presets include creditCardNumberValidator() for cleaned card number length and Luhn checksum, expiryDateValidator() for MMYY expiry format, valid month, and not-in-past checks, and creditCardCvvValidator() for numeric CVV/CVC length with optional minLength and maxLength. Pair these validators with InputMask directives when the user also needs formatted payment input. Do not use InputValidator as a UI component, input formatter, input mask, replacement for Angular built-in validators, backend validation, payment processor validation, or security/compliance layer. Do not use for arbitrary custom business rules unless a dedicated preset exists; write a project validator.",
       "exampleTopics": [
-        "Credit card input validator"
+        "Credit card input validators"
       ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/input-validator/preview.svg",
       "selectors": [],
       "exportedSymbols": [
+        "creditCardCvvValidator",
+        "CreditCardCvvValidatorOptions",
+        "creditCardNumberValidator",
         "expiryDateValidator"
       ],
       "inputs": [],
@@ -4992,9 +4995,11 @@
       "sourceRoot": "projects/components/kanban-board/src",
       "docsPath": "/libraries/kanban-board",
       "docsOverviewSource": "projects/docs/src/app/libraries/kanban-board/overview/overview.html",
-      "purpose": "Organize items into draggable workflow columns.",
-      "useWhen": "Use for tasks, deals, issues, content pipelines, and status-based workflows.",
-      "exampleTopics": [],
+      "purpose": "Render a horizontal workflow board with status columns and draggable cards.",
+      "useWhen": "Use ngs-kanban-board for tasks, issues, CRM deals, hiring pipelines, content workflows, support tickets, and other status-based boards where users drag items within a column or between columns. Provide columns with id, name, color, and items; each item should include at least name and position. Render cards through a custom ngsKanbanItemDef template and compose card content with NgStarter components such as Avatar, Badge, Icon, Button, and text. The board mutates local arrays with CDK moveItemInArray and transferArrayItem and emits itemSorted, itemTransferred, itemDropped, itemClick, itemAdd, columnEdit, and columnDelete; the app must persist the new order, status, and business data to the backend. Do not use for simple record tables; use Table or DataView. Do not use for static lists; use List. Do not use for dashboard widget layouts; use Grid. Do not use for calendars, timelines, arbitrary drag-and-drop builders, or screens without real workflow/status columns.",
+      "exampleTopics": [
+        "Kanban Board"
+      ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/kanban-board/preview.svg",
@@ -5042,8 +5047,8 @@
       "sourceRoot": "projects/components/kbd/src",
       "docsPath": "/components/kbd",
       "docsOverviewSource": "projects/docs/src/app/components/kdb/overview/overview.html",
-      "purpose": "Render keyboard keys or shortcuts.",
-      "useWhen": "Use in help text, command menus, docs, and power-user workflows.",
+      "purpose": "Display visual keyboard keys and shortcut hints.",
+      "useWhen": "Use ngs-kbd for a single key such as Cmd, Shift, K, Esc, or an arrow key, and ngs-kbd-group for key combinations with plus signs between keys. Use in menus, command palettes, toolbars, help text, onboarding, documentation, and shortcut hints next to commands. Kbd is visual only: it does not register shortcuts, handle keyboard events, trigger actions, or provide command logic. Do not use as a clickable button; use Button or IconButton. Do not use for statuses or counts; use Badge. Do not use for tags or categories; use Chips. Do not use as normal body text or for actions that do not have a real shortcut handled elsewhere.",
       "exampleTopics": [
         "Basic Keyboard",
         "Keyboard group",
@@ -5102,8 +5107,8 @@
       "sourceRoot": "projects/components/layout/src",
       "docsPath": "/components/layout",
       "docsOverviewSource": "projects/docs/src/app/components/layout/overview/overview.html",
-      "purpose": "Compose common app layout regions for admin and dashboard screens.",
-      "useWhen": "Use for shells, page scaffolding, content/sidebar layouts, and structural UI.",
+      "purpose": "Provide the base top-level shell for an application, admin area, dashboard, or large workspace page.",
+      "useWhen": "Use ngs-layout as the outer structural frame when the whole screen needs topbar, header, sidebar, scrollable content, aside, or footer regions. Use root for a full viewport application shell. Use ngs-layout-content for the main scroll container, and LayoutApiService with layoutId when the sidebar must be shown, hidden, or toggled. Nested layouts are appropriate when a large app shell contains another structured workspace with its own header/content/footer. Do not use Layout as a small wrapper, card, spacing helper, form grouping tool, or generic grid system. Use TailwindCSS grid, flex, and spacing classes inside layout regions. Use Grid for dashboard widgets, DataView or Table for datasets, Drawer for overlay side panels, and Navigation, Sidebar, or Sidenav components inside sidebars.",
       "exampleTopics": [
         "Layout header",
         "Layout sidebar",
@@ -5183,8 +5188,8 @@
       "sourceRoot": "projects/components/list/src",
       "docsPath": "/components/list",
       "docsOverviewSource": "projects/docs/src/app/components/list/overview/overview.html",
-      "purpose": "Display repeated rows of related content or actions.",
-      "useWhen": "Use for navigation-adjacent lists, settings rows, activity feeds, and item collections.",
+      "purpose": "Display a vertical group of related rows with consistent icon, avatar, title, line, meta, action, and selection structure.",
+      "useWhen": "Use ngs-list with ngs-list-item for settings rows, files, messages, activity feed items, compact collections, simple action rows, and small repeated row groups. Use ngs-selection-list with ngs-list-option when users choose one or more rows. Use ngs-nav-list for simple navigation rows in sidebars or compact navigation areas. Use ngs-action-list for vertical action groups that are not dropdown menus. Compose each row with ngsListItemIcon or ngsListItemAvatar, ngsListItemTitle, ngsListItemLine, and ngsListItemMeta. Do not use List for large tabular datasets, columns, sorting, pagination, or bulk operations; use Table or DataView. Do not use for trigger-based dropdown or context actions; use Menu. Do not use as a full app navigation system when Navigation fits better. Do not use as a generic layout container.",
       "exampleTopics": [
         "Basic List",
         "List With Sections",
@@ -5299,8 +5304,8 @@
       "sourceRoot": "projects/components/logo/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Render NgStarter or product logo variants.",
-      "useWhen": "Use in app shells, headers, auth pages, and branding areas.",
+      "purpose": "Render a product or brand logo as a composed mark, name, and optional description.",
+      "useWhen": "Use ngs-logo or a[ngs-logo] in app shells, headers, sidebars, auth screens, splash screens, and branding areas. Compose it with ngs-logo-shape for the brand mark or image, ngs-logo-text for the product name with size small, default, or large, and ngs-logo-description for a short subtitle, version, or status. Use a[ngs-logo] when the logo navigates to the home page. Do not use Logo for user or team identity; use Avatar. Do not use for standalone action icons; use Icon inside Button or IconButton. Do not use for product thumbnails, decorative images, empty states, arbitrary SVG illustrations, or general image display.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -5347,8 +5352,8 @@
       "sourceRoot": "projects/components/marquee/src",
       "docsPath": "/components/marquee",
       "docsOverviewSource": "projects/docs/src/app/components/marquee/overview/overview.html",
-      "purpose": "Animate a horizontal stream of repeated content.",
-      "useWhen": "Use for compact announcements, logos, highlights, and non-critical decorative motion.",
+      "purpose": "Display an infinite horizontal stream of repeated non-critical content.",
+      "useWhen": "Use ngs-marquee for motion content that can move and repeat without losing meaning: promo text, short highlights, logos, badges, partner names, compact news, and decorative content showcases. Use reverse to change direction. Use pauseOnHover when users may need more time to read or interact with the moving content. Do not use Marquee for important system notices, errors, warnings, required actions, or content the user must read; use Announcement, Alert, ActionRequired, or Incidents. Do not use for navigation, tables, task lists, precise ticker data, forms, or interactive work surfaces.",
       "exampleTopics": [
         "Basic marquee",
         "Marquee reverse",
@@ -5409,8 +5414,8 @@
       "sourceRoot": "projects/components/menu/src",
       "docsPath": "/components/menu",
       "docsOverviewSource": "projects/docs/src/app/components/menu/overview/overview.html",
-      "purpose": "Show contextual action lists anchored to a trigger.",
-      "useWhen": "Use for row actions, overflow menus, user menus, context menus, and toolbars.",
+      "purpose": "Show a short contextual set of commands in an overlay opened from a trigger or right-click area.",
+      "useWhen": "Use ngs-menu for row actions, overflow more actions, user menus, context menus, toolbar actions, and nested command groups. Put ngsMenuTriggerFor on a button ngsButton, button ngsIconButton, row action, or toolbar control. Use ngsContextMenuTriggerFor for right-click menus. Use button ngs-menu-item for commands, and ngs-menu-divider, ngs-menu-heading, ngs-menu-header, and ngs-menu-footer for structure. Use nested menus when a command opens a secondary command group. Use ngsMenuContent with ngsMenuTriggerData when the same menu template must render lazily for a specific row, user, or item. Do not use Menu for selecting form values; use Select, Autocomplete, ColorSwitcher, Datepicker, or another dedicated form control. Do not use for persistent navigation; use Navigation, Sidebar, Sidenav, or NavList. Do not use for long lists, tables, filters, forms, modal workflows, command palettes, or bulk action bars; use List, Table/DataView, Dialog, CommandBar, or Overlay/Popover as appropriate.",
       "exampleTopics": [
         "Basic Menu",
         "Menu With Icons",
@@ -5555,8 +5560,8 @@
       "sourceRoot": "projects/components/micro-chart/src",
       "docsPath": "/micro-charts",
       "docsOverviewSource": null,
-      "purpose": "Render compact inline charts for small dashboard metrics.",
-      "useWhen": "Use in KPI cards, table cells, summaries, and dense analytics panels.",
+      "purpose": "Render compact line, bar, and pie charts for small trends, comparisons, and proportional breakdowns.",
+      "useWhen": "Use ngs-mchart-line for a small trend over time or ordered values, ngs-mchart-bar for a compact comparison of several numeric values, and ngs-mchart-pie for a small proportional breakdown. Use MicroChart inside KPI cards, dashboard summaries, table cells, list rows, reports, and dense admin panels. It can also be used as a simple standalone dashboard chart when the chart type and level of detail match what MicroChart can display. Provide fixed dimensions with TailwindCSS classes such as w-*, h-*, or size-* because the chart renders inside its container. Use ngs-mchart-tooltip, ngs-mchart-tooltip-title, and ngs-mchart-tooltip-body when hover context is needed. Do not use MicroChart for complex analytics, detailed axes, advanced legends, drilldown, zooming, financial charting, or advanced interactions; use ECharts for complex charts. Do not use instead of ProgressBar or Gauge for a single progress percentage, Badge for status, or DataView/Table for tabular data.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -5655,8 +5660,8 @@
       "sourceRoot": "projects/components/navigation/src",
       "docsPath": "/navigation/navigation",
       "docsOverviewSource": "projects/docs/src/app/navigation/nav/overview/overview.html",
-      "purpose": "Render primary or secondary navigation structures.",
-      "useWhen": "Use in app shells, sidebars, product sections, and nested admin navigation.",
+      "purpose": "Render a persistent product navigation structure when ngs-sidebar is not used.",
+      "useWhen": "Use ngs-navigation for custom navigation areas, section navigation, settings navigation, admin navigation, and nested navigation groups when the screen needs product links but does not use ngs-sidebar. ngs-sidebar has its own navigation model, so do not duplicate ngs-navigation inside ngs-sidebar. Use ngs-navigation-item or [ngs-navigation-item] for destinations, key with activeKey for active state, activateByRoute for URL-based activation, autoScrollToActiveItem for long navigation, ngs-navigation-heading for sections, ngs-navigation-divider for group separation, and ngs-navigation-group with ngs-navigation-group-toggle and ngs-navigation-group-menu for expandable nested destinations. Use ngsNavigationItemIcon, ngsNavigationGroupToggleIcon, and ngsNavigationItemBadge for icons, toggles, and badges. Use dataSource with ngsNavigationItemDef when navigation comes from config or backend data. Do not use Navigation for trigger-based action menus; use Menu. Do not use for ordinary row lists; use List or NavList. Do not use for breadcrumbs, tabs, wizard steps, command palettes, form selection, table row actions, or bulk actions.",
       "exampleTopics": [
         "Basic Navigation",
         "Navigation with heading",
@@ -5858,8 +5863,8 @@
       "sourceRoot": "projects/components/notifications/src",
       "docsPath": "/components/notifications",
       "docsOverviewSource": "projects/docs/src/app/components/notifications/overview/overview.html",
-      "purpose": "Display notification lists, notification items, or notification surfaces.",
-      "useWhen": "Use for user alerts, activity updates, inbox-style feeds, and app header popovers.",
+      "purpose": "Display user-facing notification events in a structured feed or inbox.",
+      "useWhen": "Use Notifications for events addressed to the current user: comments, mentions, invitations, assignments, access requests, status changes, completed processes, and user-specific updates. Use ngs-notification for one event, ngsNotificationAvatar for the source avatar or icon, ngs-notification-message for the main sentence, ngs-notification-actor for the actor, ngs-notification-content for nested context such as a comment, file, quote, card, or preview, and ngs-notification-time for time. Use isUnread for unread state. Use ngs-notification-list with ngsNotificationDef when notifications come from an array and each type needs its own template. Use ngsNotificationControlsDef for per-notification controls such as mute, delete, or mark as read, often with Menu. Do not use Notifications for page-level system messages; use Alert or Announcement. Do not use for critical required actions; use ActionRequired. Do not use for service health; use Incidents. Do not use for generic activity feeds that are not user notifications; use List. Do not use for transient toast/snackbar messages.",
       "exampleTopics": [
         "Basic notifications",
         "Notification list"
@@ -5951,8 +5956,8 @@
       "sourceRoot": "projects/components/number-input/src",
       "docsPath": "/forms/number-input",
       "docsOverviewSource": "projects/docs/src/app/forms/number-input/overview/overview.html",
-      "purpose": "Capture numeric values with appropriate controls and formatting.",
-      "useWhen": "Use for quantities, limits, pricing, thresholds, and numeric settings.",
+      "purpose": "Capture a numeric form value with typing, stepper controls, min/max limits, and Angular forms integration.",
+      "useWhen": "Use ngs-number-input inside one ngs-form-field when users need to type a number or adjust it with increase/decrease controls. Good for quantities, limits, thresholds, durations, percentages, ratings, numeric settings, seat counts, day counts, and budget-like numeric values. Use ngModel or formControlName, min and max for allowed bounds, step for increment/decrement size, readonly/disabled/required as normal form states, and ngsDecreaseControl or ngsIncreaseControl only when custom control icons are needed. Use TailwindCSS classes on ngs-form-field or surrounding layout for width and grouping. Do not use for normal text; use ngsInput. Do not use for phone numbers; use PhoneInput. Do not use for OTP, MFA, passcodes, or invite codes; use PinInput. Do not use for selecting currency; use CurrencySelect plus a numeric amount field when needed. Do not use for sliders/ranges, display-only KPI values, progress, or charts; use the dedicated component such as Gauge, ProgressBar, MicroChart, or a text/KPI layout.",
       "exampleTopics": [
         "Basic Number Input",
         "Custom Controls",
@@ -6043,8 +6048,8 @@
       "sourceRoot": "projects/components/option/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Provide reusable option primitives for select-like controls.",
-      "useWhen": "Use internally or alongside option-based components such as select and autocomplete.",
+      "purpose": "Provide a low-level selectable option primitive for Select, Autocomplete, and other option-parent controls.",
+      "useWhen": "Use ngs-option inside ngs-select, ngs-autocomplete, and other NgStarter dropdown/listbox controls that explicitly expect options, such as CountrySelect, CurrencySelect, DateFormatSelect, Timepicker, FilterBuilder, and similar controls. Use [value] for the form value and disabled when the option cannot be selected. Use ngs-optgroup to group related options under a label. Keep option text short and readable because the viewValue is derived from the rendered text. Do not use ngs-option as a generic list row, button, menu item, navigation item, table row, card, or custom layout block. Use MenuItem or Button for actions, Navigation/List/NavList for navigation and lists, RadioCard for rich card selection, and ColorSwitcher for fixed color choices. Agents usually should not import Option separately unless they are composing Select, Autocomplete, or another option-based component.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],

package/fesm2022/ngstarter-ui-components-input-validator.mjs

@@ -1,11 +1,48 @@
+const onlyDigits = (value) => {
+    return String(value ?? '').replace(/\D/g, '');
+};
+const isValidLuhn = (value) => {
+    let sum = 0;
+    let shouldDouble = false;
+    for (let i = value.length - 1; i >= 0; i--) {
+        let digit = Number(value[i]);
+        if (shouldDouble) {
+            digit *= 2;
+            if (digit > 9) {
+                digit -= 9;
+            }
+        }
+        sum += digit;
+        shouldDouble = !shouldDouble;
+    }
+    return sum % 10 === 0;
+};
+function creditCardNumberValidator() {
+    return (control) => {
+        const value = onlyDigits(control.value);
+        if (!value) {
+            return null;
+        }
+        if (value.length < 12 || value.length > 19 || !isValidLuhn(value)) {
+            return { creditCardNumberInvalid: true };
+        }
+        return null;
+    };
+}
 function expiryDateValidator() {
     return (control) => {
-        const value = control.value;
-        if (!value || value.length !== 4) {
+        const value = onlyDigits(control.value);
+        if (!value) {
             return null;
         }
+        if (value.length !== 4) {
+            return { expiryDateInvalid: true };
+        }
         const month = parseInt(value.substring(0, 2), 10);
         const year = parseInt(value.substring(2, 4), 10);
+        if (month < 1 || month > 12) {
+            return { expiryDateInvalid: true };
+        }
         const currentDate = new Date();
         const currentMonth = currentDate.getMonth() + 1;
         const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));
@@ -15,10 +52,29 @@ function expiryDateValidator() {
         return null;
     };
 }
+function creditCardCvvValidator(options = {}) {
+    const minLength = options.minLength ?? 3;
+    const maxLength = options.maxLength ?? 4;
+    return (control) => {
+        const value = onlyDigits(control.value);
+        if (!value) {
+            return null;
+        }
+        if (value.length < minLength || value.length > maxLength) {
+            return {
+                creditCardCvvInvalid: {
+                    minLength,
+                    maxLength,
+                },
+            };
+        }
+        return null;
+    };
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { expiryDateValidator };
+export { creditCardCvvValidator, creditCardNumberValidator, expiryDateValidator };
 //# sourceMappingURL=ngstarter-ui-components-input-validator.mjs.map

package/fesm2022/ngstarter-ui-components-input-validator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-input-validator.mjs","sources":["../../../projects/components/input-validator/src/expiry-date-validator.ts","../../../projects/components/input-validator/ngstarter-ui-components-input-validator.ts"],"sourcesContent":["import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\n\nexport function expiryDateValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = control.value as string;\n\n    if (!value || value.length !== 4) {\n      return null;\n    }\n\n    const month = parseInt(value.substring(0, 2), 10);\n    const year = parseInt(value.substring(2, 4), 10);\n    const currentDate = new Date();\n    const currentMonth = currentDate.getMonth() + 1;\n    const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));\n\n    if (year < currentYear || (year === currentYear && month < currentMonth)) {\n      return { expiryDateInPast: true };\n    }\n\n    return null;\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"SAEgB,mBAAmB,GAAA;IACjC,OAAO,CAAC,OAAwB,KAA6B;AAC3D,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAe;QAErC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACjD,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChD,QAAA,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE;QAC9B,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC;AAC/C,QAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAElF,QAAA,IAAI,IAAI,GAAG,WAAW,KAAK,IAAI,KAAK,WAAW,IAAI,KAAK,GAAG,YAAY,CAAC,EAAE;AACxE,YAAA,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE;QACnC;AAEA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AACH;;ACtBA;;AAEG;;;;"}
+{"version":3,"file":"ngstarter-ui-components-input-validator.mjs","sources":["../../../projects/components/input-validator/src/expiry-date-validator.ts","../../../projects/components/input-validator/ngstarter-ui-components-input-validator.ts"],"sourcesContent":["import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\n\nconst onlyDigits = (value: unknown): string => {\n  return String(value ?? '').replace(/\\D/g, '');\n};\n\nconst isValidLuhn = (value: string): boolean => {\n  let sum = 0;\n  let shouldDouble = false;\n\n  for (let i = value.length - 1; i >= 0; i--) {\n    let digit = Number(value[i]);\n\n    if (shouldDouble) {\n      digit *= 2;\n      if (digit > 9) {\n        digit -= 9;\n      }\n    }\n\n    sum += digit;\n    shouldDouble = !shouldDouble;\n  }\n\n  return sum % 10 === 0;\n};\n\nexport function creditCardNumberValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length < 12 || value.length > 19 || !isValidLuhn(value)) {\n      return { creditCardNumberInvalid: true };\n    }\n\n    return null;\n  };\n}\n\nexport function expiryDateValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length !== 4) {\n      return { expiryDateInvalid: true };\n    }\n\n    const month = parseInt(value.substring(0, 2), 10);\n    const year = parseInt(value.substring(2, 4), 10);\n\n    if (month < 1 || month > 12) {\n      return { expiryDateInvalid: true };\n    }\n\n    const currentDate = new Date();\n    const currentMonth = currentDate.getMonth() + 1;\n    const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));\n\n    if (year < currentYear || (year === currentYear && month < currentMonth)) {\n      return { expiryDateInPast: true };\n    }\n\n    return null;\n  };\n}\n\nexport interface CreditCardCvvValidatorOptions {\n  minLength?: number;\n  maxLength?: number;\n}\n\nexport function creditCardCvvValidator(options: CreditCardCvvValidatorOptions = {}): ValidatorFn {\n  const minLength = options.minLength ?? 3;\n  const maxLength = options.maxLength ?? 4;\n\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length < minLength || value.length > maxLength) {\n      return {\n        creditCardCvvInvalid: {\n          minLength,\n          maxLength,\n        },\n      };\n    }\n\n    return null;\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngstarter-ui/components",
   "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "repository": {
     "type": "git",
     "url": "https://github.com/elementarlabsdev/ngstarter.git"

package/types/ngstarter-ui-components-input-validator.d.ts

@@ -1,5 +1,12 @@
 import { ValidatorFn } from '@angular/forms';
 
+declare function creditCardNumberValidator(): ValidatorFn;
 declare function expiryDateValidator(): ValidatorFn;
+interface CreditCardCvvValidatorOptions {
+    minLength?: number;
+    maxLength?: number;
+}
+declare function creditCardCvvValidator(options?: CreditCardCvvValidatorOptions): ValidatorFn;
 
-export { expiryDateValidator };
+export { creditCardCvvValidator, creditCardNumberValidator, expiryDateValidator };
+export type { CreditCardCvvValidatorOptions };