@lifecorner/angular-ui-kit 3.37.0 → 3.38.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-card.mjs +2 -2
  2. package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
  3. package/fesm2022/lifecorner-angular-ui-kit-hero.mjs +2 -2
  4. package/fesm2022/lifecorner-angular-ui-kit-hero.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/types/lifecorner-angular-ui-kit-hero.d.ts +5 -4
package/fesm2022/lifecorner-angular-ui-kit-card.mjs CHANGED
@@ -256,7 +256,7 @@ var CardComponent = class CardComponent {
256
256
  }
257
257
  },
258
258
  ngImport: i0,
259
- template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n",
259
+ template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <!-- 3.38 (request 058, 057-s1): the &ngsp; spaces of this template put\n word breaks between the card's parts in its text (textContent,\n accessible name, copy), so title, badge, subtitle, body and footer\n don't run together. Each sits between flex items, where a\n whitespace-only run renders nothing; none is inside .card__title,\n the toggle, the link or the :empty badge slot. The one after the\n title ends each branch: right after an @if chain Angular drops a\n whitespace-only text while it looks for @else. -->\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }&ngsp;\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }&ngsp;\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }&ngsp;\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>&ngsp;\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>&ngsp;\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>&ngsp;\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>&ngsp;\n }\n <ng-content select=\"[card-header]\"></ng-content>&ngsp;\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>&ngsp;\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n",
260
260
  styles: [":host{display:block;height:100%}.card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);color:var(--color-text-primary);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{position:relative;overflow:hidden;background-image:var(--gradient-surface);border:1px solid var(--color-border);box-shadow:var(--elevation-1)}.card-elevated:after{content:\"\";position:absolute;inset:0 0 auto;height:3px;background:var(--accent-line);opacity:.7;pointer-events:none}.card-elevated:hover{box-shadow:var(--elevation-2)}.card-outlined{background-image:none;border:1px solid var(--color-border)}.card-flat{background-image:none}.card-raised{background-image:none;border:1px solid var(--color-border);box-shadow:var(--shadow-auth-card, var(--elevation-3))}.card-dashed{background-color:var(--color-muted-tile, var(--color-surface-muted));background-image:none;border:1px dashed var(--color-muted-tile-border, var(--color-border));box-shadow:none;color:var(--color-text-secondary)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:var(--border-radius-none)}.card-radius-sm{border-radius:var(--border-radius-sm)}.card-radius-md{border-radius:var(--border-radius-md)}.card-radius-lg{border-radius:var(--border-radius-lg)}.card-radius-xl{border-radius:var(--border-radius-xl, 1.5rem)}.card-radius-full{border-radius:var(--border-radius-full)}.card-clickable,.card-linked{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover,.card-linked:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.card-clickable:active,.card-linked:active{transform:scale(.98)}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-linked{isolation:isolate}.card-linked:has(.card__link:focus-visible){outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.card-linked:has(.card__link:focus-visible){outline-color:Highlight}}.card__link{color:inherit;text-decoration:none;outline:none}.card__link:after{content:\"\";position:absolute;inset:0;z-index:1}.card-selected{border:1px solid var(--color-primary);background-color:var(--color-surface-selected);box-shadow:var(--shadow-brand-glow)}.card-selected.card-elevated{box-shadow:var(--shadow-brand-glow),var(--elevation-2)}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--border-radius-md)}.card__icon--size-sm{width:1.75rem;height:1.75rem;border-radius:var(--border-radius-sm)}.card__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.card__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__badge-slot{display:inline-flex;align-items:center}.card__badge-slot:empty{display:none}.card__title{margin:0;font-weight:600;font-size:var(--lc-card-title-size, var(--font-size-lg, 1.125rem));line-height:1.3;color:var(--color-text-primary);hyphens:auto;hyphenate-limit-chars:12 4 3}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border:1px solid var(--color-border)}.card__badge--primary{background-color:var(--color-primary-subtle);color:var(--color-on-primary-subtle);border:1px solid var(--color-primary-500)}.card__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.card__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.card__badge--error{background-color:var(--color-error-subtle);color:var(--color-on-error-subtle)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}:host(.lc-card--footer-equal){container:lc-card/inline-size;inline-size:100%}:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer){display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}@container lc-card (width >= 30rem){:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer)>lc-button>.btn{block-size:100%}:host ::ng-deep :where(.card-linked :is(a[href],button,input,select,textarea,summary,[tabindex]):not(.card__link)){position:relative;z-index:2}:host ::ng-deep .card-dashed lc-icon{color:var(--color-muted-tile-icon, var(--color-text-tertiary))}.card-collapsible .card__header{position:relative;isolation:isolate;min-height:44px;align-items:center;cursor:pointer}.card-collapsible .card__header:has(.card__toggle:focus-visible){outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.card-collapsible .card__header:has(.card__toggle:focus-visible){outline-color:Highlight}}.card-collapsible .card__header:hover .card__chevron{color:var(--color-text-primary)}.card__toggle{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;outline:none}.card__toggle:after{content:\"\";position:absolute;inset:0;z-index:1}.card-collapsible .card__header-action{position:relative;z-index:2}.card__chevron{flex-shrink:0;color:var(--color-text-secondary);transform:rotate(-180deg);transition:transform .2s ease}.card-collapsed .card__chevron{transform:none}@media(prefers-reduced-motion:reduce){.card__chevron{transition:none}}.card-collapsed .card__header{margin-bottom:0;padding-bottom:0;border-bottom:0}.card__body[hidden]{display:none}:host(.lc-card--collapsed)>.card>::ng-deep :is([card-footer],.card-footer){display:none}\n"],
