{ "$schema": "https://ngstarter.com/schemas/component-registry.schema.json", "generatedBy": "scripts/generate-ai-metadata.mjs", "package": "@ngstarter-ui/components", "description": "AI-readable registry for NgStarter UI Angular secondary entry points.", "componentCount": 126, "conventions": { "importPattern": "@ngstarter-ui/components/", "selectorPrefix": "ngs", "themeTokenPrefix": "--ngs-", "themeStylesheetExample": "@use '@ngstarter-ui/components/styles/themes/default';" }, "recipes": [ { "name": "admin-dashboard", "description": "Build admin dashboards from NgStarter UI primitives instead of hand-rolled shell, cards, forms, datatables, static tables, and pagination.", "mustUse": [ "@ngstarter-ui/components/sidenav", "@ngstarter-ui/components/navigation", "@ngstarter-ui/components/card", "@ngstarter-ui/components/data-view", "@ngstarter-ui/components/table", "@ngstarter-ui/components/form-field", "@ngstarter-ui/components/input", "@ngstarter-ui/components/paginator", "@ngstarter-ui/components/button", "@ngstarter-ui/components/icon", "@ngstarter-ui/components/checkbox", "@ngstarter-ui/components/progress-bar" ], "componentMappings": { "appShell": [ "SidenavContainer", "Sidenav", "SidenavContent" ], "navigation": [ "Navigation", "NavigationItem", "NavigationItemIconDirective" ], "cards": [ "Card", "CardContent", "CardFooter" ], "datatables": [ "DataView" ], "operationalDatasets": [ "DataView" ], "staticTables": [ "Table", "ColumnDef", "HeaderCell", "HeaderCellDef", "Cell", "CellDef", "HeaderRow", "HeaderRowDef", "Row", "RowDef" ], "search": [ "FormField", "Label", "Input", "IconPrefix" ], "pagination": [ "Paginator" ], "actions": [ "Button", "Icon" ], "selection": [ "Checkbox" ], "progress": [ "ProgressBar" ] }, "mustNot": [ "Do not build datatables or operational admin datasets with role=\"table\", plain table markup, or div grids when DataView fits.", "Do not use DataView for purely static/read-only tabular content when ngs-table fits.", "Do not build static/read-only tables with role=\"table\" div grids when ngs-table fits.", "Do not build search fields with plain input when ngs-form-field and ngsInput fit.", "Do not build navigation menus with plain button lists when ngs-navigation fits.", "Do not build KPI cards with plain article/div cards when ngs-card fits.", "Do not restyle NgStarter components through wrapper-only classes when component selectors and component tokens fit.", "Do not make ordinary table rows, labels, descriptions, sidebar items, or status text bold to imitate a screenshot." ], "styling": { "template": "Treat TailwindCSS utility classes in templates as the primary styling surface for layout, responsive behavior, sizing, spacing, flex, grid, alignment, and routine margins/padding such as mt-10 and p-6 instead of custom margin-top: 2.5rem and padding: 1.5rem in SCSS.", "localScss": [ "Start local SCSS files that use Tailwind tokens with @reference 'tailwindcss';", "Use --spacing(N) for spacing values in local SCSS.", "Use local SCSS for CSS custom property/token overrides, especially --ngs-* component variables, and necessary component selector overrides. Do not move routine layout, spacing, sizing, flex/grid, or alignment styling from templates into SCSS.", "Override NgStarter components through component or directive selectors such as ngs-card, ngs-navigation, ngs-form-field, table[ngs-table], button[ngsButton], and button[ngsIconButton]." ], "globalStyles": "Use CSS custom properties and theme tokens, especially --ngs-* variables, for global visual customization." }, "typography": { "normalTextWeights": [ "400" ], "navigationWeights": [ "400" ], "buttonWeights": [ "500", "600" ], "headingWeights": [ "600", "650" ], "reserveHeavyWeightsFor": [ "brand marks", "hero headings", "primary KPI numbers", "deliberate emphasis" ] }, "verificationCommand": "npm run verify:admin:components" } ], "components": [ { "name": "action-required", "title": "Action Required", "overviewName": "Action Required", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/action-required", "publicApi": "projects/components/action-required/public-api.ts", "sourceRoot": "projects/components/action-required/src", "docsPath": "/components/action-required", "docsOverviewSource": "projects/docs/src/app/components/action-required/overview/overview.html", "purpose": "Prompt users to resolve required account, setup, billing, or workflow actions.", "useWhen": "Use for dashboard notices that require user action before work can continue.", "exampleTopics": [ "Basic action required" ], "minimalExample": "", "exampleFiles": [ { "name": "basic-action-required-example", "title": "Basic action required", "file": "projects/docs/src/app/components/action-required/_examples/basic-action-required-example/basic-action-required-example.html", "source": "" } ], "previewAsset": "projects/components/action-required/preview.svg", "selectors": [ "ngs-action-required" ], "exportedSymbols": [ "ActionRequired" ], "inputs": [ "actionText", "buttonText", "description", "iconName" ], "outputs": [ "buttonClicked" ], "cssTokens": [ "--ngs-action-action-text-bg", "--ngs-action-required-bg", "--ngs-action-text-color", "--ngs-color-danger-container", "--ngs-color-danger-container-highest", "--ngs-color-on-danger-container", "--ngs-color-surface", "--ngs-radius-xl" ], "example": null }, { "name": "alert", "title": "Alert", "overviewName": "Alert", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/alert", "publicApi": "projects/components/alert/public-api.ts", "sourceRoot": "projects/components/alert/src", "docsPath": "/components/alert", "docsOverviewSource": "projects/docs/src/app/components/alert/overview/overview.html", "purpose": "Show inline status messages, warnings, errors, confirmations, or contextual notices.", "useWhen": "Use inside page content when the message should remain visible near the affected workflow.", "exampleTopics": [ "Basic Alert", "Alert Variants", "Alert with icon", "Alert with title", "Alert actions" ], "minimalExample": "This is a NgStarter alert — check it out!", "exampleFiles": [ { "name": "basic-alert-example", "title": "Basic alert", "file": "projects/docs/src/app/components/alert/_examples/basic-alert-example/basic-alert-example.html", "source": "This is a NgStarter alert — check it out!" }, { "name": "alert-actions-example", "title": "Alert actions", "file": "projects/docs/src/app/components/alert/_examples/alert-actions-example/alert-actions-example.html", "source": "
\n \n This is a NgStarter Admin alert — check it out!\n \n \n \n This is a NgStarter Admin alert — check it out!\n \n \n \n This is a NgStarter Admin alert — check it out!\n \n \n \n \n Alert Title\n This is a NgStarter Admin alert — check it out!\n \n \n \n Alert Title\n This is a NgStarter Admin alert — check it out!\n \n \n \n
" }, { "name": "alert-variants-example", "title": "Alert variants", "file": "projects/docs/src/app/components/alert/_examples/alert-variants-example/alert-variants-example.html", "source": "
\n This is a NgStarter alert — check it out!\n This is a NgStarter alert — check it out!\n This is a NgStarter alert — check it out!\n This is a NgStarter alert — check it out!\n This is a NgStarter alert — check it out!\n
" } ], "previewAsset": "projects/components/alert/preview.svg", "selectors": [ "[ngsAlertAction]", "[ngsAlertClose]", "[ngsAlertIcon]", "[ngsAlertTitle]", "ngs-alert", "ngs-alert-title" ], "exportedSymbols": [ "Alert", "ALERT", "AlertActionDirective", "AlertCloseDirective", "AlertIconDirective", "AlertTitleDirective", "AlertVariant" ], "inputs": [ "autoClose", "bordered", "variant" ], "outputs": [ "closed" ], "cssTokens": [ "--ngs-alert-action-border-radius", "--ngs-alert-action-font-weight", "--ngs-alert-action-height", "--ngs-alert-action-hover-bg", "--ngs-alert-action-hover-color", "--ngs-alert-action-padding", "--ngs-alert-action-with-icon-padding", "--ngs-alert-actions-gap", "--ngs-alert-bg-color", "--ngs-alert-border-color", "--ngs-alert-border-radius", "--ngs-alert-border-width", "--ngs-alert-color", "--ngs-alert-font-size", "--ngs-alert-gap", "--ngs-alert-has-thumbnail-padding", "--ngs-alert-icon-color", "--ngs-alert-padding", "--ngs-alert-thumbnail-bg", "--ngs-alert-thumbnail-border-radius", "--ngs-alert-thumbnail-size", "--ngs-alert-title-font-size", "--ngs-alert-title-font-weight", "--ngs-color-danger", "--ngs-color-danger-container", "--ngs-color-info", "--ngs-color-info-container", "--ngs-color-on-danger-container", "--ngs-color-on-info-container", "--ngs-color-on-success-container", "--ngs-color-on-warning-container", "--ngs-color-success", "--ngs-color-success-container", "--ngs-color-surface-container", "--ngs-color-surface-container-highest", "--ngs-color-warning", "--ngs-color-warning-container", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-radius-xl" ], "example": null }, { "name": "announcement", "title": "Announcement", "overviewName": "Announcement", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/announcement", "publicApi": "projects/components/announcement/public-api.ts", "sourceRoot": "projects/components/announcement/src", "docsPath": "/components/announcement", "docsOverviewSource": "projects/docs/src/app/components/announcement/overview/overview.html", "purpose": "Show prominent product, system, or marketing announcements with optional title, icon, and actions.", "useWhen": "Use for broadcast-style messages that should stand apart from normal form or page content.", "exampleTopics": [ "Show/Hide announcement dynamically", "Basic announcement", "Announcement with title", "Announcement with icons" ], "minimalExample": "
\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n
", "exampleFiles": [ { "name": "basic-announcement-example", "title": "Basic announcement", "file": "projects/docs/src/app/components/announcement/_examples/basic-announcement-example/basic-announcement-example.html", "source": "
\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n You still have not uploaded your Mart invoice due on 22 April 2024\n
" }, { "name": "announcement-with-icons-example", "title": "Announcement with icons", "file": "projects/docs/src/app/components/announcement/_examples/announcement-with-icons-example/announcement-with-icons-example.html", "source": "
\n \n You still have not uploaded your Mart invoice due on 22 April 2025\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2025\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2025\n \n
" }, { "name": "announcement-with-title-example", "title": "Announcement with title", "file": "projects/docs/src/app/components/announcement/_examples/announcement-with-title-example/announcement-with-title-example.html", "source": "
\n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n \n You still have not uploaded your Mart invoice due on 22 April 2024\n \n
" } ], "previewAsset": "projects/components/announcement/preview.svg", "selectors": [ "[ngsAnnouncementTitle]", "ngs-announcement", "ngs-announcement-global" ], "exportedSymbols": [ "Announcement", "AnnouncementData", "AnnouncementGlobal", "AnnouncementLinkTo", "AnnouncementState", "AnnouncementStore", "AnnouncementTitle", "AnnouncementVariant" ], "inputs": [ "closable", "iconName", "linkTo", "title", "variant" ], "outputs": [ "announcementClose", "closed" ], "cssTokens": [ "--ngs-color-danger-container", "--ngs-color-info-container", "--ngs-color-on-danger-container", "--ngs-color-on-info-container", "--ngs-color-on-secondary-container", "--ngs-color-on-success-container", "--ngs-color-on-warning-container", "--ngs-color-secondary-container", "--ngs-color-success-container", "--ngs-color-warning-container", "--ngs-font-size-sm" ], "example": null }, { "name": "autocomplete", "title": "Autocomplete", "overviewName": "Autocomplete", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/autocomplete", "publicApi": "projects/components/autocomplete/public-api.ts", "sourceRoot": "projects/components/autocomplete/src", "docsPath": "/forms/autocomplete", "docsOverviewSource": "projects/docs/src/app/forms/autocomplete/overview/overview.html", "purpose": "Let users search and choose from suggestions while typing.", "useWhen": "Use for large option lists where a select would be too slow or crowded.", "exampleTopics": [ "Simple autocomplete", "Custom Filter", "Separate control and display values", "Automatically highlighting the first option", "Autocomplete with option groups", "Autocomplete filter", "Separate controls and display values", "Auto highlight first person", "Option groups" ], "minimalExample": "\n Number\n \n \n @for (option of filteredOptions | async; track option) {\n {{ option }}\n }\n \n", "exampleFiles": [ { "name": "auto-highlight-first-person-example", "title": "Auto highlight first person", "file": "projects/docs/src/app/forms/autocomplete/_examples/auto-highlight-first-person-example/auto-highlight-first-person-example.html", "source": "\n Number\n \n \n @for (option of filteredOptions | async; track option) {\n {{ option }}\n }\n \n" }, { "name": "autocomplete-filter-example", "title": "Autocomplete filter", "file": "projects/docs/src/app/forms/autocomplete/_examples/autocomplete-filter-example/autocomplete-filter-example.html", "source": "
\n \n Number\n \n \n @for (option of filteredOptions | async; track option) {\n {{ option }}\n }\n \n \n
" }, { "name": "option-groups-example", "title": "Option groups", "file": "projects/docs/src/app/forms/autocomplete/_examples/option-groups-example/option-groups-example.html", "source": "
\n \n States Group\n \n \n @for (group of stateGroupOptions | async; track group) {\n \n @for (name of group.names; track name) {\n {{name}}\n }\n \n }\n \n \n
" } ], "previewAsset": "projects/components/autocomplete/preview.svg", "selectors": [ "[ngsAutocomplete]", "ngs-autocomplete" ], "exportedSymbols": [ "Autocomplete", "AutocompleteActivatedEvent", "AutocompleteSelectedEvent", "AutocompleteTrigger" ], "inputs": [ "aria-label", "aria-labelledby", "autoActiveFirstOption", "autoSelectActiveOption", "class", "disableRipple", "hideSingleSelectionIndicator", "ngsAutocomplete", "panelWidth", "requireSelection" ], "outputs": [ "closed", "opened", "optionActivated", "optionSelected" ], "cssTokens": [ "--ngs-autocomplete-panel-bg", "--ngs-autocomplete-panel-border", "--ngs-autocomplete-panel-max-height", "--ngs-autocomplete-panel-padding", "--ngs-autocomplete-panel-shadow", "--ngs-dropdown-bg", "--ngs-dropdown-border", "--ngs-dropdown-max-height", "--ngs-dropdown-padding", "--ngs-dropdown-radius", "--ngs-dropdown-shadow" ], "example": null }, { "name": "avatar", "title": "Avatar", "overviewName": "Avatar", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/avatar", "publicApi": "projects/components/avatar/public-api.ts", "sourceRoot": "projects/components/avatar/src", "docsPath": "/components/avatar", "docsOverviewSource": "projects/docs/src/app/components/avatar/overview/overview.html", "purpose": "Represent users, teams, or entities with images, initials, icons, generated key-based avatar appearances, and presence.", "useWhen": "Use in account menus, lists, comments, assignees, collaborators, and activity feeds. Use the default appearance for normal image, label, or icon avatars. Use appearance=\"identicon\" or appearance=\"initials\" with a stable key for deterministic generated placeholders, optionally with backgroundColors and foregroundColors. Set a global default with provideAvatar({ appearance }) and override individual avatars with appearance=\"default\" when generated placeholders should be disabled.", "exampleTopics": [ "Basic Avatar", "Avatar Variants", "Presence Indicator", "Avatar Sizes", "Avatar With Images", "Avatar With Icons", "Grouped Avatars", "Grouped and Total Avatars", "Avatar automatic color", "Generated Avatar", "Avatar presence indicator", "Avatar generated" ], "minimalExample": "
\n \n \n \n
", "exampleFiles": [ { "name": "basic-avatar-example", "title": "Basic avatar", "file": "projects/docs/src/app/components/avatar/_examples/basic-avatar-example/basic-avatar-example.html", "source": "
\n \n \n \n
" }, { "name": "avatar-automatic-color-example", "title": "Avatar automatic color", "file": "projects/docs/src/app/components/avatar/_examples/avatar-automatic-color-example/avatar-automatic-color-example.html", "source": "
\n
\n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n +20\n \n
" }, { "name": "avatar-generated-example", "title": "Avatar generated", "file": "projects/docs/src/app/components/avatar/_examples/avatar-generated-example/avatar-generated-example.html", "source": "
\n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n
" } ], "previewAsset": "projects/components/avatar/preview.svg", "selectors": [ "[ngs-avatar-more]", "[ngs-avatar-total]", "[ngs-avatar]", "ngs-avatar", "ngs-avatar-group", "ngs-avatar-more", "ngs-avatar-total" ], "exportedSymbols": [ "Avatar", "AVATAR_ACCESSOR", "AVATAR_CONFIG", "AvatarAppearance", "AvatarConfig", "AvatarGenerator", "AvatarGeneratorOptions", "AvatarGroup", "AvatarKey", "AvatarMore", "AvatarPresenceIndicator", "AvatarTotal", "AvatarVariant", "GeneratedAvatar", "GeneratedAvatarCell", "provideAvatar" ], "inputs": [ "alt", "appearance", "automaticColor", "backgroundColors", "clickable", "foregroundColors", "image", "key", "label", "presenceIndicator", "variant" ], "outputs": [], "cssTokens": [ "--ngs-avatar-bg", "--ngs-avatar-border-color", "--ngs-avatar-border-color-auto", "--ngs-avatar-border-radius", "--ngs-avatar-border-width", "--ngs-avatar-color", "--ngs-avatar-font-weight", "--ngs-avatar-group-item-border", "--ngs-avatar-group-item-offset", "--ngs-avatar-inner-border", "--ngs-avatar-presence-indicator-away-bg", "--ngs-avatar-presence-indicator-offline-bg", "--ngs-avatar-presence-indicator-online-bg", "--ngs-avatar-presence-indicator-outline", "--ngs-avatar-presence-indicator-position-end", "--ngs-avatar-presence-indicator-position-top", "--ngs-avatar-presence-indicator-size", "--ngs-avatar-size", "--ngs-avatar-total-bg", "--ngs-avatar-total-color", "--ngs-avatar-total-font-size", "--ngs-avatar-total-font-weight", "--ngs-avatar-total-hover-bg", "--ngs-color-border", "--ngs-color-neutral-600", "--ngs-color-neutral-700", "--ngs-color-neutral-950", "--ngs-color-on-primary", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-outline-variant", "--ngs-color-primary", "--ngs-color-success", "--ngs-color-surface", "--ngs-color-surface-container-highest", "--ngs-color-warning", "--ngs-font-size-xs" ], "example": null }, { "name": "badge", "title": "Badge", "overviewName": "Badge", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/badge", "publicApi": "projects/components/badge/public-api.ts", "sourceRoot": "projects/components/badge/src", "docsPath": "/components/badge", "docsOverviewSource": "projects/docs/src/app/components/badge/overview/overview.html", "purpose": "Attach compact counts, statuses, or labels to another UI element.", "useWhen": "Use for notification counts, unread states, status dots, or small metadata on icons and avatars.", "exampleTopics": [ "Basic Badges" ], "minimalExample": "
Text with a badge (Overlap: true)
\n
Text with a badge (Overlap: false)
\n
Text with small badge
\n
Text with large badge
\n
\n Button with a badge on the left\n \n
\n
\n Button toggles badge visibility\n \n
\n
\n Icon with a badge\n \n
", "exampleFiles": [ { "name": "basic-badges-example", "title": "Basic badges", "file": "projects/docs/src/app/components/badge/_examples/basic-badges-example/basic-badges-example.html", "source": "
Text with a badge (Overlap: true)
\n
Text with a badge (Overlap: false)
\n
Text with small badge
\n
Text with large badge
\n
\n Button with a badge on the left\n \n
\n
\n Button toggles badge visibility\n \n
\n
\n Icon with a badge\n \n
" } ], "previewAsset": "projects/components/badge/preview.svg", "selectors": [ "[ngsBadge]", "ngs-badge-content" ], "exportedSymbols": [ "Badge", "BadgeContent", "BadgePosition", "BadgeSize" ], "inputs": [ "ngsBadge", "ngsBadgeColor", "ngsBadgeDescription", "ngsBadgeDisabled", "ngsBadgeHidden", "ngsBadgeOverlap", "ngsBadgePosition", "ngsBadgeSize" ], "outputs": [], "cssTokens": [ "--ngs-badge-background", "--ngs-badge-background-color", "--ngs-badge-font-size", "--ngs-badge-large-size", "--ngs-badge-size", "--ngs-badge-small-size", "--ngs-badge-text-color", "--ngs-color-danger", "--ngs-color-on-danger", "--ngs-color-on-primary", "--ngs-color-on-secondary", "--ngs-color-on-surface-variant", "--ngs-color-primary", "--ngs-color-secondary", "--ngs-color-surface-container-high" ], "example": null }, { "name": "block-loader", "title": "Block Loader", "overviewName": "Block Loader", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/block-loader", "publicApi": "projects/components/block-loader/public-api.ts", "sourceRoot": "projects/components/block-loader/src", "docsPath": "/components/block-loader", "docsOverviewSource": "projects/docs/src/app/components/block-loader/overview/overview.html", "purpose": "Indicate that a bounded area of the UI is loading while preserving the surrounding page.", "useWhen": "Use when a panel, table, modal section, or card is refreshing independently.", "exampleTopics": [ "Basic block loader", "Block loader in a dialog", "Block loader in modal", "_modals" ], "minimalExample": "
\n Some text data for example..\n \n Loading large data..\n \n
\n
\n \n
", "exampleFiles": [ { "name": "basic-block-loader-example", "title": "Basic block loader", "file": "projects/docs/src/app/components/block-loader/_examples/basic-block-loader-example/basic-block-loader-example.html", "source": "
\n Some text data for example..\n \n Loading large data..\n \n
\n
\n \n
" }, { "name": "_modals", "title": "_modals", "file": "projects/docs/src/app/components/block-loader/_examples/_modals/block-loader-modal/block-loader-modal.html", "source": "\n @if (saving()) {\n Saving...\n }\n\n
\n

Basic dialog

\n \n

What's your favorite animal?

\n \n Favorite Animal\n \n \n \n
\n \n \n
\n
" }, { "name": "block-loader-in-modal-example", "title": "Block loader in modal", "file": "projects/docs/src/app/components/block-loader/_examples/block-loader-in-modal-example/block-loader-in-modal-example.html", "source": "" } ], "previewAsset": "projects/components/block-loader/preview.svg", "selectors": [ "[ngsBlockLoaderContainer]", "ngs-block-loader" ], "exportedSymbols": [ "BlockLoader", "BlockLoaderContainerDirective" ], "inputs": [ "loading", "spinnerDiameter", "spinnerStrokeWidth" ], "outputs": [], "cssTokens": [ "--ngs-block-loader-bg", "--ngs-font-size-sm" ], "example": null }, { "name": "bottom-sheet", "title": "Bottom Sheet", "overviewName": "Bottom Sheet", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/bottom-sheet", "publicApi": "projects/components/bottom-sheet/public-api.ts", "sourceRoot": "projects/components/bottom-sheet/src", "docsPath": "/components/bottom-sheet", "docsOverviewSource": "projects/docs/src/app/components/bottom-sheet/overview/overview.html", "purpose": "Present mobile-friendly contextual actions or short forms from the bottom of the viewport.", "useWhen": "Use for temporary choices, mobile action menus, and lightweight task flows.", "exampleTopics": [ "Basic Bottom Sheet", "Bottom sheet" ], "minimalExample": "

You have received a file called \"cat-picture.jpeg\".

\n", "exampleFiles": [ { "name": "basic-bottom-sheet-example", "title": "Basic bottom sheet", "file": "projects/docs/src/app/components/bottom-sheet/_examples/basic-bottom-sheet-example/basic-bottom-sheet-example.html", "source": "

You have received a file called \"cat-picture.jpeg\".

\n" }, { "name": "bottom-sheet-example", "title": "Bottom sheet", "file": "projects/docs/src/app/components/bottom-sheet/_examples/bottom-sheet-example/bottom-sheet-example.html", "source": "\n \n Google Keep\n Add to a note\n \n \n Google Docs\n Embed in a document\n \n \n Google Plus\n Share with your friends\n \n \n Google Hangouts\n Show to your coworkers\n \n" } ], "previewAsset": "projects/components/bottom-sheet/preview.svg", "selectors": [ "ngs-bottom-sheet-container" ], "exportedSymbols": [ "BOTTOM_SHEET_DATA", "BOTTOM_SHEET_DEFAULT_OPTIONS", "BottomSheet", "BottomSheetConfig", "BottomSheetContainer", "BottomSheetRef" ], "inputs": [], "outputs": [], "cssTokens": [ "--ngs-bottom-sheet-container-background-color", "--ngs-bottom-sheet-container-shape", "--ngs-bottom-sheet-container-text-color" ], "example": null }, { "name": "breadcrumbs", "title": "Breadcrumbs", "overviewName": "Breadcrumbs", "category": "navigation", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/breadcrumbs", "publicApi": "projects/components/breadcrumbs/public-api.ts", "sourceRoot": "projects/components/breadcrumbs/src", "docsPath": "/navigation/breadcrumbs", "docsOverviewSource": "projects/docs/src/app/navigation/breadcrumbs/overview/overview.html", "purpose": "Show the user's current location in a hierarchy and provide parent navigation.", "useWhen": "Use in admin sections with nested routes, folders, projects, or record detail pages.", "exampleTopics": [ "Basic breadcrumbs", "Breadcrumbs with icons", "Breadcrumbs with titles", "Breadcrumbs with datasource", "Breadcrumbs with last item as link", "Breadcrumbs global (set breadcrumbs dynamically)", "Breadcrumbs global" ], "minimalExample": "\n Home\n /\n Navigation\n", "exampleFiles": [ { "name": "basic-breadcrumbs-example", "title": "Basic breadcrumbs", "file": "projects/docs/src/app/navigation/breadcrumbs/_examples/basic-breadcrumbs-example/basic-breadcrumbs-example.html", "source": "\n Home\n /\n Navigation\n" }, { "name": "breadcrumbs-global-example", "title": "Breadcrumbs global", "file": "projects/docs/src/app/navigation/breadcrumbs/_examples/breadcrumbs-global-example/breadcrumbs-global-example.html", "source": "\n \n \n @if (breadcrumb.icon) {\n \n }\n \n\n\n\n\n\n\n\n\n

\n \n

" }, { "name": "breadcrumbs-with-datasource-example", "title": "Breadcrumbs with datasource", "file": "projects/docs/src/app/navigation/breadcrumbs/_examples/breadcrumbs-with-datasource-example/breadcrumbs-with-datasource-example.html", "source": "\n {{ item.name }}\n /\n {{ item.name }}\n" } ], "previewAsset": "projects/components/breadcrumbs/preview.svg", "selectors": [ "[ngs-breadcrumb-item]", "[ngsBreadcrumbActiveItemDef]", "[ngsBreadcrumbItemDef]", "[ngsBreadcrumbItemIcon]", "[ngsBreadcrumbItemIconDef]", "[ngsBreadcrumbItemNameDef]", "[ngsBreadcrumbItemTitleDef]", "[ngsBreadcrumbSeparatorDef]", "ngs-breadcrumb-item", "ngs-breadcrumb-separator", "ngs-breadcrumb-title", "ngs-breadcrumbs", "ngs-breadcrumbs-global" ], "exportedSymbols": [ "Breadcrumb", "BreadcrumbActiveItemDefDirective", "BreadcrumbItem", "BreadcrumbItemDefDirective", "BreadcrumbItemIconDefDirective", "BreadcrumbItemIconDirective", "BreadcrumbItemNameDefDirective", "BreadcrumbItemTitleDefDirective", "Breadcrumbs", "BreadcrumbSeparator", "BreadcrumbSeparatorDefDirective", "BreadcrumbsGlobal", "BreadcrumbsState", "BreadcrumbsStore", "BreadcrumbTitle" ], "inputs": [ "dataSource", "lastItemAsLink", "separator" ], "outputs": [], "cssTokens": [ "--ngs-breadcrumbs-active-item-color", "--ngs-breadcrumbs-gap", "--ngs-breadcrumbs-item-color", "--ngs-breadcrumbs-item-font-size", "--ngs-breadcrumbs-item-font-weight", "--ngs-breadcrumbs-item-hover-color", "--ngs-breadcrumbs-separator-color", "--ngs-breadcrumbs-separator-font-size", "--ngs-breadcrumbs-separator-position-top", "--ngs-breadcrumbs-title-color", "--ngs-breadcrumbs-title-font-size", "--ngs-color-neutral-400", "--ngs-color-neutral-800", "--ngs-color-primary", "--ngs-color-secondary", "--ngs-font-size-md", "--ngs-font-size-sm", "--ngs-font-size-xs" ], "example": null }, { "name": "button", "title": "Button", "overviewName": "Buttons", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/button", "publicApi": "projects/components/button/public-api.ts", "sourceRoot": "projects/components/button/src", "docsPath": "/forms/buttons", "docsOverviewSource": "projects/docs/src/app/forms/buttons/overview/overview.html", "purpose": "Trigger actions with filled, outlined, text, tonal, loading, disabled, and icon button states.", "useWhen": "Use for commands, form submission, toolbar actions, and navigation-like calls to action.", "exampleTopics": [ "Basic Button", "Outlined Button", "Tonal Button", "Flat Button", "Icon Button", "Button Loading", "Hide text on mobile", "Interactive disabled buttons", "Basic buttons", "Stroked buttons", "Tonal buttons", "Flat buttons", "Icon buttons", "Buttons with interactive disabled" ], "minimalExample": "
\n \n \n \n \n \n
", "exampleFiles": [ { "name": "basic-buttons-example", "title": "Basic buttons", "file": "projects/docs/src/app/forms/buttons/_examples/basic-buttons-example/basic-buttons-example.html", "source": "
\n \n \n \n \n \n
" }, { "name": "button-loading-example", "title": "Button loading", "file": "projects/docs/src/app/forms/buttons/_examples/button-loading-example/button-loading-example.html", "source": "
\n \n \n \n \n
" }, { "name": "buttons-with-interactive-disabled-example", "title": "Buttons with interactive disabled", "file": "projects/docs/src/app/forms/buttons/_examples/buttons-with-interactive-disabled-example/buttons-with-interactive-disabled-example.html", "source": "
\n Disabled button allowing interactivity\n Default disabled button\n
" } ], "previewAsset": "projects/components/button/preview.svg", "selectors": [ "a[ngsButton]", "a[ngsIconButton]", "button[ngsButton]", "button[ngsIconButton]" ], "exportedSymbols": [ "Button", "ButtonVariant" ], "inputs": [ "disabled", "disabledInteractive", "disableRipple", "fullWidth", "hideTextOnMobile", "loading", "ngsButton", "ngsIconButton", "reverse" ], "outputs": [], "cssTokens": [ "--ngs-button-bg", "--ngs-button-border-radius", "--ngs-button-color", "--ngs-button-content-gap", "--ngs-button-filled-bg", "--ngs-button-filled-color", "--ngs-button-font-size", "--ngs-button-font-weight", "--ngs-button-height", "--ngs-button-hover-bg", "--ngs-button-outlined-border", "--ngs-button-outlined-color", "--ngs-button-padding", "--ngs-button-padding-x", "--ngs-button-radius", "--ngs-button-tonal-bg", "--ngs-button-tonal-color", "--ngs-color-danger", "--ngs-color-danger-container", "--ngs-color-emphasis", "--ngs-color-on-danger", "--ngs-color-on-danger-container", "--ngs-color-on-primary", "--ngs-color-on-primary-container", "--ngs-color-on-secondary", "--ngs-color-on-secondary-container", "--ngs-color-on-surface", "--ngs-color-primary", "--ngs-color-primary-container", "--ngs-color-secondary", "--ngs-color-secondary-container", "--ngs-control-gap", "--ngs-font-size-sm", "--ngs-radius-lg", "--ngs-state-disabled-bg", "--ngs-state-disabled-border", "--ngs-state-disabled-color", "--ngs-state-focus-ring" ], "example": "" }, { "name": "button-toggle", "title": "Button Toggle", "overviewName": "Button Toggle", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/button-toggle", "publicApi": "projects/components/button-toggle/public-api.ts", "sourceRoot": "projects/components/button-toggle/src", "docsPath": "/forms/button-toggle", "docsOverviewSource": "projects/docs/src/app/forms/button-toggle/overview/overview.html", "purpose": "Let users choose one or more options from a compact segmented button group.", "useWhen": "Use for mode switching, view density, filters, or mutually exclusive short choices.", "exampleTopics": [ "Basic Button Toggle", "Icon Only Button Toggle", "Selection Mode", "Button toggle selection mode" ], "minimalExample": "\n Bold\n Italic\n Underline\n", "exampleFiles": [ { "name": "basic-button-toggle-example", "title": "Basic button toggle", "file": "projects/docs/src/app/forms/button-toggle/_examples/basic-button-toggle-example/basic-button-toggle-example.html", "source": "\n Bold\n Italic\n Underline\n" }, { "name": "button-toggle-selection-mode-example", "title": "Button toggle selection mode", "file": "projects/docs/src/app/forms/button-toggle/_examples/button-toggle-selection-mode-example/button-toggle-selection-mode-example.html", "source": "
\n

Single selection:

\n \n Red\n Green\n Blue\n \n
\n
\n

Single selection (hidden indicator):

\n \n Red\n Green\n Blue\n \n
\n
\n

Multiple selection:

\n \n Flour\n Eggs\n Sugar\n \n
" }, { "name": "icon-only-button-toggle-example", "title": "Icon only button toggle", "file": "projects/docs/src/app/forms/button-toggle/_examples/icon-only-button-toggle-example/icon-only-button-toggle-example.html", "source": "\n \n \n List\n \n \n \n Grid\n \n \n \n Board\n \n" } ], "previewAsset": "projects/components/button-toggle/preview.svg", "selectors": [ "ngs-button-toggle", "ngs-button-toggle-group" ], "exportedSymbols": [ "ButtonToggle", "ButtonToggleAppearance", "ButtonToggleGroup" ], "inputs": [ "appearance", "checked", "disabled", "hideSelectionIndicator", "id", "multiple", "name", "onlyIcon", "value", "vertical" ], "outputs": [ "change" ], "cssTokens": [ "--ngs-button-height", "--ngs-button-radius", "--ngs-button-toggle-button-font-size", "--ngs-button-toggle-button-font-weight", "--ngs-button-toggle-button-only-icon-padding", "--ngs-button-toggle-button-padding", "--ngs-button-toggle-checked-bg-color", "--ngs-button-toggle-checked-text-color", "--ngs-button-toggle-group-bg", "--ngs-button-toggle-group-border-color", "--ngs-button-toggle-group-border-radius", "--ngs-button-toggle-hover-bg-color", "--ngs-button-toggle-selection-indicator-color", "--ngs-button-toggle-text-color", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-primary", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest" ], "example": null }, { "name": "calendar", "title": "Calendar", "overviewName": "Calendar", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/calendar", "publicApi": "projects/components/calendar/public-api.ts", "sourceRoot": "projects/components/calendar/src", "docsPath": "/components/calendar", "docsOverviewSource": "projects/docs/src/app/components/calendar/overview/overview.html", "purpose": "The NgStarter Angular Calendar component renders an inline month calendar for dashboards, scheduling widgets, event summaries, availability previews, and date-driven product surfaces.", "useWhen": "Choose Calendar when the workflow matches examples such as Basic Calendar, Calendar With Events, Calendar With Min And Max Dates, Calendar min max.", "exampleTopics": [ "Basic Calendar", "Calendar With Events", "Calendar With Min And Max Dates", "Calendar min max" ], "minimalExample": "
\n \n
", "exampleFiles": [ { "name": "basic-calendar-example", "title": "Basic calendar", "file": "projects/docs/src/app/components/calendar/_examples/basic-calendar-example/basic-calendar-example.html", "source": "
\n \n
" }, { "name": "calendar-min-max-example", "title": "Calendar min max", "file": "projects/docs/src/app/components/calendar/_examples/calendar-min-max-example/calendar-min-max-example.html", "source": "
\n \n
" }, { "name": "calendar-with-events-example", "title": "Calendar with events", "file": "projects/docs/src/app/components/calendar/_examples/calendar-with-events-example/calendar-with-events-example.html", "source": "
\n \n
" } ], "previewAsset": null, "selectors": [ "ngs-calendar" ], "exportedSymbols": [ "Calendar", "CalendarDateInput", "CalendarEvent", "CalendarEventColor" ], "inputs": [ "events", "firstDayOfWeek", "locale", "maxDate", "minDate", "selected", "showAdjacentDays", "showEventTitles", "showTodayButton", "startAt" ], "outputs": [ "eventSelected", "monthChange", "selectedChange" ], "cssTokens": [ "--ngs-button-bg", "--ngs-button-border-radius", "--ngs-button-height", "--ngs-button-padding", "--ngs-button-padding-x", "--ngs-calendar-day-bg", "--ngs-calendar-day-hover-bg", "--ngs-calendar-day-min-height", "--ngs-calendar-day-muted-color", "--ngs-calendar-day-radius", "--ngs-calendar-day-selected-bg", "--ngs-calendar-day-selected-color", "--ngs-calendar-day-today-outline", "--ngs-calendar-event-blue", "--ngs-calendar-event-danger", "--ngs-calendar-event-green", "--ngs-calendar-event-info", "--ngs-calendar-event-neutral", "--ngs-calendar-event-primary", "--ngs-calendar-event-rose", "--ngs-calendar-event-success", "--ngs-calendar-event-warning", "--ngs-calendar-gap", "--ngs-calendar-header-gap", "--ngs-calendar-header-margin-bottom", "--ngs-calendar-weekday-color", "--ngs-color-danger", "--ngs-color-info", "--ngs-color-on-primary", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-outline", "--ngs-color-primary", "--ngs-color-success", "--ngs-color-surface-container", "--ngs-color-warning", "--ngs-font-size-lg", "--ngs-font-size-xs", "--ngs-radius-md", "--ngs-radius-sm" ], "example": null }, { "name": "card", "title": "Card", "overviewName": "Card", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/card", "publicApi": "projects/components/card/public-api.ts", "sourceRoot": "projects/components/card/src", "docsPath": "/components/card", "docsOverviewSource": "projects/docs/src/app/components/card/overview/overview.html", "purpose": "Group related content, controls, media, and actions in a bordered or elevated container.", "useWhen": "Use for repeated dashboard widgets, previews, summaries, or compact content modules.", "exampleTopics": [ "Basic Card", "Card Appearance", "Card Actions", "Card Multiple Sections", "Card Footer Loading" ], "minimalExample": "\n Simple card\n\n\n Simple card\n \n \n \n \n", "exampleFiles": [ { "name": "basic-card-example", "title": "Basic card", "file": "projects/docs/src/app/components/card/_examples/basic-card-example/basic-card-example.html", "source": "\n Simple card\n\n\n Simple card\n \n \n \n \n" }, { "name": "card-actions-example", "title": "Card actions", "file": "projects/docs/src/app/components/card/_examples/card-actions-example/card-actions-example.html", "source": "
\n \n \n Actions Buttons\n Start\n \n \n \n \n \n \n \n \n Actions Buttons\n End\n \n \n \n \n \n \n \n \n Actions Buttons\n Start\n \n \n \n \n \n \n \n \n Actions Buttons\n Center\n \n \n \n \n \n \n \n \n Actions Buttons\n End\n \n..." }, { "name": "card-appearance-example", "title": "Card appearance", "file": "projects/docs/src/app/components/card/_examples/card-appearance-example/card-appearance-example.html", "source": "
\n \n \n Filled Card\n Default appearance\n \n \n This is a filled card. It has a background color and no shadow or border.\n \n \n \n \n \n \n \n Outlined Card\n Simple border\n \n \n This is an outlined card. It has a border and no shadow.\n \n \n \n \n \n \n \n Raised Card\n Shadow\n \n \n This is a raised card. It has a shadow to make it stand out from the background.\n \n \n \n \n \n
" } ], "previewAsset": "projects/components/card/preview.svg", "selectors": [ "[ngs-card-actions]", "[ngs-card-aside]", "[ngs-card-avatar]", "[ngs-card-content]", "[ngs-card-footer]", "[ngs-card-image]", "[ngs-card-lg-image]", "[ngs-card-md-image]", "[ngs-card-sm-image]", "[ngs-card-subtitle]", "[ngs-card-title]", "[ngs-card-xl-image]", "[ngsCardActions]", "[ngsCardAvatar]", "[ngsCardContent]", "[ngsCardFooter]", "[ngsCardImage]", "[ngsCardImageLarge]", "[ngsCardImageMedium]", "[ngsCardImageSmall]", "[ngsCardImageXLarge]", "[ngsCardSubtitle]", "[ngsCardTitle]", "ngs-card", "ngs-card-actions", "ngs-card-aside", "ngs-card-avatar", "ngs-card-content", "ngs-card-footer", "ngs-card-header", "ngs-card-image", "ngs-card-subtitle", "ngs-card-title", "ngsCardAside" ], "exportedSymbols": [ "Card", "CARD_CONFIG", "CardActions", "CardActionsPosition", "CardAppearance", "CardAside", "CardAvatar", "CardConfig", "CardContent", "CardFooter", "CardHeader", "CardImage", "CardImageLarge", "CardImageMedium", "CardImageSmall", "CardImageXLarge", "CardSubtitle", "CardTitle", "provideCard" ], "inputs": [ "align", "appearance", "withoutPadding" ], "outputs": [], "cssTokens": [ "--ngs-card-bg", "--ngs-card-border-color", "--ngs-card-color", "--ngs-card-content-font-size", "--ngs-card-content-letter-spacing", "--ngs-card-content-line-height", "--ngs-card-padding", "--ngs-card-radius", "--ngs-card-shadow", "--ngs-card-subtitle-color", "--ngs-card-subtitle-font-size", "--ngs-card-subtitle-font-weight", "--ngs-card-subtitle-letter-spacing", "--ngs-card-subtitle-line-height", "--ngs-card-title-font-size", "--ngs-card-title-font-weight", "--ngs-card-title-letter-spacing", "--ngs-card-title-line-height", "--ngs-color-border", "--ngs-color-on-surface", "--ngs-color-surface-container", "--ngs-radius-xl", "--ngs-shadow-sm" ], "example": null }, { "name": "card-overlay", "title": "Card Overlay", "overviewName": "Card Overlay", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/card-overlay", "publicApi": "projects/components/card-overlay/public-api.ts", "sourceRoot": "projects/components/card-overlay/src", "docsPath": "/components/card-overlay", "docsOverviewSource": "projects/docs/src/app/components/card-overlay/overview/overview.html", "purpose": "Reveal overlay content or actions on top of a card-like surface, often on hover or interaction.", "useWhen": "Use for media cards, galleries, previews, and quick actions over visual content.", "exampleTopics": [ "Basic card overlay", "Card overlay with translate", "Card overlay with blur" ], "minimalExample": "
\n \n Hover on card to see overlay\n \n \n \n \n \n \n \n Dog Breed\n Shiba Inu\n \n
\n \"Photo\n \n \n \n
\n \n
\n Hover on image to see overlay\n
\n \n \n \n \n \n \n
", "exampleFiles": [ { "name": "basic-card-overlay-example", "title": "Basic card overlay", "file": "projects/docs/src/app/components/card-overlay/_examples/basic-card-overlay-example/basic-card-overlay-example.html", "source": "
\n \n Hover on card to see overlay\n \n \n \n \n \n \n \n Dog Breed\n Shiba Inu\n \n
\n \"Photo\n \n \n \n
\n \n
\n Hover on image to see overlay\n
\n \n \n \n \n \n \n
" }, { "name": "card-overlay-with-blur-example", "title": "Card overlay with blur", "file": "projects/docs/src/app/components/card-overlay/_examples/card-overlay-with-blur-example/card-overlay-with-blur-example.html", "source": "
\n \n Hover on card to see overlay\n \n \n \n \n \n \n \n Dog Breed\n Shiba Inu\n \n
\n \"Photo\n \n \n \n
\n \n
\n Hover on image to see overlay\n
\n \n \n \n \n \n \n
" }, { "name": "card-overlay-with-translate-example", "title": "Card overlay with translate", "file": "projects/docs/src/app/components/card-overlay/_examples/card-overlay-with-translate-example/card-overlay-with-translate-example.html", "source": "
\n \n Hover on card to see overlay\n \n \n \n \n \n \n \n Dog Breed\n Shiba Inu\n \n
\n \"Photo\n \n \n \n
\n \n
\n Hover on image to see overlay\n
\n \n \n \n \n \n \n
" } ], "previewAsset": "projects/components/card-overlay/preview.svg", "selectors": [ "[ngsCardOverlayContainer]", "ngs-card-overlay" ], "exportedSymbols": [ "CardOverlay", "CardOverlayContainerDirective" ], "inputs": [ "disabled", "withBlur", "withTranslate" ], "outputs": [], "cssTokens": [], "example": null }, { "name": "carousel", "title": "Carousel", "overviewName": "Carousel", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/carousel", "publicApi": "projects/components/carousel/public-api.ts", "sourceRoot": "projects/components/carousel/src", "docsPath": "/components/carousel", "docsOverviewSource": "projects/docs/src/app/components/carousel/overview/overview.html", "purpose": "Display a sequence of slides or panels that users can browse horizontally.", "useWhen": "Use for featured content, image galleries, onboarding panels, or compact previews.", "exampleTopics": [ "Basic Carousel", "Carousel controls with custom position", "Carousel with fade effect", "Carousel controls custom position", "Carousel fade effect" ], "minimalExample": "
\n \n \n
\n Card 1\n
\n \n \n
\n Card 2\n
\n \n \n
\n Card 3\n
\n \n \n
\n Card 4\n
\n \n \n
\n Card 5\n
\n \n \n
\n Card 6\n
\n \n \n \n \n \n \n
", "exampleFiles": [ { "name": "basic-carousel-example", "title": "Basic carousel", "file": "projects/docs/src/app/components/carousel/_examples/basic-carousel-example/basic-carousel-example.html", "source": "
\n \n \n
\n Card 1\n
\n \n \n
\n Card 2\n
\n \n \n
\n Card 3\n
\n \n \n
\n Card 4\n
\n \n \n
\n Card 5\n
\n \n \n
\n Card 6\n
\n \n \n \n \n \n \n
" }, { "name": "carousel-controls-custom-position-example", "title": "Carousel controls custom position", "file": "projects/docs/src/app/components/carousel/_examples/carousel-controls-custom-position-example/carousel-controls-custom-position-example.html", "source": "
\n \n \n
\n Card 1\n
\n \n \n
\n Card 2\n
\n \n \n
\n Card 3\n
\n \n \n
\n Card 4\n
\n \n \n
\n Card 5\n
\n \n \n
\n Card 6\n
\n \n \n
\n \n
\n
\n \n
\n
" }, { "name": "carousel-fade-effect-example", "title": "Carousel fade effect", "file": "projects/docs/src/app/components/carousel/_examples/carousel-fade-effect-example/carousel-fade-effect-example.html", "source": "
\n \n \n
\n Card 1\n
\n \n \n
\n Card 2\n
\n \n \n
\n Card 3\n
\n \n \n
\n Card 4\n
\n \n \n
\n Card 5\n
\n \n \n
\n Card 6\n
\n \n \n
\n Card 7\n
\n \n \n
\n Card 8\n
\n \n \n
\n Card 9\n
\n \n..." } ], "previewAsset": "projects/components/carousel/preview.svg", "selectors": [ "[ngs-carousel-card]", "[ngsCarouselControls]", "[ngsCarouselNext]", "[ngsCarouselPrevious]", "[ngsDraggableCarousel]", "ngs-carousel", "ngs-carousel-card" ], "exportedSymbols": [ "Carousel", "CAROUSEL", "CAROUSEL_CARD", "CarouselApiInterface", "CarouselCard", "CarouselCardInterface", "CarouselControlsDirective", "CarouselInterface", "CarouselNextDirective", "CarouselPreviousDirective", "DraggableCarouselDirective" ], "inputs": [ "cardSelector", "carousel", "fade", "resistanceFactor", "snapDebounceTime", "snapDuration", "snapToCenter", "stopPropagation", "velocityThreshold", "visibilityDebounceTime" ], "outputs": [ "indexChange" ], "cssTokens": [ "--ngs-carousel-gap" ], "example": null }, { "name": "checkbox", "title": "Checkbox", "overviewName": "Checkbox", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/checkbox", "publicApi": "projects/components/checkbox/public-api.ts", "sourceRoot": "projects/components/checkbox/src", "docsPath": "/forms/checkbox", "docsOverviewSource": "projects/docs/src/app/forms/checkbox/overview/overview.html", "purpose": "Capture independent boolean choices or multi-select options.", "useWhen": "Use for forms, preferences, tables, and filter groups where multiple values can be selected.", "exampleTopics": [ "Basic Checkboxes", "Checkbox with Description", "Checkbox Group", "Checkbox description" ], "minimalExample": "
\n Check me!\n Disabled\n
\n
\n
\n \n {{ task.name }}\n \n
\n
    \n @for (subtask of task.subtasks; track subtask) {\n
  • \n \n {{subtask.name}}\n \n
    • \n }\n
\n
", "exampleFiles": [ { "name": "basic-checkboxes-example", "title": "Basic checkboxes", "file": "projects/docs/src/app/forms/checkbox/_examples/basic-checkboxes-example/basic-checkboxes-example.html", "source": "
\n Check me!\n Disabled\n
\n
\n
\n \n {{ task.name }}\n \n
\n
    \n @for (subtask of task.subtasks; track subtask) {\n
  • \n \n {{subtask.name}}\n \n
    • \n }\n
\n
" }, { "name": "checkbox-description-example", "title": "Checkbox description", "file": "projects/docs/src/app/forms/checkbox/_examples/checkbox-description-example/checkbox-description-example.html", "source": "\n I agree to the terms and conditions\n
\n By checking this box, you agree to our Terms of Service and Privacy Policy.\n
\n" }, { "name": "checkbox-group-example", "title": "Checkbox group", "file": "projects/docs/src/app/forms/checkbox/_examples/checkbox-group-example/checkbox-group-example.html", "source": "\n Option 1\n Option 2\n Option 3\n\n\n \n Email notifications\n
\n Receive updates about new products and promotions.\n
\n \n \n SMS alerts\n
\n Get real-time alerts for security and account activity.\n
\n \n \n Partner offers\n
\n Subscribe to receive exclusive offers from our trusted partners.\n
\n \n" } ], "previewAsset": "projects/components/checkbox/preview.svg", "selectors": [ "[ngsCheckboxDescription]", "ngs-checkbox", "ngs-checkbox-group" ], "exportedSymbols": [ "Checkbox", "CheckboxChange", "CheckboxDescription", "CheckboxGroup", "TransitionCheckState" ], "inputs": [ "aria-controls", "aria-describedby", "aria-expanded", "aria-label", "aria-labelledby", "aria-owns", "checked", "color", "disabled", "disabledInteractive", "disableRipple", "id", "indeterminate", "labelPosition", "name", "required", "tabIndex", "value" ], "outputs": [ "change", "indeterminateChange" ], "cssTokens": [ "--ngs-checkbox-checked-color", "--ngs-checkbox-checkmark-color", "--ngs-checkbox-description-color", "--ngs-checkbox-description-font-size", "--ngs-checkbox-disabled-color", "--ngs-checkbox-gap", "--ngs-checkbox-group-gap", "--ngs-checkbox-label-font-size", "--ngs-checkbox-size", "--ngs-checkbox-unchecked-color", "--ngs-color-danger", "--ngs-color-neutral-500", "--ngs-color-on-danger", "--ngs-color-on-primary", "--ngs-color-on-secondary", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-primary", "--ngs-color-secondary", "--ngs-field-border-color", "--ngs-font-size-md", "--ngs-font-size-sm" ], "example": null }, { "name": "chips", "title": "Chips", "overviewName": "Chips", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/chips", "publicApi": "projects/components/chips/public-api.ts", "sourceRoot": "projects/components/chips/src", "docsPath": "/components/chips", "docsOverviewSource": "projects/docs/src/app/components/chips/overview/overview.html", "purpose": "Display compact tokens for tags, selected values, filters, or removable items.", "useWhen": "Use for tag entry, selected people/items, active filters, and small categorical metadata.", "exampleTopics": [ "Basic Chips", "Chips Appearance", "Chips With Input", "Chips Autocomplete", "Chips With Icons", "Chips Drag and Drop", "Stacked Chips" ], "minimalExample": "\n One fish\n Two fish\n Accent fish\n Warn fish\n", "exampleFiles": [ { "name": "basic-chips-example", "title": "Basic chips", "file": "projects/docs/src/app/components/chips/_examples/basic-chips-example/basic-chips-example.html", "source": "\n One fish\n Two fish\n Accent fish\n Warn fish\n" }, { "name": "chips-appearance-example", "title": "Chips appearance", "file": "projects/docs/src/app/components/chips/_examples/chips-appearance-example/chips-appearance-example.html", "source": "
\n

Filled (Default)

\n \n One\n Two\n Three\n \n
\n
\n

Outlined

\n \n One\n Two\n Three\n \n
\n
\n

Custom Styles (via appearance)

\n \n Success\n Warning\n Danger\n Gradient\n \n
" }, { "name": "chips-autocomplete-example", "title": "Chips autocomplete", "file": "projects/docs/src/app/components/chips/_examples/chips-autocomplete-example/chips-autocomplete-example.html", "source": "\n Favorite Fruits\n \n @for (fruit of fruits; track fruit) {\n \n {{fruit}}\n \n \n }\n \n \n \n @for (fruit of filteredFruits | async; track fruit) {\n {{ fruit }}\n }\n \n" } ], "previewAsset": "projects/components/chips/preview.svg", "selectors": [ "[ngsChipAvatar]", "[ngsChipControl]", "[ngsChipEdit]", "[ngsChipRemove]", "[ngsChipShape]", "input[ngsChipInputFor]", "ngs-chip", "ngs-chip-avatar", "ngs-chip-edit", "ngs-chip-grid", "ngs-chip-listbox", "ngs-chip-option", "ngs-chip-remove", "ngs-chip-row", "ngs-chip-set", "ngs-chip-shape" ], "exportedSymbols": [ "Chip", "ChipAvatar", "ChipControl", "ChipEdit", "ChipEditedEvent", "ChipGrid", "ChipInput", "ChipInputEvent", "ChipListbox", "ChipOption", "ChipRemove", "ChipRow", "ChipSet", "ChipShape" ], "inputs": [ "appearance", "disabled", "editable", "id", "multiple", "ngsChipInputAddOnBlur", "ngsChipInputFor", "placeholder", "required", "selected", "value" ], "outputs": [ "chipInputTokenEnd", "destroyed", "edited", "removed", "selectionChange", "valueChange" ], "cssTokens": [ "--ngs-avatar-size", "--ngs-chip-background", "--ngs-chip-border-color", "--ngs-chip-color", "--ngs-chip-font-size", "--ngs-chip-font-weight", "--ngs-chip-height", "--ngs-chip-input-height", "--ngs-chip-listbox-gap", "--ngs-chip-outline-color", "--ngs-chip-padding", "--ngs-chip-radius", "--ngs-chip-selected-background", "--ngs-chip-selected-color", "--ngs-chip-set-gap", "--ngs-chip-set-spacing", "--ngs-color-danger", "--ngs-color-on-primary", "--ngs-color-on-surface", "--ngs-color-outline-variant", "--ngs-color-primary", "--ngs-color-surface-container-high", "--ngs-field-input-height", "--ngs-font-size-xs", "--ngs-form-field-input-height", "--ngs-icon-size", "--ngs-radius-xl" ], "example": null }, { "name": "code-highlighter", "title": "Code Highlighter", "overviewName": "Code Highlighter", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/code-highlighter", "publicApi": "projects/components/code-highlighter/public-api.ts", "sourceRoot": "projects/components/code-highlighter/src", "docsPath": "/components/code-highlighter", "docsOverviewSource": "projects/docs/src/app/components/code-highlighter/overview/overview.html", "purpose": "Render formatted source code snippets with syntax highlighting.", "useWhen": "Use in docs, developer tools, examples, and configuration previews.", "exampleTopics": [ "Basic Code Highlighter", "With Title", "Diff", "Highlight Lines", "With Language and Copy", "Code highlighter with title", "Code highlighter diff", "Code highlighter highlight lines", "Code highlighter full" ], "minimalExample": "
\n \n Bordered\n None\n \n
\n", "exampleFiles": [ { "name": "basic-code-highlighter-example", "title": "Basic code highlighter", "file": "projects/docs/src/app/components/code-highlighter/_examples/basic-code-highlighter-example/basic-code-highlighter-example.html", "source": "
\n \n Bordered\n None\n \n
\n" }, { "name": "code-highlighter-diff-example", "title": "Code highlighter diff", "file": "projects/docs/src/app/components/code-highlighter/_examples/code-highlighter-diff-example/code-highlighter-diff-example.html", "source": "" }, { "name": "code-highlighter-full-example", "title": "Code highlighter full", "file": "projects/docs/src/app/components/code-highlighter/_examples/code-highlighter-full-example/code-highlighter-full-example.html", "source": "" } ], "previewAsset": "projects/components/code-highlighter/preview.svg", "selectors": [ "ngs-code-highlighter" ], "exportedSymbols": [ "CodeHighlighter" ], "inputs": [ "appearance", "code", "diff", "disableOverflow", "highlightLines", "language", "showCopyButton", "showLanguage", "theme", "title" ], "outputs": [], "cssTokens": [ "--ngs-code-highlighter-bg", "--ngs-code-highlighter-border", "--ngs-code-highlighter-margin", "--ngs-code-highlighter-padding", "--ngs-code-highlighter-radius", "--ngs-code-highlighter-title-color", "--ngs-code-highlighter-title-padding", "--ngs-color-background", "--ngs-color-border", "--ngs-color-danger", "--ngs-color-neutral-500", "--ngs-color-primary", "--ngs-color-success", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-radius-xl" ], "example": null }, { "name": "color-picker", "title": "Color Picker", "overviewName": "Color Picker", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/color-picker", "publicApi": "projects/components/color-picker/public-api.ts", "sourceRoot": "projects/components/color-picker/src", "docsPath": "/components/color-picker", "docsOverviewSource": "projects/docs/src/app/components/color-picker/overview/overview.html", "purpose": "Let users choose or edit a color value.", "useWhen": "Use in branding, theme customization, design tools, and visual editors.", "exampleTopics": [ "Basic Color Picker", "Color Picker With Popover", "Input With Color Picker" ], "minimalExample": "\n

\n Selected color: {{ color }}\n

\n
", "exampleFiles": [ { "name": "basic-color-picker-example", "title": "Basic color picker", "file": "projects/docs/src/app/components/color-picker/_examples/basic-color-picker-example/basic-color-picker-example.html", "source": "\n

\n Selected color: {{ color }}\n

\n
" }, { "name": "color-picker-with-popover-example", "title": "Color picker with popover", "file": "projects/docs/src/app/components/color-picker/_examples/color-picker-with-popover-example/color-picker-with-popover-example.html", "source": "
\n \n \n \n \n
\n

\n Selected color: {{ color }}\n

" }, { "name": "input-with-color-picker-example", "title": "Input with color picker", "file": "projects/docs/src/app/components/color-picker/_examples/input-with-color-picker-example/input-with-color-picker-example.html", "source": "\n Color\n \n \n \n \n \n\n

\n Selected color: {{ color }}\n

" } ], "previewAsset": "projects/components/color-picker/preview.svg", "selectors": [ "[inputChange]", "[ngs-color-picker-thumbnail]", "[ngsColorPickerTriggerFor]", "ngs-alpha", "ngs-color-picker", "ngs-color-picker-thumbnail", "ngs-hue", "ngs-saturation" ], "exportedSymbols": [ "Alpha", "BaseComponent", "ChunksPipe", "ColorPicker", "ColorPickerInputDirective", "ColorPickerPosition", "ColorPickerResultFormat", "ColorPickerThumbnail", "ColorPickerTriggerForDirective", "Hue", "PositionManager", "ReversePipe", "Saturation" ], "inputs": [ "asDropdown", "color", "colorFromHue", "disabled", "max", "min", "position", "resultFormat", "showOpacity", "tinyColor" ], "outputs": [ "alphaChange", "closed", "colorChange", "inputChange", "opened", "rawColorChange" ], "cssTokens": [ "--ngs-color-picker-alpha-height", "--ngs-color-picker-alpha-pointer-border", "--ngs-color-picker-alpha-pointer-shadow", "--ngs-color-picker-alpha-pointer-size", "--ngs-color-picker-alpha-width", "--ngs-color-picker-as-dropdown-shadow", "--ngs-color-picker-bg", "--ngs-color-picker-border", "--ngs-color-picker-border-radius", "--ngs-color-picker-gap", "--ngs-color-picker-hue-height", "--ngs-color-picker-hue-pointer-border", "--ngs-color-picker-hue-pointer-shadow", "--ngs-color-picker-hue-pointer-size", "--ngs-color-picker-hue-width", "--ngs-color-picker-margin-offset", "--ngs-color-picker-padding", "--ngs-color-picker-saturation-height", "--ngs-color-picker-saturation-pointer-border", "--ngs-color-picker-saturation-pointer-shadow", "--ngs-color-picker-saturation-pointer-size", "--ngs-color-picker-saturation-width", "--ngs-color-picker-thumbnail-bg", "--ngs-color-picker-thumbnail-border-radius", "--ngs-color-picker-thumbnail-size", "--ngs-dropdown-bg", "--ngs-dropdown-border", "--ngs-dropdown-radius", "--ngs-dropdown-shadow", "--ngs-shadow-md", "--ngs-transition-transform" ], "example": null }, { "name": "color-scheme", "title": "Color Scheme", "overviewName": "Color Scheme", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/color-scheme", "publicApi": "projects/components/color-scheme/public-api.ts", "sourceRoot": "projects/components/color-scheme/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Switch the application color scheme between light, dark, and auto.", "useWhen": "Use anywhere in the UI where users need to control the global light, dark, or auto theme mode. Do not use it for brand colors, accent colors, object colors, statuses, or palettes.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/color-scheme/preview.svg", "selectors": [ "[ngsColorSchemeAuto]", "[ngsColorSchemeDark]", "[ngsColorSchemeLight]", "ngs-color-scheme-switcher" ], "exportedSymbols": [ "COLOR_SCHEME_LOCAL_KEY", "ColorScheme", "ColorSchemeAutoDirective", "ColorSchemeDarkDirective", "ColorSchemeLightDirective", "ColorSchemeStore", "ColorSchemeSwitcher", "ResolvedColorScheme" ], "inputs": [], "outputs": [ "colorSchemeChanged" ], "cssTokens": [], "example": null }, { "name": "color-switcher", "title": "Color Switcher", "overviewName": "Color Switcher", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/color-switcher", "publicApi": "projects/components/color-switcher/public-api.ts", "sourceRoot": "projects/components/color-switcher/src", "docsPath": "/components/color-switcher", "docsOverviewSource": "projects/docs/src/app/components/color-switcher/overview/overview.html", "purpose": "Let users choose one color from a fixed allowed palette.", "useWhen": "Use for brand color presets, accent color presets, project colors, category colors, tag colors, tenant branding, and theme playground controls. Use ColorPicker for arbitrary custom colors and ColorScheme for light, dark, or auto theme mode.", "exampleTopics": [ "Basic Color Switcher", "Custom Palette", "Disabled State", "Form Control", "Basic brand colors", "Brand colors custom colors", "Brand colors disabled", "Brand colors as form control" ], "minimalExample": "\n
\n Selected color: {{ selectedColor }}\n
", "exampleFiles": [ { "name": "basic-brand-colors-example", "title": "Basic brand colors", "file": "projects/docs/src/app/components/color-switcher/_examples/basic-brand-colors-example/basic-brand-colors-example.html", "source": "\n
\n Selected color: {{ selectedColor }}\n
" }, { "name": "brand-colors-as-form-control-example", "title": "Brand colors as form control", "file": "projects/docs/src/app/components/color-switcher/_examples/brand-colors-as-form-control-example/brand-colors-as-form-control-example.html", "source": "\n
\n Selected color: {{ selectedColor }}\n
" }, { "name": "brand-colors-custom-colors-example", "title": "Brand colors custom colors", "file": "projects/docs/src/app/components/color-switcher/_examples/brand-colors-custom-colors-example/brand-colors-custom-colors-example.html", "source": "\n
\n Selected color: {{ selectedColor }}\n
" } ], "previewAsset": "projects/components/color-switcher/preview.svg", "selectors": [ "ngs-color-switcher" ], "exportedSymbols": [ "ColorSwitcher" ], "inputs": [ "colors", "disabled", "selectedColor" ], "outputs": [ "colorChange" ], "cssTokens": [ "--ngs-brand-colors-color-size", "--ngs-brand-colors-gap", "--ngs-shadow-sm" ], "example": null }, { "name": "command-bar", "title": "Command Bar", "overviewName": "Command Bar", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/command-bar", "publicApi": "projects/components/command-bar/public-api.ts", "sourceRoot": "projects/components/command-bar/src", "docsPath": "/components/command-bar", "docsOverviewSource": "projects/docs/src/app/components/command-bar/overview/overview.html", "purpose": "Show a floating contextual action bar for selected items or temporary page state.", "useWhen": "Use when rows, files, cards, canvas objects, or other page items are selected and users need quick actions such as edit, delete, archive, move, export, or share. Do not use it as a command palette, search UI, dropdown menu, header toolbar, navigation bar, autocomplete, or normal form action row.", "exampleTopics": [ "Basic Command Bar" ], "minimalExample": "Show command bar\n
\n \n Tooltip position\n \n @for (positionOption of positionOptions; track positionOption) {\n {{ positionOption }}\n }\n \n \n
\n\n 2 selected\n \n Edit\n \n Delete\n", "exampleFiles": [ { "name": "basic-command-bar-example", "title": "Basic command bar", "file": "projects/docs/src/app/components/command-bar/_examples/basic-command-bar-example/basic-command-bar-example.html", "source": "Show command bar\n
\n \n Tooltip position\n \n @for (positionOption of positionOptions; track positionOption) {\n {{ positionOption }}\n }\n \n \n
\n\n 2 selected\n \n Edit\n \n Delete\n" } ], "previewAsset": "projects/components/command-bar/preview.svg", "selectors": [ "[ngs-command-bar-command]", "ngs-command-bar", "ngs-command-bar-command", "ngs-command-bar-divider" ], "exportedSymbols": [ "CommandBar", "CommandBarCommand", "CommandBarDivider", "CommandBarPosition" ], "inputs": [ "open", "position", "shortcut" ], "outputs": [], "cssTokens": [ "--ngs-color-neutral-100", "--ngs-color-neutral-200", "--ngs-color-neutral-300", "--ngs-color-neutral-600", "--ngs-color-neutral-700", "--ngs-color-neutral-800", "--ngs-color-neutral-950", "--ngs-color-primary-200", "--ngs-command-bar-bg", "--ngs-command-bar-border", "--ngs-command-bar-border-radius", "--ngs-command-bar-color", "--ngs-command-bar-command-color", "--ngs-command-bar-command-font-size", "--ngs-command-bar-command-gap", "--ngs-command-bar-command-height", "--ngs-command-bar-command-hover-bg", "--ngs-command-bar-command-hover-color", "--ngs-command-bar-command-padding", "--ngs-command-bar-command-shortcut-bg", "--ngs-command-bar-command-shortcut-border", "--ngs-command-bar-command-shortcut-border-radius", "--ngs-command-bar-command-shortcut-color", "--ngs-command-bar-command-shortcut-font-size", "--ngs-command-bar-command-shortcut-padding", "--ngs-command-bar-command-shortcut-size", "--ngs-command-bar-content-padding", "--ngs-command-bar-divider-bg", "--ngs-command-bar-divider-height", "--ngs-command-bar-divider-width", "--ngs-command-bar-font-size", "--ngs-command-bar-height", "--ngs-command-bar-margin", "--ngs-command-bar-padding", "--ngs-command-bar-shadow", "--ngs-command-bar-value-color", "--ngs-command-bar-zindex", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-radius-lg", "--ngs-shadow-lg" ], "example": null }, { "name": "comment-editor", "title": "Comment Editor", "overviewName": "Comment Editor", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/comment-editor", "publicApi": "projects/components/comment-editor/public-api.ts", "sourceRoot": "projects/components/comment-editor/src", "docsPath": "/components/comment-editor", "docsOverviewSource": "projects/docs/src/app/components/comment-editor/overview/overview.html", "purpose": "Provide a simplified text editor for quick messages, comments, threads, and replies.", "useWhen": "Use in tasks, projects, activity feeds, reviews, support threads, and conversation replies where users write a short or medium message and send it immediately. Do not use for long-form documents, CMS pages, complex content editing, markdown editing, code editing, search, or display-only comments.", "exampleTopics": [ "Basic Comment Editor", "Toolbar Always Visible", "Cancel Button Always Visible", "Custom Button Labels", "Full View Mode", "Upload Error", "Max Content Height", "Custom Icons", "Comment editor with toolbar", "Comment editor cancel button always visible", "Comment editor custom button labels", "Comment editor with full view mode", "Comment editor with upload error", "Comment editor with max content height", "Comment editor with custom icons" ], "minimalExample": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ", "exampleFiles": [ { "name": "basic-confirm-example", "title": "Basic confirm", "file": "projects/docs/src/app/components/confirm/_examples/basic-confirm-example/basic-confirm-example.html", "source": "" }, { "name": "confirm-form-modal-example", "title": "Confirm form modal", "file": "projects/docs/src/app/components/confirm/_examples/confirm-form-modal-example/confirm-form-modal-example.html", "source": "" }, { "name": "dialog-with-confirmation", "title": "Dialog with confirmation", "file": "projects/docs/src/app/components/confirm/_examples/dialog-with-confirmation/dialog-with-confirmation.html", "source": "
\n

Confirmation

\n \n \n \n \n \n \n
" } ], "previewAsset": "projects/components/confirm/preview.svg", "selectors": [ "ngs-confirm" ], "exportedSymbols": [ "Confirm", "ConfirmManager", "ConfirmOptions", "ConfirmRef" ], "inputs": [], "outputs": [], "cssTokens": [], "example": null }, { "name": "content-editor", "title": "Content Editor", "overviewName": "Content Editor", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/content-editor", "publicApi": "projects/components/content-editor/public-api.ts", "sourceRoot": "projects/components/content-editor/src", "docsPath": "/libraries/content-editor", "docsOverviewSource": "projects/docs/src/app/libraries/content-editor/overview/overview.html", "purpose": "Provide a block-based builder for structured long-form content.", "useWhen": "Use ngs-content-editor-builder for articles, pages, documentation, knowledge base entries, rich notes, editable descriptions, landing content, and CMS-like editing workflows built from blocks such as paragraph, heading, list, quote, code, divider, table, image, video, and embed. Use ngs-content-editor-renderer for saved block previews and display-only content. Do not use for quick messages, comments, threads, or reply composers; use CommentEditor for that. Do not use for a simple text field or small rich text input; use TextEditor, Input, or Textarea depending on the task.", "exampleTopics": [ "Content Editor" ], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/content-editor/preview.svg", "selectors": [ "[ngsBlockSelection]", "[ngsContentChangesObserver]", "[ngsContentEditorContentEditable]", "[ngsContentObserver]", "[ngsFocusMonitor]", "[ngsTableColumnsManager]", "[ngsTableRowsManager]", "[ngsTextSelectionPopup]", "app-embed-block", "ngs-add-link", "ngs-audio-recorder", "ngs-code-block", "ngs-command-bar", "ngs-content-editor-builder", "ngs-content-editor-code-renderer", "ngs-content-editor-divider-renderer", "ngs-content-editor-embed-renderer", "ngs-content-editor-heading-renderer", "ngs-content-editor-image-renderer", "ngs-content-editor-list-renderer", "ngs-content-editor-paragraph-renderer", "ngs-content-editor-quote-renderer", "ngs-content-editor-renderer", "ngs-content-editor-table-renderer", "ngs-content-editor-video-renderer", "ngs-divider-block", "ngs-draggable-table", "ngs-edit-link", "ngs-heading-block", "ngs-image-block", "ngs-list-block", "ngs-paragraph-block", "ngs-quote-block", "ngs-table-block", "ngs-text-color", "ngs-video-block", "table[ngsResizableTable]" ], "exportedSymbols": [ "AddLinkDialog", "AudioRecorderComponent", "BaseErrorHandler", "BlockSelectionDirective", "Change", "Changeset", "CodeBlockComponent", "CodeBlockDef", "CommandBarComponent", "compare", "CONTENT_BUILDER", "CONTENT_EDITOR_BLOCK", "CONTENT_EDITOR_BLOCK_RENDERERS", "CONTENT_EDITOR_DEFAULT_RENDERERS", "ContentBuilderComponent", "ContentBuilderStore", "ContentChangesObserverDirective", "ContentEditorBlock", "ContentEditorBlockDef", "ContentEditorBlockEmpty", "ContentEditorBlockRendererDef", "ContentEditorBlockRendererInputs", "ContentEditorBlockRendererInputSignals", "ContentEditorCodeBlockSettings", "ContentEditorCodeLanguage", "ContentEditorCodeRenderer", "ContentEditorCodeRendererSettings", "ContentEditorContentEditableDirective", "ContentEditorDataBlock", "ContentEditorDividerRenderer", "ContentEditorEmbedBlockSettings", "ContentEditorEmbedContent", "ContentEditorEmbedRenderer", "ContentEditorHeadingBlockSettings", "ContentEditorHeadingRenderer", "ContentEditorImageBlockSettings", "ContentEditorImageContent", "ContentEditorImageRenderer", "ContentEditorItemProperty", "ContentEditorListItem", "ContentEditorListRenderer", "ContentEditorListSettings", "ContentEditorOptions", "ContentEditorParagraphRenderer", "ContentEditorQuoteBlock", "ContentEditorQuoteBlockContent", "ContentEditorQuoteRenderer", "ContentEditorQuoteRendererContent", "ContentEditorQuoteRendererContentPart", "ContentEditorRenderer", "ContentEditorSuggestionHeading", "ContentEditorSuggestionItem", "ContentEditorTableBlockSettings", "ContentEditorTableCell", "ContentEditorTableRenderer", "ContentEditorTextAlignment", "ContentEditorVideoBlockSettings", "ContentEditorVideoContent", "ContentEditorVideoRenderer", "ContentObserverDirective", "CursorController", "DataAvailableHandler", "DividerBlockComponent", "DividerBlockDef", "DraggableTableComponent", "EditLinkDialog", "ElementAttributes", "EmbedBlock", "EmbedService", "FocusMonitorDirective", "getDimensionAttribute", "getHtmlContent", "getTextAlignment", "HeadingBlockComponent", "HeadingBlockDef", "ImageBlockComponent", "ImageBlockDef", "ISelectionPopupComponent", "ListBlockComponent", "ListBlockDef", "MicrophoneRecorder", "MicrophoneRecorderOptions", "ParagraphBlockComponent", "ParagraphBlockDef", "provideContentEditorRenderer", "provideContentEditorRenderers", "QuoteBlockComponent", "QuoteBlockDef", "RecognitionErrorHandler", "RecognitionLifeCycleHandler", "RecognitionResult", "RecognitionResultHandler", "ResizableTableDirective", "StopHandler", "TableBlockComponent", "TableBlockDef", "TableColumnsManagerDirective", "TableRowsManagerDirective", "TextAlignment", "TextColor", "TextColorComponent", "TextHighlightService", "TextSelectionPopupDirective", "VideoBlockComponent" ], "inputs": [ "_alt", "_caption", "_settings", "autoScrollContainerSelector", "backgroundColors", "block", "blockSelector", "captionPlaceholder", "closestContentObserverClass", "content", "contentChangedDelay", "detectAddedNode", "disabled", "id", "ignoreClasses", "index", "insertAtCursor", "minColumnWidth", "mutationObserverDebounceTime", "ngsContentEditorContentEditable", "observedElement", "options", "persistDraft", "placeholder", "props", "recentlyUsed", "recognitionLang", "resizeHandleWidth", "scrollContainer", "selectedBackgroundColor", "selectedTextColor", "selectionAreaClass", "settings", "stopTimeout", "suggestions", "targetComponent", "textColors", "type" ], "outputs": [ "backgroundColorChanged", "columnAdded", "columnDeleted", "columnManagingEnd", "columnManagingStart", "columnMoved", "columnWidthChange", "columnWidthChangeEnd", "columnWidthChangeStart", "contentChanged", "displayTranscriptChange", "initialized", "moveEnd", "moveStart", "nodeAdded", "pressedEnter", "propsChanged", "rowAdded", "rowDeleted", "rowManagingEnd", "rowManagingStart", "rowMoved", "tagSelected", "textColorChanged" ], "cssTokens": [ "--ngs-color-border", "--ngs-color-neutral-200", "--ngs-color-neutral-50", "--ngs-color-neutral-500", "--ngs-color-neutral-600", "--ngs-color-on-surface", "--ngs-color-primary", "--ngs-color-primary-100", "--ngs-color-primary-300", "--ngs-color-primary-400", "--ngs-color-secondary-fixed", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-color-surface-container-low", "--ngs-content-editor-builder-content-width", "--ngs-content-editor-renderer-block-gap", "--ngs-font-size-sm", "--ngs-list-list-item-one-line-container-height", "--ngs-radius-lg", "--ngs-radius-sm", "--ngs-shadow-lg", "--ngs-upload-area-padding" ], "example": null }, { "name": "content-fade", "title": "Content Fade", "overviewName": "Content Fade", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/content-fade", "publicApi": "projects/components/content-fade/public-api.ts", "sourceRoot": "projects/components/content-fade/src", "docsPath": "/components/content-fade", "docsOverviewSource": "projects/docs/src/app/components/content-fade/overview/overview.html", "purpose": "Add a visual gradient fade at the edge of clipped or scrollable content.", "useWhen": "Use for horizontal preview text, teaser rows, chips, compact lists, or cropped inline content when an edge should fade out instead of ending abruptly. The parent container must provide width, height, scroll behavior, or overflow-hidden; ContentFade does not manage overflow, expansion, truncation, or scrolling by itself. Do not use for loading skeletons, collapsed content logic, tooltips, pagination, modal clipping, ellipsis truncation, or long article reading.", "exampleTopics": [ "Basic Content Fade", "Custom Width", "Custom Position", "Content fade custom width", "Content fade custom position" ], "minimalExample": "
\n Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,\n
", "exampleFiles": [ { "name": "basic-content-fade-example", "title": "Basic content fade", "file": "projects/docs/src/app/components/content-fade/_examples/basic-content-fade-example/basic-content-fade-example.html", "source": "
\n Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,\n
" }, { "name": "content-fade-custom-position-example", "title": "Content fade custom position", "file": "projects/docs/src/app/components/content-fade/_examples/content-fade-custom-position-example/content-fade-custom-position-example.html", "source": "\n Both\n Start\n End\n\n
\n Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,\n
" }, { "name": "content-fade-custom-width-example", "title": "Content fade custom width", "file": "projects/docs/src/app/components/content-fade/_examples/content-fade-custom-width-example/content-fade-custom-width-example.html", "source": "
\n Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,\n
" } ], "previewAsset": "projects/components/content-fade/preview.svg", "selectors": [ "ngs-content-fade" ], "exportedSymbols": [ "ContentFade", "ContentFadePosition" ], "inputs": [ "color", "position", "width" ], "outputs": [], "cssTokens": [ "--ngs-color-background", "--ngs-content-fade-color", "--ngs-content-fade-width" ], "example": null }, { "name": "cookie-popup", "title": "Cookie Popup", "overviewName": "Cookie Popup", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/cookie-popup", "publicApi": "projects/components/cookie-popup/public-api.ts", "sourceRoot": "projects/components/cookie-popup/src", "docsPath": "/components/cookie-popup", "docsOverviewSource": "projects/docs/src/app/components/cookie-popup/overview/overview.html", "purpose": "Collect a non-blocking cookie or privacy consent choice.", "useWhen": "Use on public pages or apps when users need to accept all cookies or only necessary cookies and see a short cookie/privacy message with a policy link. The consumer must persist the accepted choice in a cookie, localStorage, or backend and control visible state. Do not use as a normal Dialog, Alert, Announcement, snackbar, or settings panel.", "exampleTopics": [ "Basic Cookie Popup" ], "minimalExample": "\n Cookie Settings\n We use cookies to provide and improve services and ensure security. Click to view our\n cookie policy.\n You can choose to accept all or only necessary cookies, which may affect some functionalities.\n Necessary cookies only\n Accept all cookies\n\n\n@if (acceptType()) {\n
\n You are selected: {{ acceptType() }} cookies type.\n
\n}", "exampleFiles": [ { "name": "basic-cookie-popup-example", "title": "Basic cookie popup", "file": "projects/docs/src/app/components/cookie-popup/_examples/basic-cookie-popup-example/basic-cookie-popup-example.html", "source": "\n Cookie Settings\n We use cookies to provide and improve services and ensure security. Click to view our\n cookie policy.\n You can choose to accept all or only necessary cookies, which may affect some functionalities.\n Necessary cookies only\n Accept all cookies\n\n\n@if (acceptType()) {\n
\n You are selected: {{ acceptType() }} cookies type.\n
\n}" } ], "previewAsset": "projects/components/cookie-popup/preview.svg", "selectors": [ "[ngsCookiePopupAcceptAllButton]", "[ngsCookiePopupAcceptNecessaryOnlyButton]", "[ngsCookiePopupTitle]", "ngs-cookie-popup" ], "exportedSymbols": [ "CookiePopup", "CookiePopupAcceptAllButtonDirective", "CookiePopupAcceptNecessaryOnlyButtonDirective", "CookiePopupAcceptType", "CookiePopupTitleDirective" ], "inputs": [ "cookiePolicyUrl", "visible" ], "outputs": [ "cookieAccepted" ], "cssTokens": [ "--ngs-color-surface-container-lowest", "--ngs-font-size-sm", "--ngs-radius-xl", "--ngs-shadow-lg" ], "example": null }, { "name": "core", "title": "Core", "overviewName": "Core", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/core", "publicApi": "projects/components/core/public-api.ts", "sourceRoot": "projects/components/core/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Provide infrastructure primitives, theme setup, services, directives, pipes, tokens, and low-level utilities.", "useWhen": "Use @ngstarter-ui/components/core for infrastructure, not for building screens directly. Use provideNgsTheme in app config to set theme, colorScheme, radius, primaryColor, persistence, and storageKey. Inject ThemeManagerService for runtime theme, color scheme, radius, and primary color changes. Use utility directives such as ngsRipple, ngsAutoFocus, ngsFocusElement, ngsTextareaAutoSize, and ngsDebounceTime when a specific low-level behavior is needed. Use pipes such as InitialsPipe, FormatFileSizePipe, SafeHtmlPipe, SafeResourceUrlPipe, OrderByPipe, FilterByPropertyPipe, and SearchByPropertyPipe when they fit. Use ErrorStateMatcher or ShowOnDirtyErrorStateMatcher for form error behavior, and observer/services/utils only for low-level infrastructure. Do not use core as a replacement for real UI components. Do not build admin screens from core primitives; choose concrete components such as Button, Card, DataView, Table, FormField, Dialog, Navigation, Layout, or other component entry points. Do not import Option from core directly for ordinary option lists when Select, Autocomplete, or another component owns the option pattern.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/core/preview.svg", "selectors": [ "[ngsAutoFocus]", "[ngsDebounceTime][ngModel]", "[ngsFocusElement]", "[ngsRipple]", "[ngsSoundEffect]", "ngs-optgroup", "ngs-option", "textarea[ngsTextareaAutoSize]" ], "exportedSymbols": [ "_Option", "_OptionParent", "AnalyticsService", "arrayShallowEquals", "Autofocusable", "AUTOFOCUSABLE", "AutoFocusDirective", "DebounceTimeDirective", "defaultRippleAnimationConfig", "ENVIRONMENT", "EnvironmentService", "ErrorStateMatcher", "FilterByPropertyPipe", "FocusElementDirective", "FormatFileSizePipe", "generateNgsThemeCssText", "generateNgsThemeProperties", "getActualTarget", "GlobalState", "GlobalStore", "InactivityTrackerService", "InitialsPipe", "injectElement", "isElement", "MutationObserverService", "NGS_GENERATED_THEME_PROPERTY_NAMES", "NGS_THEME_OPTIONS", "NgsColorScheme", "NgsGeneratedThemeColorScheme", "NgsRadius", "NgsThemeCssProperties", "NgsThemeName", "NgsThemeOptions", "Optgroup", "Option", "OPTION", "OPTION_PARENT", "OrderByPipe", "PageTitleStrategyService", "provideNgsTheme", "px", "ResizeObserverService", "Ripple", "RIPPLE_GLOBAL_OPTIONS", "RippleAnimationConfig", "RippleConfig", "RippleGlobalOptions", "RippleRef", "RippleRenderer", "RippleState", "SafeHtmlPipe", "SafeResourceUrlPipe", "ScreenLoaderService", "SearchByPropertyPipe", "SeoService", "ShowOnDirtyErrorStateMatcher", "SoundEffectDirective", "TextareaAutoSize", "ThemeManagerService", "typedFromEvent", "zonefreeScheduler" ], "inputs": [ "checkChildren", "debounceTime", "disabled", "label", "maxRows", "minRows", "ngsAutoFocus", "ngsRippleAnimation", "ngsRippleCentered", "ngsRippleColor", "ngsRippleDisabled", "ngsRippleRadius", "ngsRippleTrigger", "ngsRippleUnbounded", "selected", "soundSrc", "value" ], "outputs": [ "elementBlurred", "elementFocused", "onSelectionChange" ], "cssTokens": [ "--ngs-color-on-primary-container", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-primary-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-control-radius", "--ngs-dropdown-height", "--ngs-dropdown-item-active-bg", "--ngs-dropdown-item-color", "--ngs-dropdown-item-disabled-color", "--ngs-dropdown-item-font-size", "--ngs-dropdown-item-gap", "--ngs-dropdown-item-hover-bg", "--ngs-dropdown-item-nested-padding-start", "--ngs-dropdown-item-padding", "--ngs-dropdown-item-padding-x", "--ngs-dropdown-item-radius", "--ngs-dropdown-item-selected-bg", "--ngs-dropdown-item-selected-color", "--ngs-font-size-sm", "--ngs-option-active-background", "--ngs-option-color", "--ngs-option-disabled-color", "--ngs-option-font-size", "--ngs-option-gap", "--ngs-option-group-padding-start", "--ngs-option-height", "--ngs-option-hover-background", "--ngs-option-padding", "--ngs-option-radius", "--ngs-option-selected-background", "--ngs-option-selected-color" ], "example": null }, { "name": "country-select", "title": "Country Select", "overviewName": "Country", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/country-select", "publicApi": "projects/components/country-select/public-api.ts", "sourceRoot": "projects/components/country-select/src", "docsPath": "/forms/country", "docsOverviewSource": "projects/docs/src/app/forms/country/overview/overview.html", "purpose": "Let users choose a country from the built-in country list and store its ISO country code.", "useWhen": "Use in addresses, user profiles, billing, shipping, legal forms, tax forms, tenant settings, and locale settings where the form value should be a country code such as US, PL, or DE. The component shows country flags and names, supports search by name or ISO code, and integrates with FormField. Do not use for phone dialing codes; use PhoneInput. Do not use for currency selection; use CurrencySelect. Do not use for custom region, city, office, or location lists; use Select or Autocomplete.", "exampleTopics": [ "Unselected country", "Basic country select", "Unselected country select" ], "minimalExample": "\n Country\n \n\n

\n Selected country: {{ country() }}\n

", "exampleFiles": [ { "name": "basic-country-select-example", "title": "Basic country select", "file": "projects/docs/src/app/forms/country/_examples/basic-country-select-example/basic-country-select-example.html", "source": "\n Country\n \n\n

\n Selected country: {{ country() }}\n

" }, { "name": "unselected-country-select-example", "title": "Unselected country select", "file": "projects/docs/src/app/forms/country/_examples/unselected-country-select-example/unselected-country-select-example.html", "source": "\n Country\n \n\n

\n Selected country: {{ country() || 'No country selected' }}\n

" } ], "previewAsset": "projects/components/country-select/preview.svg", "selectors": [ "ngs-country-select" ], "exportedSymbols": [ "countries", "Country", "CountrySelect", "CountrySelectValue" ], "inputs": [ "aria-describedby", "aria-label", "clearable", "disabled", "hideCheckIcon", "id", "multiple", "placeholder", "required", "searchTerm", "showCountryCode", "tabIndex", "value" ], "outputs": [ "closed", "opened", "selectionChange" ], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-on-surface-variant", "--ngs-dropdown-item-gap", "--ngs-font-size-sm" ], "example": null }, { "name": "crop", "title": "Crop", "overviewName": "Crop", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/crop", "publicApi": "projects/components/crop/public-api.ts", "sourceRoot": "projects/components/crop/src", "docsPath": "/components/crop", "docsOverviewSource": "projects/docs/src/app/components/crop/overview/overview.html", "purpose": "Let users choose a rectangle or circle crop area on top of an existing image or visual preview.", "useWhen": "Use for avatar dialogs, cover image forms, thumbnail preparation, media management screens, and content editor flows where the user chooses the visible crop area. Crop emits selectionApplied with pixel coordinates, percentages, and container size. It does not upload files, save images, zoom the image, open a gallery, compare images, or process the final bitmap; handle those steps outside the component.", "exampleTopics": [ "Basic image crop" ], "minimalExample": null, "exampleFiles": [ { "name": "basic-image-crop-example", "title": "Basic image crop", "file": "projects/docs/src/app/components/crop/_examples/basic-image-crop-example/basic-image-crop-example.html", "source": "" } ], "previewAsset": "projects/components/crop/preview.svg", "selectors": [ "ngs-crop" ], "exportedSymbols": [ "Crop", "CropSelection" ], "inputs": [ "minHeight", "minWidth", "shape" ], "outputs": [ "selectionApplied" ], "cssTokens": [], "example": null }, { "name": "currency-select", "title": "Currency Select", "overviewName": "Currency Select", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/currency-select", "publicApi": "projects/components/currency-select/public-api.ts", "sourceRoot": "projects/components/currency-select/src", "docsPath": "/forms/currency-select", "docsOverviewSource": "projects/docs/src/app/forms/currency-select/overview/overview.html", "purpose": "Let users choose a currency from the built-in currency list and store its ISO currency code.", "useWhen": "Use for billing, pricing, invoices, checkout, marketplace, finance settings, reporting settings, tenant settings, and locale settings where the form value should be a currency code such as USD, EUR, or PLN. The component shows a flag, ISO code, and symbol, supports search by currency name or code, and can show country names with showCountryName. Do not use for country selection; use CountrySelect. Do not use for entering a money amount; pair it with Input/FormField. Do not use for exchange calculators, rate tables, or number formatting.", "exampleTopics": [ "Basic currency select", "Currency select with country name", "Currency with country name" ], "minimalExample": "\n Currency\n \n\n

\n Selected currency: {{ currency() }}\n

", "exampleFiles": [ { "name": "basic-currency-select-example", "title": "Basic currency select", "file": "projects/docs/src/app/forms/currency-select/_examples/basic-currency-select-example/basic-currency-select-example.html", "source": "\n Currency\n \n\n

\n Selected currency: {{ currency() }}\n

" }, { "name": "currency-with-country-name-example", "title": "Currency with country name", "file": "projects/docs/src/app/forms/currency-select/_examples/currency-with-country-name-example/currency-with-country-name-example.html", "source": "\n Currency\n \n\n

\n Selected currency: {{ currency() }}\n

" } ], "previewAsset": "projects/components/currency-select/preview.svg", "selectors": [ "ngs-currency-select" ], "exportedSymbols": [ "currencies", "Currency", "CurrencySelect" ], "inputs": [ "disabled", "placeholder", "required", "searchTerm", "showCountryName" ], "outputs": [ "closed", "opened" ], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-on-surface-variant", "--ngs-dropdown-item-gap", "--ngs-font-size-sm" ], "example": null }, { "name": "data-view", "title": "Data View", "overviewName": "Data View", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/data-view", "publicApi": "projects/components/data-view/public-api.ts", "sourceRoot": "projects/components/data-view/src", "docsPath": "/libraries/data-view", "docsOverviewSource": "projects/docs/src/app/libraries/data-view/overview/overview.html", "purpose": "Build operational data grids for records that users need to inspect, organize, select, and act on.", "useWhen": "Use for datatables and working data surfaces in admin screens, CRM and ERP records, users, orders, invoices, logs, tasks, assets, and any dataset where the table is the main interactive work surface. Choose DataView when users need row actions, selection, sorting, search/filter state, pagination, loading or empty states, column resizing, column visibility/order, pinned or sticky columns, custom cell renderers, refresh, snapshots, server-side data, or ngsDataViewActionBar. DataView is configured with columnDefs plus local data or a server-side datasource. Do not use for small static tables or simple read-only tabular content; use Table. Do not use as a card list, layout grid, chart widget, report summary, or form editor.", "exampleTopics": [ "Basic dataview", "Data view column pinning", "Data view column settings", "Data view custom cell renderers", "Data view custom empty state", "Data view embedded", "Data view filter data", "Data view height test", "Data view loading state", "Data view pinning pagination", "Data view refresh", "Data view resizable columns", "Data view row click selection", "Data view server side empty state", "Data view server side", "Data view sticky columns", "Data view with action bar", "Data view with pagination", "Data view with sorting", "Dataview with selection" ], "minimalExample": "", "exampleFiles": [ { "name": "basic-dataview-example", "title": "Basic dataview", "file": "projects/docs/src/app/libraries/data-view/_examples/basic-dataview-example/basic-dataview-example.html", "source": "" }, { "name": "data-view-column-pinning-example", "title": "Data view column pinning", "file": "projects/docs/src/app/libraries/data-view/_examples/data-view-column-pinning-example/data-view-column-pinning-example.html", "source": "" }, { "name": "data-view-column-settings-example", "title": "Data view column settings", "file": "projects/docs/src/app/libraries/data-view/_examples/data-view-column-settings-example/data-view-column-settings-example.html", "source": "" } ], "previewAsset": "projects/components/data-view/preview.svg", "selectors": [ "[ngsDataViewActionBar]", "[ngsDataViewEmptyData]", "[ngsDataViewEmptyFilterResults]", "ngs-data-view", "ngs-data-view-action-bar", "ngs-data-view-column-settings-dialog" ], "exportedSymbols": [ "cellRenderer", "ColumnSettingsDialogData", "ColumnSettingsDialogResult", "DATA_VIEW", "DATA_VIEW_CONFIG", "DataView", "DataViewActionBar", "DataViewActionBarAPI", "DataViewActionBarDirective", "DataViewAPI", "DataViewCellRenderer", "DataViewCellRendererDef", "DataViewColumnDef", "DataViewColumnSettingsDialog", "DataViewConfig", "DataViewDatasource", "DataViewEmptyDataDirective", "DataViewEmptyFilterResultsDirective", "DataViewGetRowsParams", "DataViewInterface", "DataViewPinAlign", "DataViewRowModelType", "DataViewRowSelectionEvent", "DataViewRowSelectionEventSource", "DataViewState", "provideDataView" ], "inputs": [ "allowSingleRowSelectionByClick", "autoHeight", "bodyScroll", "bufferRows", "cellRenderers", "columnDefs", "data", "datasource", "embedded", "emptyFilterResultsIcon", "emptyFilterResultsText", "emptyIcon", "emptyText", "forceVisible", "headerHeight", "highlightHeader", "hoverRows", "loading", "minColumnWidth", "ngsDataViewActionBarWidth", "pageIndex", "pageSize", "pageSizeOptions", "paginator", "paginatorAriaLabel", "rowHeight", "rowModelType", "rowSelection", "search", "selectionWidth", "showFirstLastButtons", "snapshot", "stickyHeader", "width", "withColumnSettings", "withPagination", "withSelection" ], "outputs": [ "allRowsSelectionChanged", "loadEnd", "refreshEnd", "selectionChanged", "sortChange" ], "cssTokens": [ "--ngs-color-background", "--ngs-color-border", "--ngs-color-neutral-500", "--ngs-color-on-background", "--ngs-color-primary", "--ngs-color-surface-container", "--ngs-color-surface-container-low", "--ngs-content-fade-color", "--ngs-data-view-bg", "--ngs-data-view-body-bg", "--ngs-data-view-border-color", "--ngs-data-view-cell-padding", "--ngs-data-view-header-bg", "--ngs-data-view-header-height", "--ngs-data-view-hl-header-row-bg", "--ngs-data-view-min-height", "--ngs-data-view-radius", "--ngs-data-view-root-border", "--ngs-data-view-row-bg", "--ngs-data-view-row-hover-bg", "--ngs-data-view-selection-column-width", "--ngs-radius-xl", "--ngs-table-background", "--ngs-table-header-cell-background", "--ngs-table-row-item-outline-width" ], "example": null }, { "name": "date-format-select", "title": "Date Format Select", "overviewName": "Date Format Select", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/date-format-select", "publicApi": "projects/components/date-format-select/public-api.ts", "sourceRoot": "projects/components/date-format-select/src", "docsPath": "/forms/date-format-select", "docsOverviewSource": "projects/docs/src/app/forms/date-format-select/overview/overview.html", "purpose": "Let users choose a preferred date display format string from a predefined list.", "useWhen": "Use in account settings, profile settings, tenant settings, localization preferences, and reporting settings where users choose how dates should appear in the UI or exported reports. The form value is a format string such as MM/dd/yyyy, dd.MM.yyyy, or yyyy-MM-dd; override the available options with dateFormats when needed. Do not use to pick an actual date; use Datepicker. Do not use for date ranges, calendars, schedules, period filters, or direct date formatting in a template.", "exampleTopics": [ "Basic date format select" ], "minimalExample": "
\n \n Date Format\n \n @if (dateFormatControl?.hasError('required') && dateFormatControl?.touched) {\n Please select the date format.\n }\n \n
\n
\n @if (dateFormatControl?.value) {\n

Selected date format: {{ dateFormatControl?.value }}

\n } @else {\n

No date format selected.

\n }\n
", "exampleFiles": [ { "name": "basic-date-format-select-example", "title": "Basic date format select", "file": "projects/docs/src/app/forms/date-format-select/_examples/basic-date-format-select-example/basic-date-format-select-example.html", "source": "
\n \n Date Format\n \n @if (dateFormatControl?.hasError('required') && dateFormatControl?.touched) {\n Please select the date format.\n }\n \n
\n
\n @if (dateFormatControl?.value) {\n

Selected date format: {{ dateFormatControl?.value }}

\n } @else {\n

No date format selected.

\n }\n
" } ], "previewAsset": "projects/components/date-format-select/preview.svg", "selectors": [ "ngs-date-format-select" ], "exportedSymbols": [ "DateFormat", "DateFormatSelect" ], "inputs": [ "dateFormats", "placeholder" ], "outputs": [], "cssTokens": [], "example": null }, { "name": "datepicker", "title": "Datepicker", "overviewName": "Datepicker", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/datepicker", "publicApi": "projects/components/datepicker/public-api.ts", "sourceRoot": "projects/components/datepicker/src", "docsPath": "/components/datepicker", "docsOverviewSource": "projects/docs/src/app/components/datepicker/overview/overview.html", "purpose": "Let users choose a concrete date or date range through an input connected to a calendar overlay.", "useWhen": "Use input[ngsDatepicker], ngs-datepicker, and usually ngs-datepicker-toggle for single date fields in forms, filters, deadlines, birth dates, publish dates, schedules, reporting, invoices, and order dates. Use ngs-date-range-input with ngs-date-range-picker for start/end ranges, report periods, booking windows, analytics ranges, and quick presets. The form value is a date object handled by the configured DateAdapter, not a date format string. Do not use to choose a date display format; use DateFormatSelect. Do not use to choose only a time; use Timepicker. Do not use as a static event calendar, scheduler, timeline, or date formatter.", "exampleTopics": [ "Basic Datepicker", "Datepicker With Custom Icon", "Datepicker With Custom Header", "Datepicker Action Buttons", "Basic Date Range Picker", "Extended Date Range Picker", "Date Range Picker With Quick Presets", "Datepicker custom icon", "Datepicker actions button", "Datepicker presets", "Custom header" ], "minimalExample": "\n Enter a date range\n \n \n \n \n MM/DD/YYYY – MM/DD/YYYY\n \n \n", "exampleFiles": [ { "name": "basic-date-range-picker-example", "title": "Basic date range picker", "file": "projects/docs/src/app/components/datepicker/_examples/basic-date-range-picker-example/basic-date-range-picker-example.html", "source": "\n Enter a date range\n \n \n \n \n MM/DD/YYYY – MM/DD/YYYY\n \n \n" }, { "name": "basic-datepicker-example", "title": "Basic datepicker", "file": "projects/docs/src/app/components/datepicker/_examples/basic-datepicker-example/basic-datepicker-example.html", "source": "\n Choose a date\n \n MM/DD/YYYY\n \n \n" }, { "name": "custom-header", "title": "Custom header", "file": "projects/docs/src/app/components/datepicker/_examples/custom-header/custom-header.html", "source": "
\n \n \n {{ periodLabel }}\n \n \n
" } ], "previewAsset": "projects/components/datepicker/preview.svg", "selectors": [ "[ngsDatepickerApply]", "[ngsDatepickerCancel]", "[ngsDatepickerToggleIcon]", "input[ngsDatepicker]", "input[ngsEndDate]", "input[ngsStartDate]", "ngs-calendar", "ngs-date-range-input", "ngs-date-range-picker", "ngs-datepicker", "ngs-datepicker-actions", "ngs-datepicker-toggle", "ngs-month-view", "ngs-multi-year-view", "ngs-year-view" ], "exportedSymbols": [ "Calendar", "DateAdapter", "Datepicker", "DatepickerActions", "DatepickerApply", "DatepickerCancel", "DatepickerInput", "DatepickerIntl", "DatepickerPreset", "DatepickerToggle", "DatepickerToggleIcon", "DateRange", "DateRangeInput", "DateRangePicker", "EndDate", "MAT_DATE_FORMATS", "MAT_DATE_LOCALE", "MAT_NATIVE_DATE_FORMATS", "MonthView", "MultiYearView", "NativeDateAdapter", "provideNativeDateAdapter", "StartDate", "YearView" ], "inputs": [ "activeDate", "calendarCount", "extended", "maxDate", "minDate", "rangePreviewDate", "selected", "separator", "sharedRangePreview", "showQuickPresets", "startAt", "visibleCalendars" ], "outputs": [ "monthSelected", "rangePreviewDateChange", "selectedChange", "yearSelected" ], "cssTokens": [ "--ngs-calendar-cell-hover-bg", "--ngs-calendar-cell-in-range-bg", "--ngs-calendar-cell-radius", "--ngs-calendar-cell-selected-bg", "--ngs-calendar-cell-selected-color", "--ngs-calendar-cell-size", "--ngs-calendar-cell-today-border", "--ngs-calendar-header-padding", "--ngs-calendar-padding", "--ngs-color-border", "--ngs-color-on-primary", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-outline", "--ngs-color-primary", "--ngs-color-primary-container", "--ngs-color-surface-container-high", "--ngs-datepicker-bg", "--ngs-datepicker-border", "--ngs-datepicker-color", "--ngs-datepicker-preset-hover-bg", "--ngs-datepicker-preset-padding", "--ngs-datepicker-presets-border", "--ngs-datepicker-radius", "--ngs-datepicker-shadow", "--ngs-dropdown-bg", "--ngs-dropdown-border", "--ngs-dropdown-radius", "--ngs-dropdown-shadow", "--ngs-field-label-color", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-radius-lg" ], "example": null }, { "name": "dialog", "title": "Dialog", "overviewName": "Dialog", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/dialog", "publicApi": "projects/components/dialog/public-api.ts", "sourceRoot": "projects/components/dialog/src", "docsPath": "/components/dialog", "docsOverviewSource": "projects/docs/src/app/components/dialog/overview/overview.html", "purpose": "Open custom focused modal workflows above the current page.", "useWhen": "Use Dialog.open(ComponentOrTemplate, config) for forms, editing records, creating objects, settings, detail views, wizard-like steps, scrollable content, and custom modal workflows where users must complete or close the task before returning to the page. Structure custom dialog components with ngs-dialog-title, ngs-dialog-content, ngs-dialog-actions, DialogRef.close(...), ngs-dialog-close, and optional DIALOG_DATA. Use DialogConfig for data, sizing, disableClose, autofocus, backdrop, panel classes, accessibility labels, and showCloseButton when the dialog should render the built-in icon close button. Do not use for a short binary destructive confirmation; use Confirm. Do not use for global messages; use Announcement, Alert, or SnackBar. Do not use for mobile bottom action panels; use BottomSheet. Do not use for side inspectors, filters, or detail panels; use Drawer or SidePanel.", "configOptions": [ "data", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasBackdrop", "backdropClass", "panelClass", "disableClose", "autoFocus", "restoreFocus", "ariaDescribedBy", "ariaLabelledBy", "ariaLabel", "role", "closeOnNavigation", "showCloseButton" ], "exampleTopics": [ "Basic Dialog", "Dialog Close", "Dialog With Scrollable Content", "Dialog Sizing (height, min-height)", "Dialog scrollable content", "Dialog sizing", "Basic" ], "minimalExample": "

Hi {{ data.name }}

\n\n

What's your favorite animal?

\n \n Favorite Animal\n \n \n\n\n \n \n", "exampleFiles": [ { "name": "basic", "title": "Basic", "file": "projects/docs/src/app/components/dialog/_examples/basic/basic.dialog.html", "source": "

Hi {{ data.name }}

\n\n

What's your favorite animal?

\n \n Favorite Animal\n \n \n\n\n \n \n" }, { "name": "basic-dialog-example", "title": "Basic dialog", "file": "projects/docs/src/app/components/dialog/_examples/basic-dialog-example/basic-dialog-example.html", "source": "\n What's your name?\n \n\n
\n \n
\n@if (animal) {\n

You chose: {{ animal }}

\n}" }, { "name": "dialog-close-example", "title": "Dialog close", "file": "projects/docs/src/app/components/dialog/_examples/dialog-close-example/dialog-close-example.html", "source": "\n@if (result()) {\n

Result: {{ result() }}

\n}\n\n

Close dialog

\n \n

\n This dialog enables the built-in close button through showCloseButton. Action\n buttons can still use ngs-dialog-close to close the current dialog and optionally\n return a result to the opener.\n

\n \n \n \n \n \n" } ], "previewAsset": "projects/components/dialog/preview.svg", "selectors": [ "[ngs-dialog-actions]", "[ngs-dialog-close]", "[ngs-dialog-content]", "[ngs-dialog-title]", "[ngsDialogActions]", "[ngsDialogClose]", "[ngsDialogContent]", "[ngsDialogTitle]", "ngs-dialog-actions", "ngs-dialog-container", "ngs-dialog-content", "ngs-dialog-header", "ngs-dialog-title" ], "exportedSymbols": [ "Dialog", "DIALOG_DATA", "DIALOG_DEFAULT_OPTIONS", "DialogActions", "DialogClose", "DialogConfig", "DialogContainer", "DialogContent", "DialogHeader", "DialogRef", "DialogTitle" ], "inputs": [ "align", "ariaLabel", "id", "ngs-dialog-close", "ngsDialogClose", "type" ], "outputs": [], "cssTokens": [ "--ngs-color-on-surface", "--ngs-control-height-lg", "--ngs-dialog-actions-gap", "--ngs-dialog-actions-padding", "--ngs-dialog-background", "--ngs-dialog-bg", "--ngs-dialog-border-radius", "--ngs-dialog-box-shadow", "--ngs-dialog-color", "--ngs-dialog-container-max-width", "--ngs-dialog-container-min-width", "--ngs-dialog-header-padding", "--ngs-dialog-headline-padding", "--ngs-dialog-radius", "--ngs-dialog-shadow", "--ngs-dialog-title-font-size", "--ngs-dialog-title-font-weight", "--ngs-dialog-with-content-padding" ], "example": "inject(Dialog).open(MyDialogComponent, { data })" }, { "name": "digit-roller", "title": "Digit Roller", "overviewName": "Digit Roller", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/digit-roller", "publicApi": "projects/components/digit-roller/public-api.ts", "sourceRoot": "projects/components/digit-roller/src", "docsPath": "/components/digit-roller", "docsOverviewSource": "projects/docs/src/app/components/digit-roller/overview/overview.html", "purpose": "The NgStarter Angular Digit Roller component animates individual digits in formatted numbers with a slot-machine style reel effect.", "useWhen": "Choose Digit Roller when the workflow matches examples such as Number Sizes, Social Actions, Progress Bar, Gauge, Digit roller dashboard.", "exampleTopics": [ "Number Sizes", "Social Actions", "Progress Bar", "Gauge", "Digit roller dashboard", "Digit roller social actions", "Digit roller progress bar", "Digit roller gauge" ], "minimalExample": "
\n @for (example of examples; track example.label) {\n
\n
\n

{{ example.label }}

\n

{{ example.description }}

\n
\n
\n \n @if (example.unit) {\n {{ example.unit }}\n }\n
\n
\n }\n
", "exampleFiles": [ { "name": "digit-roller-dashboard-example", "title": "Digit roller dashboard", "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-dashboard-example/digit-roller-dashboard-example.html", "source": "
\n @for (example of examples; track example.label) {\n
\n
\n

{{ example.label }}

\n

{{ example.description }}

\n
\n
\n \n @if (example.unit) {\n {{ example.unit }}\n }\n
\n
\n }\n
" }, { "name": "digit-roller-gauge-example", "title": "Digit roller gauge", "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-gauge-example/digit-roller-gauge-example.html", "source": "
\n \n \n \n \n \n
\n

Health score

\n

\n The same value drives the gauge arc and the animated number in the center.\n

\n
\n
" }, { "name": "digit-roller-progress-bar-example", "title": "Digit roller progress bar", "file": "projects/docs/src/app/components/digit-roller/_examples/digit-roller-progress-bar-example/digit-roller-progress-bar-example.html", "source": "
\n
\n
\n

Deployment progress

\n

\n \n steps remaining\n

\n
\n \n
\n \n
" } ], "previewAsset": "projects/components/digit-roller/preview.svg", "selectors": [ "[ngsDigitRollerGroup]", "ngs-digit-roller" ], "exportedSymbols": [ "canAnimateDigitRoller", "DIGIT_ROLLER_EMPTY_FORMATTED", "DIGIT_ROLLER_GROUP", "DigitRoller", "DigitRollerCapabilityOptions", "DigitRollerDigitConfig", "DigitRollerDigits", "DigitRollerEasing", "DigitRollerFormattedNumber", "DigitRollerGlyph", "DigitRollerGroupCoordinator", "DigitRollerGroupDirective", "DigitRollerGroupMember", "DigitRollerNumberPart", "DigitRollerTiming", "DigitRollerTrend", "formatDigitRollerValue", "getDigitRollerGlyphs", "resetDigitRollerCapabilityCache" ], "inputs": [ "animated", "colorOnDecrease", "colorOnIncrease", "continuous", "digits", "duration", "flipEasing", "format", "locales", "opacityDuration", "opacityTiming", "prefix", "respectMotionPreference", "spinEasing", "spinTiming", "stagger", "suffix", "transformTiming", "trend", "value" ], "outputs": [ "animationsFinish", "animationsStart" ], "cssTokens": [ "--ngs-digit-roller-mask-height", "--ngs-digit-roller-mask-width", "--ngs-digit-roller-min-digit-width" ], "example": null }, { "name": "divider", "title": "Divider", "overviewName": "Divider", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/divider", "publicApi": "projects/components/divider/public-api.ts", "sourceRoot": "projects/components/divider/src", "docsPath": "/components/divider", "docsOverviewSource": "projects/docs/src/app/components/divider/overview/overview.html", "purpose": "Separate related groups of content or actions with a visual rule.", "useWhen": "Use ngs-divider in lists, forms, panels, cards, toolbars, popovers, settings screens, and dense layouts where a clear boundary between groups helps scanning. Use vertical dividers between inline actions or columns, horizontal dividers between sections, inset when the line should align with content, and fixedHeight for compact vertical dividers. Use ngs-text-divider when the separator needs a short label such as “or”. Do not use Divider to create empty space or layout structure; use Tailwind spacing and layout classes. Prefer specialized divider components inside systems that provide them, such as MenuDivider, NavigationDivider, SidebarDivider, and CommandBarDivider.", "exampleTopics": [ "Basic Divider", "Text Divider", "Divider overview" ], "minimalExample": "
\n
\n

Horizontal

\n \n
\n
\n

Horizontal inset

\n
\n
Section 1
\n \n
Section 2
\n
\n
\n
\n

Vertical

\n
\n
Item 1
\n \n
Item 2
\n \n
Item 3
\n
\n
\n
\n

Vertical fixed height

\n
\n
Item 1
\n \n
Item 2
\n \n
Item 3
\n
\n
\n
", "exampleFiles": [ { "name": "divider-overview-example", "title": "Divider overview", "file": "projects/docs/src/app/components/divider/_examples/divider-overview-example/divider-overview-example.html", "source": "
\n
\n

Horizontal

\n \n
\n
\n

Horizontal inset

\n
\n
Section 1
\n \n
Section 2
\n
\n
\n
\n

Vertical

\n
\n
Item 1
\n \n
Item 2
\n \n
Item 3
\n
\n
\n
\n

Vertical fixed height

\n
\n
Item 1
\n \n
Item 2
\n \n
Item 3
\n
\n
\n
" }, { "name": "text-divider-example", "title": "Text divider", "file": "projects/docs/src/app/components/divider/_examples/text-divider-example/text-divider-example.html", "source": "

\n Text dividers\n

\n
\n or\n Or register with\n any text\n
" } ], "previewAsset": "projects/components/divider/preview.svg", "selectors": [ "ngs-divider", "ngs-text-divider" ], "exportedSymbols": [ "Divider", "TextDivider" ], "inputs": [ "fixedHeight", "inset", "vertical" ], "outputs": [], "cssTokens": [ "--ngs-color-border", "--ngs-divider-vertical-fixed-height" ], "example": null }, { "name": "drawer", "title": "Drawer", "overviewName": "Drawer", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/drawer", "publicApi": "projects/components/drawer/public-api.ts", "sourceRoot": "projects/components/drawer/src", "docsPath": "/components/drawer", "docsOverviewSource": "projects/docs/src/app/components/drawer/overview/overview.html", "purpose": "Show custom side content in a right-side overlay while keeping the current page as context.", "useWhen": "Use for any secondary side content or workflow that should open beside the current screen without navigating away: forms, filters, record details, settings, previews, history, activity feeds, help content, quick actions, inspectors, or other custom panels. Open with #drawer=\"ngsDrawer\" and drawer.open()/drawer.close(), or control with [isOpen]. Use [showBackdrop]=\"false\" for a non-blocking side panel. Do not use for centered modal workflows; use Dialog. Do not use for short confirmations; use Confirm. Do not use for mobile bottom action panels; use BottomSheet. Do not use as the primary persistent app navigation; use navigation/sidebar components.", "exampleTopics": [ "Basic drawer", "Drawer without backdrop" ], "minimalExample": "\n\n \n Header\n \n \n \n Footer\n \n", "exampleFiles": [ { "name": "basic-drawer-example", "title": "Basic drawer", "file": "projects/docs/src/app/components/drawer/_examples/basic-drawer-example/basic-drawer-example.html", "source": "\n\n \n Header\n \n \n \n Footer\n \n" }, { "name": "drawer-without-backdrop-example", "title": "Drawer without backdrop", "file": "projects/docs/src/app/components/drawer/_examples/drawer-without-backdrop-example/drawer-without-backdrop-example.html", "source": "\n\n \n Header\n \n \n \n Footer\n \n" } ], "previewAsset": "projects/components/drawer/preview.svg", "selectors": [ "[ngsDrawerIgnoreOutsideClick]", "ngs-drawer" ], "exportedSymbols": [ "Drawer", "DRAWER", "DrawerIgnoreOutsideClickDirective" ], "inputs": [ "isOpen", "showBackdrop" ], "outputs": [ "closed", "opened" ], "cssTokens": [ "--ngs-color-surface-container-lowest", "--ngs-drawer-transition", "--ngs-drawer-transition-duration", "--ngs-dropdown-border" ], "example": null }, { "name": "emoji-picker", "title": "Emoji Picker", "overviewName": "Emoji Picker", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/emoji-picker", "publicApi": "projects/components/emoji-picker/public-api.ts", "sourceRoot": "projects/components/emoji-picker/src", "docsPath": "/components/emoji-picker", "docsOverviewSource": "projects/docs/src/app/components/emoji-picker/overview/overview.html", "purpose": "Let users choose one Unicode emoji from an overlay picker.", "useWhen": "Use in comments, chats, quick messages, reactions, comment/editor toolbars, social features, and any text entry flow where users need to insert or choose an emoji. Open from a button or toolbar action with [ngsEmojiPickerTriggerFor], then handle emojiSelected as the selected emoji string. It supports categorized emoji data, language from LOCALE_ID or the language input, hover preview, and loading skeletons. Do not use for interface icons; use Icon. Do not use for normal action menus; use Menu. Do not use as a full editor; use CommentEditor or TextEditor. Do not use for custom stickers, GIFs, or media pickers unless the value is a Unicode emoji.", "exampleTopics": [ "Basic emoji picker" ], "minimalExample": "\n\n \n\n@if (selectedEmoji()) {\n
\n {{ selectedEmoji() }}\n
\n}", "exampleFiles": [ { "name": "basic-emoji-picker-example", "title": "Basic emoji picker", "file": "projects/docs/src/app/components/emoji-picker/_examples/basic-emoji-picker-example/basic-emoji-picker-example.html", "source": "\n\n \n\n@if (selectedEmoji()) {\n
\n {{ selectedEmoji() }}\n
\n}" } ], "previewAsset": "projects/components/emoji-picker/preview.svg", "selectors": [ "[ngsEmojiPickerTriggerFor]", "ngs-emoji-picker" ], "exportedSymbols": [ "EMOJI_PICKER_TRIGGER_FOR", "EmojiPicker", "EmojiPickerTriggerForDirective" ], "inputs": [ "language", "position", "selectEmojiLabel" ], "outputs": [ "closed", "emojiSelected", "opened" ], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-subtle", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-color-surface-container-low", "--ngs-color-surface-container-lowest", "--ngs-dropdown-bg", "--ngs-dropdown-border", "--ngs-dropdown-radius", "--ngs-dropdown-shadow", "--ngs-emoji-picker-bg", "--ngs-emoji-picker-border", "--ngs-emoji-picker-border-radius", "--ngs-emoji-picker-list-height", "--ngs-emoji-picker-list-width", "--ngs-emoji-picker-margin", "--ngs-emoji-picker-shadow", "--ngs-font-size-sm", "--ngs-font-size-xl", "--ngs-font-size-xs", "--ngs-menu-border", "--ngs-skeleton-from-bg", "--ngs-skeleton-to-bg" ], "example": null }, { "name": "empty-state", "title": "Empty State", "overviewName": "Empty State", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/empty-state", "publicApi": "projects/components/empty-state/public-api.ts", "sourceRoot": "projects/components/empty-state/src", "docsPath": "/components/empty-state", "docsOverviewSource": "projects/docs/src/app/components/empty-state/overview/overview.html", "purpose": "Explain why an expected content area is empty and optionally offer a next action.", "useWhen": "Use for empty tables, lists, folders, dashboard sections, first-run screens, no search results, no filtered data, no projects yet, no messages yet, and similar no-content states. Compose with ngs-empty-state, ngs-empty-state-title, ngs-empty-state-content, optional ngs-empty-state-icon or ngs-empty-state-image, and ngs-empty-state-actions for useful next steps such as Create, Clear filters, Invite, or Upload. In DataView, prefer EmptyState inside empty templates for custom dataset empty states. Do not use for loading states; use BlockLoader, Skeleton, or ProgressSpinner. Do not use for critical errors; use Alert or ActionRequired. Do not use as a decorative placeholder, hero block, or marketing section.", "exampleTopics": [ "Basic empty state", "Empty state with image", "Empty state with icon", "Empty state with custom icon", "Empty state with actions" ], "minimalExample": "
\n \n \n Something has been achieved\n \n \n You can do something with it, or you can not do it. And the description text can be quite long.\n \n \n
", "exampleFiles": [ { "name": "basic-empty-state-example", "title": "Basic empty state", "file": "projects/docs/src/app/components/empty-state/_examples/basic-empty-state-example/basic-empty-state-example.html", "source": "
\n \n \n Something has been achieved\n \n \n You can do something with it, or you can not do it. And the description text can be quite long.\n \n \n
" }, { "name": "empty-state-with-actions-example", "title": "Empty state with actions", "file": "projects/docs/src/app/components/empty-state/_examples/empty-state-with-actions-example/empty-state-with-actions-example.html", "source": "
\n \n \n Something has been achieved\n \n \n You can do something with it, or you can not do it. And the description text can be quite long.\n \n \n \n \n \n \n
" }, { "name": "empty-state-with-custom-icon-example", "title": "Empty state with custom icon", "file": "projects/docs/src/app/components/empty-state/_examples/empty-state-with-custom-icon-example/empty-state-with-custom-icon-example.html", "source": "
\n \n \n \n \n \n No results for the term \"Info\" on the our planet.\n \n \n
" } ], "previewAsset": "projects/components/empty-state/preview.svg", "selectors": [ "[ngs-empty-state-title]", "ngs-empty-state", "ngs-empty-state-actions", "ngs-empty-state-content", "ngs-empty-state-icon", "ngs-empty-state-image", "ngs-empty-state-title" ], "exportedSymbols": [ "EmptyState", "EmptyStateActions", "EmptyStateContent", "EmptyStateIcon", "EmptyStateImage", "EmptyStateTitle" ], "inputs": [], "outputs": [], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-neutral-600", "--ngs-color-surface-container", "--ngs-empty-state-padding", "--ngs-empty-state-title-font-size", "--ngs-empty-state-title-font-weight", "--ngs-font-size-sm", "--ngs-icon-size" ], "example": null }, { "name": "events", "title": "Events", "overviewName": "Events", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/events", "publicApi": "projects/components/events/public-api.ts", "sourceRoot": "projects/components/events/src", "docsPath": "/components/events", "docsOverviewSource": "projects/docs/src/app/components/events/overview/overview.html", "purpose": "The NgStarter Angular Events components let you build grouped schedule lists with day markers, event cards, inline statuses, time ranges, status tones, and attendee actions.", "useWhen": "Choose Events when the workflow matches examples such as Basic Events, Weekly Grouping, Weekly events.", "exampleTopics": [ "Basic Events", "Weekly Grouping", "Weekly events" ], "minimalExample": "\n \n \n \n Octolane Check-in\n Confirmed\n 9:00 - 9:30 AM\n \n \n \n \n \n \n \n POC Progress\n Draft\n 9:00 - 9:15 AM\n \n \n \n \n \n \n \n Octolane Weekly Review\n 9:00 - 10:00 AM\n \n \n \n \n \n \n\n \n \n \n Octolane Check-in\n Confirmed\n 9:00 - 9:30 AM\n \n \n \n \n \n \n \n POC Progress\n Draft\n 9:00 - 9:15 AM\n \n \n \n \n \n \n \n Octolane Weekly Review\n 9:00 - 10:00 AM\n \n \n \n \n \n \n\n \n \n \n Octolane Weekly Review\n Confirmed\n 9:00 - 10:00 AM\n \n \n \n \n \n \n \n \n \n POC Progress\n Draft\n 9:00 - 9:15 AM\n \n \n \n \n \n \n" } ], "previewAsset": "projects/components/events/preview.svg", "selectors": [ "[ngs-event-date]", "[ngs-event-description]", "[ngs-event-status]", "[ngs-event-time]", "[ngs-event-title]", "[ngsEventActions]", "ngs-event", "ngs-event-date", "ngs-event-description", "ngs-event-status", "ngs-event-time", "ngs-event-title", "ngs-events-list", "ngs-events-section" ], "exportedSymbols": [ "Event", "EventActionsDirective", "EventDate", "EventDescription", "EventsList", "EventsListGroupBy", "EventsSection", "EventStatus", "EventTime", "EventTitle", "EventTone" ], "inputs": [ "day", "groupBy", "label", "tone", "weekday" ], "outputs": [], "cssTokens": [ "--ngs-color-border", "--ngs-color-danger", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-primary", "--ngs-color-success", "--ngs-color-warning", "--ngs-event-bg", "--ngs-event-border-color", "--ngs-event-date-border-color", "--ngs-event-date-day-color", "--ngs-event-date-day-font-size", "--ngs-event-date-day-font-weight", "--ngs-event-date-divider-height", "--ngs-event-date-height", "--ngs-event-date-weekday-color", "--ngs-event-date-weekday-font-size", "--ngs-event-date-weekday-font-weight", "--ngs-event-date-width", "--ngs-event-description-color", "--ngs-event-description-font-size", "--ngs-event-description-font-weight", "--ngs-event-gap", "--ngs-event-meta-gap", "--ngs-event-min-height", "--ngs-event-padding", "--ngs-event-radius", "--ngs-event-shadow", "--ngs-event-status-color", "--ngs-event-status-dot-color", "--ngs-event-status-dot-size", "--ngs-event-status-font-size", "--ngs-event-status-font-weight", "--ngs-event-status-gap", "--ngs-event-time-color", "--ngs-event-time-font-size", "--ngs-event-time-font-weight", "--ngs-event-title-color", "--ngs-event-title-font-size", "--ngs-event-title-font-weight", "--ngs-events-list-gap", "--ngs-events-section-gap", "--ngs-events-section-item-gap", "--ngs-events-section-label-color", "--ngs-events-section-label-font-size", "--ngs-events-section-label-font-weight", "--ngs-shadow-xs" ], "example": null }, { "name": "expand", "title": "Expand", "overviewName": "Expand", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/expand", "publicApi": "projects/components/expand/public-api.ts", "sourceRoot": "projects/components/expand/src", "docsPath": "/components/expand", "docsOverviewSource": "projects/docs/src/app/components/expand/overview/overview.html", "purpose": "Collapse one long content block to a limited-height preview with a fade and show-more control.", "useWhen": "Use for long descriptions, comments, changelog entries, release notes, activity text, terms snippets, card descriptions, and compact summaries where the page should stay scannable but users can reveal the full content inline. Supports expanded, expandedChange, height, color, expandLabel, collapseLabel, and showButtonIfExpanded. Do not use for independent collapsible sections; use ExpansionPanel or accordion. Do not use for hierarchical expandable nodes; use Tree. Do not use for read-more navigation to another page, tabs, steppers, form disclosure logic, or as a generic container/card.", "exampleTopics": [ "Basic Expand", "Show button if expanded", "Custom button labels", "Expand show button if expanded", "Expand custom button labels" ], "minimalExample": "\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hop\n...", "exampleFiles": [ { "name": "basic-expand-example", "title": "Basic expand", "file": "projects/docs/src/app/components/expand/_examples/basic-expand-example/basic-expand-example.html", "source": "\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hop\n..." }, { "name": "expand-custom-button-labels-example", "title": "Expand custom button labels", "file": "projects/docs/src/app/components/expand/_examples/expand-custom-button-labels-example/expand-custom-button-labels-example.html", "source": "\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no o\n..." }, { "name": "expand-show-button-if-expanded-example", "title": "Expand show button if expanded", "file": "projects/docs/src/app/components/expand/_examples/expand-show-button-if-expanded-example/expand-show-button-if-expanded-example.html", "source": "\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hoping I had a magical, complete solution to this problem,
\n I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.\n If you were hopi\n..." } ], "previewAsset": "projects/components/expand/preview.svg", "selectors": [ "ngs-expand" ], "exportedSymbols": [ "Expand" ], "inputs": [ "collapseLabel", "color", "expanded", "expandLabel", "height", "showButtonIfExpanded" ], "outputs": [ "expandedChange" ], "cssTokens": [ "--ngs-color-background", "--ngs-color-on-surface", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-expand-button-bg", "--ngs-expand-button-border-radius", "--ngs-expand-button-box-shadow", "--ngs-expand-button-color", "--ngs-expand-button-font-size", "--ngs-expand-button-hover-bg", "--ngs-expand-button-hover-opacity", "--ngs-expand-button-padding", "--ngs-expand-expanded-height", "--ngs-expand-fade-color", "--ngs-shadow-md" ], "example": null }, { "name": "expansion", "title": "Expansion", "overviewName": "Expansion Panel", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/expansion", "publicApi": "projects/components/expansion/public-api.ts", "sourceRoot": "projects/components/expansion/src", "docsPath": "/components/expansion-panel", "docsOverviewSource": "projects/docs/src/app/components/expansion-panel/overview/overview.html", "purpose": "Group independent collapsible sections with headers and bodies.", "useWhen": "Use ngs-expansion-panel for one collapsible section and ngs-accordion for a coordinated group of panels. Use for settings groups, FAQs, advanced options, filters, grouped form sections, detail sections, onboarding or setup steps, and inspector groups where each section has its own title and content. Supports expanded, expandedChange, opened, closed, disabled, hideToggle, ngs-expansion-panel-header, ngs-expansion-panel-title, ngs-expansion-panel-description, ngs-action-row, accordion multi, openAll(), and closeAll(). Do not use to truncate one long text block; use Expand. Do not use for hierarchical nodes; use Tree. Do not use as tabs, a strict stepper flow, or a plain card/container without collapse behavior.", "exampleTopics": [ "Basic Expansion Panel", "Expansion Panel with expand/collapse all toggles", "Expansion Panel as Accordion", "Expansion panel expand collapse toggles" ], "minimalExample": "\n \n \n \n This is the expansion title\n \n \n This is a summary of the content\n \n \n

This is the primary content of the panel.

\n \n \n \n \n Self aware panel\n \n \n Currently I am {{ panelOpenState ? 'open' : 'closed' }}\n \n \n

I'm visible because I am open

\n \n", "exampleFiles": [ { "name": "basic-expansion-panel-example", "title": "Basic expansion panel", "file": "projects/docs/src/app/components/expansion-panel/_examples/basic-expansion-panel-example/basic-expansion-panel-example.html", "source": "\n \n \n \n This is the expansion title\n \n \n This is a summary of the content\n \n \n

This is the primary content of the panel.

\n \n \n \n \n Self aware panel\n \n \n Currently I am {{ panelOpenState ? 'open' : 'closed' }}\n \n \n

I'm visible because I am open

\n \n" }, { "name": "expansion-panel-as-accordion-example", "title": "Expansion panel as accordion", "file": "projects/docs/src/app/components/expansion-panel/_examples/expansion-panel-as-accordion-example/expansion-panel-as-accordion-example.html", "source": "\n \n \n \n Personal data\n \n \n Type your name and age\n \n \n \n \n First name\n \n \n \n Age\n \n \n \n \n \n \n \n \n \n Destination\n \n \n Type the country name\n \n \n \n \n Country\n \n \n \n \n \n \n \n \n \n \n \n
\n\n \n \n \n Personal data\n \n \n Type your name and age\n \n \n \n \n First name\n \n \n \n Age\n \n \n \n \n \n \n Destination\n \n \n Type the country name\n \n \n \n \n Country\n \n \n \n \n \n \n Day of the trip\n \n \n Inform the date you wish to travel\n \n \n
\n
contract.pdf
\n
Resolved from fileName
\n
\n
\n
\n \n
\n
Financial model
\n
Resolved from extension
\n
\n
", "exampleFiles": [ { "name": "basic-file-type-example", "title": "Basic file type", "file": "projects/docs/src/app/components/file-type/_examples/basic-file-type-example/basic-file-type-example.html", "source": "
\n \n
\n
contract.pdf
\n
Resolved from fileName
\n
\n
\n
\n \n
\n
Financial model
\n
Resolved from extension
\n
\n
" }, { "name": "file-type-gallery-example", "title": "File type gallery", "file": "projects/docs/src/app/components/file-type/_examples/file-type-gallery-example/file-type-gallery-example.html", "source": "
\n @for (type of types(); track type) {\n
\n \n
{{ type }}
\n
\n }\n
" }, { "name": "file-type-mime-example", "title": "File type mime", "file": "projects/docs/src/app/components/file-type/_examples/file-type-mime-example/file-type-mime-example.html", "source": "
\n @for (file of files(); track file.name) {\n
\n \n
\n
{{ file.name }}
\n
{{ file.mimeType }}
\n
\n
\n }\n
" } ], "previewAsset": "projects/components/file-type/preview.svg", "selectors": [ "ngs-file-type" ], "exportedSymbols": [ "FileType", "FileTypeName" ], "inputs": [ "decorative", "extension", "fallback", "fileName", "label", "mimeType" ], "outputs": [], "cssTokens": [ "--ngs-file-type-size" ], "example": null }, { "name": "filter-builder", "title": "Filter Builder", "overviewName": "Filter Builder", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/filter-builder", "publicApi": "projects/components/filter-builder/public-api.ts", "sourceRoot": "projects/components/filter-builder/src", "docsPath": "/components/filter-builder", "docsOverviewSource": "projects/docs/src/app/components/filter-builder/overview/overview.html", "purpose": "Let users construct a structured tree of filtering rules from fields, operations, and values.", "useWhen": "Use for advanced filters, saved views, report builders, admin datasets, CRM or ERP records, audit logs, catalogs, product filtering, and segmentation workflows where a simple search field is not enough. Configure fields with fieldDefs using dataField, name, dataType, optional lookup, and filterOperations. Users can build conditions and nested groups with and/or, and valueChanged emits FilterBuilderGroup[]. The app must translate that emitted tree into an API query, SQL or DSL condition, DataView datasource params, or local filtering logic. Do not use for ordinary text search; use Input or a search field. Do not use for a simple table filter string; use DataView/Table filtering. Do not use as a data-editing form, query-language editor, chart filter chip bar, or full report builder with visualizations.", "exampleTopics": [ "Basic filter builder" ], "minimalExample": "\n
\n
Value:
\n 
{{ value | json }}
\n
", "exampleFiles": [ { "name": "basic-filter-builder-example", "title": "Basic filter builder", "file": "projects/docs/src/app/components/filter-builder/_examples/basic-filter-builder-example/basic-filter-builder-example.html", "source": "\n
\n
Value:
\n 
{{ value | json }}
\n
" } ], "previewAsset": "projects/components/filter-builder/preview.svg", "selectors": [ "[ngsFilterBuilderOperationDef]", "[ngsFilterBuilderOperationIcon]", "[ngsFilterBuilderOperationName]", "ngs-filter-builder" ], "exportedSymbols": [ "FilterBuilder", "FilterBuilderCondition", "FilterBuilderFieldDataSourceItem", "FilterBuilderFieldDef", "FilterBuilderGroup", "FilterBuilderItemType", "FilterBuilderOperationDefDirective", "FilterBuilderOperationIconDirective", "FilterBuilderOperationNameDirective" ], "inputs": [ "allowedDataTypes", "categories", "customOperations", "fieldDefs", "groupOperations", "ngsFilterBuilderOperationDef", "value" ], "outputs": [ "valueChanged" ], "cssTokens": [ "--ngs-color-border", "--ngs-color-danger", "--ngs-color-neutral-100", "--ngs-color-neutral-200", "--ngs-color-neutral-50", "--ngs-color-neutral-600", "--ngs-color-neutral-650", "--ngs-color-on-primary", "--ngs-color-on-primary-container", "--ngs-color-on-secondary", "--ngs-color-on-secondary-container", "--ngs-color-on-surface", "--ngs-color-primary", "--ngs-color-primary-400", "--ngs-color-primary-container", "--ngs-color-secondary", "--ngs-color-secondary-400", "--ngs-color-secondary-container", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-filter-builder-condition-field-active-bg", "--ngs-filter-builder-condition-field-active-color", "--ngs-filter-builder-condition-field-bg", "--ngs-filter-builder-condition-field-border-radius", "--ngs-filter-builder-condition-field-bpadding", "--ngs-filter-builder-condition-field-color", "--ngs-filter-builder-condition-field-font-size", "--ngs-filter-builder-condition-field-font-weight", "--ngs-filter-builder-condition-field-height", "--ngs-filter-builder-condition-field-hover-bg", "--ngs-filter-builder-condition-field-hover-color", "--ngs-filter-builder-condition-gap", "--ngs-filter-builder-condition-operation-active-bg", "--ngs-filter-builder-condition-operation-active-color", "--ngs-filter-builder-condition-operation-bg", "--ngs-filter-builder-condition-operation-border-radius", "--ngs-filter-builder-condition-operation-bpadding", "--ngs-filter-builder-condition-operation-color", "--ngs-filter-builder-condition-operation-font-size", "--ngs-filter-builder-condition-operation-font-weight", "--ngs-filter-builder-condition-operation-height", "--ngs-filter-builder-condition-operation-hover-bg", "--ngs-filter-builder-condition-operation-hover-color", "--ngs-filter-builder-condition-remove-color", "--ngs-filter-builder-condition-remove-hover-color", "--ngs-filter-builder-condition-value-bg", "--ngs-filter-builder-condition-value-border-radius", "--ngs-filter-builder-condition-value-bpadding", "--ngs-filter-builder-condition-value-color", "--ngs-filter-builder-condition-value-font-size", "--ngs-filter-builder-condition-value-font-weight", "--ngs-filter-builder-condition-value-height", "--ngs-filter-builder-condition-value-hover-bg", "--ngs-filter-builder-condition-value-hover-color", "--ngs-filter-builder-group-add-color", "--ngs-filter-builder-group-add-hover-color", "--ngs-filter-builder-group-gap", "--ngs-filter-builder-group-margin", "--ngs-filter-builder-group-operation-active-bg", "--ngs-filter-builder-group-operation-active-color", "--ngs-filter-builder-group-operation-bg", "--ngs-filter-builder-group-operation-border", "--ngs-filter-builder-group-operation-border-radius", "--ngs-filter-builder-group-operation-bpadding", "--ngs-filter-builder-group-operation-color", "--ngs-filter-builder-group-operation-font-size", "--ngs-filter-builder-group-operation-font-weight", "--ngs-filter-builder-group-operation-height", "--ngs-filter-builder-group-operation-hover-bg", "--ngs-filter-builder-group-operation-hover-color", "--ngs-filter-builder-group-operations-gap", "--ngs-filter-builder-group-padding", "--ngs-form-field-container-height", "--ngs-form-field-container-vertical-padding", "--ngs-radius-lg" ], "example": null }, { "name": "form-builder", "title": "Form Builder", "overviewName": "Form Builder", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/form-builder", "publicApi": "projects/components/form-builder/public-api.ts", "sourceRoot": "projects/components/form-builder/src", "docsPath": "/libraries/form-builder", "docsOverviewSource": "projects/docs/src/app/libraries/form-builder/overview/overview.html", "purpose": "The NgStarter Angular Form Builder library provides a drag-and-drop form designer, schema model, runtime renderer, and provider registration API for custom field types and field-specific settings.", "useWhen": "Choose Form Builder when the workflow matches examples such as Basic form builder, Custom field registration, Form builder renderer.", "schemaFormat": [ "FormBuilderSchema shape: { title?: string; fields?: FormBuilderField[]; layout?: FormBuilderLayoutItem[]; sections: FormBuilderSection[] }.", "Root-level fields live in schema.fields and can be placed outside sections. Sections live in schema.sections and contain section.fields. The optional schema.layout array controls top-level canvas order with items like { kind: \"field\" | \"section\", id }.", "FormBuilderSection shape: { id: string; title: string; description?: string; collapsed?: boolean; fields: FormBuilderField[] }.", "FormBuilderField shape: { id: string; name: string; type: string; kind?: \"field\" | \"layout\" | \"static\"; label: string; placeholder?: string; hint?: string; defaultValue?: any; width?: 1..12; multiple?: boolean; clearable?: boolean; required?: boolean; disabled?: boolean; readonly?: boolean; options?: FormBuilderOption[]; validation?: FormBuilderValidationRule[]; settings?: Record; children?: FormBuilderField[] }.", "Layout blocks are represented as fields with kind: \"layout\". The built-in group block uses type: \"group\", width: 12, and children: FormBuilderField[]. Section is a top-level FormBuilderSection, not a child field, and should not be nested inside another section/group.", "Static blocks are represented as fields with kind: \"static\". The built-in spacer block uses type: \"spacer\", width: 12, and settings.height with one of 8, 16, 24, 32, 48, or 64.", "Use width as a 12-column span. Default fields are 12 columns unless a narrower width is set. Nested children in group are sorted and rendered inside that group container.", "Option fields use options entries { label: string; value: any; selected?: boolean }. For select, multiple controls array values; clearable enables the clear action. For radio, settings.orientation is \"vertical\" by default and can be \"horizontal\". Hidden fields use type: \"hidden\" and render as native controls included in raw form values. Date and time fields include type: \"date\" for a single date, type: \"time\" for HH:mm time values, and type: \"date-range\" for a DateRange-like value with start/end dates. Upload fields use type: \"upload\", multiple for File[] values, and settings.accept for comma-separated MIME types such as \"*/*\" or \"image/*,application/pdf\". Upload handling can be provided with [uploadCallback] on ngs-form-builder/ngs-form-renderer or globally through provideFormBuilder({ uploadCallback }). The callback receives { field, control, event, files, fileList, multiple } and may return sync/async value stored in the form control.", "Use from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormRenderer.", "Register custom placeholders through provideFormBuilder({ fields/items/settings }) using formBuilderField(), formBuilderItem(), and formBuilderSettings(). Custom field definitions can provide defaults, renderer, settings, validators, acceptsChildren, group, icon, and kind." ], "exampleTopics": [ "Basic form builder", "Custom field registration", "Form builder renderer" ], "minimalExample": "
\n \n \n \n Current schema\n \n \n \n \n \n
", "exampleFiles": [ { "name": "basic-form-builder-example", "title": "Basic form builder", "file": "projects/docs/src/app/libraries/form-builder/_examples/basic-form-builder-example/basic-form-builder-example.html", "source": "
\n \n \n \n Current schema\n \n \n \n \n \n
" }, { "name": "custom-field-registration-example", "title": "Custom field registration", "file": "projects/docs/src/app/libraries/form-builder/_examples/custom-field-registration-example/custom-field-registration-example.html", "source": "" }, { "name": "form-builder-renderer-example", "title": "Form builder renderer", "file": "projects/docs/src/app/libraries/form-builder/_examples/form-builder-renderer-example/form-builder-renderer-example.html", "source": "
\n \n \n \n Submitted value\n \n \n 
{{ submittedValue() || value() | json }}
\n \n \n
" } ], "previewAsset": null, "selectors": [ "ngs-basic-form-builder-field-settings", "ngs-basic-form-builder-layout-settings", "ngs-basic-form-builder-section-settings", "ngs-form-builder", "ngs-form-builder-field-host", "ngs-form-builder-settings-host", "ngs-form-logic", "ngs-form-renderer" ], "exportedSymbols": [ "asyncValidatorsFromRules", "BasicFormBuilderFieldSettings", "BasicFormBuilderLayoutSettings", "BasicFormBuilderSectionSettings", "createDefaultFormBuilderSchema", "DEFAULT_FORM_BUILDER_FIELDS", "DEFAULT_FORM_BUILDER_ITEMS", "DEFAULT_FORM_BUILDER_VALIDATORS", "FORM_BUILDER_FIELD_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_FIELDS", "FORM_BUILDER_INPUT_FIELD_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_ITEMS", "FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_SELECT_DATA_SOURCES", "FORM_BUILDER_SETTINGS", "FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA", "FORM_BUILDER_UPLOAD_CALLBACK", "FORM_BUILDER_VALIDATORS", "FormBuilder", "FormBuilderComponentImporter", "formBuilderField", "FormBuilderField", "FormBuilderFieldChange", "FormBuilderFieldDefinition", "FormBuilderFieldHost", "FormBuilderFieldRenderContext", "FormBuilderFieldSettingsContext", "FormBuilderFieldWidth", "formBuilderItem", "FormBuilderItemDefinition", "FormBuilderItemKind", "FormBuilderLayoutItem", "FormBuilderOption", "FormBuilderSchema", "FormBuilderSection", "FormBuilderSectionSettingsContext", "FormBuilderSelectDataSourceDefinition", "FormBuilderSelectDataSourceOptions", "FormBuilderSelectOptionsSource", "formBuilderSettings", "FormBuilderSettingsConfig", "FormBuilderSettingsContext", "FormBuilderSettingsDefinition", "FormBuilderSettingsHost", "FormBuilderSettingsInheritance", "FormBuilderSettingsSchemaFactory", "FormBuilderUploadCallback", "FormBuilderUploadContext", "FormBuilderValidationRule", "formBuilderValidator", "FormBuilderValidatorDefinition", "FormBuilderValidatorFactory", "FormBuilderValidatorValueType", "FormLogic", "FormRenderer", "mergeFormBuilderValidatorDefinitions", "provideFormBuilder", "provideFormBuilderField", "provideFormBuilderFields", "provideFormBuilderSelectDataSource", "provideFormBuilderSelectDataSources", "provideFormBuilderValidator", "provideFormBuilderValidators", "validatorsFromRules" ], "inputs": [ "canvasDropPlaceholderDelay", "control", "definitions", "description", "editableCanvas", "field", "inspectorTitle", "paletteTitle", "readonly", "schema", "section", "settingsDefinitions", "showSubmit", "submitLabel", "title", "uploadCallback" ], "outputs": [ "fieldAdded", "fieldRemoved", "fieldSelected", "formReady" ], "cssTokens": [ "--ngs-avatar-font-weight", "--ngs-avatar-size", "--ngs-card-padding", "--ngs-color-border", "--ngs-color-danger", "--ngs-color-on-primary-container", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-outline-variant", "--ngs-color-primary", "--ngs-color-primary-container", "--ngs-color-surface", "--ngs-color-surface-container-lowest", "--ngs-field-radius", "--ngs-font-size-base", "--ngs-font-size-lg", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-line-height-base", "--ngs-radio-card-border-radius", "--ngs-radio-card-group-gap", "--ngs-radio-card-padding", "--ngs-radio-card-title-gap", "--ngs-radius-current", "--ngs-radius-lg", "--ngs-radius-md", "--ngs-radius-sm", "--ngs-state-focus-ring", "--ngs-stepper-content-padding", "--ngs-tab-label-height", "--ngs-tree-node-gap", "--ngs-upload-area-border", "--ngs-upload-area-border-radius", "--ngs-upload-area-drop-active-border", "--ngs-upload-area-padding" ], "example": null }, { "name": "form-field", "title": "Form Field", "overviewName": "Form Field", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/form-field", "publicApi": "projects/components/form-field/public-api.ts", "sourceRoot": "projects/components/form-field/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Wrap one form control with the standard NgStarter field layout, label, hint, error, and prefix/suffix slots.", "useWhen": "Use one ngs-form-field around one form control: input ngsInput, textarea ngsInput, ngs-select, ngs-autocomplete input, datepicker input, CountrySelect, CurrencySelect, DateFormatSelect, PhoneInput, NumberInput, and custom controls that implement FormFieldControl. Use ngs-label for labels, ngs-hint for helper text, ngs-error for validation messages, and ngsIconPrefix/ngsIconButtonPrefix/ngsTextPrefix/ngsIconSuffix/ngsIconButtonSuffix/ngsTextSuffix for field adornments. For groups of fields, use TailwindCSS grid/flex/layout classes around multiple form fields; each individual control still gets its own ngs-form-field. Do not use ngs-form-field as a layout container, card, spacing wrapper, or wrapper around non-form UI. Do not wrap checkbox, radio, button, or toggle controls when they have their own label pattern.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/form-field/preview.svg", "selectors": [ "[ngsIconButtonPrefix]", "[ngsIconButtonSuffix]", "[ngsIconPrefix]", "[ngsIconSuffix]", "[ngsPrefix]", "[ngsSuffix]", "[ngsTextPrefix]", "[ngsTextSuffix]", "ngs-error", "ngs-form-field", "ngs-hint", "ngs-label" ], "exportedSymbols": [ "Error", "FORM_FIELD", "FORM_FIELD_DEFAULT_OPTIONS", "FormField", "FormFieldControl", "FormFieldDefaultOptions", "Hint", "IconButtonPrefix", "IconButtonSuffix", "IconPrefix", "IconSuffix", "Label", "Prefix", "Suffix", "TextPrefix", "TextSuffix" ], "inputs": [ "align", "sameHeightAsButton", "subscriptHiddenIfEmpty" ], "outputs": [], "cssTokens": [ "--ngs-button-height", "--ngs-field-bg", "--ngs-field-border-color", "--ngs-field-border-focus-color", "--ngs-field-border-width", "--ngs-field-color", "--ngs-field-container-height", "--ngs-field-disabled-bg", "--ngs-field-error-color", "--ngs-field-font-size", "--ngs-field-height", "--ngs-field-infix-padding-bottom", "--ngs-field-infix-padding-top", "--ngs-field-input-height", "--ngs-field-label-color", "--ngs-field-label-float-font-size", "--ngs-field-line-height", "--ngs-field-no-label-padding-y", "--ngs-field-padding-x", "--ngs-field-radius", "--ngs-form-field-affix-gap", "--ngs-form-field-bg", "--ngs-form-field-border-color", "--ngs-form-field-border-radius", "--ngs-form-field-border-width", "--ngs-form-field-color", "--ngs-form-field-container-min-height", "--ngs-form-field-disabled-bg", "--ngs-form-field-error-color", "--ngs-form-field-icon-affix-padding-x", "--ngs-form-field-icon-button-affix-padding-x", "--ngs-form-field-infix-padding-bottom", "--ngs-form-field-infix-padding-top", "--ngs-form-field-input-height", "--ngs-form-field-input-text-align", "--ngs-form-field-label-color", "--ngs-form-field-no-label-padding-y", "--ngs-form-field-padding-x", "--ngs-form-field-width", "--ngs-state-disabled-bg", "--ngs-state-disabled-border", "--ngs-state-disabled-color" ], "example": null }, { "name": "gauge", "title": "Gauge", "overviewName": "Gauge", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/gauge", "publicApi": "projects/components/gauge/public-api.ts", "sourceRoot": "projects/components/gauge/src", "docsPath": "/components/gauge", "docsOverviewSource": "projects/docs/src/app/components/gauge/overview/overview.html", "purpose": "Visualize one compact 0–100 percentage-like value as a circular radial metric.", "useWhen": "Use in dashboard cards, sidebar widgets, KPI panels, usage or quota blocks, storage usage, completion score, health score, capacity, and utilization indicators. Use ngs-gauge-value to show a number or short label inside the gauge, and customize size with Tailwind size classes or strokeWidth/radius. Do not use for linear process progress; use ProgressBar. Do not use for loading; use ProgressSpinner, BlockLoader, or Skeleton. Do not use for full analytical charts with axes, legends, multiple series, or trends. Do not use for small table-row statuses; use Badge or Status.", "exampleTopics": [ "Basic Gauge", "Gauge With Value", "Gauge Custom Size", "Gauge Custom Stroke Width" ], "minimalExample": "", "exampleFiles": [ { "name": "basic-gauge-example", "title": "Basic gauge", "file": "projects/docs/src/app/components/gauge/_examples/basic-gauge-example/basic-gauge-example.html", "source": "" }, { "name": "gauge-custom-size-example", "title": "Gauge custom size", "file": "projects/docs/src/app/components/gauge/_examples/gauge-custom-size-example/gauge-custom-size-example.html", "source": "
\n \n \n 75\n \n \n 75\n \n \n
" }, { "name": "gauge-custom-stroke-width-example", "title": "Gauge custom stroke width", "file": "projects/docs/src/app/components/gauge/_examples/gauge-custom-stroke-width-example/gauge-custom-stroke-width-example.html", "source": "
\n \n \n \n \n
" } ], "previewAsset": "projects/components/gauge/preview.svg", "selectors": [ "ngs-gauge", "ngs-gauge-value" ], "exportedSymbols": [ "Gauge", "GaugeValue" ], "inputs": [ "radius", "strokeWidth", "value" ], "outputs": [], "cssTokens": [ "--ngs-color-neutral-300", "--ngs-color-neutral-600", "--ngs-color-neutral-700", "--ngs-color-primary", "--ngs-gauge-bg", "--ngs-gauge-fill", "--ngs-gauge-size", "--ngs-gauge-value-color" ], "example": null }, { "name": "grid", "title": "Grid", "overviewName": "Grid", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/grid", "publicApi": "projects/components/grid/public-api.ts", "sourceRoot": "projects/components/grid/src", "docsPath": "/components/grid", "docsOverviewSource": "projects/docs/src/app/components/grid/overview/overview.html", "purpose": "Render static dashboard widgets in a predefined 12-column layout.", "useWhen": "Use ngs-grid when the application defines a static dashboard or widget layout and users do not need to rearrange, customize, or save the dashboard order. Provide configs that map item types to components and items with id, type, columns, optional responsive columnsSm/columnsMd/columnsLg/columnsXl, height, optional responsive heightSm/heightMd/heightLg/heightXl, content, skeletonHeight, and children. Widgets can inject GRID and call markItemAsLoaded(id), especially with waitWhenAllItemsLoaded. Use Grid for fixed analytics sections, portal start pages, and nested dashboard sections where the structure is known. Do not use Grid as a normal CSS layout helper for forms, pages, cards, or repeated elements; use TailwindCSS grid/flex classes. Do not use Grid for dashboards users can rearrange or change; use Tiles. Do not use for tables or datasets; use Table or DataView. Do not use for file/media grids; use upload/media components.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/grid/preview.svg", "selectors": [ "ngs-grid" ], "exportedSymbols": [ "Grid", "GRID", "GridItem", "GridItemAware", "GridItemConfig" ], "inputs": [ "configs", "items", "plain", "waitWhenAllItemsLoaded" ], "outputs": [], "cssTokens": [ "--ngs-color-border", "--ngs-grid-gap", "--ngs-grid-item-colspan", "--ngs-grid-item-colspan-lg", "--ngs-grid-item-colspan-md", "--ngs-grid-item-colspan-sm", "--ngs-grid-item-colspan-xl", "--ngs-grid-item-effective-colspan", "--ngs-grid-item-effective-height", "--ngs-grid-item-height", "--ngs-grid-item-height-lg", "--ngs-grid-item-height-md", "--ngs-grid-item-height-sm", "--ngs-grid-item-height-xl", "--ngs-grid-item-skeleton-min-height", "--ngs-radius-xl" ], "example": null }, { "name": "guided-tour", "title": "Guided Tour", "overviewName": "Guided Tour", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/guided-tour", "publicApi": "projects/components/guided-tour/public-api.ts", "sourceRoot": "projects/components/guided-tour/src", "docsPath": "/components/guided-tour", "docsOverviewSource": "projects/docs/src/app/components/guided-tour/overview/overview.html", "purpose": "Guide users through the real UI with ordered steps attached to existing elements.", "useWhen": "Use for first-run onboarding, feature discovery, setup guidance, new feature education, and complex screen walkthroughs where each step points at a real element through ngsTourAnchor, a selector, or an element callback. Use withBackdrop to highlight the current element, waitFor for dynamic content, route for tours that continue across pages, and template/htmlContent for richer step content. Do not use for simple hover hints; use Tooltip. Do not use for anchored menus or arbitrary floating content; use Popover. Do not use for confirmations or modal workflows; use Confirm or Dialog. Do not use for form wizards or multi-step data entry; use Stepper or HeadlessStepper. Do not use for documentation pages or marketing onboarding screens; use normal page content.", "exampleTopics": [ "Basic Guided Tour", "Backdrop Guided Tour", "Wait For Guided Tour", "Close On Backdrop Click", "HTML and Template Support", "Custom Buttons", "Global Configuration", "Keyboard Navigation", "Positioning", "Route Navigation", "Template guided tour", "Custom buttons guided tour", "Global config guided tour", "Keyboard navigation guided tour", "Positioning guided tour", "Route navigation guided tour" ], "minimalExample": "
\n \n
\n
\n Step 1 Anchor\n
\n
\n Step 2 Anchor\n
\n
\n Step 3 Anchor\n
\n
\n Dynamic Anchor (No Directive)\n
\n
\n
", "exampleFiles": [ { "name": "basic-guided-tour-example", "title": "Basic guided tour", "file": "projects/docs/src/app/components/guided-tour/_examples/basic-guided-tour-example/basic-guided-tour-example.html", "source": "
\n \n
\n
\n Step 1 Anchor\n
\n
\n Step 2 Anchor\n
\n
\n Step 3 Anchor\n
\n
\n Dynamic Anchor (No Directive)\n
\n
\n
" }, { "name": "backdrop-guided-tour-example", "title": "Backdrop guided tour", "file": "projects/docs/src/app/components/guided-tour/_examples/backdrop-guided-tour-example/backdrop-guided-tour-example.html", "source": "
\n
\n \n
\n \n
\n Level 1: Root Block\n
\n \n
\n
\n \n
\n
Container Level 2
\n
\n Level 2: Nested Block\n
\n \n
\n
\n
\n \n
\n
Relative Container (Scrolled down)
\n
\n
\n Level 3: Absolute Block\n
\n
\n
\n
" }, { "name": "close-on-backdrop-click-example", "title": "Close on backdrop click", "file": "projects/docs/src/app/components/guided-tour/_examples/close-on-backdrop-click-example/close-on-backdrop-click-example.html", "source": "
\n
\n \n
\n
\n
Step 1
\n
Step 2
\n
\n
" } ], "previewAsset": "projects/components/guided-tour/preview.svg", "selectors": [ "[ngsTourAnchor]", "ngs-tour-backdrop", "ngs-tour-step" ], "exportedSymbols": [ "provideTourConfig", "TOUR_CONFIG", "TOUR_STEP_COMPONENT", "TourAnchorDirective", "TourBackdrop", "TourConfig", "TourService", "TourState", "TourStep", "TourStepConfig", "TourStepPosition" ], "inputs": [ "animateEnterClass", "animateLeaveClass", "isFirst", "isLast", "ngsTourAnchor", "position", "step" ], "outputs": [ "backdropClick" ], "cssTokens": [ "--ngs-button-height", "--ngs-button-padding", "--ngs-color-primary", "--ngs-color-subtle", "--ngs-color-surface-container-lowest", "--ngs-guided-tour-arrow-border-color", "--ngs-guided-tour-step-bg", "--ngs-guided-tour-step-border", "--ngs-guided-tour-step-max-width", "--ngs-guided-tour-step-radius", "--ngs-guided-tour-step-shadow", "--ngs-guided-tour-step-step-padding", "--ngs-overlay-backdrop-bg", "--ngs-radius-xl", "--ngs-shadow-lg" ], "example": null }, { "name": "headless-stepper", "title": "Headless Stepper", "overviewName": "Headless Stepper", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/headless-stepper", "publicApi": "projects/components/headless-stepper/public-api.ts", "sourceRoot": "projects/components/headless-stepper/src", "docsPath": "/components/headless-stepper", "docsOverviewSource": "projects/docs/src/app/components/headless-stepper/overview/overview.html", "purpose": "Provide stepper state and validation logic without rendering a fixed visual stepper UI.", "useWhen": "Use for custom multi-step workflows where the product needs its own header, progress indicator, buttons, layout, or responsive presentation while keeping standard NgStarter step behavior. Use ngs-headless-stepper with ngs-headless-step when you need selectedIndex, selected step state, progressPercent, canMoveNext, next(), previous(), reset(), linear mode, optional steps, and stepControl validation. Good for custom wizards, onboarding forms, checkout flows, setup flows, and complex forms with a bespoke layout. Do not use when the standard visual Stepper fits; use Stepper. Do not use for guided tours over existing UI; use GuidedTour. Do not use as Tabs, Accordion, or for a simple single-page form without steps.", "exampleTopics": [ "Basic Headless Stepper", "Linear Headless Stepper" ], "minimalExample": "\n
\n
\n
\n

Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}

\n

{{ steps[selectedIndex()].title }}

\n

{{ steps[selectedIndex()].description }}

\n
\n
\n @for (item of steps; track item.title; let index = $index) {\n \n {{ index + 1 }}\n \n }\n
\n
\n \n
\n \n \n \n
Workspace details
\n

\n Pick a workspace name, region, and owner. This example keeps the content simple while the stepper owns the\n active step state.\n

\n \n \n \n \n \n \n
Team access
\n

\n Show a c\n...", "exampleFiles": [ { "name": "basic-headless-stepper-example", "title": "Basic headless stepper", "file": "projects/docs/src/app/components/headless-stepper/_examples/basic-headless-stepper-example/basic-headless-stepper-example.html", "source": "\n

\n
\n
\n

Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}

\n

{{ steps[selectedIndex()].title }}

\n

{{ steps[selectedIndex()].description }}

\n
\n
\n @for (item of steps; track item.title; let index = $index) {\n \n {{ index + 1 }}\n \n }\n
\n
\n \n
\n \n \n \n
Workspace details
\n

\n Pick a workspace name, region, and owner. This example keeps the content simple while the stepper owns the\n active step state.\n

\n \n \n \n \n \n \n
Team access
\n

\n Show a c\n..." }, { "name": "linear-headless-stepper-example", "title": "Linear headless stepper", "file": "projects/docs/src/app/components/headless-stepper/_examples/linear-headless-stepper-example/linear-headless-stepper-example.html", "source": "\n

\n
\n
\n

Linear setup

\n

Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}

