@lifecorner/angular-ui-kit 3.17.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs +17 -1
  2. package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map +1 -1
  3. package/fesm2022/lifecorner-angular-ui-kit-modal.mjs +2 -2
  4. package/fesm2022/lifecorner-angular-ui-kit-modal.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts +42 -8
package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs CHANGED
@@ -13,6 +13,7 @@ var BottomNavComponent = class BottomNavComponent {
13
13
  variant = input("docked", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
14
14
  fixed = input(true, ...ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []);
15
15
  maxItems = input(5, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
16
+ showMore = input(false, ...ngDevMode ? [{ debugName: "showMore" }] : /* istanbul ignore next */ []);
16
17
  moreLabel = input("More", ...ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []);
17
18
  moreIcon = input("dots", ...ngDevMode ? [{ debugName: "moreIcon" }] : /* istanbul ignore next */ []);
18
19
  moreRoute = input("", ...ngDevMode ? [{ debugName: "moreRoute" }] : /* istanbul ignore next */ []);
@@ -24,7 +25,7 @@ var BottomNavComponent = class BottomNavComponent {
24
25
  entries = computed(() => {
25
26
  const items = this.sortedItems();
26
27
  const max = Math.max(1, Math.floor(this.maxItems()));
27
- if (items.length <= max) return items.map((item) => ({
28
+ if (!this.showMore() && items.length <= max) return items.map((item) => ({
28
29
  item,
29
30
  current: this.matches(item.route),
30
31
  more: false
@@ -127,6 +128,13 @@ var BottomNavComponent = class BottomNavComponent {
127
128
  isRequired: false,
128
129
  transformFunction: null
129
130
  },
131
+ showMore: {
132
+ classPropertyName: "showMore",
133
+ publicName: "showMore",
134
+ isSignal: true,
135
+ isRequired: false,
136
+ transformFunction: null
137
+ },
130
138
  moreLabel: {
131
139
  classPropertyName: "moreLabel",
132
140
  publicName: "moreLabel",
@@ -301,6 +309,14 @@ i0.ɵɵngDeclareClassMetadata({
301
309
  required: false
302
310
  }]
303
311
  }],
312
+ showMore: [{
313
+ type: i0.Input,
314
+ args: [{
315
+ isSignal: true,
316
+ alias: "showMore",
317
+ required: false
318
+ }]
319
+ }],
304
320
  moreLabel: [{
305
321
  type: i0.Input,
306
322
  args: [{
package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n /** Unique id. */\n id: string;\n /** Visible label, always shown below the icon. */\n label: string;\n /** Icon name (`lc-icon`), drawn at 24 px. */\n icon: string;\n /** Router path the item links to (`routerLink`). */\n route: string;\n /** Sort order; items without one keep their array order. */\n displayOrder?: number;\n /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n badge?: {\n /** Text or number inside the badge. */\n value: string | number;\n /** Badge colour (`lc-badge` variant). */\n variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n };\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n item: BottomNavItem;\n current: boolean;\n more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n * `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n * label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n * its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n * sub-page (`/household/members`) keeps its destination current; `/` only\n * matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n * rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n * without `moreRoute` the entry is a button that emits `moreClick`.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n * the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n * bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n * (`z-index` 900). Reserve space for it at the end of the page (see\n * `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n * transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n * variant=\"floating\"\n * ariaLabel=\"Hauptnavigation\"\n * [items]=\"[\n * { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n * { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n * ]\"\n * [activeRoute]=\"router.url\"\n * (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-bottom-nav',\n standalone: true,\n imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n templateUrl: './bottom-nav.component.html',\n styleUrl: './bottom-nav.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'lc-bottom-nav-host',\n },\n})\nexport class BottomNavComponent {\n /** Destinations, left to right (sorted by `displayOrder` when given). */\n readonly items = input<readonly BottomNavItem[]>([]);\n\n /**\n * The current URL (e.g. `router.url`). The item whose route matches its\n * first path segment is current; `/` matches only itself.\n */\n readonly activeRoute = input('');\n\n /** Accessible name of the `<nav>` landmark. */\n readonly ariaLabel = input('Main navigation');\n\n /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n readonly variant = input<BottomNavVariant>('docked');\n\n /**\n * Pin the bar to the bottom of the viewport. Turn off to render it in the\n * document flow (previews, tests, a custom container).\n */\n readonly fixed = input(true);\n\n /**\n * Most entries the bar shows. With more destinations the first\n * `maxItems − 1` stay and the rest go behind the \"More\" entry.\n */\n readonly maxItems = input(5);\n\n /** Label of the overflow entry. */\n readonly moreLabel = input('More');\n\n /** Icon of the overflow entry. */\n readonly moreIcon = input('dots');\n\n /**\n * Route of the overflow entry (a page that lists the remaining\n * destinations). Empty renders the entry as a button that emits `moreClick`.\n */\n readonly moreRoute = input('');\n\n /**\n * Text read after an item's label when it has a badge; `{value}` is\n * replaced with the badge value (e.g. \"3 new\").\n */\n readonly badgeAriaLabel = input('{value} new');\n\n /** The current item was tapped again (e.g. scroll the page to the top). */\n readonly reselect = output<BottomNavItem>();\n\n /** The overflow entry was tapped while it has no `moreRoute`. */\n readonly moreClick = output<void>();\n\n /** Destinations in display order. */\n private readonly sortedItems = computed(() =>\n [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n );\n\n /** Path of `activeRoute` without query and fragment. */\n private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n /** Entries as rendered: destinations plus, on overflow, the \"More\" entry. */\n protected readonly entries = computed<BottomNavEntry[]>(() => {\n const items = this.sortedItems();\n const max = Math.max(1, Math.floor(this.maxItems()));\n if (items.length <= max) {\n return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n }\n const visible = items.slice(0, max - 1);\n const hidden = items.slice(max - 1);\n const moreRoute = this.moreRoute();\n const moreItem: BottomNavItem = {\n id: '__more',\n label: this.moreLabel(),\n icon: this.moreIcon(),\n route: moreRoute,\n };\n const moreCurrent =\n (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n return [\n ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n { item: moreItem, current: moreCurrent, more: true },\n ];\n });\n\n protected readonly navClasses = computed(() => {\n const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n return classes.join(' ');\n });\n\n /** Visually hidden badge text for screen readers. */\n protected badgeText(item: BottomNavItem): string {\n return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n }\n\n protected onItemClick(entry: BottomNavEntry): void {\n if (entry.current && !entry.more) {\n this.reselect.emit(entry.item);\n }\n }\n\n protected onMoreButtonClick(): void {\n this.moreClick.emit();\n }\n\n /** First-segment match: `/household/members` keeps `/household` current. */\n private matches(route: string): boolean {\n const path = this.activePath();\n const target = route.split(/[?#]/)[0] || '/';\n if (target === '/') return path === '/';\n const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n return path === normalized || path.startsWith(`${normalized}/`);\n }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"lc-bottom-nav__list\">\n @for (entry of entries(); track entry.item.id) {\n <li class=\"lc-bottom-nav__entry\">\n @if (entry.more && !entry.item.route) {\n <button\n type=\"button\"\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n (click)=\"onMoreButtonClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </button>\n } @else {\n <a\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n [routerLink]=\"entry.item.route\"\n [attr.aria-current]=\"entry.current ? 'page' : null\"\n (click)=\"onItemClick(entry)\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </a>\n }\n </li>\n }\n </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n @if (entry.item.badge; as badge) {\n <span class=\"lc-bottom-nav__badge\">\n <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n </span>\n }\n </span>\n <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n @if (entry.item.badge) {\n <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n }\n</ng-template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n /** Unique id. */\n id: string;\n /** Visible label, always shown below the icon. */\n label: string;\n /** Icon name (`lc-icon`), drawn at 24 px. */\n icon: string;\n /** Router path the item links to (`routerLink`). */\n route: string;\n /** Sort order; items without one keep their array order. */\n displayOrder?: number;\n /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n badge?: {\n /** Text or number inside the badge. */\n value: string | number;\n /** Badge colour (`lc-badge` variant). */\n variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n };\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n item: BottomNavItem;\n current: boolean;\n more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n * `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n * label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n * its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n * sub-page (`/household/members`) keeps its destination current; `/` only\n * matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n * rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n * without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n * slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n * the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n * bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n * (`z-index` 900). Reserve space for it at the end of the page (see\n * `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n * transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n * variant=\"floating\"\n * ariaLabel=\"Hauptnavigation\"\n * [items]=\"[\n * { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n * { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n * ]\"\n * [activeRoute]=\"router.url\"\n * (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-bottom-nav',\n standalone: true,\n imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n templateUrl: './bottom-nav.component.html',\n styleUrl: './bottom-nav.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'lc-bottom-nav-host',\n },\n})\nexport class BottomNavComponent {\n /** Destinations, left to right (sorted by `displayOrder` when given). */\n readonly items = input<readonly BottomNavItem[]>([]);\n\n /**\n * The current URL (e.g. `router.url`). The item whose route matches its\n * first path segment is current; `/` matches only itself.\n */\n readonly activeRoute = input('');\n\n /** Accessible name of the `<nav>` landmark. */\n readonly ariaLabel = input('Main navigation');\n\n /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n readonly variant = input<BottomNavVariant>('docked');\n\n /**\n * Pin the bar to the bottom of the viewport. Turn off to render it in the\n * document flow (previews, tests, a custom container).\n */\n readonly fixed = input(true);\n\n /**\n * Most entries the bar shows, \"More\" included. With more destinations, or\n * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n * \"More\" entry.\n *\n * @default 5\n */\n readonly maxItems = input(5);\n\n /**\n * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n * and any others move behind it, as on overflow.\n *\n * @default false\n */\n readonly showMore = input(false);\n\n /**\n * Label of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'More'\n */\n readonly moreLabel = input('More');\n\n /**\n * Icon of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'dots'\n */\n readonly moreIcon = input('dots');\n\n /**\n * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n * lists the remaining destinations. Empty renders the entry as a button that\n * emits `moreClick`.\n *\n * @default ''\n */\n readonly moreRoute = input('');\n\n /**\n * Text read after an item's label when it has a badge; `{value}` is\n * replaced with the badge value (e.g. \"3 new\").\n */\n readonly badgeAriaLabel = input('{value} new');\n\n /** The current item was tapped again (e.g. scroll the page to the top). */\n readonly reselect = output<BottomNavItem>();\n\n /** The \"More\" entry was tapped while it has no `moreRoute`. */\n readonly moreClick = output<void>();\n\n /** Destinations in display order. */\n private readonly sortedItems = computed(() =>\n [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n );\n\n /** Path of `activeRoute` without query and fragment. */\n private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n /**\n * Entries as rendered: destinations plus, on overflow or with `showMore`,\n * the \"More\" entry, which then takes one of the `maxItems` entries.\n */\n protected readonly entries = computed<BottomNavEntry[]>(() => {\n const items = this.sortedItems();\n const max = Math.max(1, Math.floor(this.maxItems()));\n if (!this.showMore() && items.length <= max) {\n return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n }\n const visible = items.slice(0, max - 1);\n const hidden = items.slice(max - 1);\n const moreRoute = this.moreRoute();\n const moreItem: BottomNavItem = {\n id: '__more',\n label: this.moreLabel(),\n icon: this.moreIcon(),\n route: moreRoute,\n };\n const moreCurrent =\n (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n return [\n ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n { item: moreItem, current: moreCurrent, more: true },\n ];\n });\n\n protected readonly navClasses = computed(() => {\n const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n return classes.join(' ');\n });\n\n /** Visually hidden badge text for screen readers. */\n protected badgeText(item: BottomNavItem): string {\n return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n }\n\n protected onItemClick(entry: BottomNavEntry): void {\n if (entry.current && !entry.more) {\n this.reselect.emit(entry.item);\n }\n }\n\n protected onMoreButtonClick(): void {\n this.moreClick.emit();\n }\n\n /** First-segment match: `/household/members` keeps `/household` current. */\n private matches(route: string): boolean {\n const path = this.activePath();\n const target = route.split(/[?#]/)[0] || '/';\n if (target === '/') return path === '/';\n const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n return path === normalized || path.startsWith(`${normalized}/`);\n }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"lc-bottom-nav__list\">\n @for (entry of entries(); track entry.item.id) {\n <li class=\"lc-bottom-nav__entry\">\n @if (entry.more && !entry.item.route) {\n <button\n type=\"button\"\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n (click)=\"onMoreButtonClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </button>\n } @else {\n <a\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n [routerLink]=\"entry.item.route\"\n [attr.aria-current]=\"entry.current ? 'page' : null\"\n (click)=\"onItemClick(entry)\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </a>\n }\n </li>\n }\n </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n @if (entry.item.badge; as badge) {\n <span class=\"lc-bottom-nav__badge\">\n <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n </span>\n }\n </span>\n <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n @if (entry.item.badge) {\n <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n }\n</ng-template>\n"],"mappings":"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"}
package/fesm2022/lifecorner-angular-ui-kit-modal.mjs CHANGED
@@ -171,7 +171,7 @@ var ModalComponent = class ModalComponent {
171
171
  },
172
172
  host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } },
173
173
  ngImport: i0,
174
- template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n",
174
+ template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n",
175
175
  styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"],
176
176
  dependencies: [
177
177
  {
@@ -219,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({
219
219
  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
220
220
  changeDetection: ChangeDetectionStrategy.OnPush,
221
221
  encapsulation: ViewEncapsulation.None,
222
- template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n",
222
+ template: "@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n",
223
223
  styles: [":host{display:contents}.lc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:backdropFadeIn .15s ease-out}.lc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);color:var(--color-text-primary);z-index:1000;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;animation:modalFadeIn .15s ease-out}.lc-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-modal__header h1,.lc-modal__header h2,.lc-modal__header h3,.lc-modal__header h4,.lc-modal__header h5,.lc-modal__header h6{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);margin:0;color:var(--color-text-primary)}.lc-modal__body{flex:1;overflow-y:auto;padding:var(--lc-density-padding-md, var(--spacing-6));display:flex;flex-direction:column;gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-3));padding:var(--lc-density-padding-sm, var(--spacing-4)) var(--lc-density-padding-md, var(--spacing-6));border-top:1px solid var(--color-divider);flex-shrink:0;flex-wrap:wrap}.lc-modal__footer:empty{display:none}.lc-modal__close{flex-shrink:0;min-width:2.75rem;min-height:2.75rem;background:transparent;border:none;cursor:pointer;padding:var(--spacing-2);margin:calc(var(--spacing-2) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.lc-modal__close:hover{background-color:var(--color-surface)}.lc-modal__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-modal--sm{width:90%;max-width:400px}.lc-modal--md{width:90%;max-width:600px}.lc-modal--lg{width:90%;max-width:800px}.lc-modal--xl{width:90%;max-width:1200px}.lc-modal--full{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}.lc-modal--placement-sheet:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}@media(max-width:639.98px){.lc-modal--placement-auto:not(.lc-modal--full){inset:auto 0 0;transform:none;width:100%;max-width:none;max-height:90vh;max-height:90dvh;border-width:1px 0 0;border-radius:var(--border-radius-xl, 1.5rem) var(--border-radius-xl, 1.5rem) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:modalSheetIn .2s ease-out}}@keyframes modalSheetIn{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-48%)}}@media(prefers-reduced-motion:reduce){.lc-modal-backdrop,.lc-modal{animation:none}@keyframes backdropFadeIn{0%,to{opacity:1}}@keyframes modalFadeIn{0%,to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modalFadeOut{0%,to{opacity:0;transform:translate(-50%,-50%)}}.lc-modal.lc-modal--placement-sheet,.lc-modal.lc-modal--placement-auto{animation:none}}\n"]
224
224
  }]
225
225
  }],
package/fesm2022/lifecorner-angular-ui-kit-modal.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lifecorner-angular-ui-kit-modal.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/modal/modal.component.ts","../../../../libs/angular-ui-kit/src/lib/modal/modal.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n input,\n output,\n computed,\n effect,\n linkedSignal,\n HostListener,\n OnDestroy,\n inject,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Where the dialog sits.\n * - `center`: centred on every screen (3.2)\n * - `auto`: a bottom sheet below 640 px viewport width (full width, top\n * corners rounded, above the safe-area inset, in thumb reach), centred above\n * - `sheet`: a bottom sheet on every screen\n */\nexport type ModalPlacement = 'center' | 'auto' | 'sheet';\n\n/**\n * Modal dialog component for focused user interactions.\n *\n * Features:\n * - Size presets (sm, md, lg, xl, full)\n * - Placement: centred, or a bottom sheet on phones (`placement=\"auto\"`)\n * - Header and footer stay visible while the body scrolls; the close button\n * is a 44 px target\n * - Focus trap for keyboard accessibility\n * - Backdrop click and Escape key to close\n * - Two-way open binding\n * - Header, body, and footer content slots\n * - Optional close button\n * - Accessible with ARIA dialog role\n *\n * @example\n * ```html\n * <lc-modal [(open)]=\"isOpen\" size=\"md\" [closeOnBackdropClick]=\"true\">\n * <div slot=\"header\"><h2>Title</h2></div>\n * <div slot=\"body\">Content</div>\n * <div slot=\"footer\"><lc-button (click)=\"close()\">Close</lc-button></div>\n * </lc-modal>\n * ```\n */\n@Component({\n selector: 'lc-modal',\n standalone: true,\n imports: [A11yModule, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n templateUrl: './modal.component.html',\n styleUrls: ['./modal.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None, // Required for dynamic size class styling\n})\nexport class ModalComponent implements OnDestroy {\n private static nextId = 0;\n\n /**\n * Whether the modal is open (input from parent)\n * @default false\n */\n open = input<boolean>(false);\n\n /**\n * Modal size\n * @default 'md'\n */\n size = input<ModalSize>('md');\n\n /**\n * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below\n * 640 px viewport width and centred above — or `sheet` (always a bottom\n * sheet). The sheet spans the width, rounds its top corners, keeps clear of\n * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport\n * high; header and footer stay visible while the body scrolls. `full`\n * size ignores it.\n * @default 'center'\n */\n placement = input<ModalPlacement>('center');\n\n /**\n * Whether clicking backdrop closes modal\n * @default true\n */\n closeOnBackdropClick = input<boolean>(true);\n\n /**\n * Whether pressing Escape closes modal\n * @default true\n */\n closeOnEscape = input<boolean>(true);\n\n /**\n * Whether to show close button in header\n * @default true\n */\n showCloseButton = input<boolean>(true);\n\n /**\n * ARIA label for accessibility\n */\n ariaLabel = input<string>();\n\n /**\n * ARIA labelledby ID\n */\n ariaLabelledBy = input<string>();\n\n /**\n * ARIA describedby ID\n */\n ariaDescribedBy = input<string>();\n\n /** Accessible name of the close button (`showCloseButton`). */\n closeAriaLabel = input('Close modal');\n\n /**\n * Emitted when modal opens\n */\n readonly modalOpened = output<void>();\n\n /**\n * Emitted when modal closes\n */\n readonly modalClosed = output<void>();\n\n /**\n * Two-way binding for open state\n */\n readonly openChange = output<boolean>();\n\n /**\n * Emitted when backdrop is clicked\n */\n readonly backdropClicked = output<MouseEvent>();\n\n /**\n * Internal open state (protected for AOT); follows the `open` input and is\n * also set by the programmatic open/close methods.\n */\n protected _open = linkedSignal(() => this.open());\n\n /**\n * Computed modal classes\n */\n protected modalClasses = computed(() => {\n return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;\n });\n\n private readonly overlayStack = inject(OverlayStackService);\n /** Identifies this instance in the overlay stack. */\n private readonly modalId = `lc-modal-${++ModalComponent.nextId}`;\n private originalOverflow?: string;\n\n constructor() {\n // Watch for open state changes\n effect(() => {\n if (this._open()) {\n this.showModal();\n } else {\n this.hideModal();\n }\n });\n }\n\n ngOnDestroy(): void {\n this.hideModal();\n }\n\n /**\n * Open the modal programmatically\n */\n openModal(): void {\n this._open.set(true);\n this.openChange.emit(true);\n this.modalOpened.emit();\n }\n\n /**\n * Close the modal programmatically\n */\n closeModal(): void {\n this._open.set(false);\n this.openChange.emit(false);\n this.modalClosed.emit();\n }\n\n /**\n * Handle backdrop click. Ignored while another overlay (popover, menu,\n * confirm dialog, …) sits above this modal — the click belongs to that layer.\n */\n protected onBackdropClick(event: MouseEvent): void {\n if (!this.overlayStack.claim(this.modalId, event)) return;\n this.backdropClicked.emit(event);\n if (this.closeOnBackdropClick()) {\n this.closeModal();\n }\n }\n\n /**\n * Handle close button click\n */\n protected onCloseClick(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.closeModal();\n }\n\n /**\n * Escape closes the modal only while it is the top-most overlay; the event\n * is consumed either way so overlays underneath stay open.\n */\n @HostListener('document:keydown', ['$event'])\n protected onDocumentKeydown(event: KeyboardEvent): void {\n if (event.key !== 'Escape' || !this._open()) return;\n if (!this.overlayStack.claim(this.modalId, event)) return;\n event.stopPropagation();\n if (this.closeOnEscape()) {\n this.closeModal();\n }\n }\n\n /**\n * Show the modal. Focus is moved inside and restored on close by the\n * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.\n */\n private showModal(): void {\n this.overlayStack.push(this.modalId);\n\n // Lock body scroll\n if (typeof document !== 'undefined' && this.originalOverflow === undefined) {\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n /**\n * Hide the modal\n */\n private hideModal(): void {\n this.overlayStack.remove(this.modalId);\n\n // Restore body scroll\n if (typeof document !== 'undefined' && this.originalOverflow !== undefined) {\n document.body.style.overflow = this.originalOverflow;\n this.originalOverflow = undefined;\n }\n }\n}\n","@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"lifecorner-angular-ui-kit-modal.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/modal/modal.component.ts","../../../../libs/angular-ui-kit/src/lib/modal/modal.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n input,\n output,\n computed,\n effect,\n linkedSignal,\n HostListener,\n OnDestroy,\n inject,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Where the dialog sits.\n * - `center`: centred on every screen (3.2)\n * - `auto`: a bottom sheet below 640 px viewport width (full width, top\n * corners rounded, above the safe-area inset, in thumb reach), centred above\n * - `sheet`: a bottom sheet on every screen\n */\nexport type ModalPlacement = 'center' | 'auto' | 'sheet';\n\n/**\n * Modal dialog component for focused user interactions.\n *\n * Features:\n * - Size presets (sm, md, lg, xl, full)\n * - Placement: centred, or a bottom sheet on phones (`placement=\"auto\"`)\n * - Header and footer stay visible while the body scrolls; the close button\n * is a 44 px target\n * - Focus trap for keyboard accessibility\n * - Backdrop click and Escape key to close\n * - Two-way open binding\n * - Header, body, and footer content slots\n * - Optional close button\n * - Accessible with ARIA dialog role\n *\n * @example\n * ```html\n * <lc-modal [(open)]=\"isOpen\" size=\"md\" [closeOnBackdropClick]=\"true\">\n * <div slot=\"header\"><h2>Title</h2></div>\n * <div slot=\"body\">Content</div>\n * <div slot=\"footer\"><lc-button (click)=\"close()\">Close</lc-button></div>\n * </lc-modal>\n * ```\n */\n@Component({\n selector: 'lc-modal',\n standalone: true,\n imports: [A11yModule, IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n templateUrl: './modal.component.html',\n styleUrls: ['./modal.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None, // Required for dynamic size class styling\n})\nexport class ModalComponent implements OnDestroy {\n private static nextId = 0;\n\n /**\n * Whether the modal is open (input from parent)\n * @default false\n */\n open = input<boolean>(false);\n\n /**\n * Modal size\n * @default 'md'\n */\n size = input<ModalSize>('md');\n\n /**\n * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below\n * 640 px viewport width and centred above — or `sheet` (always a bottom\n * sheet). The sheet spans the width, rounds its top corners, keeps clear of\n * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport\n * high; header and footer stay visible while the body scrolls. `full`\n * size ignores it.\n * @default 'center'\n */\n placement = input<ModalPlacement>('center');\n\n /**\n * Whether clicking backdrop closes modal\n * @default true\n */\n closeOnBackdropClick = input<boolean>(true);\n\n /**\n * Whether pressing Escape closes modal\n * @default true\n */\n closeOnEscape = input<boolean>(true);\n\n /**\n * Whether to show close button in header\n * @default true\n */\n showCloseButton = input<boolean>(true);\n\n /**\n * ARIA label for accessibility\n */\n ariaLabel = input<string>();\n\n /**\n * ARIA labelledby ID\n */\n ariaLabelledBy = input<string>();\n\n /**\n * ARIA describedby ID\n */\n ariaDescribedBy = input<string>();\n\n /** Accessible name of the close button (`showCloseButton`). */\n closeAriaLabel = input('Close modal');\n\n /**\n * Emitted when modal opens\n */\n readonly modalOpened = output<void>();\n\n /**\n * Emitted when modal closes\n */\n readonly modalClosed = output<void>();\n\n /**\n * Two-way binding for open state\n */\n readonly openChange = output<boolean>();\n\n /**\n * Emitted when backdrop is clicked\n */\n readonly backdropClicked = output<MouseEvent>();\n\n /**\n * Internal open state (protected for AOT); follows the `open` input and is\n * also set by the programmatic open/close methods.\n */\n protected _open = linkedSignal(() => this.open());\n\n /**\n * Computed modal classes\n */\n protected modalClasses = computed(() => {\n return `lc-modal lc-modal--${this.size()} lc-modal--placement-${this.placement()}`;\n });\n\n private readonly overlayStack = inject(OverlayStackService);\n /** Identifies this instance in the overlay stack. */\n private readonly modalId = `lc-modal-${++ModalComponent.nextId}`;\n private originalOverflow?: string;\n\n constructor() {\n // Watch for open state changes\n effect(() => {\n if (this._open()) {\n this.showModal();\n } else {\n this.hideModal();\n }\n });\n }\n\n ngOnDestroy(): void {\n this.hideModal();\n }\n\n /**\n * Open the modal programmatically\n */\n openModal(): void {\n this._open.set(true);\n this.openChange.emit(true);\n this.modalOpened.emit();\n }\n\n /**\n * Close the modal programmatically\n */\n closeModal(): void {\n this._open.set(false);\n this.openChange.emit(false);\n this.modalClosed.emit();\n }\n\n /**\n * Handle backdrop click. Ignored while another overlay (popover, menu,\n * confirm dialog, …) sits above this modal — the click belongs to that layer.\n */\n protected onBackdropClick(event: MouseEvent): void {\n if (!this.overlayStack.claim(this.modalId, event)) return;\n this.backdropClicked.emit(event);\n if (this.closeOnBackdropClick()) {\n this.closeModal();\n }\n }\n\n /**\n * Handle close button click\n */\n protected onCloseClick(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.closeModal();\n }\n\n /**\n * Escape closes the modal only while it is the top-most overlay; the event\n * is consumed either way so overlays underneath stay open.\n */\n @HostListener('document:keydown', ['$event'])\n protected onDocumentKeydown(event: KeyboardEvent): void {\n if (event.key !== 'Escape' || !this._open()) return;\n if (!this.overlayStack.claim(this.modalId, event)) return;\n event.stopPropagation();\n if (this.closeOnEscape()) {\n this.closeModal();\n }\n }\n\n /**\n * Show the modal. Focus is moved inside and restored on close by the\n * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.\n */\n private showModal(): void {\n this.overlayStack.push(this.modalId);\n\n // Lock body scroll\n if (typeof document !== 'undefined' && this.originalOverflow === undefined) {\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n /**\n * Hide the modal\n */\n private hideModal(): void {\n this.overlayStack.remove(this.modalId);\n\n // Restore body scroll\n if (typeof document !== 'undefined' && this.originalOverflow !== undefined) {\n document.body.style.overflow = this.originalOverflow;\n this.originalOverflow = undefined;\n }\n }\n}\n","@if (_open()) {\n <!-- Backdrop (the lc-modal does NOT use CDK Overlay; do not add the\n `cdk-overlay-backdrop` class here — it would be styled by global CDK\n rules and, vice versa, leak modal styling onto other overlays.) -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- backdrop click is a mouse shortcut; Escape and the close button close the modal -->\n <div\n class=\"lc-modal-backdrop\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n\n <!-- Modal Content -->\n <div\n [class]=\"modalClasses()\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n >\n <div class=\"lc-modal__header\">\n <ng-content select=\"[slot='header']\" />\n \n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"lc-modal__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"md\" [decorative]=\"true\" />\n </button>\n }\n </div>\n \n <div class=\"lc-modal__body\">\n <ng-content select=\"[slot='body']\" />\n <ng-content />\n </div>\n \n <div class=\"lc-modal__footer\">\n <ng-content select=\"[slot='footer']\" />\n </div>\n </div>\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lifecorner/angular-ui-kit",
3
- "version": "3.17.0",
3
+ "version": "3.18.0",
4
4
  "description": "LifeCorner Design System – Angular UI component library",
5
5
  "license": "MIT",
6
6
  "repository": {
package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts CHANGED
@@ -47,6 +47,8 @@ interface BottomNavEntry {
47
47
  * - More than `maxItems` destinations: the first `maxItems − 1` stay, the
48
48
  * rest move behind a "More" entry (`moreLabel`, `moreIcon`, `moreRoute`);
49
49
  * without `moreRoute` the entry is a button that emits `moreClick`.
50
+ * - `showMore`: "More" on request, also when every destination fits (fixed
51
+ * slots); it takes one of the `maxItems` entries.
50
52
  * - Tapping the current item emits `reselect` (scroll the page to the top).
51
53
  * - `variant="floating"`: an inset pill 16 px from the sides and 16 px above
52
54
  * the safe-area inset, radius 28 px, elevated. `docked` (default) spans the
@@ -89,17 +91,41 @@ export declare class BottomNavComponent {
89
91
  */
90
92
  readonly fixed: import("@angular/core").InputSignal<boolean>;
91
93
  /**
92
- * Most entries the bar shows. With more destinations the first
93
- * `maxItems − 1` stay and the rest go behind the "More" entry.
94
+ * Most entries the bar shows, "More" included. With more destinations, or
95
+ * with `showMore`, the first `maxItems − 1` stay and the rest go behind the
96
+ * "More" entry.
97
+ *
98
+ * @default 5
94
99
  */
95
100
  readonly maxItems: import("@angular/core").InputSignal<number>;
96
- /** Label of the overflow entry. */
101
+ /**
102
+ * Always end the bar with the "More" entry (`moreLabel`, `moreIcon`, and
103
+ * `moreRoute` or `moreClick`), even when every destination fits: for a bar
104
+ * with fixed slots, such as two destinations plus "More". "More" takes one
105
+ * of the `maxItems` entries, so the first `maxItems − 1` destinations stay
106
+ * and any others move behind it, as on overflow.
107
+ *
108
+ * @default false
109
+ */
110
+ readonly showMore: import("@angular/core").InputSignal<boolean>;
111
+ /**
112
+ * Label of the "More" entry (on overflow or with `showMore`).
113
+ *
114
+ * @default 'More'
115
+ */
97
116
  readonly moreLabel: import("@angular/core").InputSignal<string>;
98
- /** Icon of the overflow entry. */
117
+ /**
118
+ * Icon of the "More" entry (on overflow or with `showMore`).
119
+ *
120
+ * @default 'dots'
121
+ */
99
122
  readonly moreIcon: import("@angular/core").InputSignal<string>;
100
123
  /**
101
- * Route of the overflow entry (a page that lists the remaining
102
- * destinations). Empty renders the entry as a button that emits `moreClick`.
124
+ * Route of the "More" entry (on overflow or with `showMore`): a page that
125
+ * lists the remaining destinations. Empty renders the entry as a button that
126
+ * emits `moreClick`.
127
+ *
128
+ * @default ''
103
129
  */
104
130
  readonly moreRoute: import("@angular/core").InputSignal<string>;
105
131
  /**
@@ -109,13 +135,16 @@ export declare class BottomNavComponent {
109
135
  readonly badgeAriaLabel: import("@angular/core").InputSignal<string>;
110
136
  /** The current item was tapped again (e.g. scroll the page to the top). */
111
137
  readonly reselect: import("@angular/core").OutputEmitterRef<BottomNavItem>;
112
- /** The overflow entry was tapped while it has no `moreRoute`. */
138
+ /** The "More" entry was tapped while it has no `moreRoute`. */
113
139
  readonly moreClick: import("@angular/core").OutputEmitterRef<void>;
114
140
  /** Destinations in display order. */
115
141
  private readonly sortedItems;
116
142
  /** Path of `activeRoute` without query and fragment. */
117
143
  private readonly activePath;
118
- /** Entries as rendered: destinations plus, on overflow, the "More" entry. */
144
+ /**
145
+ * Entries as rendered: destinations plus, on overflow or with `showMore`,
146
+ * the "More" entry, which then takes one of the `maxItems` entries.
147
+ */
119
148
  protected readonly entries: import("@angular/core").Signal<BottomNavEntry[]>;
120
149
  protected readonly navClasses: import("@angular/core").Signal<string>;
121
150
  /** Visually hidden badge text for screen readers. */
@@ -156,6 +185,11 @@ export declare class BottomNavComponent {
156
185
  "required": false;
157
186
  "isSignal": true;
158
187
  };
188
+ "showMore": {
189
+ "alias": "showMore";
190
+ "required": false;
191
+ "isSignal": true;
192
+ };
159
193
  "moreLabel": {
160
194
  "alias": "moreLabel";
161
195
  "required": false;