261
261
  dependencies: [
262
262
  {
@@ -328,7 +328,7 @@ i0.ɵɵngDeclareClassMetadata({
328
328
  "[class.lc-card--collapsed]": "isCollapsible() && !expanded()"
329
329
  },
330
330
  viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],
331
- template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n",
331
+ template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <!-- 3.38 (request 058, 057-s1): the &ngsp; spaces of this template put\n word breaks between the card's parts in its text (textContent,\n accessible name, copy), so title, badge, subtitle, body and footer\n don't run together. Each sits between flex items, where a\n whitespace-only run renders nothing; none is inside .card__title,\n the toggle, the link or the :empty badge slot. The one after the\n title ends each branch: right after an @if chain Angular drops a\n whitespace-only text while it looks for @else. -->\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }&ngsp;\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }&ngsp;\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }&ngsp;\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>&ngsp;\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>&ngsp;\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>&ngsp;\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>&ngsp;\n }\n <ng-content select=\"[card-header]\"></ng-content>&ngsp;\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>&ngsp;\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n",
332
332
  styles: [":host{display:block;height:100%}.card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);color:var(--color-text-primary);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{position:relative;overflow:hidden;background-image:var(--gradient-surface);border:1px solid var(--color-border);box-shadow:var(--elevation-1)}.card-elevated:after{content:\"\";position:absolute;inset:0 0 auto;height:3px;background:var(--accent-line);opacity:.7;pointer-events:none}.card-elevated:hover{box-shadow:var(--elevation-2)}.card-outlined{background-image:none;border:1px solid var(--color-border)}.card-flat{background-image:none}.card-raised{background-image:none;border:1px solid var(--color-border);box-shadow:var(--shadow-auth-card, var(--elevation-3))}.card-dashed{background-color:var(--color-muted-tile, var(--color-surface-muted));background-image:none;border:1px dashed var(--color-muted-tile-border, var(--color-border));box-shadow:none;color:var(--color-text-secondary)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:var(--border-radius-none)}.card-radius-sm{border-radius:var(--border-radius-sm)}.card-radius-md{border-radius:var(--border-radius-md)}.card-radius-lg{border-radius:var(--border-radius-lg)}.card-radius-xl{border-radius:var(--border-radius-xl, 1.5rem)}.card-radius-full{border-radius:var(--border-radius-full)}.card-clickable,.card-linked{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:hover,.card-linked:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.card-clickable:active,.card-linked:active{transform:scale(.98)}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-linked{isolation:isolate}.card-linked:has(.card__link:focus-visible){outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.card-linked:has(.card__link:focus-visible){outline-color:Highlight}}.card__link{color:inherit;text-decoration:none;outline:none}.card__link:after{content:\"\";position:absolute;inset:0;z-index:1}.card-selected{border:1px solid var(--color-primary);background-color:var(--color-surface-selected);box-shadow:var(--shadow-brand-glow)}.card-selected.card-elevated{box-shadow:var(--shadow-brand-glow),var(--elevation-2)}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--border-radius-md)}.card__icon--size-sm{width:1.75rem;height:1.75rem;border-radius:var(--border-radius-sm)}.card__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.card__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__badge-slot{display:inline-flex;align-items:center}.card__badge-slot:empty{display:none}.card__title{margin:0;font-weight:600;font-size:var(--lc-card-title-size, var(--font-size-lg, 1.125rem));line-height:1.3;color:var(--color-text-primary);hyphens:auto;hyphenate-limit-chars:12 4 3}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border:1px solid var(--color-border)}.card__badge--primary{background-color:var(--color-primary-subtle);color:var(--color-on-primary-subtle);border:1px solid var(--color-primary-500)}.card__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.card__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.card__badge--error{background-color:var(--color-error-subtle);color:var(--color-on-error-subtle)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}:host(.lc-card--footer-equal){container:lc-card/inline-size;inline-size:100%}:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer){display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}@container lc-card (width >= 30rem){:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}:host(.lc-card--footer-equal)>.card>::ng-deep :is([card-footer],.card-footer)>lc-button>.btn{block-size:100%}:host ::ng-deep :where(.card-linked :is(a[href],button,input,select,textarea,summary,[tabindex]):not(.card__link)){position:relative;z-index:2}:host ::ng-deep .card-dashed lc-icon{color:var(--color-muted-tile-icon, var(--color-text-tertiary))}.card-collapsible .card__header{position:relative;isolation:isolate;min-height:44px;align-items:center;cursor:pointer}.card-collapsible .card__header:has(.card__toggle:focus-visible){outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.card-collapsible .card__header:has(.card__toggle:focus-visible){outline-color:Highlight}}.card-collapsible .card__header:hover .card__chevron{color:var(--color-text-primary)}.card__toggle{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;outline:none}.card__toggle:after{content:\"\";position:absolute;inset:0;z-index:1}.card-collapsible .card__header-action{position:relative;z-index:2}.card__chevron{flex-shrink:0;color:var(--color-text-secondary);transform:rotate(-180deg);transition:transform .2s ease}.card-collapsed .card__chevron{transform:none}@media(prefers-reduced-motion:reduce){.card__chevron{transition:none}}.card-collapsed .card__header{margin-bottom:0;padding-bottom:0;border-bottom:0}.card__body[hidden]{display:none}:host(.lc-card--collapsed)>.card>::ng-deep :is([card-footer],.card-footer){display:none}\n"]
333
333
  }]
334
334
  }],