\n
\n

{{ stepper.progressPercent() | number: '1.0-0' }}%

\n
\n \n
\n \n
\n \n Company\n \n \n

\n The next button becomes available when this form group is valid.\n

\n
\n \n \n
\n \n Billing email\n \n \n

\n Headless Stepper tracks the connected control status and uses it for linear navigation.\n

\n
\n \n \n
\n
O\n..." } ], "previewAsset": "projects/components/headless-stepper/preview.svg", "selectors": [ "ngs-headless-step", "ngs-headless-stepper" ], "exportedSymbols": [ "HeadlessStep", "HeadlessStepper", "StepperSelectionEvent" ], "inputs": [ "linear", "optional", "selectedIndex", "stepControl" ], "outputs": [], "cssTokens": [], "example": null }, { "name": "icon", "title": "Icon", "overviewName": "Icon", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/icon", "publicApi": "projects/components/icon/public-api.ts", "sourceRoot": "projects/components/icon/src", "docsPath": "/components/icon", "docsOverviewSource": "projects/docs/src/app/components/icon/overview/overview.html", "purpose": "Render consistent SVG interface icons from installed Iconify icon sets.", "useWhen": "Use ngs-icon with a full Iconify name such as fluent:grid-24-regular or circle-flags:us for icons in NgStarter buttons, navigation, menus, form field prefixes and suffixes, statuses, metadata, empty states, alerts, announcements, table actions, toolbar actions, and compact flag markers. Size icons with Tailwind classes such as size-4, w-5, or h-5, or use the default --ngs-icon-size. Color icons with text color classes or --ngs-icon-color. Do not use ngs-icon as a clickable action by itself; wrap it in an NgStarter button such as button[ngsIconButton]. Do not use Icon for people or entities; use Avatar. Do not use Icon for counters or small labels; use Badge. Do not use Icon for large artwork, product illustrations, screenshots, or logos. Do not hand-roll inline SVG when an approved Iconify icon exists.", "exampleTopics": [ "Symbols Icons (Default)", "Phosphor Icons", "Circle Flags Icons", "Material symbols icons", "Circle flags" ], "minimalExample": "
\n \n \n \n
\n
\n \n \n \n
", "exampleFiles": [ { "name": "circle-flags-example", "title": "Circle flags", "file": "projects/docs/src/app/components/icon/_examples/circle-flags-example/circle-flags-example.html", "source": "
\n \n \n \n
\n
\n \n \n \n
" }, { "name": "material-symbols-icons-example", "title": "Material symbols icons", "file": "projects/docs/src/app/components/icon/_examples/material-symbols-icons-example/material-symbols-icons-example.html", "source": "
\n \n \n \n \n \n \n \n \n
" }, { "name": "phosphor-icons-example", "title": "Phosphor icons", "file": "projects/docs/src/app/components/icon/_examples/phosphor-icons-example/phosphor-icons-example.html", "source": "
\n \n \n \n \n \n \n
" } ], "previewAsset": "projects/components/icon/preview.svg", "selectors": [ "ngs-icon" ], "exportedSymbols": [ "Icon", "IconData", "IconRegistry" ], "inputs": [ "name" ], "outputs": [], "cssTokens": [ "--ngs-icon-color", "--ngs-icon-size" ], "example": null }, { "name": "image-designer", "title": "Image Designer", "overviewName": "Image Designer", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/image-designer", "publicApi": "projects/components/image-designer/public-api.ts", "sourceRoot": "projects/components/image-designer/src", "docsPath": "/libraries/image-designer", "docsOverviewSource": "projects/docs/src/app/libraries/image-designer/overview/overview.html", "purpose": "Provide a full canvas-based image composition editor with layers, assets, text, backgrounds, effects, and snapshots.", "useWhen": "Use when users need to create or customize an image by composing multiple layers such as text, photos, uploaded assets, shapes, patterns, gradients, backgrounds, effects, opacity, typography, fit, flip, lock, and resize presets. Use for banner designers, social image builders, thumbnail editors, promo card creators, template-based creative tools, and embedded product design studios. Persist and restore work with ImageDesignerSnapshot, provide asset libraries with assetsDataSource or photosDataSource, handle uploads with uploadFn, and listen to snapshotChanged. Do not use for simple image viewing; use ImageViewer. Do not use for zoom/pan inspection; use ImageZoomViewer. Do not use for crop-only work; use Crop. Do not use for resize-only flows; use ImageResizer. Do not use for loading or missing-image placeholders; use ImagePlaceholder. Do not use for plain upload previews, color picking, or simple avatar/banner settings; use the smaller dedicated components or a normal form.", "exampleTopics": [ "Visual Builder", "Image Designer" ], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/image-designer/preview.svg", "selectors": [ "ngs-effects", "ngs-image-designer", "ngs-settings" ], "exportedSymbols": [ "AssetsDataSource", "AssetsGetRowsParams", "createDefaultPhotosDataSource", "Effects", "ElementConfig", "GradientConfig", "IMAGE_DESIGNER", "ImageDesigner", "ImageDesignerPhoto", "ImageDesignerService", "ImageDesignerSnapshot", "ImageDesignerUploadFn", "ImagePreset", "ImagePresetCategory", "ImageSize", "LayerConfig", "PhotosDataSource", "PhotosGetRowsParams", "PicsumImage", "PRESET_CATEGORIES", "Settings", "SVG_ELEMENTS", "SVG_PATTERNS" ], "inputs": [ "assetsDataSource", "defaultFont", "guidelineColor", "historyLimit", "imageSize", "maxScale", "minScale", "photosDataSource", "scale", "showDownloadButton", "showGuidelines", "snapRange", "snapshot", "snapToShapes", "snapToStageBorders", "snapToStageCenter", "title", "uploadFn" ], "outputs": [ "snapshotChanged" ], "cssTokens": [ "--ngs-color-picker-thumbnail-bg", "--ngs-list-item-radius", "--ngs-list-padding", "--ngs-slider-thumb-size", "--ngs-slider-track-height", "--ngs-tab-label-padding", "--ngs-tab-panel-aside-width", "--ngs-tab-panel-nav-padding" ], "example": null }, { "name": "image-placeholder", "title": "Image Placeholder", "overviewName": "Image Placeholder", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/image-placeholder", "publicApi": "projects/components/image-placeholder/public-api.ts", "sourceRoot": "projects/components/image-placeholder/src", "docsPath": "/components/image-placeholder", "docsOverviewSource": "projects/docs/src/app/components/image-placeholder/overview/overview.html", "purpose": "Render a simple SVG placeholder inside an image slot when the real image is not available yet.", "useWhen": "Use for image cards, media grids, upload slots, attachment previews, product thumbnails, gallery cells, banner areas, and image preview areas when an image is loading, missing, unavailable, or failed to load and the layout should keep a stable size. Give ngs-image-placeholder an explicit width, height, or aspect ratio with Tailwind classes. The component does not load images, handle upload state, or manage errors; it only renders a visual placeholder. Do not use for full empty states; use EmptyState. Do not use for skeleton loading of a full block; use Skeleton. Do not use for spinners or blocking progress; use ProgressSpinner or BlockLoader. Do not use for viewing, crop, resize, or editing; use ImageViewer, Crop, ImageResizer, or ImageDesigner. Do not use for user or team identity fallback; use Avatar.", "exampleTopics": [ "Basic image placeholder" ], "minimalExample": "\n", "exampleFiles": [ { "name": "basic-image-placeholder-example", "title": "Basic image placeholder", "file": "projects/docs/src/app/components/image-placeholder/_examples/basic-image-placeholder-example/basic-image-placeholder-example.html", "source": "\n" } ], "previewAsset": "projects/components/image-placeholder/preview.svg", "selectors": [ "ngs-image-placeholder" ], "exportedSymbols": [ "ImagePlaceholder" ], "inputs": [], "outputs": [], "cssTokens": [ "--ngs-color-neutral-100", "--ngs-color-neutral-300", "--ngs-color-neutral-400", "--ngs-color-surface-container" ], "example": null }, { "name": "image-resizer", "title": "Image Resizer", "overviewName": "Image Resizer", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/image-resizer", "publicApi": "projects/components/image-resizer/public-api.ts", "sourceRoot": "projects/components/image-resizer/src", "docsPath": "/components/image-resizer", "docsOverviewSource": "projects/docs/src/app/components/image-resizer/overview/overview.html", "purpose": "Let users interactively change the displayed width of an img element with side drag handles.", "useWhen": "Use ngs-image-resizer around a standard img marked with ngsImageResizerImage when users need to manually choose how large an image appears in an editor, content form, thumbnail preview, banner preview, or media preparation flow. Configure imageMinWidth and imageMaxWidth and listen to imageResized for rendered width, rendered height, naturalWidth, and naturalHeight. The component changes the displayed CSS width of the image; it does not crop, compress, upload, optimize, or rewrite the source file. Do not use for crop selection; use Crop. Do not use for zoom and pan inspection; use ImageZoomViewer. Do not use for simple viewing; use ImageViewer. Do not use for full canvas/layer editing; use ImageDesigner. Do not use for resizing panels or layout containers; use ResizableContainer. Do not use for backend image processing or placeholders.", "exampleTopics": [ "Basic image resizer" ], "minimalExample": "
\n \n \"\"\n \n
\n@if (imageDimensionsInfo()) {\n
{{ imageDimensionsInfo() | json }}
\n}", "exampleFiles": [ { "name": "basic-image-resizer-example", "title": "Basic image resizer", "file": "projects/docs/src/app/components/image-resizer/_examples/basic-image-resizer-example/basic-image-resizer-example.html", "source": "
\n \n \"\"\n \n
\n@if (imageDimensionsInfo()) {\n
{{ imageDimensionsInfo() | json }}
\n}" } ], "previewAsset": "projects/components/image-resizer/preview.svg", "selectors": [ "[ngsImageResizeHandler]", "[ngsImageResizerImage]", "ngs-image-resizer" ], "exportedSymbols": [ "ImageResizedEvent", "ImageResizeHandlerDirective", "ImageResizer", "ImageResizerImageDirective" ], "inputs": [ "direction", "imageMaxWidth", "imageMinWidth", "maxWidth", "minWidth", "targetElement" ], "outputs": [ "dimensionsChanged", "imageResized" ], "cssTokens": [ "--ngs-color-on-secondary-fixed", "--ngs-color-white" ], "example": null }, { "name": "image-viewer", "title": "Image Viewer", "overviewName": "Image Viewer", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/image-viewer", "publicApi": "projects/components/image-viewer/public-api.ts", "sourceRoot": "projects/components/image-viewer/src", "docsPath": "/components/image-viewer", "docsOverviewSource": "projects/docs/src/app/components/image-viewer/overview/overview.html", "purpose": "Open a full-size image in a focused lightbox-style overlay from a thumbnail, card, or gallery item.", "useWhen": "Use ngsImageViewer on a group and ngsImageViewerPicture on each clickable preview item when users should click a thumbnail or card to inspect a full-size image from sourceUrl. The overlay supports close, loading spinner, zoom in/out, drag and pan when zoomed, and optional title, caption, and description via inputs or templates. Use for galleries, attachment previews, product images, media detail previews, portfolio images, and image cards. Do not use for inline zoom inspection without an overlay; use ImageZoomViewer. Do not use for image editing, layers, crop, or resizing; use ImageDesigner, Crop, or ImageResizer. Do not use for before/after comparison; use ComparisonSlider. Do not use for static non-clickable images; use normal img. Do not use for video previews; use VideoViewer. Do not use for missing or loading placeholders; use ImagePlaceholder.", "exampleTopics": [ "Basic image viewer", "Image viewer with caption and description", "Image viewer with title" ], "minimalExample": "
\n
\n \"\"\n
\n
\n \"\"\n
\n
\n \"\"\n
\n
", "exampleFiles": [ { "name": "basic-image-viewer-example", "title": "Basic image viewer", "file": "projects/docs/src/app/components/image-viewer/_examples/basic-image-viewer-example/basic-image-viewer-example.html", "source": "
\n
\n \"\"\n
\n
\n \"\"\n
\n
\n \"\"\n
\n
" }, { "name": "image-viewer-with-caption-and-description-example", "title": "Image viewer with caption and description", "file": "projects/docs/src/app/components/image-viewer/_examples/image-viewer-with-caption-and-description-example/image-viewer-with-caption-and-description-example.html", "source": "
\n
\n \"\"\n Just Caption\n \n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n \n
\n
\n \"\"\n Awesome Picture\n \n Advancing to the 1960s, Lorem Ipsum was made popular by typeface manufacturer Letraset,\n who used it in their advertising campaigns. Letraset offered pages of Lorem Ipsum as rub down\n transfer sheets, which were widely used in the pre-computer era for layouts.\n These transfer pages, known as Letraset Body Type, were featured in the company's advertising and their popular catalogue.\n \n
\n
\n <\n..." }, { "name": "image-viewer-with-title-example", "title": "Image viewer with title", "file": "projects/docs/src/app/components/image-viewer/_examples/image-viewer-with-title-example/image-viewer-with-title-example.html", "source": "
\n
\n \"\"\n Just Title\n
\n
\n \"\"\n Author: Pavel Salauyou\n Awesome Picture\n \n Advancing to the 1960s, Lorem Ipsum was made popular by typeface manufacturer Letraset,\n who used it in their advertising campaigns. Letraset offered pages of Lorem Ipsum as rub down\n transfer sheets, which were widely used in the pre-computer era for layouts.\n These transfer pages, known as Letraset Body Type, were featured in the company's advertising and their popular catalogue.\n \n
\n
\n \"\"\n..." } ], "previewAsset": "projects/components/image-viewer/preview.svg", "selectors": [ "[ngsImageViewer]", "[ngsImageViewerPicture]", "[ngsImageViewerPictureCaption]", "[ngsImageViewerPictureDescription]", "[ngsImageViewerPictureTitle]", "ngs-image-viewer" ], "exportedSymbols": [ "IMAGE_VIEWER", "IMAGE_VIEWER_PICTURE_DATA", "IMAGE_VIEWER_PICTURE_REF", "ImageViewer", "ImageViewerDirective", "ImageViewerPictureCaptionDirective", "ImageViewerPictureDescriptionDirective", "ImageViewerPictureDirective", "ImageViewerPictureTitleDirective", "PictureOptions", "PictureRef" ], "inputs": [ "caption", "description", "sourceUrl", "title" ], "outputs": [], "cssTokens": [ "--ngs-color-neutral-100", "--ngs-color-neutral-200", "--ngs-color-neutral-300", "--ngs-color-neutral-400", "--ngs-color-neutral-50", "--ngs-color-neutral-600", "--ngs-color-neutral-700", "--ngs-color-neutral-800", "--ngs-color-neutral-900", "--ngs-color-neutral-950", "--ngs-font-size-sm", "--ngs-image-viewer-picture-scale", "--ngs-shadow-sm" ], "example": null }, { "name": "image-zoom-viewer", "title": "Image Zoom Viewer", "overviewName": "Image Zoom Viewer", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/image-zoom-viewer", "publicApi": "projects/components/image-zoom-viewer/public-api.ts", "sourceRoot": "projects/components/image-zoom-viewer/src", "docsPath": "/components/image-zoom-viewer", "docsOverviewSource": "projects/docs/src/app/components/image-zoom-viewer/overview/overview.html", "purpose": "Give an inline image a Medium-style click-to-zoom overlay animation from its current page position.", "useWhen": "Use ngs-image-zoom-viewer around a normal image marked with ngsImageZoomViewerImage when users should quickly enlarge one inline image without a gallery structure. Good for articles, product pages, portfolios, documentation screenshots, reports, and image-rich content. The component clones the same image into an overlay, animates it from the original position to a larger centered view, closes on backdrop click or Escape, and recalculates zoom on window resize. Do not use for thumbnail galleries that need full-size sourceUrl, title, caption, or description; use ImageViewer. Do not use for image editing, crop selection, displayed-width resizing, or before/after comparison; use ImageDesigner, Crop, ImageResizer, or ComparisonSlider. Do not use for plain static images or placeholders.", "exampleTopics": [ "Basic image zoom viewer" ], "minimalExample": "
\n

Medium-style Image Zoom

\n

Click the image below to see it zoom to full screen.

\n \n \"Forest\"\n\n \n

Another example with a different aspect ratio:

\n \n \"Lake\"\n\n \n
", "exampleFiles": [ { "name": "basic-image-zoom-viewer-example", "title": "Basic image zoom viewer", "file": "projects/docs/src/app/components/image-zoom-viewer/_examples/basic-image-zoom-viewer-example/basic-image-zoom-viewer-example.html", "source": "
\n

Medium-style Image Zoom

\n

Click the image below to see it zoom to full screen.

\n \n \"Forest\"\n\n \n

Another example with a different aspect ratio:

\n \n \"Lake\"\n\n \n
" } ], "previewAsset": "projects/components/image-zoom-viewer/preview.svg", "selectors": [ "[ngsImageZoomViewerImage]", "ngs-image-zoom-viewer", "ngs-image-zoom-viewer-style" ], "exportedSymbols": [ "ImageZoomViewer", "ImageZoomViewerImage", "ImageZoomViewerStyle" ], "inputs": [], "outputs": [], "cssTokens": [ "--ngs-overlay-backdrop-bg" ], "example": null }, { "name": "incidents", "title": "Incidents", "overviewName": "Incidents", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/incidents", "publicApi": "projects/components/incidents/public-api.ts", "sourceRoot": "projects/components/incidents/src", "docsPath": "/components/incidents", "docsOverviewSource": "projects/docs/src/app/components/incidents/overview/overview.html", "purpose": "Show an application-level service incident or operational notice with a compact bar and expandable incident updates.", "useWhen": "Use for service outages, degraded service, maintenance windows, global system status, and important operational notices that users should see across the app or portal. Compose manually with ngs-incidents, ngs-incidents-bar, ngs-incidents-title, ngs-incidents-description, ngs-incidents-list, ngs-incident, ngs-incident-title, ngs-incident-details, ngsIncidentIcon, ngsIncidentButton, and ngsIncidentClose. For global dynamic incidents, place ngs-incidents-global near the app root and call IncidentsStore.show({ title, description, incidents }) or hide(). Do not use for local inline messages; use Alert. Do not use for user-required critical actions; use ActionRequired. Do not use for toast notifications, table row statuses, empty states, or full incident management/history pages; use notification components, Badge, Status, EmptyState, Table, or DataView.", "exampleTopics": [ "Basic Incidents", "Show/Hide Dynamicly", "Incidents show hide dynamicly" ], "minimalExample": "
\n \n \n Maintenance work on the DNS\n Description\n \n \n \n @for (incident of incidents; track incident) {\n \n \n \n {{ incident.title }}\n {{ incident.details }}\n \n }\n \n \n
", "exampleFiles": [ { "name": "basic-incidents-example", "title": "Basic incidents", "file": "projects/docs/src/app/components/incidents/_examples/basic-incidents-example/basic-incidents-example.html", "source": "
\n \n \n Maintenance work on the DNS\n Description\n \n \n \n @for (incident of incidents; track incident) {\n \n \n \n {{ incident.title }}\n {{ incident.details }}\n \n }\n \n \n
" }, { "name": "incidents-show-hide-dynamicly-example", "title": "Incidents show hide dynamicly", "file": "projects/docs/src/app/components/incidents/_examples/incidents-show-hide-dynamicly-example/incidents-show-hide-dynamicly-example.html", "source": "" } ], "previewAsset": "projects/components/incidents/preview.svg", "selectors": [ "[ngs-incident]", "[ngsIncidentButton]", "[ngsIncidentClose]", "[ngsIncidentIcon]", "[ngsIncidentsToggleIcon]", "ngs-incident", "ngs-incident-details", "ngs-incident-title", "ngs-incidents", "ngs-incidents-bar", "ngs-incidents-container", "ngs-incidents-description", "ngs-incidents-global", "ngs-incidents-list", "ngs-incidents-title" ], "exportedSymbols": [ "Incident", "IncidentButtonDirective", "IncidentCloseDirective", "IncidentDetails", "IncidentIconDirective", "Incidents", "INCIDENTS", "IncidentsBar", "IncidentsContainer", "IncidentsDescription", "IncidentsList", "IncidentsState", "IncidentsStore", "IncidentsTitle", "IncidentsToggleIconDirective", "IncidentTitle" ], "inputs": [ "fixed", "incidentId" ], "outputs": [], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-neutral-700", "--ngs-color-neutral-900", "--ngs-color-on-orange-container", "--ngs-color-orange-container", "--ngs-font-size-sm", "--ngs-incident-bg", "--ngs-incident-border-radius", "--ngs-incident-border-start", "--ngs-incident-close-color", "--ngs-incident-close-hover-color", "--ngs-incident-color", "--ngs-incident-details-color", "--ngs-incident-details-font-size", "--ngs-incident-gap", "--ngs-incident-padding", "--ngs-incident-title-font-size", "--ngs-incident-title-font-weight", "--ngs-incidents-bar-bg", "--ngs-incidents-bar-box-shadow", "--ngs-incidents-bar-color", "--ngs-incidents-bar-height", "--ngs-incidents-bar-hover-box-shadow", "--ngs-incidents-bar-padding", "--ngs-incidents-description-font-size", "--ngs-incidents-description-opacity", "--ngs-incidents-list-bg", "--ngs-incidents-list-gap", "--ngs-incidents-list-padding", "--ngs-incidents-title-font-size", "--ngs-incidents-title-font-weight", "--ngs-layout-top-header-height", "--ngs-layout-top-header-top", "--ngs-radius-md", "--ngs-shadow-sm" ], "example": null }, { "name": "inline-text-edit", "title": "Inline Text Edit", "overviewName": "Inline Text Edit", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/inline-text-edit", "publicApi": "projects/components/inline-text-edit/public-api.ts", "sourceRoot": "projects/components/inline-text-edit/src", "docsPath": "/forms/inline-text-edit", "docsOverviewSource": "projects/docs/src/app/forms/inline-text-edit/overview/overview.html", "purpose": "Let users edit already visible plain text directly in place with a contenteditable host.", "useWhen": "Use for quick rename and edit-in-place flows such as project names, task names, card titles, table labels, short descriptions, headings, and other small text values where opening a separate form would be too heavy. It saves on Enter or blur, cancels on Escape, emits the trimmed value through contentChanged, supports placeholder, and can delay emissions with delay. Do not use for normal labeled forms, validation-heavy fields, or textarea workflows; use ngs-form-field with ngsInput or textarea. Do not use for rich text, long content, comments, replies, or documents; use TextEditor, ContentEditor, or CommentEditor. Do not use for value selection or complex save/cancel flows with explicit buttons.", "exampleTopics": [ "Basic inline text edit" ], "minimalExample": "\n Hover and edit, then press Enter or click outside to save. Press Esc to cancel.\n\n
\n \n {{ projectName() }}\n \n \n {{ projectDescription() }}\n \n
\n
\n \n
\n
\n Project Name: {{ projectName() }}\n
\n
\n Project Description: {{ projectDescription() }}\n
", "exampleFiles": [ { "name": "basic-inline-text-edit-example", "title": "Basic inline text edit", "file": "projects/docs/src/app/forms/inline-text-edit/_examples/basic-inline-text-edit-example/basic-inline-text-edit-example.html", "source": "\n Hover and edit, then press Enter or click outside to save. Press Esc to cancel.\n\n
\n \n {{ projectName() }}\n \n \n {{ projectDescription() }}\n \n
\n
\n \n
\n
\n Project Name: {{ projectName() }}\n
\n
\n Project Description: {{ projectDescription() }}\n
" } ], "previewAsset": "projects/components/inline-text-edit/preview.svg", "selectors": [ "[ngs-inline-text-edit]", "ngs-inline-text-edit" ], "exportedSymbols": [ "InlineTextEdit" ], "inputs": [ "delay", "enabled", "placeholder" ], "outputs": [ "contentChanged" ], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-on-surface", "--ngs-color-outline", "--ngs-color-primary", "--ngs-field-radius", "--ngs-form-field-outlined-caret-color", "--ngs-form-field-outlined-input-text-color", "--ngs-form-field-outlined-outline-color", "--ngs-form-field-outlined-outline-width" ], "example": null }, { "name": "input", "title": "Input", "overviewName": "Input", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/input", "publicApi": "projects/components/input/public-api.ts", "sourceRoot": "projects/components/input/src", "docsPath": "/forms/input", "docsOverviewSource": "projects/docs/src/app/forms/input/overview/overview.html", "purpose": "Apply NgStarter form styling and FormField integration to native input and textarea controls.", "useWhen": "Use input[ngsInput] or textarea[ngsInput] for regular text entry such as search, email, password, URL, plain phone-like text, textarea values in forms, filters, settings forms, profile forms, and admin forms. Usually place exactly one ngsInput control inside one ngs-form-field with ngs-label, ngs-hint, ngs-error, and optional prefix or suffix. It supports placeholder, required, disabled, readonly, focus behavior, Angular forms, and ErrorStateMatcher. Do not use for numeric controls with step/min/max UX; use NumberInput. Do not use for phone country/dial-code input; use PhoneInput. Do not use for masked formats by itself; pair ngsInput with InputMask directives. Do not use for Select, Autocomplete, Datepicker, Timepicker, CurrencySelect, CountrySelect, checkbox, radio, toggle, or buttons. Do not use for inline rename; use InlineTextEdit. Do not use for comments/replies or rich/block content; use CommentEditor, TextEditor, or ContentEditor. Do not use ngsInput as a layout wrapper or standalone replacement for FormField when label, hint, and error behavior are needed.", "exampleTopics": [ "Basic Inputs", "Disabled Inputs", "Textarea Autosize", "Clear Button", "Error Messages", "Input with Hints", "Input with Prefixes and Suffixes", "Disabled", "Prefixes and suffixes" ], "minimalExample": "
\n \n Favorite food\n \n \n \n Leave a comment\n \n \n
", "exampleFiles": [ { "name": "basic-inputs-example", "title": "Basic inputs", "file": "projects/docs/src/app/forms/input/_examples/basic-inputs-example/basic-inputs-example.html", "source": "
\n \n Favorite food\n \n \n \n Leave a comment\n \n \n
" }, { "name": "clear-button-example", "title": "Clear button", "file": "projects/docs/src/app/forms/input/_examples/clear-button-example/clear-button-example.html", "source": "\n Clearable input\n \n @if (value) {\n \n }\n" }, { "name": "disabled-example", "title": "Disabled", "file": "projects/docs/src/app/forms/input/_examples/disabled-example/disabled-example.html", "source": "
\n \n Favorite food\n \n \n \n Leave a comment\n \n \n
" } ], "previewAsset": "projects/components/input/preview.svg", "selectors": [ "input[ngsInput]", "textarea[ngsInput]" ], "exportedSymbols": [ "Input" ], "inputs": [ "disabled", "errorStateMatcher", "id", "placeholder", "readonly", "required" ], "outputs": [], "cssTokens": [], "example": "" }, { "name": "input-mask", "title": "Input Mask", "overviewName": "Input Mask", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/input-mask", "publicApi": "projects/components/input-mask/public-api.ts", "sourceRoot": "projects/components/input-mask/src", "docsPath": "/forms/input-mask", "docsOverviewSource": "projects/docs/src/app/forms/input-mask/overview/overview.html", "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", "Credit card cvv input mask", "Credit card input mask", "Credit card expiry input mask" ], "minimalExample": "\n CVV\n \n", "exampleFiles": [ { "name": "credit-card-cvv-input-mask-example", "title": "Credit card cvv input mask", "file": "projects/docs/src/app/forms/input-mask/_examples/credit-card-cvv-input-mask-example/credit-card-cvv-input-mask-example.html", "source": "\n CVV\n \n" }, { "name": "credit-card-expiry-input-mask-example", "title": "Credit card expiry input mask", "file": "projects/docs/src/app/forms/input-mask/_examples/credit-card-expiry-input-mask-example/credit-card-expiry-input-mask-example.html", "source": "\n Expiry\n \n" }, { "name": "credit-card-input-mask-example", "title": "Credit card input mask", "file": "projects/docs/src/app/forms/input-mask/_examples/credit-card-input-mask-example/credit-card-input-mask-example.html", "source": "\n Card number\n \n \n" } ], "previewAsset": "projects/components/input-mask/preview.svg", "selectors": [ "[ngsCreditCardCvvMask]", "[ngsCreditCardExpiryDateMask]", "[ngsCreditCardNumberMask]" ], "exportedSymbols": [ "CreditCardCvvMaskDirective", "CreditCardExpiryDateMaskDirective", "CreditCardNumberMaskDirective" ], "inputs": [ "placeholder" ], "outputs": [], "cssTokens": [], "example": null }, { "name": "input-validator", "title": "Input Validator", "overviewName": "Input Validator", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/input-validator", "publicApi": "projects/components/input-validator/public-api.ts", "sourceRoot": "projects/components/input-validator/src", "docsPath": "/forms/input-validator", "docsOverviewSource": "projects/docs/src/app/forms/input-validator/overview/overview.html", "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 validators" ], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/input-validator/preview.svg", "selectors": [], "exportedSymbols": [ "creditCardCvvValidator", "CreditCardCvvValidatorOptions", "creditCardNumberValidator", "expiryDateValidator" ], "inputs": [], "outputs": [], "cssTokens": [], "example": null }, { "name": "kanban-board", "title": "Kanban Board", "overviewName": "Kanban Board", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/kanban-board", "publicApi": "projects/components/kanban-board/public-api.ts", "sourceRoot": "projects/components/kanban-board/src", "docsPath": "/libraries/kanban-board", "docsOverviewSource": "projects/docs/src/app/libraries/kanban-board/overview/overview.html", "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", "selectors": [ "[ngsKanbanItemDef]", "ngs-kanban-board" ], "exportedSymbols": [ "KanbanBoard", "KanbanColumn", "KanbanItem", "KanbanItemDefDirective", "KanbanItemSortedEvent", "KanbanItemTransferredEvent" ], "inputs": [ "colors", "columns" ], "outputs": [ "columnDelete", "columnEdit", "itemAdd", "itemClick", "itemSorted" ], "cssTokens": [ "--ngs-color-surface-container-lowest", "--ngs-kanban-board-col-width", "--ngs-kanban-board-column-gap", "--ngs-kanban-board-padding-x", "--ngs-radius-xl", "--ngs-shadow-sm" ], "example": null }, { "name": "kbd", "title": "Kbd", "overviewName": "Kbd", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/kbd", "publicApi": "projects/components/kbd/public-api.ts", "sourceRoot": "projects/components/kbd/src", "docsPath": "/components/kbd", "docsOverviewSource": "projects/docs/src/app/components/kdb/overview/overview.html", "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", "Keyboard in menu", "Basic kbd", "Kbd group", "Kbd with menu" ], "minimalExample": "
\n ⌘\n ⇧\n ⌥\n ⌃\n
", "exampleFiles": [ { "name": "basic-kbd-example", "title": "Basic kbd", "file": "projects/docs/src/app/components/kdb/_examples/basic-kbd-example/basic-kbd-example.html", "source": "
\n ⌘\n ⇧\n ⌥\n ⌃\n
" }, { "name": "kbd-group-example", "title": "Kbd group", "file": "projects/docs/src/app/components/kdb/_examples/kbd-group-example/kbd-group-example.html", "source": "
\n \n ⌘\n ⌥\n \n
\n
\n \n ⌘\n ⇧\n ⌃\n \n
" }, { "name": "kbd-with-menu-example", "title": "Kbd with menu", "file": "projects/docs/src/app/components/kdb/_examples/kbd-with-menu-example/kbd-with-menu-example.html", "source": "\n\n \n \n \n" } ], "previewAsset": "projects/components/kbd/preview.svg", "selectors": [ "ngs-kbd", "ngs-kbd-group" ], "exportedSymbols": [ "Kbd", "KbdGroup" ], "inputs": [], "outputs": [], "cssTokens": [ "--ngs-color-surface-container", "--ngs-font-size-xs", "--ngs-radius-lg" ], "example": null }, { "name": "layout", "title": "Layout", "overviewName": "Layout", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/layout", "publicApi": "projects/components/layout/public-api.ts", "sourceRoot": "projects/components/layout/src", "docsPath": "/components/layout", "docsOverviewSource": "projects/docs/src/app/components/layout/overview/overview.html", "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 static dashboard widgets, Tiles for dashboards users can rearrange or customize, DataView or Table for datasets, Drawer for overlay side panels, and Navigation, Sidebar, or Sidenav components inside sidebars.", "exampleTopics": [ "Layout header", "Layout sidebar", "Layout header with sidebar", "Layout header with topbar", "Layout footer", "Layout header with footer", "Layout aside", "Layout with nested layouts example", "Layout with nested layouts" ], "minimalExample": "
\n \n \n
Sidebar
\n \n \n Body\n \n \n
Aside
\n \n \n
", "exampleFiles": [ { "name": "layout-aside-example", "title": "Layout aside", "file": "projects/docs/src/app/components/layout/_examples/layout-aside-example/layout-aside-example.html", "source": "
\n \n \n
Sidebar
\n \n \n Body\n \n \n
Aside
\n \n \n
" }, { "name": "layout-footer-example", "title": "Layout footer", "file": "projects/docs/src/app/components/layout/_examples/layout-footer-example/layout-footer-example.html", "source": "
\n \n \n Body\n \n \n
\n This is footer example © 2024\n
\n \n \n
" }, { "name": "layout-header-example", "title": "Layout header", "file": "projects/docs/src/app/components/layout/_examples/layout-header-example/layout-header-example.html", "source": "
\n \n \n
\n Header\n
\n \n \n Body\n \n \n
" } ], "previewAsset": "projects/components/layout/preview.svg", "selectors": [ "ngs-layout", "ngs-layout-aside", "ngs-layout-content", "ngs-layout-footer", "ngs-layout-header", "ngs-layout-sidebar", "ngs-layout-topbar" ], "exportedSymbols": [ "Layout", "LAYOUT", "LAYOUT_CONTENT", "LayoutApiService", "LayoutAside", "LayoutContent", "LayoutContentInterface", "LayoutFooter", "LayoutHeader", "LayoutSidebar", "LayoutSidebarStore", "LayoutSidebarVisibilityChange", "LayoutTopbar" ], "inputs": [ "autoscrollToTop", "layoutId", "root" ], "outputs": [], "cssTokens": [ "--ngs-layout-aside-width" ], "example": null }, { "name": "list", "title": "List", "overviewName": "List", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/list", "publicApi": "projects/components/list/public-api.ts", "sourceRoot": "projects/components/list/src", "docsPath": "/components/list", "docsOverviewSource": "projects/docs/src/app/components/list/overview/overview.html", "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", "List With Selection", "List With Single Selection", "List Variants", "Nav List" ], "minimalExample": "\n Item 1\n Item 2\n Item 3\n", "exampleFiles": [ { "name": "basic-list-example", "title": "Basic list", "file": "projects/docs/src/app/components/list/_examples/basic-list-example/basic-list-example.html", "source": "\n Item 1\n Item 2\n Item 3\n" }, { "name": "list-variants-example", "title": "List variants", "file": "projects/docs/src/app/components/list/_examples/list-variants-example/list-variants-example.html", "source": "

Single line lists

\n\n \n This is the title\n \n Also the title\n\n

Two line lists

\n\n \n Title\n Second line\n \n \n Title\n Second line\n \n \n Title\n Second line\n \n\n

Three line lists

\n\n \n Title\n Second line\n Third line\n \n \n Title\n Second line. This line will truncate.\n Third line\n \n \n Title\n Second line. This line will truncate.\n Third line\n \n\n

Three line list with secondary text wrapping

\n\n \n Title\n \n Secondary line that will wrap because the list lines is explicitly set to 3 lines. Text\n inside of a `ngsListItemTitle` or `ngsListItemLine` will never wrap.\n \n \n \n \n
Folders
\n @for (folder of folders(); track folder) {\n \n \n
{{ folder.name }}
\n
{{ folder.updated | date }}
\n \n }\n \n
Notes
\n @for (note of notes(); track note) {\n \n \n
{{ note.name }}
\n
{{ note.updated | date }}
\n \n }\n" } ], "previewAsset": "projects/components/list/preview.svg", "selectors": [ "[ngsLine]", "[ngsListItemAvatar]", "[ngsListItemIcon]", "[ngsListItemLine]", "[ngsListItemMeta]", "[ngsListItemTitle]", "[ngsSubheader]", "a[ngs-list-item]", "button[ngs-list-item]", "ngs-action-list", "ngs-list", "ngs-list-item", "ngs-list-option", "ngs-nav-list", "ngs-selection-list" ], "exportedSymbols": [ "ActionList", "List", "ListItem", "ListItemAvatar", "ListItemIcon", "ListItemLine", "ListItemMeta", "ListItemTitle", "ListOption", "NavList", "SelectionList", "Subheader" ], "inputs": [ "disabled", "disableRipple", "lines", "multiple", "ngsRippleDisabled", "selected", "value" ], "outputs": [ "selectedChange", "selectionChange" ], "cssTokens": [ "--ngs-color-neutral", "--ngs-list-gap", "--ngs-list-item-active-bg", "--ngs-list-item-active-color", "--ngs-list-item-color", "--ngs-list-item-disabled-opacity", "--ngs-list-item-font-size", "--ngs-list-item-gap", "--ngs-list-item-hover-bg", "--ngs-list-item-hover-color", "--ngs-list-item-line-color", "--ngs-list-item-line-font-size", "--ngs-list-item-min-height", "--ngs-list-item-padding", "--ngs-list-item-radius", "--ngs-list-item-title-font-size", "--ngs-list-padding", "--ngs-nav-item-active-bg", "--ngs-nav-item-active-color", "--ngs-nav-item-color", "--ngs-nav-item-font-size", "--ngs-nav-item-gap", "--ngs-nav-item-height", "--ngs-nav-item-hover-bg", "--ngs-nav-item-hover-color", "--ngs-nav-item-padding", "--ngs-nav-item-radius" ], "example": null }, { "name": "logo", "title": "Logo", "overviewName": "Logo", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/logo", "publicApi": "projects/components/logo/public-api.ts", "sourceRoot": "projects/components/logo/src", "docsPath": null, "docsOverviewSource": null, "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": [], "previewAsset": "projects/components/logo/preview.svg", "selectors": [ "[ngs-logo]", "ngs-logo", "ngs-logo-description", "ngs-logo-shape", "ngs-logo-text" ], "exportedSymbols": [ "Logo", "LogoDescription", "LogoShape", "LogoText", "LogoTextSize" ], "inputs": [ "size" ], "outputs": [], "cssTokens": [ "--ngs-color-primary", "--ngs-color-tertiary", "--ngs-font-size-sm", "--ngs-font-size-xl", "--ngs-font-size-xs", "--ngs-logo-text-color", "--ngs-logo-text-font-size", "--ngs-logo-text-font-weight" ], "example": null }, { "name": "marquee", "title": "Marquee", "overviewName": "Marquee", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/marquee", "publicApi": "projects/components/marquee/public-api.ts", "sourceRoot": "projects/components/marquee/src", "docsPath": "/components/marquee", "docsOverviewSource": "projects/docs/src/app/components/marquee/overview/overview.html", "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", "Marquee with pause on hover", "Marquee pause on hover" ], "minimalExample": "\n Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.\n", "exampleFiles": [ { "name": "basic-marquee-example", "title": "Basic marquee", "file": "projects/docs/src/app/components/marquee/_examples/basic-marquee-example/basic-marquee-example.html", "source": "\n Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.\n" }, { "name": "marquee-pause-on-hover-example", "title": "Marquee pause on hover", "file": "projects/docs/src/app/components/marquee/_examples/marquee-pause-on-hover-example/marquee-pause-on-hover-example.html", "source": "\n Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.\n" }, { "name": "marquee-reverse-example", "title": "Marquee reverse", "file": "projects/docs/src/app/components/marquee/_examples/marquee-reverse-example/marquee-reverse-example.html", "source": "\n Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.\n" } ], "previewAsset": "projects/components/marquee/preview.svg", "selectors": [ "[ngsMarqueeItem]", "ngs-marquee" ], "exportedSymbols": [ "Marquee", "MarqueeItemDirective" ], "inputs": [ "pauseOnHover", "reverse" ], "outputs": [], "cssTokens": [ "--ngs-marquee-animation-duration", "--ngs-marquee-gap", "--ngs-marquee-item-width", "--ngs-marquee-pause", "--ngs-marquee-repeat-gap", "--ngs-marquee-reverse" ], "example": null }, { "name": "menu", "title": "Menu", "overviewName": "Menu", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/menu", "publicApi": "projects/components/menu/public-api.ts", "sourceRoot": "projects/components/menu/src", "docsPath": "/components/menu", "docsOverviewSource": "projects/docs/src/app/components/menu/overview/overview.html", "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", "Menu Divider", "Menu Heading", "Data Driven Menu", "Menu Header & Footer", "Nested Menu", "Menu Positioning", "Context Menu", "Lazy Rendering Menu", "Lazy rendering" ], "minimalExample": "\n\n \n \n", "exampleFiles": [ { "name": "basic-menu-example", "title": "Basic menu", "file": "projects/docs/src/app/components/menu/_examples/basic-menu-example/basic-menu-example.html", "source": "\n\n \n \n" }, { "name": "context-menu-example", "title": "Context menu", "file": "projects/docs/src/app/components/menu/_examples/context-menu-example/context-menu-example.html", "source": "
\n Right click here to trigger a context menu\n
\n\n \n \n \n \n" }, { "name": "data-driven-menu-example", "title": "Data driven menu", "file": "projects/docs/src/app/components/menu/_examples/data-driven-menu-example/data-driven-menu-example.html", "source": "
\n \n {{ selectedAction() }}\n
\n\n @for (action of actions; track action.id) {\n \n }\n" } ], "previewAsset": "projects/components/menu/preview.svg", "selectors": [ "[ngs-menu-item]", "[ngsContextMenuTriggerFor]", "[ngsMenuContent]", "[ngsMenuOptionGroup]", "[ngsMenuTriggerFor]", "ngs-menu", "ngs-menu-divider", "ngs-menu-footer", "ngs-menu-header", "ngs-menu-heading", "ngs-menu-item" ], "exportedSymbols": [ "ContextMenuTrigger", "Menu", "MENU_ITEM", "MENU_TRIGGER", "MenuCloseReason", "MenuContent", "MenuDivider", "MenuFooter", "MenuHeader", "MenuHeading", "MenuItem", "MenuOptionGroupDirective", "MenuTrigger", "OPTION_PARENT_COMPONENT", "OptionParentComponent" ], "inputs": [ "classList", "disabled", "multiple", "ngsContextMenuTriggerData", "ngsContextMenuTriggerFor", "ngsMenuDisabled", "ngsMenuTriggerData", "ngsMenuTriggerFor", "ngsMenuTriggerRestoreFocus", "role", "selected", "xPosition", "yPosition" ], "outputs": [ "_triggered", "closed", "menuClosed", "menuOpened", "valueChange" ], "cssTokens": [ "--ngs-color-neutral-500", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-subtle", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-control-radius", "--ngs-dropdown-bg", "--ngs-dropdown-border", "--ngs-dropdown-height", "--ngs-dropdown-item-active-bg", "--ngs-dropdown-item-color", "--ngs-dropdown-item-disabled-color", "--ngs-dropdown-item-font-size", "--ngs-dropdown-item-gap", "--ngs-dropdown-item-hover-bg", "--ngs-dropdown-item-padding", "--ngs-dropdown-item-radius", "--ngs-dropdown-padding", "--ngs-dropdown-radius", "--ngs-dropdown-shadow", "--ngs-font-size-sm", "--ngs-font-size-xs", "--ngs-menu-background", "--ngs-menu-border", "--ngs-menu-divider-color", "--ngs-menu-divider-margin", "--ngs-menu-item-active-background", "--ngs-menu-item-color", "--ngs-menu-item-disabled-color", "--ngs-menu-item-font-size", "--ngs-menu-item-font-weight", "--ngs-menu-item-gap", "--ngs-menu-item-height", "--ngs-menu-item-hover-background", "--ngs-menu-item-padding", "--ngs-menu-item-radius", "--ngs-menu-max-height", "--ngs-menu-max-width", "--ngs-menu-min-width", "--ngs-menu-padding", "--ngs-menu-panel-bg", "--ngs-menu-shadow" ], "example": null }, { "name": "micro-chart", "title": "Micro Chart", "overviewName": "Micro Chart", "category": "micro-charts", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/micro-chart", "publicApi": "projects/components/micro-chart/public-api.ts", "sourceRoot": "projects/components/micro-chart/src", "docsPath": "/micro-charts", "docsOverviewSource": null, "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": [], "previewAsset": "projects/components/micro-chart/preview.svg", "selectors": [ "ngs-mchart-bar", "ngs-mchart-line", "ngs-mchart-pie", "ngs-mchart-tooltip", "ngs-mchart-tooltip-body", "ngs-mchart-tooltip-title" ], "exportedSymbols": [ "BaseChartTooltip", "MchartBar", "MchartLine", "MchartLineCurveType", "MchartPie", "MchartTooltip", "MchartTooltipBody", "MchartTooltipTitle" ], "inputs": [ "compact", "curve", "data", "dataItemStrokeWidth", "fillAreaGradient", "fillGradient", "gap", "highlight", "labels", "legendContainerWidth", "legendItemFontSize", "legendItemHeight", "legendItemSymbolBorderRadius", "legendItemSymbolSize", "legendOffset", "markerDotSize", "radius", "responsive", "showArea", "showDataAnimation", "showLegend", "showMarkers", "showValueOnSlices", "strokeWidth", "tooltipPosition", "valueAccessor", "valueFontSize", "xAccessor", "yAccessor" ], "outputs": [], "cssTokens": [ "--ngs-color-background", "--ngs-color-neutral", "--ngs-color-neutral-200", "--ngs-color-neutral-300", "--ngs-color-neutral-700", "--ngs-color-neutral-800", "--ngs-color-neutral-900", "--ngs-color-neutral-950", "--ngs-color-primary", "--ngs-color-primary-200", "--ngs-color-primary-500", "--ngs-color-tertiary-200", "--ngs-font-size-xs", "--ngs-mchart-bar-bar-bg", "--ngs-mchart-bar-bar-gradient-end-color", "--ngs-mchart-bar-bar-gradient-start-color", "--ngs-mchart-bar-highlight-bg", "--ngs-mchart-line-area-bg", "--ngs-mchart-line-area-gradient-end-color", "--ngs-mchart-line-area-gradient-start-color", "--ngs-mchart-line-line-bg", "--ngs-mchart-line-marker-dot-bg", "--ngs-mchart-line-marker-line-bg", "--ngs-mchart-pie-legend-item-color", "--ngs-mchart-pie-legend-item-hover-color", "--ngs-mchart-pie-stroke-color", "--ngs-mchart-pie-value-color", "--ngs-radius-lg", "--ngs-shadow-sm" ], "example": null }, { "name": "motion", "title": "Motion", "overviewName": "Motion", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/motion", "publicApi": "projects/components/motion/public-api.ts", "sourceRoot": "projects/components/motion/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Use Motion when an Angular admin or dashboard screen needs this UI pattern.", "useWhen": "Use Motion as the standard NgStarter component for this UI need.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": null, "selectors": [ "ngs-motion-player", "ngs-motion-studio" ], "exportedSymbols": [ "MotionPlayer", "MotionStudio" ], "inputs": [], "outputs": [], "cssTokens": [], "example": null }, { "name": "navigation", "title": "Navigation", "overviewName": "Navigation", "category": "navigation", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/navigation", "publicApi": "projects/components/navigation/public-api.ts", "sourceRoot": "projects/components/navigation/src", "docsPath": "/navigation/navigation", "docsOverviewSource": "projects/docs/src/app/navigation/nav/overview/overview.html", "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", "Navigation with divider", "Navigation with icons", "Navigation with nested menu", "Navigation with badges" ], "minimalExample": "\n \n Dashboard\n \n \n Projects\n \n Tasks\n \n
\n Really long menu item text, really long menu item text\n
\n \n Support\n", "exampleFiles": [ { "name": "basic-navigation-example", "title": "Basic navigation", "file": "projects/docs/src/app/navigation/nav/_examples/basic-navigation-example/basic-navigation-example.html", "source": "\n \n Dashboard\n \n \n Projects\n \n Tasks\n \n
\n Really long menu item text, really long menu item text\n
\n \n Support\n" }, { "name": "navigation-with-badges-example", "title": "Navigation with badges", "file": "projects/docs/src/app/navigation/nav/_examples/navigation-with-badges-example/navigation-with-badges-example.html", "source": "\n \n Dashboard 1\n \n Projects\n
Tasks
\n \n \n Settings\n 3\n \n \n \n Profile\n
Security
\n \n \n Support\n" }, { "name": "navigation-with-divider-example", "title": "Navigation with divider", "file": "projects/docs/src/app/navigation/nav/_examples/navigation-with-divider-example/navigation-with-divider-example.html", "source": "\n Dashboard\n Projects\n \n Tasks\n Support\n" } ], "previewAsset": "projects/components/navigation/preview.svg", "selectors": [ "[ngs-navigation-item]", "[ngsNavigationGroupToggleIcon]", "[ngsNavigationItemBadge]", "[ngsNavigationItemDef]", "[ngsNavigationItemIcon]", "ngs-navigation", "ngs-navigation-divider", "ngs-navigation-group", "ngs-navigation-group-menu", "ngs-navigation-group-toggle", "ngs-navigation-heading", "ngs-navigation-item" ], "exportedSymbols": [ "Navigation", "NAVIGATION", "NAVIGATION_GROUP", "NavigationDivider", "NavigationGroup", "NavigationGroupInterface", "NavigationGroupMenu", "NavigationGroupToggle", "NavigationGroupToggleIconDirective", "NavigationHeading", "NavigationItem", "NavigationItemBadgeDirective", "NavigationItemData", "NavigationItemDefDirective", "NavigationItemIconDirective", "NavigationItemInterface", "NavigationState", "NavigationStore" ], "inputs": [ "activateByRoute", "activeKey", "appearance", "badgeTextOnly", "dataSource", "forceActive", "itemTypeProperty", "key" ], "outputs": [ "itemClicked" ], "cssTokens": [ "--ngs-color-on-primary", "--ngs-color-on-surface-variant", "--ngs-color-outline", "--ngs-color-primary", "--ngs-color-subtle", "--ngs-font-size-xs", "--ngs-nav-arrow-size", "--ngs-nav-badge-padding", "--ngs-nav-badge-size", "--ngs-nav-divider-height", "--ngs-nav-divider-margin", "--ngs-nav-group-toggle-icon-position-end", "--ngs-nav-group-toggle-icon-size", "--ngs-nav-group-toggle-padding-end", "--ngs-nav-heading-after-margin", "--ngs-nav-heading-font-size", "--ngs-nav-heading-font-weight", "--ngs-nav-heading-height", "--ngs-nav-heading-margin-bottom", "--ngs-nav-heading-padding", "--ngs-nav-heading-text-align", "--ngs-nav-heading-text-transform", "--ngs-nav-item-active-bg", "--ngs-nav-item-active-color", "--ngs-nav-item-active-icon-color", "--ngs-nav-item-border-color", "--ngs-nav-item-border-width", "--ngs-nav-item-color", "--ngs-nav-item-font-size", "--ngs-nav-item-font-weight", "--ngs-nav-item-gap", "--ngs-nav-item-height", "--ngs-nav-item-hover-bg", "--ngs-nav-item-hover-color", "--ngs-nav-item-hover-icon-color", "--ngs-nav-item-icon-color", "--ngs-nav-item-icon-size", "--ngs-nav-item-icon-width", "--ngs-nav-item-padding", "--ngs-nav-item-radius", "--ngs-nav-item-width", "--ngs-nav-items-gap", "--ngs-nav-nested-item-border-radius", "--ngs-nav-nested-item-height", "--ngs-nav-nested-item-indicator-height", "--ngs-nav-nested-item-indicator-position-start", "--ngs-nav-nested-item-indicator-width", "--ngs-nav-nested-item-margin", "--ngs-nav-nested-item-padding", "--ngs-navigation-bg", "--ngs-navigation-divider-bg", "--ngs-navigation-divider-height", "--ngs-navigation-divider-margin", "--ngs-navigation-group-active-bg", "--ngs-navigation-group-border-radius", "--ngs-navigation-group-menu-padding-start", "--ngs-navigation-group-toggle-active-bg", "--ngs-navigation-group-toggle-active-color", "--ngs-navigation-group-toggle-bg", "--ngs-navigation-group-toggle-has-icon-padding-end", "--ngs-navigation-group-toggle-icon-color", "--ngs-navigation-group-toggle-icon-position-end", "--ngs-navigation-group-toggle-icon-size", "--ngs-navigation-group-tree-lines-color", "--ngs-navigation-heading-after-margin", "--ngs-navigation-heading-color", "--ngs-navigation-heading-font-size", "--ngs-navigation-heading-font-weight", "--ngs-navigation-heading-margin-bottom", "--ngs-navigation-heading-padding", "--ngs-navigation-heading-text-align", "--ngs-navigation-heading-text-transform", "--ngs-navigation-item-active-bg", "--ngs-navigation-item-active-color", "--ngs-navigation-item-active-icon-color", "--ngs-navigation-item-bg", "--ngs-navigation-item-border-color", "--ngs-navigation-item-border-radius", "--ngs-navigation-item-border-width", "--ngs-navigation-item-color", "--ngs-navigation-item-font-size", "--ngs-navigation-item-font-weight", "--ngs-navigation-item-gap", "--ngs-navigation-item-has-icon-padding-start", "--ngs-navigation-item-height", "--ngs-navigation-item-hover-bg", "--ngs-navigation-item-hover-color", "--ngs-navigation-item-hover-icon-color", "--ngs-navigation-item-icon-color", "--ngs-navigation-item-icon-size", "--ngs-navigation-item-icon-width", "--ngs-navigation-item-padding", "--ngs-navigation-item-space-y", "--ngs-navigation-item-width", "--ngs-navigation-items-gap", "--ngs-navigation-nested-item-active-bg", "--ngs-navigation-nested-item-active-color", "--ngs-navigation-nested-item-bg", "--ngs-navigation-nested-item-border-radius", "--ngs-navigation-nested-item-color", "--ngs-navigation-nested-item-height", "--ngs-navigation-nested-item-hover-bg", "--ngs-navigation-nested-item-hover-color", "--ngs-navigation-nested-item-indicator-bg", "--ngs-navigation-nested-item-indicator-height", "--ngs-navigation-nested-item-indicator-position-start", "--ngs-navigation-nested-item-indicator-width", "--ngs-navigation-nested-item-margin", "--ngs-navigation-nested-item-padding" ], "example": null }, { "name": "notifications", "title": "Notifications", "overviewName": "Notifications", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/notifications", "publicApi": "projects/components/notifications/public-api.ts", "sourceRoot": "projects/components/notifications/src", "docsPath": "/components/notifications", "docsOverviewSource": "projects/docs/src/app/components/notifications/overview/overview.html", "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 variants", "Notification list" ], "minimalExample": "\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n Sam Anderson\n commented your post Super article\n \n \n This is a comment.\n \n 1 day ago\n\n\n \n \n \n \n {{ notification.actor.name }}\n {{ notification.message }}\n \n \n This is a comment.\n \n {{ notification.createdAt }}\n \n \n \n \n \n \n {{ notification.actor.name }}\n invited you to edit {{ notification.payload.folderName }}\n \n \n
\n \n \n \n \n Mila Ray\n mentioned you in Launch planning\n \n \n Can you confirm the rollout window before we lock the customer email?\n \n Just now\n \n \n \n \n Nolan Kim\n requested access to Q3 Pipeline\n \n \n
\n Workspace role: Editor\n
\n
\n \n \n
\n \n 8 minutes ago\n \n \n \n Type Number\n \n\n

Value: {{ value() }}

", "exampleFiles": [ { "name": "basic-number-input-example", "title": "Basic number input", "file": "projects/docs/src/app/forms/number-input/_examples/basic-number-input-example/basic-number-input-example.html", "source": "\n Type Number\n \n\n

Value: {{ value() }}

" }, { "name": "number-input-custom-controls-example", "title": "Number input custom controls", "file": "projects/docs/src/app/forms/number-input/_examples/number-input-custom-controls-example/number-input-custom-controls-example.html", "source": "
\n
\n \n Type Number\n \n \n \n \n \n \n \n \n \n
\n
\n \n Type Number\n \n \n \n \n \n \n \n \n \n
\n
" }, { "name": "number-input-min-max-example", "title": "Number input min max", "file": "projects/docs/src/app/forms/number-input/_examples/number-input-min-max-example/number-input-min-max-example.html", "source": "
\n \n Min 2, Max 5\n \n \n
\n

Value: {{ form.value.control }}

" } ], "previewAsset": "projects/components/number-input/preview.svg", "selectors": [ "[ngsDecreaseControl]", "[ngsIncreaseControl]", "[ngsNumberInputPrefix]", "[ngsNumberInputSuffix]", "ngs-number-input" ], "exportedSymbols": [ "DecreaseControlDirective", "IncreaseControlDirective", "NumberInput", "NumberInputPrefixDirective", "NumberInputSuffixDirective" ], "inputs": [ "disabled", "max", "min", "placeholder", "readonly", "required", "step" ], "outputs": [ "valueChange" ], "cssTokens": [ "--ngs-color-neutral-200", "--ngs-color-neutral-300", "--ngs-color-neutral-500", "--ngs-color-neutral-600", "--ngs-color-neutral-700", "--ngs-color-surface-container", "--ngs-color-surface-container-high", "--ngs-icon-size", "--ngs-number-input-control-active-bg", "--ngs-number-input-control-active-color", "--ngs-number-input-control-bg", "--ngs-number-input-control-border", "--ngs-number-input-control-border-radius", "--ngs-number-input-control-color", "--ngs-number-input-control-font-size", "--ngs-number-input-control-hover-bg", "--ngs-number-input-control-hover-color", "--ngs-number-input-control-size", "--ngs-number-input-controls-wdith", "--ngs-number-input-gap", "--ngs-number-input-suffix-gap", "--ngs-radius-md" ], "example": null }, { "name": "option", "title": "Option", "overviewName": "Option", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/option", "publicApi": "projects/components/option/public-api.ts", "sourceRoot": "projects/components/option/src", "docsPath": null, "docsOverviewSource": null, "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": [], "previewAsset": "projects/components/option/preview.svg", "selectors": [ "ngs-optgroup", "ngs-option" ], "exportedSymbols": [ "_Option", "_OptionParent", "Optgroup", "Option", "OPTION", "OPTION_PARENT" ], "inputs": [ "data", "disabled", "label", "selected", "value" ], "outputs": [ "onSelectionChange" ], "cssTokens": [ "--ngs-color-on-primary-container", "--ngs-color-on-surface", "--ngs-color-on-surface-variant", "--ngs-color-primary-container", "--ngs-color-surface-container-high", "--ngs-color-surface-container-highest", "--ngs-control-radius", "--ngs-dropdown-height", "--ngs-dropdown-item-active-bg", "--ngs-dropdown-item-color", "--ngs-dropdown-item-disabled-color", "--ngs-dropdown-item-font-size", "--ngs-dropdown-item-gap", "--ngs-dropdown-item-hover-bg", "--ngs-dropdown-item-nested-padding-start", "--ngs-dropdown-item-padding", "--ngs-dropdown-item-padding-x", "--ngs-dropdown-item-radius", "--ngs-dropdown-item-selected-bg", "--ngs-dropdown-item-selected-color", "--ngs-font-size-sm", "--ngs-option-active-background", "--ngs-option-color", "--ngs-option-disabled-color", "--ngs-option-font-size", "--ngs-option-gap", "--ngs-option-group-padding-start", "--ngs-option-height", "--ngs-option-hover-background", "--ngs-option-padding", "--ngs-option-radius", "--ngs-option-selected-background", "--ngs-option-selected-color" ], "example": null }, { "name": "overlay", "title": "Overlay", "overviewName": "Overlay", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/overlay", "publicApi": "projects/components/overlay/public-api.ts", "sourceRoot": "projects/components/overlay/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Provide low-level shared positioning utilities for components that create Angular CDK floating overlays.", "useWhen": "Use Overlay only when implementing a new NgStarter component or custom directive that directly manages Angular CDK Overlay, portal rendering, backdrop or outside-click behavior, close behavior, keyboard/focus handling, and anchored positioning. Use OverlayPosition values such as below-start, below-center, below-end, above-*, before-*, and after-*. Use new PositionManager().build(position) to create fallback ConnectedPosition[] pairs. Do not use Overlay directly when building a normal admin page or feature screen. Prefer higher-level components: Menu for action dropdowns and context menus, Popover for lightweight anchored content, Dialog for modal workflows, Drawer for side overlays, Select/Autocomplete/Datepicker/ColorPicker for form dropdowns, and Tooltip for simple hints.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/overlay/preview.svg", "selectors": [], "exportedSymbols": [ "OverlayPosition", "PositionManager" ], "inputs": [], "outputs": [], "cssTokens": [], "example": null }, { "name": "page-loading-bar", "title": "Page Loading Bar", "overviewName": "Page Loading Bar", "category": null, "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/page-loading-bar", "publicApi": "projects/components/page-loading-bar/public-api.ts", "sourceRoot": "projects/components/page-loading-bar/src", "docsPath": null, "docsOverviewSource": null, "purpose": "Show a global thin loading bar during Angular Router navigation.", "useWhen": "Use ngs-page-loading-bar once in the top-level app shell or root layout, usually near the root layout or router outlet, to provide navigation feedback. It listens to Angular Router events automatically: NavigationStart shows the bar, and NavigationEnd, NavigationCancel, or NavigationError finish it. Use fixed when the bar should stay attached to the viewport. Do not use PageLoadingBar for loading a specific block, table, card, form, submit/save/upload operation, or async work inside a page. Use ProgressBar, ProgressSpinner, BlockLoader, Skeleton, ScreenLoader, or the component-specific loading state for local loading. Do not use it as a real task completion percentage; it is route navigation feedback only.", "exampleTopics": [], "minimalExample": null, "exampleFiles": [], "previewAsset": "projects/components/page-loading-bar/preview.svg", "selectors": [ "ngs-page-loading-bar" ], "exportedSymbols": [ "PageLoadingBar" ], "inputs": [ "fixed" ], "outputs": [], "cssTokens": [ "--ngs-loading-bar-bg", "--ngs-loading-bar-height" ], "example": null }, { "name": "paginator", "title": "Paginator", "overviewName": "Paginator", "category": "components", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/paginator", "publicApi": "projects/components/paginator/public-api.ts", "sourceRoot": "projects/components/paginator/src", "docsPath": "/components/paginator", "docsOverviewSource": "projects/docs/src/app/components/paginator/overview/overview.html", "purpose": "Control pages of a dataset with range label, previous/next navigation, optional first/last buttons, and page size selection.", "useWhen": "Use ngs-paginator next to paged tables, DataView screens, search results, record lists, and server-side browsing. Provide length for total records, pageSize for records per page, zero-based pageIndex for the current page, and pageSizeOptions for allowed page sizes. Handle the page event to update local data or request the next page from an API; PageEvent includes previousPageIndex, pageIndex, pageSize, and length. Use hidePageSize when the page size is fixed. Use showFirstLastButtons when users need quick first/last navigation. Use PaginatorIntl to localize labels and range text. Do not use Paginator for app route navigation; use Navigation, Tabs, or Breadcrumbs. Do not use for wizard or onboarding steps; use Stepper or HeadlessStepper. Do not use for carousel slides, media browsing, or standalone UI without a paged dataset. If DataView already owns pagination, use its pagination model instead of adding a separate paginator.", "exampleTopics": [ "Basic Paginator", "Configurable Paginator" ], "minimalExample": "", "exampleFiles": [ { "name": "basic-paginator-example", "title": "Basic paginator", "file": "projects/docs/src/app/components/paginator/_examples/basic-paginator-example/basic-paginator-example.html", "source": "" }, { "name": "configurable-paginator-example", "title": "Configurable paginator", "file": "projects/docs/src/app/components/paginator/_examples/configurable-paginator-example/configurable-paginator-example.html", "source": "
\n \n Length\n \n \n \n Page Size\n \n \n \n Page Index\n \n \n \n Page Size Options\n \n \n
\n Hide page size\n Show multiple page size options\n Show first/last buttons\n Disabled\n
\n
\n
\n \n \n Header\n \n \n
Body
\n \n \n Footer\n \n
", "exampleFiles": [ { "name": "basic-panel-example", "title": "Basic panel", "file": "projects/docs/src/app/components/panel/_examples/basic-panel-example/basic-panel-example.html", "source": "
\n \n Header\n \n \n
Body
\n \n \n Footer\n \n
" }, { "name": "panel-with-extra-columns-example", "title": "Panel with extra columns", "file": "projects/docs/src/app/components/panel/_examples/panel-with-extra-columns-example/panel-with-extra-columns-example.html", "source": "
\n \n Header\n \n \n
Sidebar
\n \n \n \n \n
Body
\n \n \n \n
Aside
\n \n Footer\n \n
" } ], "previewAsset": "projects/components/panel/preview.svg", "selectors": [ "ngs-panel", "ngs-panel-aside", "ngs-panel-content", "ngs-panel-footer", "ngs-panel-header", "ngs-panel-sidebar", "ngs-panel-subheader" ], "exportedSymbols": [ "Panel", "PANEL_CONTENT", "PanelAside", "PanelContent", "PanelContentInterface", "PanelFooter", "PanelHeader", "PanelSidebar", "PanelSubheader" ], "inputs": [ "absolute", "autoHeight", "block", "flex" ], "outputs": [], "cssTokens": [ "--ngs-panel-footer-height", "--ngs-panel-header-height", "--ngs-panel-subheader-height" ], "example": null }, { "name": "password-strength", "title": "Password Strength", "overviewName": "Password Strength", "category": "forms", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/password-strength", "publicApi": "projects/components/password-strength/public-api.ts", "sourceRoot": "projects/components/password-strength/src", "docsPath": "/forms/password-strength", "docsOverviewSource": "projects/docs/src/app/forms/password-strength/overview/overview.html", "purpose": "Show real-time password strength feedback and requirement status while users create or change a password.", "useWhen": "Use PasswordStrength in signup, reset password, change password, account security, and credential setup forms. Use input type=\"password\" ngsInput inside one ngs-form-field for the actual password field, then place ngs-password-strength [password]=\"password.value\" below it for the strength bar. Use ngs-password-strength-info with a template reference to the strength component when users need to see requirement status for lowercase, uppercase, digit, special character, min length, or custom rules. Use ngs-pass-toggle-visibility as a suffix control inside the password form field when users need show/hide password behavior. Configure min, max, enableLengthRule, enableDigitRule, enableSpecialCharRule, and customValidator as needed, and listen to strengthChanged when the screen needs the score. Do not use PasswordStrength for OTP, MFA, invite codes, or passcodes; use PinInput. Do not use for generic text validation. Do not use for a login password field unless the user is creating or changing a password and strength feedback is useful. Do not rely on it as the only password security policy; backend validation is still required.", "exampleTopics": [ "Basic password strength", "Password strength info", "Password toggle visibility" ], "minimalExample": "
\n \n Password\n \n \n \n
", "exampleFiles": [ { "name": "basic-password-strength-example", "title": "Basic password strength", "file": "projects/docs/src/app/forms/password-strength/_examples/basic-password-strength-example/basic-password-strength-example.html", "source": "
\n \n Password\n \n \n \n
" }, { "name": "password-strength-info-example", "title": "Password strength info", "file": "projects/docs/src/app/forms/password-strength/_examples/password-strength-info-example/password-strength-info-example.html", "source": "
\n \n Password\n \n \n {{ password.value?.length }} / 25\n \n \n \n \n
" }, { "name": "password-toggle-visibility-example", "title": "Password toggle visibility", "file": "projects/docs/src/app/forms/password-strength/_examples/password-toggle-visibility-example/password-toggle-visibility-example.html", "source": "
\n \n Password\n \n \n \n \n
" } ], "previewAsset": "projects/components/password-strength/preview.svg", "selectors": [ "ngs-pass-toggle-visibility", "ngs-password-strength", "ngs-password-strength-info" ], "exportedSymbols": [ "Colors", "Criteria", "PassToggleVisibility", "PasswordStrength", "PasswordStrengthInfo", "PasswordStrengthValidator", "RegExpValidator" ], "inputs": [ "accentThreshold", "customCharsCriteriaMessage", "customValidator", "digitsCriteriaMessage", "enableDigitRule", "enableLengthRule", "enableLowerCaseLetterRule", "enableScoreInfo", "enableSpecialCharRule", "enableUpperCaseLetterRule", "externalError", "lowerCaseCriteriaMessage", "max", "min", "minCharsCriteriaMessage", "ngsIconDone", "ngsIconError", "password", "passwordComponent", "specialCharsCriteriaMessage", "tabindex", "upperCaseCriteriaMessage", "visible", "warnThreshold" ], "outputs": [ "strengthChanged" ], "cssTokens": [ "--ngs-color-danger", "--ngs-color-green-500", "--ngs-color-warning", "--ngs-progress-bar-active-indicator-color", "--ngs-progress-bar-active-indicator-height", "--ngs-progress-bar-track-height" ], "example": null }, { "name": "pdf-viewer", "title": "Pdf Viewer", "overviewName": "PDF Viewer", "category": "libraries", "package": "@ngstarter-ui/components", "importPath": "@ngstarter-ui/components/pdf-viewer", "publicApi": "projects/components/pdf-viewer/public-api.ts", "sourceRoot": "projects/components/pdf-viewer/src", "docsPath": "/libraries/pdf-viewer", "docsOverviewSource": "projects/docs/src/app/libraries/pdf-viewer/overview/overview.html", "purpose": "Import PDF Viewer from @ngstarter-ui/components/pdf-viewer .", "useWhen": "Choose Pdf Viewer when the workflow matches examples such as Basic pdf viewer.", "exampleTopics": [ "Basic pdf viewer" ], "minimalExample": "\n \n
\n
\n \n {{ annotation.avatarLabel || annotation.author.charAt(0) }}\n \n \n {{ annotation.author }}\n @if (annotation.time) {\n {{ annotation.time }}\n }\n \n \n Risk\n \n
\n

{{ annotation.text }}

\n