package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lifecorner-angular-ui-kit-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/card/card.component.ts","../../../../libs/angular-ui-kit/src/lib/card/card.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n HostListener,\n computed,\n effect,\n isDevMode,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, type Params } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN } from '@lifecorner/angular-ui-kit/icons';\n\n/** Visual variant of `lc-card`. */\nexport type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';\n\n/** Heading level of `lc-card`'s built-in title. */\nexport type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/** Layout of `lc-card`'s `[card-footer]` slot: `default` (a flex row, end-aligned) or `equal` (children at equal width). */\nexport type CardFooterLayout = 'default' | 'equal';\n\n/** Counter for generated ids (3.36): creation order, so prerendered HTML is the same in every build. */\nlet nextCardId = 0;\n\n/** Whether a `route` value is a link: `''`, `null` and `undefined` are not. */\nfunction hasRoute(route: string | readonly unknown[] | null | undefined): boolean {\n return route !== '' && route !== null && route !== undefined;\n}\n\n/**\n * Card component for content grouping and visual hierarchy.\n *\n * Features:\n * - Variant styles (elevated, outlined, flat, raised, dashed)\n * - Configurable padding (none, xs, sm, md, lg)\n * - Border radius options (none, sm, md, lg, xl, full)\n * - Optional title display, with an optional leading icon tile\n * - Content projection for flexible body content\n * - Link mode (3.24): `href` or `route` make the whole card a real link,\n * the title stays a heading\n * - Equal footer (3.29): `footerLayout=\"equal\"` gives two answers of equal\n * weight in the `[card-footer]` slot the same width\n * - Collapsible (3.36): `collapsible` with `[(expanded)]` turns the head into\n * one toggle that opens and closes the body and footer\n *\n * @example\n * ```html\n * <lc-card title=\"Card Title\" variant=\"elevated\" padding=\"md\">\n * <p>Card body content</p>\n * </lc-card>\n *\n * <!-- With a leading brand-tile icon in the header -->\n * <lc-card title=\"Repository\" subtitle=\"Checkout &amp; profile\" icon=\"git-branch\">\n * ...\n * </lc-card>\n *\n * <!-- An overview card that opens a page: heading h2 with a link inside -->\n * <lc-card title=\"SAP-Ist\" variant=\"outlined\" [headingLevel]=\"2\"\n * [route]=\"['/quellen', 'sap-ist']\" [queryParams]=\"{ ansicht: 'laeufe' }\">\n * ...\n * </lc-card>\n *\n * <!-- Two answers of equal weight (3.29): primary answer first -->\n * <lc-card title=\"Netflix\" variant=\"outlined\" footerLayout=\"equal\">\n * ...\n * <div card-footer>\n * <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">Stimmt</lc-button>\n * <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">Kein Vertrag</lc-button>\n * </div>\n * </lc-card>\n * ```\n */\n@Component({\n selector: 'lc-card',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet, RouterLink],\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-card--footer-equal]': \"footerLayout() === 'equal'\",\n '[class.lc-card--collapsed]': 'isCollapsible() && !expanded()',\n },\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],\n})\nexport class CardComponent {\n /**\n * Optional title rendered as a styled header.\n * For complex headers (e.g. title + action button), use content projection instead.\n */\n title = input<string | undefined>(undefined);\n\n /**\n * Optional subtitle rendered below the title.\n */\n subtitle = input<string | undefined>(undefined);\n\n /**\n * Optional leading icon (Tabler icon name) rendered as a teal brand tile to\n * the left of the title. Only shown when `title` is set.\n */\n icon = input<string | undefined>(undefined);\n\n /**\n * Visual treatment of the leading icon tile.\n * - brand: gradient teal tile with light ink (default)\n * - subtle: translucent surface tile with brand-teal ink\n * @default 'brand'\n */\n iconVariant = input<'brand' | 'subtle'>('brand');\n\n /**\n * Size of the leading icon tile.\n * - md: 2.25rem tile (default)\n * - sm: compact ~1.75rem chip for dense card headers\n * @default 'md'\n */\n iconSize = input<'sm' | 'md'>('md');\n\n /**\n * Optional badge text/count shown next to the title (e.g. item count).\n * For a richer status badge (e.g. a leading status dot), project an\n * `lc-badge` into the `card-badge` slot instead — the slot takes precedence.\n */\n badge = input<string | undefined>(undefined);\n\n /**\n * Badge color variant.\n * @default 'default'\n */\n badgeVariant = input<'default' | 'primary' | 'success' | 'warning' | 'error'>('default');\n\n /**\n * Visual variant of the card\n * - elevated: Box shadow (default)\n * - outlined: Border only (the hairline `--color-border`, no shadow) — the\n * content card on the \"Weite\" sky with `borderRadius=\"xl\"`\n * - flat: No shadow or border\n * - raised: plain surface, hairline border and the long, soft\n * `--shadow-auth-card`, no accent line — the sign-in card\n * - dashed: the muted \"coming soon\" tile — `--color-muted-tile` fill, 1 px\n * dashed `--color-muted-tile-border`, secondary ink, icons in\n * `--color-muted-tile-icon`. Never clickable: `clickable` is ignored;\n * `href` and `route` are ignored too\n * @default 'elevated'\n */\n variant = input<CardVariant>('elevated');\n\n /**\n * Padding inside the card\n * @default 'md'\n */\n padding = input<'none' | 'xs' | 'sm' | 'md' | 'lg'>('md');\n\n /**\n * Whether the card is clickable (hover effects, cursor pointer). Has no\n * effect on a link card (`href`/`route`).\n * @default false\n */\n clickable = input<boolean>(false);\n\n /**\n * Whether the card is selected (if clickable)\n * @default false\n */\n selected = input<boolean>(false);\n\n /**\n * Border radius size: `none`, `sm`, `md`, `lg` (18 px), `xl` (24 px, the\n * \"Weite\" content card) or `full`.\n * @default 'md'\n */\n borderRadius = input<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');\n\n /**\n * Heading level of the built-in `title` (`h2`–`h6`), so the card fits the\n * page's outline. Semantics only, the look stays the same.\n * @default 3\n */\n headingLevel = input<CardHeadingLevel>(3);\n\n /**\n * Accessible name. On a link card (`href`/`route`) it names the link\n * instead of the card; it must contain the visible title (WCAG 2.5.3) and\n * the heading reads it too, so keep it short. Without it the link is named\n * by the title, and the card's content (badge, list) is read as normal\n * content. On other cards it labels the card.\n * @default undefined\n */\n ariaLabel = input<string | undefined>(undefined);\n\n /**\n * URL the card links to (3.24, quellen row 1). The card becomes a real\n * link: the built-in `title` is an `<a href>` inside its heading, and the\n * link covers the whole card (click, Enter, middle click, \"open in new\n * tab\", \"copy link\"). No router needed; works in prerendered HTML. Wins\n * over `route`. Ignored by `dashed`. On a link card `clickable` has no\n * effect and `cardClick` is not emitted.\n * @default undefined\n */\n href = input<string | undefined>(undefined);\n\n /**\n * In-app route the card links to through the Angular router (`RouterLink`\n * commands: `'/quellen/usm'` or `['/quellen', id]`), relative to the\n * consumer's route, rendered as a real `<a href>` like `href`. Needs the\n * app's router (`provideRouter`); without one, use `href`. `''` and `null`\n * mean no link.\n * @default undefined\n */\n route = input<string | readonly unknown[] | null | undefined>(undefined);\n\n /**\n * Query parameters of `route`, as `RouterLink`'s `queryParams`\n * (`{ ansicht: 'laeufe' }`). Ignored with `href` (write the query into the\n * URL).\n * @default undefined\n */\n queryParams = input<Params | null | undefined>(undefined);\n\n /**\n * Layout of the `[card-footer]` slot (3.29, CC-2). `equal`: its children\n * share the row at equal width once the card is at least 480 px (30rem)\n * wide, and stack full width, 8 px apart, below that (the card's own width,\n * at any viewport; long labels wrap inside the buttons, which get the\n * row's height). For two answers of equal weight, put\n * `<lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">` in it,\n * primary answer first; the card adds layout only (gap, divider and\n * spacing as `default`) and never restyles the buttons. The card becomes a\n * size container and takes its parent's full width. Keep the default\n * `padding` (with `none` the buttons' focus ring is clipped). Works in link\n * cards (the buttons stay clickable above the link) and in prerendered\n * HTML (CSS only).\n * @default 'default'\n */\n footerLayout = input<CardFooterLayout>('default');\n\n /**\n * The card can close (3.36, regeln row 1): the head (icon, title, subtitle)\n * becomes one toggle, a button inside the title's heading with\n * `aria-expanded` and `aria-controls`, whose hit area is the whole head (at\n * least 44 px high); Enter, Space or a click open and close the body and the\n * `[card-footer]`. A chevron at the end of the head shows the state.\n * `[card-header-action]` stays a separate control beside it. Needs the\n * built-in `title` (otherwise ignored); wins over `clickable`, `href` and\n * `route`, which are then ignored; ignored on `dashed`. Bind `[(expanded)]`.\n * @default false\n */\n collapsible = input<boolean>(false);\n\n /**\n * Open state of a `collapsible` card (3.36), two-way: `[(expanded)]`. Open\n * by default, so a plain `collapsible` hides nothing; set `false` for a card\n * that starts closed (also in prerendered HTML). Closed, only the head\n * shows: the body is `hidden` and the footer is not displayed.\n * @default true\n */\n readonly expanded = model<boolean>(true);\n\n /**\n * Emitted when a `clickable` card is clicked or activated with Enter or\n * Space. Not emitted on a link card (`href`/`route`): the link navigates by\n * itself (one navigation); bind the native `(click)` for analytics.\n */\n readonly cardClick = output<MouseEvent>();\n\n /** Generated id prefix (3.36): creation order, so prerendered HTML is the same in every build. */\n private readonly uid = `lc-card-${nextCardId++}`;\n\n /** Id of the body a collapsible card's toggle controls. */\n protected readonly bodyId = `${this.uid}-body`;\n\n /** Id of the subtitle that describes a collapsible card's toggle. */\n protected readonly subtitleId = `${this.uid}-subtitle`;\n\n /**\n * Whether the card collapses (3.36): `collapsible` with a built-in title,\n * except for the dashed tile.\n */\n protected readonly isCollapsible = computed(\n () => this.collapsible() && !!this.title() && this.variant() !== 'dashed',\n );\n\n /**\n * How the card links (3.24): `href` wins over `route`; `''`/`null` routes\n * are no link, and the dashed \"coming soon\" tile never links. A\n * collapsible card (3.36) never links.\n */\n protected readonly linkMode = computed<'href' | 'route' | null>(() => {\n if (this.variant() === 'dashed' || this.isCollapsible()) return null;\n if (this.href()) return 'href';\n return hasRoute(this.route()) ? 'route' : null;\n });\n\n /**\n * Whether the card acts as a button: `clickable`, except for the dashed\n * \"coming soon\" tile, which is never interactive, a link card, whose\n * anchor is the only interactive element, and a collapsible card (3.36),\n * whose toggle is.\n */\n protected isClickable = computed(\n () => this.clickable() && this.variant() !== 'dashed' && !this.linkMode() && !this.isCollapsible(),\n );\n\n /** Opens or closes a collapsible card; `expandedChange` emits the new state. */\n protected toggle(): void {\n this.expanded.set(!this.expanded());\n }\n\n /** `ariaLabel` on the card; on a link card it names the anchor instead. */\n protected readonly cardAriaLabel = computed(() => (this.linkMode() ? undefined : this.ariaLabel()));\n\n constructor() {\n if (isDevMode()) {\n effect(() => {\n if (!this.collapsible() || this.variant() === 'dashed') return;\n if (!this.title()) {\n console.warn('[lc-card] collapsible needs the built-in title: ignored');\n } else if (this.clickable() || this.href() || hasRoute(this.route())) {\n console.warn('[lc-card] collapsible wins over clickable, href and route: they are ignored');\n }\n });\n effect(() => {\n if (!this.linkMode()) return;\n if (this.href() && hasRoute(this.route())) {\n console.warn('[lc-card] href and route are both set: href wins');\n }\n if (!this.title() && !this.ariaLabel()) {\n console.warn('[lc-card] a link card without title needs an ariaLabel to name its link');\n }\n });\n }\n }\n\n /**\n * Compute card CSS classes based on inputs\n */\n protected cardClasses = computed(() => {\n const classes = [\n 'card',\n `card-${this.variant()}`,\n `card-padding-${this.padding()}`,\n `card-radius-${this.borderRadius()}`,\n ];\n\n if (this.isClickable()) {\n classes.push('card-clickable');\n }\n\n // A link card looks and reacts like a clickable one (3.24).\n if (this.linkMode()) {\n classes.push('card-linked');\n }\n\n // The dashed tile is never interactive, so it is never selected either.\n if (this.selected() && this.variant() !== 'dashed') {\n classes.push('card-selected');\n }\n\n // A collapsible card (3.36), and its closed state.\n if (this.isCollapsible()) {\n classes.push('card-collapsible');\n if (!this.expanded()) classes.push('card-collapsed');\n }\n\n return classes.join(' ');\n });\n\n /**\n * Compute ARIA role based on clickable state\n */\n protected role = computed(() => (this.isClickable() ? 'button' : 'article'));\n\n /**\n * Handle card click events\n */\n protected handleClick(event: MouseEvent): void {\n if (this.isClickable()) {\n this.cardClick.emit(event);\n }\n }\n\n /**\n * Handle keyboard events for accessibility\n */\n @HostListener('keydown', ['$event'])\n protected handleKeydown(event: KeyboardEvent): void {\n if (this.isClickable() && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n const mouseEvent = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n });\n this.cardClick.emit(mouseEvent);\n }\n }\n}\n","<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"lifecorner-angular-ui-kit-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/card/card.component.ts","../../../../libs/angular-ui-kit/src/lib/card/card.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n HostListener,\n computed,\n effect,\n isDevMode,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, type Params } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN } from '@lifecorner/angular-ui-kit/icons';\n\n/** Visual variant of `lc-card`. */\nexport type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';\n\n/** Heading level of `lc-card`'s built-in title. */\nexport type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/** Layout of `lc-card`'s `[card-footer]` slot: `default` (a flex row, end-aligned) or `equal` (children at equal width). */\nexport type CardFooterLayout = 'default' | 'equal';\n\n/** Counter for generated ids (3.36): creation order, so prerendered HTML is the same in every build. */\nlet nextCardId = 0;\n\n/** Whether a `route` value is a link: `''`, `null` and `undefined` are not. */\nfunction hasRoute(route: string | readonly unknown[] | null | undefined): boolean {\n return route !== '' && route !== null && route !== undefined;\n}\n\n/**\n * Card component for content grouping and visual hierarchy.\n *\n * Features:\n * - Variant styles (elevated, outlined, flat, raised, dashed)\n * - Configurable padding (none, xs, sm, md, lg)\n * - Border radius options (none, sm, md, lg, xl, full)\n * - Optional title display, with an optional leading icon tile\n * - Content projection for flexible body content\n * - Link mode (3.24): `href` or `route` make the whole card a real link,\n * the title stays a heading\n * - Equal footer (3.29): `footerLayout=\"equal\"` gives two answers of equal\n * weight in the `[card-footer]` slot the same width\n * - Collapsible (3.36): `collapsible` with `[(expanded)]` turns the head into\n * one toggle that opens and closes the body and footer\n *\n * @example\n * ```html\n * <lc-card title=\"Card Title\" variant=\"elevated\" padding=\"md\">\n * <p>Card body content</p>\n * </lc-card>\n *\n * <!-- With a leading brand-tile icon in the header -->\n * <lc-card title=\"Repository\" subtitle=\"Checkout &amp; profile\" icon=\"git-branch\">\n * ...\n * </lc-card>\n *\n * <!-- An overview card that opens a page: heading h2 with a link inside -->\n * <lc-card title=\"SAP-Ist\" variant=\"outlined\" [headingLevel]=\"2\"\n * [route]=\"['/quellen', 'sap-ist']\" [queryParams]=\"{ ansicht: 'laeufe' }\">\n * ...\n * </lc-card>\n *\n * <!-- Two answers of equal weight (3.29): primary answer first -->\n * <lc-card title=\"Netflix\" variant=\"outlined\" footerLayout=\"equal\">\n * ...\n * <div card-footer>\n * <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">Stimmt</lc-button>\n * <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">Kein Vertrag</lc-button>\n * </div>\n * </lc-card>\n * ```\n */\n@Component({\n selector: 'lc-card',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet, RouterLink],\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-card--footer-equal]': \"footerLayout() === 'equal'\",\n '[class.lc-card--collapsed]': 'isCollapsible() && !expanded()',\n },\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],\n})\nexport class CardComponent {\n /**\n * Optional title rendered as a styled header.\n * For complex headers (e.g. title + action button), use content projection instead.\n */\n title = input<string | undefined>(undefined);\n\n /**\n * Optional subtitle rendered below the title.\n */\n subtitle = input<string | undefined>(undefined);\n\n /**\n * Optional leading icon (Tabler icon name) rendered as a teal brand tile to\n * the left of the title. Only shown when `title` is set.\n */\n icon = input<string | undefined>(undefined);\n\n /**\n * Visual treatment of the leading icon tile.\n * - brand: gradient teal tile with light ink (default)\n * - subtle: translucent surface tile with brand-teal ink\n * @default 'brand'\n */\n iconVariant = input<'brand' | 'subtle'>('brand');\n\n /**\n * Size of the leading icon tile.\n * - md: 2.25rem tile (default)\n * - sm: compact ~1.75rem chip for dense card headers\n * @default 'md'\n */\n iconSize = input<'sm' | 'md'>('md');\n\n /**\n * Optional badge text/count shown next to the title (e.g. item count).\n * For a richer status badge (e.g. a leading status dot), project an\n * `lc-badge` into the `card-badge` slot instead — the slot takes precedence.\n */\n badge = input<string | undefined>(undefined);\n\n /**\n * Badge color variant.\n * @default 'default'\n */\n badgeVariant = input<'default' | 'primary' | 'success' | 'warning' | 'error'>('default');\n\n /**\n * Visual variant of the card\n * - elevated: Box shadow (default)\n * - outlined: Border only (the hairline `--color-border`, no shadow) — the\n * content card on the \"Weite\" sky with `borderRadius=\"xl\"`\n * - flat: No shadow or border\n * - raised: plain surface, hairline border and the long, soft\n * `--shadow-auth-card`, no accent line — the sign-in card\n * - dashed: the muted \"coming soon\" tile — `--color-muted-tile` fill, 1 px\n * dashed `--color-muted-tile-border`, secondary ink, icons in\n * `--color-muted-tile-icon`. Never clickable: `clickable` is ignored;\n * `href` and `route` are ignored too\n * @default 'elevated'\n */\n variant = input<CardVariant>('elevated');\n\n /**\n * Padding inside the card\n * @default 'md'\n */\n padding = input<'none' | 'xs' | 'sm' | 'md' | 'lg'>('md');\n\n /**\n * Whether the card is clickable (hover effects, cursor pointer). Has no\n * effect on a link card (`href`/`route`).\n * @default false\n */\n clickable = input<boolean>(false);\n\n /**\n * Whether the card is selected (if clickable)\n * @default false\n */\n selected = input<boolean>(false);\n\n /**\n * Border radius size: `none`, `sm`, `md`, `lg` (18 px), `xl` (24 px, the\n * \"Weite\" content card) or `full`.\n * @default 'md'\n */\n borderRadius = input<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');\n\n /**\n * Heading level of the built-in `title` (`h2`–`h6`), so the card fits the\n * page's outline. Semantics only, the look stays the same.\n * @default 3\n */\n headingLevel = input<CardHeadingLevel>(3);\n\n /**\n * Accessible name. On a link card (`href`/`route`) it names the link\n * instead of the card; it must contain the visible title (WCAG 2.5.3) and\n * the heading reads it too, so keep it short. Without it the link is named\n * by the title, and the card's content (badge, list) is read as normal\n * content. On other cards it labels the card.\n * @default undefined\n */\n ariaLabel = input<string | undefined>(undefined);\n\n /**\n * URL the card links to (3.24, quellen row 1). The card becomes a real\n * link: the built-in `title` is an `<a href>` inside its heading, and the\n * link covers the whole card (click, Enter, middle click, \"open in new\n * tab\", \"copy link\"). No router needed; works in prerendered HTML. Wins\n * over `route`. Ignored by `dashed`. On a link card `clickable` has no\n * effect and `cardClick` is not emitted.\n * @default undefined\n */\n href = input<string | undefined>(undefined);\n\n /**\n * In-app route the card links to through the Angular router (`RouterLink`\n * commands: `'/quellen/usm'` or `['/quellen', id]`), relative to the\n * consumer's route, rendered as a real `<a href>` like `href`. Needs the\n * app's router (`provideRouter`); without one, use `href`. `''` and `null`\n * mean no link.\n * @default undefined\n */\n route = input<string | readonly unknown[] | null | undefined>(undefined);\n\n /**\n * Query parameters of `route`, as `RouterLink`'s `queryParams`\n * (`{ ansicht: 'laeufe' }`). Ignored with `href` (write the query into the\n * URL).\n * @default undefined\n */\n queryParams = input<Params | null | undefined>(undefined);\n\n /**\n * Layout of the `[card-footer]` slot (3.29, CC-2). `equal`: its children\n * share the row at equal width once the card is at least 480 px (30rem)\n * wide, and stack full width, 8 px apart, below that (the card's own width,\n * at any viewport; long labels wrap inside the buttons, which get the\n * row's height). For two answers of equal weight, put\n * `<lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"true\">` in it,\n * primary answer first; the card adds layout only (gap, divider and\n * spacing as `default`) and never restyles the buttons. The card becomes a\n * size container and takes its parent's full width. Keep the default\n * `padding` (with `none` the buttons' focus ring is clipped). Works in link\n * cards (the buttons stay clickable above the link) and in prerendered\n * HTML (CSS only).\n * @default 'default'\n */\n footerLayout = input<CardFooterLayout>('default');\n\n /**\n * The card can close (3.36, regeln row 1): the head (icon, title, subtitle)\n * becomes one toggle, a button inside the title's heading with\n * `aria-expanded` and `aria-controls`, whose hit area is the whole head (at\n * least 44 px high); Enter, Space or a click open and close the body and the\n * `[card-footer]`. A chevron at the end of the head shows the state.\n * `[card-header-action]` stays a separate control beside it. Needs the\n * built-in `title` (otherwise ignored); wins over `clickable`, `href` and\n * `route`, which are then ignored; ignored on `dashed`. Bind `[(expanded)]`.\n * @default false\n */\n collapsible = input<boolean>(false);\n\n /**\n * Open state of a `collapsible` card (3.36), two-way: `[(expanded)]`. Open\n * by default, so a plain `collapsible` hides nothing; set `false` for a card\n * that starts closed (also in prerendered HTML). Closed, only the head\n * shows: the body is `hidden` and the footer is not displayed.\n * @default true\n */\n readonly expanded = model<boolean>(true);\n\n /**\n * Emitted when a `clickable` card is clicked or activated with Enter or\n * Space. Not emitted on a link card (`href`/`route`): the link navigates by\n * itself (one navigation); bind the native `(click)` for analytics.\n */\n readonly cardClick = output<MouseEvent>();\n\n /** Generated id prefix (3.36): creation order, so prerendered HTML is the same in every build. */\n private readonly uid = `lc-card-${nextCardId++}`;\n\n /** Id of the body a collapsible card's toggle controls. */\n protected readonly bodyId = `${this.uid}-body`;\n\n /** Id of the subtitle that describes a collapsible card's toggle. */\n protected readonly subtitleId = `${this.uid}-subtitle`;\n\n /**\n * Whether the card collapses (3.36): `collapsible` with a built-in title,\n * except for the dashed tile.\n */\n protected readonly isCollapsible = computed(\n () => this.collapsible() && !!this.title() && this.variant() !== 'dashed',\n );\n\n /**\n * How the card links (3.24): `href` wins over `route`; `''`/`null` routes\n * are no link, and the dashed \"coming soon\" tile never links. A\n * collapsible card (3.36) never links.\n */\n protected readonly linkMode = computed<'href' | 'route' | null>(() => {\n if (this.variant() === 'dashed' || this.isCollapsible()) return null;\n if (this.href()) return 'href';\n return hasRoute(this.route()) ? 'route' : null;\n });\n\n /**\n * Whether the card acts as a button: `clickable`, except for the dashed\n * \"coming soon\" tile, which is never interactive, a link card, whose\n * anchor is the only interactive element, and a collapsible card (3.36),\n * whose toggle is.\n */\n protected isClickable = computed(\n () => this.clickable() && this.variant() !== 'dashed' && !this.linkMode() && !this.isCollapsible(),\n );\n\n /** Opens or closes a collapsible card; `expandedChange` emits the new state. */\n protected toggle(): void {\n this.expanded.set(!this.expanded());\n }\n\n /** `ariaLabel` on the card; on a link card it names the anchor instead. */\n protected readonly cardAriaLabel = computed(() => (this.linkMode() ? undefined : this.ariaLabel()));\n\n constructor() {\n if (isDevMode()) {\n effect(() => {\n if (!this.collapsible() || this.variant() === 'dashed') return;\n if (!this.title()) {\n console.warn('[lc-card] collapsible needs the built-in title: ignored');\n } else if (this.clickable() || this.href() || hasRoute(this.route())) {\n console.warn('[lc-card] collapsible wins over clickable, href and route: they are ignored');\n }\n });\n effect(() => {\n if (!this.linkMode()) return;\n if (this.href() && hasRoute(this.route())) {\n console.warn('[lc-card] href and route are both set: href wins');\n }\n if (!this.title() && !this.ariaLabel()) {\n console.warn('[lc-card] a link card without title needs an ariaLabel to name its link');\n }\n });\n }\n }\n\n /**\n * Compute card CSS classes based on inputs\n */\n protected cardClasses = computed(() => {\n const classes = [\n 'card',\n `card-${this.variant()}`,\n `card-padding-${this.padding()}`,\n `card-radius-${this.borderRadius()}`,\n ];\n\n if (this.isClickable()) {\n classes.push('card-clickable');\n }\n\n // A link card looks and reacts like a clickable one (3.24).\n if (this.linkMode()) {\n classes.push('card-linked');\n }\n\n // The dashed tile is never interactive, so it is never selected either.\n if (this.selected() && this.variant() !== 'dashed') {\n classes.push('card-selected');\n }\n\n // A collapsible card (3.36), and its closed state.\n if (this.isCollapsible()) {\n classes.push('card-collapsible');\n if (!this.expanded()) classes.push('card-collapsed');\n }\n\n return classes.join(' ');\n });\n\n /**\n * Compute ARIA role based on clickable state\n */\n protected role = computed(() => (this.isClickable() ? 'button' : 'article'));\n\n /**\n * Handle card click events\n */\n protected handleClick(event: MouseEvent): void {\n if (this.isClickable()) {\n this.cardClick.emit(event);\n }\n }\n\n /**\n * Handle keyboard events for accessibility\n */\n @HostListener('keydown', ['$event'])\n protected handleKeydown(event: KeyboardEvent): void {\n if (this.isClickable() && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n const mouseEvent = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n });\n this.cardClick.emit(mouseEvent);\n }\n }\n}\n","<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n [class]=\"cardClasses()\"\n [attr.role]=\"role()\"\n [attr.aria-label]=\"cardAriaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\n>\n @if (linkMode() && !title()) {\n <!-- Link card without a title (3.24): an empty anchor, named by ariaLabel, covers the card. -->\n <ng-container [ngTemplateOutlet]=\"cardLink\" [ngTemplateOutletContext]=\"{ bare: true }\" />\n }\n @if (title()) {\n <div class=\"card__header\">\n @if (icon()) {\n <div\n class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n aria-hidden=\"true\"\n >\n <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n </div>\n }\n <div class=\"card__header-left\">\n <div class=\"card__title-row\">\n <!-- 3.38 (request 058, 057-s1): the &ngsp; spaces of this template put\n word breaks between the card's parts in its text (textContent,\n accessible name, copy), so title, badge, subtitle, body and footer\n don't run together. Each sits between flex items, where a\n whitespace-only run renders nothing; none is inside .card__title,\n the toggle, the link or the :empty badge slot. The one after the\n title ends each branch: right after an @if chain Angular drops a\n whitespace-only text while it looks for @else. -->\n @if (isCollapsible()) {\n <!-- Collapsible card (3.36): the heading stays a heading and holds the toggle. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardToggle\" /></h3>\n }\n }&ngsp;\n } @else if (linkMode()) {\n <!-- Link card (3.24): the heading stays a heading and holds the link. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h2>\n }\n @case (4) {\n <h4 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h4>\n }\n @case (5) {\n <h5 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h5>\n }\n @case (6) {\n <h6 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h6>\n }\n @default {\n <h3 class=\"card__title\"><ng-container [ngTemplateOutlet]=\"cardLink\" /></h3>\n }\n }&ngsp;\n } @else {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"card__title\">{{ title() }}</h2>\n }\n @case (4) {\n <h4 class=\"card__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 class=\"card__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 class=\"card__title\">{{ title() }}</h6>\n }\n @default {\n <h3 class=\"card__title\">{{ title() }}</h3>\n }\n }&ngsp;\n }\n <!-- Rich status badge: project an lc-badge here (takes visual\n precedence over the `badge` string). Wrapper hides when empty. -->\n <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>&ngsp;\n @if (badge()) {\n <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>&ngsp;\n }\n </div>\n @if (subtitle()) {\n <p class=\"card__subtitle\" [attr.id]=\"isCollapsible() ? subtitleId : null\">{{ subtitle() }}</p>\n }\n </div>&ngsp;\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n @if (isCollapsible()) {\n <lc-icon name=\"chevron-down\" class=\"card__chevron\" size=\"sm\" [decorative]=\"true\" />\n }\n </div>&ngsp;\n }\n <ng-content select=\"[card-header]\"></ng-content>&ngsp;\n <div\n class=\"card__body\"\n [attr.id]=\"isCollapsible() ? bodyId : null\"\n [attr.hidden]=\"isCollapsible() && !expanded() ? '' : null\"\n >\n <ng-content></ng-content>\n </div>&ngsp;\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n\n<!-- The toggle of a collapsible card (3.36): a button inside the heading,\n named by the title and described by the subtitle. Its ::after covers the\n head, so the icon tile, subtitle and chevron toggle too. -->\n<ng-template #cardToggle>\n <button\n type=\"button\"\n class=\"card__toggle\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"bodyId\"\n [attr.aria-describedby]=\"subtitle() ? subtitleId : null\"\n (click)=\"toggle()\"\n >{{ title() }}</button>\n</ng-template>\n\n<!-- The link of a link card (3.24): `href` (plain, no router) or `route`\n (RouterLink, created only here, so other cards never need a router).\n Its ::after covers the card. -->\n<ng-template #cardLink let-bare=\"bare\">\n @if (linkMode() === 'href') {\n <a class=\"card__link\" [class.card__link--bare]=\"bare\" [href]=\"href()\" [attr.aria-label]=\"ariaLabel()\">{{ bare ? '' : title() }}</a>\n } @else {\n <a\n class=\"card__link\"\n [class.card__link--bare]=\"bare\"\n [routerLink]=\"route()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-label]=\"ariaLabel()\"\n >{{ bare ? '' : title() }}</a\n >\n }\n</ng-template>\n"],"mappings":"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"}
package/fesm2022/lifecorner-angular-ui-kit-hero.mjs CHANGED
@@ -133,7 +133,7 @@ var HeroComponent = class HeroComponent {
133
133
  }],
134
134
  ngImport: i0,
135
135
  template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__inner\">\n <div class=\"hero__content\">\n @if (label()) {\n <span #labelEl class=\"hero__label\">{{ label() }}</span>\n }\n <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n }\n @case (3) {\n <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n }\n @case (4) {\n <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n }\n @default {\n <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n }\n }\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"hero__media\">\n <ng-content select=\"[hero-media]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n",
136
- styles: [":host{display:block;width:100%}:host(.lc-hero--fill){display:flex;flex-direction:column}:host(.lc-hero--fill)>.hero{flex:1 1 auto}:host(.lc-hero--fill) .hero__inner{align-content:start}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{color:#1f2937bf}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__title:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 0 0 2px #111827;border-radius:var(--border-radius-sm)}.hero--light .hero__title:focus-visible{box-shadow:0 0 0 2px #fff}@media(forced-colors:active){.hero__title:focus-visible{outline-color:Highlight;box-shadow:none}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;color:#ffffffd9;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"],
136
+ styles: [":host{display:block;width:100%}:host(.lc-hero--fill){display:flex;flex-direction:column}:host(.lc-hero--fill)>.hero{flex:1 1 auto}:host(.lc-hero--fill) .hero__inner{align-content:start}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#1f8092)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#5a798c)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#46543b,#697957)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#68481d,#9b6b2b)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#b06024)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{color:#1f2937bf}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__title:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 0 0 2px #111827;border-radius:var(--border-radius-sm)}.hero--light .hero__title:focus-visible{box-shadow:0 0 0 2px #fff}@media(forced-colors:active){.hero__title:focus-visible{outline-color:Highlight;box-shadow:none}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"],
137
137
  changeDetection: i0.ChangeDetectionStrategy.OnPush
138
138
  });
139
139
  };
@@ -150,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({
150
150
  changeDetection: ChangeDetectionStrategy.OnPush,
151
151
  host: { "[class.lc-hero--fill]": "fill()" },
152
152
  template: "<div [class]=\"heroClasses()\">\n <div class=\"hero__inner\">\n <div class=\"hero__content\">\n @if (label()) {\n <span #labelEl class=\"hero__label\">{{ label() }}</span>\n }\n <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n }\n @case (3) {\n <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n }\n @case (4) {\n <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n }\n @default {\n <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n }\n }\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"hero__media\">\n <ng-content select=\"[hero-media]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n",
153
- styles: [":host{display:block;width:100%}:host(.lc-hero--fill){display:flex;flex-direction:column}:host(.lc-hero--fill)>.hero{flex:1 1 auto}:host(.lc-hero--fill) .hero__inner{align-content:start}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{color:#1f2937bf}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__title:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 0 0 2px #111827;border-radius:var(--border-radius-sm)}.hero--light .hero__title:focus-visible{box-shadow:0 0 0 2px #fff}@media(forced-colors:active){.hero__title:focus-visible{outline-color:Highlight;box-shadow:none}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;color:#ffffffd9;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"]
153
+ styles: [":host{display:block;width:100%}:host(.lc-hero--fill){display:flex;flex-direction:column}:host(.lc-hero--fill)>.hero{flex:1 1 auto}:host(.lc-hero--fill) .hero__inner{align-content:start}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#1f8092)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#5a798c)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#46543b,#697957)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#68481d,#9b6b2b)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#b06024)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{color:#1f2937bf}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__title:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:0 0 0 2px #111827;border-radius:var(--border-radius-sm)}.hero--light .hero__title:focus-visible{box-shadow:0 0 0 2px #fff}@media(forced-colors:active){.hero__title:focus-visible{outline-color:Highlight;box-shadow:none}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"]
154
154
  }]
155
155
  }],
156
156
  propDecorators: {
package/fesm2022/lifecorner-angular-ui-kit-hero.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lifecorner-angular-ui-kit-hero.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/hero/hero.component.ts","../../../../libs/angular-ui-kit/src/lib/hero/hero.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n booleanAttribute,\n input,\n computed,\n viewChild,\n} from '@angular/core';\n\nexport type HeroColor =\n | 'primary'\n | 'secondary'\n | 'neutral'\n | 'success'\n | 'info'\n | 'warning'\n | 'accent-orange'\n | 'accent-purple'\n | 'accent-violet';\n\nexport type HeroSize = 'sm' | 'md' | 'lg';\nexport type HeroVariant = 'default' | 'slim' | 'light';\n\n/**\n * Width of the hero's content box.\n * - `full`: the content runs to the hero's own padding (default, as before 3.4)\n * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column\n * (1024 px minus its 48 px sides, so at most 928 px), centred, while the\n * background stays full-bleed\n */\nexport type HeroContentWidth = 'full' | 'lg';\n\n/** Heading level of `lc-hero`'s title (3.36): `h1`–`h6`, the same look at every level. */\nexport type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Ids of the title and label, set by `focusTitle()` (module counter, only at the call). */\nlet nextHeroId = 0;\n\n/**\n * Hero component for prominent page headers with gradient backgrounds.\n *\n * Features:\n * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)\n * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)\n * - Size options (sm, md, lg)\n * - Optional label text above the title\n * - Configurable border radius\n * - Content projection for body and footer sections\n * - Footer slot for metadata, stats, or CTAs\n * - Media slot (`[hero-media]`) for a visual: below the text on small screens,\n * beside it from 1024 px\n * - 3.37: components in the default slot keep full opacity (only the body\n * text is softened, through its colour), and badges in a hero take the light\n * palette in both themes; `fill` takes the height of a stretching grid or\n * flex row\n * - Content width `lg`: a full-bleed band whose text lines up with the page column\n * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level\n * - `focusTitle()` (3.36): moves focus to the title (`tabindex=\"-1\"`, out of the\n * Tab order) after an action replaced the stage (WCAG 2.4.3)\n *\n * @example\n * ```html\n * <lc-hero label=\"MY APP\" title=\"Welcome\" color=\"primary\" variant=\"slim\">\n * <p>Description text</p>\n * <div hero-footer>Status: Active</div>\n * </lc-hero>\n *\n * <lc-hero title=\"Everything in view\" borderRadius=\"none\" contentWidth=\"lg\">\n * <p>Description text</p>\n * <lc-card hero-media variant=\"elevated\">…</lc-card>\n * </lc-hero>\n * ```\n */\n@Component({\n selector: 'lc-hero',\n standalone: true,\n templateUrl: './hero.component.html',\n styleUrls: ['./hero.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-hero--fill]': 'fill()',\n },\n})\nexport class HeroComponent {\n /**\n * Small uppercase label displayed above the title.\n */\n label = input<string | undefined>(undefined);\n\n /**\n * Main headline text.\n */\n title = input.required<string>();\n\n /**\n * Color theme for the gradient background.\n * @default 'primary'\n */\n color = input<HeroColor>('primary');\n\n /**\n * Size variant controlling padding and font sizes.\n * @default 'md'\n */\n size = input<HeroSize>('md');\n\n /**\n * Border radius of the hero container.\n * @default 'lg'\n */\n borderRadius = input<'none' | 'sm' | 'md' | 'lg'>('lg');\n\n /**\n * Visual variant.\n * - `default`: dark gradient with white text\n * - `slim`: compact single-line banner\n * - `light`: softer pastel gradient with dark text\n * @default 'default'\n */\n variant = input<HeroVariant>('default');\n\n /**\n * Width of the content box. `lg` keeps the background full-bleed and, from\n * 1024 px, puts the label, title, body, media and footer on the 1024 px page\n * column (the `lc-container` `lg` content box), never closer to the edge than\n * the size padding. Use it for a full-width band (`borderRadius=\"none\"`) whose\n * text should line up with the page content below.\n * @default 'full'\n */\n contentWidth = input<HeroContentWidth>('full');\n\n /**\n * Element of the title (`h1`–`h6`), so the hero fits the page's outline\n * (3.36, cockpit row 1). Only the element changes: size, weight, line height\n * and spacing are the same at every level, `size`, `variant` and breakpoint.\n * Use 2 under an `lc-page-header`, which holds the page's `h1`.\n * @default 1\n */\n headingLevel = input<HeroHeadingLevel>(1);\n\n /**\n * Fill the height the container gives the hero (3.37, cockpit row 1): in a\n * grid or flex row that stretches its items, the band ends at the row's\n * bottom edge; the content stays at the top and `[hero-footer]` sits at the\n * bottom. Without it the hero is as tall as its content.\n * @default false\n */\n fill = input(false, { transform: booleanAttribute });\n\n private readonly titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n private readonly labelEl = viewChild<ElementRef<HTMLElement>>('labelEl');\n\n /**\n * Moves the focus to the title (3.36, monatsstand row 1), e.g. after an\n * action replaced the stage and the button that was used is gone, so focus\n * doesn't fall back to the page (WCAG 2.4.3). Gives the title\n * `tabindex=\"-1\"` first: it stays out of the Tab order. With a `label`, the\n * title is named \"label title\" (`aria-labelledby` on both, ids set at the\n * call), so the label is read before it. Call it after the new state has\n * rendered, e.g. `afterNextRender(() => this.hero().focusTitle(), { injector })`\n * with `hero = viewChild.required(HeroComponent)`, as\n * `lc-next-step-card.focusTitle()`. Without a call nothing changes.\n */\n focusTitle(): void {\n const title = this.titleEl()?.nativeElement;\n if (!title) return;\n const label = this.labelEl()?.nativeElement;\n if (label) {\n title.id ||= `lc-hero-title-${++nextHeroId}`;\n label.id ||= `lc-hero-label-${++nextHeroId}`;\n title.setAttribute('aria-labelledby', `${label.id} ${title.id}`);\n } else {\n title.removeAttribute('aria-labelledby');\n }\n title.setAttribute('tabindex', '-1');\n title.focus();\n }\n\n protected heroClasses = computed(() => {\n return [\n 'hero',\n `hero--${this.color()}`,\n `hero--${this.size()}`,\n `hero--radius-${this.borderRadius()}`,\n `hero--${this.variant()}`,\n `hero--content-${this.contentWidth()}`,\n ].join(' ');\n });\n}\n","<div [class]=\"heroClasses()\">\n <div class=\"hero__inner\">\n <div class=\"hero__content\">\n @if (label()) {\n <span #labelEl class=\"hero__label\">{{ label() }}</span>\n }\n <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n }\n @case (3) {\n <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n }\n @case (4) {\n <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n }\n @default {\n <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n }\n }\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"hero__media\">\n <ng-content select=\"[hero-media]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n"],"mappings":"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"}
1
+ {"version":3,"file":"lifecorner-angular-ui-kit-hero.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/hero/hero.component.ts","../../../../libs/angular-ui-kit/src/lib/hero/hero.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n booleanAttribute,\n input,\n computed,\n viewChild,\n} from '@angular/core';\n\nexport type HeroColor =\n | 'primary'\n | 'secondary'\n | 'neutral'\n | 'success'\n | 'info'\n | 'warning'\n | 'accent-orange'\n | 'accent-purple'\n | 'accent-violet';\n\nexport type HeroSize = 'sm' | 'md' | 'lg';\nexport type HeroVariant = 'default' | 'slim' | 'light';\n\n/**\n * Width of the hero's content box.\n * - `full`: the content runs to the hero's own padding (default, as before 3.4)\n * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column\n * (1024 px minus its 48 px sides, so at most 928 px), centred, while the\n * background stays full-bleed\n */\nexport type HeroContentWidth = 'full' | 'lg';\n\n/** Heading level of `lc-hero`'s title (3.36): `h1`–`h6`, the same look at every level. */\nexport type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Ids of the title and label, set by `focusTitle()` (module counter, only at the call). */\nlet nextHeroId = 0;\n\n/**\n * Hero component for prominent page headers with gradient backgrounds.\n *\n * Features:\n * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)\n * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)\n * - Size options (sm, md, lg)\n * - Optional label text above the title\n * - Configurable border radius\n * - Content projection for body and footer sections\n * - Footer slot for metadata, stats, or CTAs\n * - Media slot (`[hero-media]`) for a visual: below the text on small screens,\n * beside it from 1024 px\n * - 3.37: components in the default slot keep full opacity (no `opacity` on\n * the slot), and badges in a hero take the light palette in both themes;\n * `fill` takes the height of a stretching grid or flex row\n * - 3.38: label, title and body are white at full strength on every default\n * band (4.58:1 or more); five bands are darker at their light end\n * - Content width `lg`: a full-bleed band whose text lines up with the page column\n * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level\n * - `focusTitle()` (3.36): moves focus to the title (`tabindex=\"-1\"`, out of the\n * Tab order) after an action replaced the stage (WCAG 2.4.3)\n *\n * @example\n * ```html\n * <lc-hero label=\"MY APP\" title=\"Welcome\" color=\"primary\" variant=\"slim\">\n * <p>Description text</p>\n * <div hero-footer>Status: Active</div>\n * </lc-hero>\n *\n * <lc-hero title=\"Everything in view\" borderRadius=\"none\" contentWidth=\"lg\">\n * <p>Description text</p>\n * <lc-card hero-media variant=\"elevated\">…</lc-card>\n * </lc-hero>\n * ```\n */\n@Component({\n selector: 'lc-hero',\n standalone: true,\n templateUrl: './hero.component.html',\n styleUrls: ['./hero.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-hero--fill]': 'fill()',\n },\n})\nexport class HeroComponent {\n /**\n * Small uppercase label displayed above the title.\n */\n label = input<string | undefined>(undefined);\n\n /**\n * Main headline text.\n */\n title = input.required<string>();\n\n /**\n * Color theme for the gradient background.\n * @default 'primary'\n */\n color = input<HeroColor>('primary');\n\n /**\n * Size variant controlling padding and font sizes.\n * @default 'md'\n */\n size = input<HeroSize>('md');\n\n /**\n * Border radius of the hero container.\n * @default 'lg'\n */\n borderRadius = input<'none' | 'sm' | 'md' | 'lg'>('lg');\n\n /**\n * Visual variant.\n * - `default`: dark gradient with white text\n * - `slim`: compact single-line banner\n * - `light`: softer pastel gradient with dark text\n * @default 'default'\n */\n variant = input<HeroVariant>('default');\n\n /**\n * Width of the content box. `lg` keeps the background full-bleed and, from\n * 1024 px, puts the label, title, body, media and footer on the 1024 px page\n * column (the `lc-container` `lg` content box), never closer to the edge than\n * the size padding. Use it for a full-width band (`borderRadius=\"none\"`) whose\n * text should line up with the page content below.\n * @default 'full'\n */\n contentWidth = input<HeroContentWidth>('full');\n\n /**\n * Element of the title (`h1`–`h6`), so the hero fits the page's outline\n * (3.36, cockpit row 1). Only the element changes: size, weight, line height\n * and spacing are the same at every level, `size`, `variant` and breakpoint.\n * Use 2 under an `lc-page-header`, which holds the page's `h1`.\n * @default 1\n */\n headingLevel = input<HeroHeadingLevel>(1);\n\n /**\n * Fill the height the container gives the hero (3.37, cockpit row 1): in a\n * grid or flex row that stretches its items, the band ends at the row's\n * bottom edge; the content stays at the top and `[hero-footer]` sits at the\n * bottom. Without it the hero is as tall as its content.\n * @default false\n */\n fill = input(false, { transform: booleanAttribute });\n\n private readonly titleEl = viewChild<ElementRef<HTMLElement>>('titleEl');\n private readonly labelEl = viewChild<ElementRef<HTMLElement>>('labelEl');\n\n /**\n * Moves the focus to the title (3.36, monatsstand row 1), e.g. after an\n * action replaced the stage and the button that was used is gone, so focus\n * doesn't fall back to the page (WCAG 2.4.3). Gives the title\n * `tabindex=\"-1\"` first: it stays out of the Tab order. With a `label`, the\n * title is named \"label title\" (`aria-labelledby` on both, ids set at the\n * call), so the label is read before it. Call it after the new state has\n * rendered, e.g. `afterNextRender(() => this.hero().focusTitle(), { injector })`\n * with `hero = viewChild.required(HeroComponent)`, as\n * `lc-next-step-card.focusTitle()`. Without a call nothing changes.\n */\n focusTitle(): void {\n const title = this.titleEl()?.nativeElement;\n if (!title) return;\n const label = this.labelEl()?.nativeElement;\n if (label) {\n title.id ||= `lc-hero-title-${++nextHeroId}`;\n label.id ||= `lc-hero-label-${++nextHeroId}`;\n title.setAttribute('aria-labelledby', `${label.id} ${title.id}`);\n } else {\n title.removeAttribute('aria-labelledby');\n }\n title.setAttribute('tabindex', '-1');\n title.focus();\n }\n\n protected heroClasses = computed(() => {\n return [\n 'hero',\n `hero--${this.color()}`,\n `hero--${this.size()}`,\n `hero--radius-${this.borderRadius()}`,\n `hero--${this.variant()}`,\n `hero--content-${this.contentWidth()}`,\n ].join(' ');\n });\n}\n","<div [class]=\"heroClasses()\">\n <div class=\"hero__inner\">\n <div class=\"hero__content\">\n @if (label()) {\n <span #labelEl class=\"hero__label\">{{ label() }}</span>\n }\n <!-- 3.36: the element follows `headingLevel`; the look is the same at every level. -->\n @switch (headingLevel()) {\n @case (2) {\n <h2 #titleEl class=\"hero__title\">{{ title() }}</h2>\n }\n @case (3) {\n <h3 #titleEl class=\"hero__title\">{{ title() }}</h3>\n }\n @case (4) {\n <h4 #titleEl class=\"hero__title\">{{ title() }}</h4>\n }\n @case (5) {\n <h5 #titleEl class=\"hero__title\">{{ title() }}</h5>\n }\n @case (6) {\n <h6 #titleEl class=\"hero__title\">{{ title() }}</h6>\n }\n @default {\n <h1 #titleEl class=\"hero__title\">{{ title() }}</h1>\n }\n }\n <div class=\"hero__body\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"hero__media\">\n <ng-content select=\"[hero-media]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\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.37.0",
3
+ "version": "3.38.0",
4
4
  "description": "LifeCorner Design System – Angular UI component library",
5
5
  "license": "MIT",
6
6
  "repository": {
package/types/lifecorner-angular-ui-kit-hero.d.ts CHANGED
@@ -25,10 +25,11 @@ export type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
25
25
  * - Footer slot for metadata, stats, or CTAs
26
26
  * - Media slot (`[hero-media]`) for a visual: below the text on small screens,
27
27
  * beside it from 1024 px
28
- * - 3.37: components in the default slot keep full opacity (only the body
29
- * text is softened, through its colour), and badges in a hero take the light
30
- * palette in both themes; `fill` takes the height of a stretching grid or
31
- * flex row
28
+ * - 3.37: components in the default slot keep full opacity (no `opacity` on
29
+ * the slot), and badges in a hero take the light palette in both themes;
30
+ * `fill` takes the height of a stretching grid or flex row
31
+ * - 3.38: label, title and body are white at full strength on every default
32
+ * band (4.58:1 or more); five bands are darker at their light end
32
33
  * - Content width `lg`: a full-bleed band whose text lines up with the page column
33
34
  * - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level
34
35
  * - `focusTitle()` (3.36): moves focus to the title (`tabindex="-1"`, out of the