@lifecorner/angular-ui-kit 3.8.0 → 3.9.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.
- package/fesm2022/lifecorner-angular-ui-kit-app-shell.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-app-shell.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs +39 -6
- package/fesm2022/lifecorner-angular-ui-kit-button.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-choice-prompt.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-choice-prompt.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-skeleton.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-skeleton.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +2 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_horizon.scss +46 -12
- package/src/styles/horizon.shell.spec.ts +67 -0
- package/src/styles/horizon.spec.ts +6 -4
- package/types/lifecorner-angular-ui-kit-app-shell.d.ts +15 -4
- package/types/lifecorner-angular-ui-kit-button.d.ts +30 -0
- package/types/lifecorner-angular-ui-kit-page-header.d.ts +6 -1
- package/types/lifecorner-angular-ui-kit-skeleton.d.ts +7 -1
|
@@ -124,7 +124,7 @@ var PageHeaderComponent = class PageHeaderComponent {
|
|
|
124
124
|
host: { properties: { "class": "hostClasses()" } },
|
|
125
125
|
ngImport: i0,
|
|
126
126
|
template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n @if (icon()) {\n <div\n class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n <div class=\"lc-page-header__title-row\">\n @if (title()) {\n <!-- One projection slot for the suffix: a slot inside a non-rendered\n @switch branch would swallow it for levels 2 and 3. -->\n <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n @switch (level()) {\n @case (1) {\n <h1 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h1>\n }\n @case (2) {\n <h2 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h2>\n }\n @case (3) {\n <h3 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h3>\n }\n }\n <!-- The overline follows the heading in the DOM (read after it) and\n is shown above it (order: -1 and a full line in the wrapping row). -->\n @if (overline()) {\n <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n }\n }\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n",
|
|
127
|
-
styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"],
|
|
127
|
+
styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"],
|
|
128
128
|
dependencies: [{
|
|
129
129
|
kind: "component",
|
|
130
130
|
type: IconComponent,
|
|
@@ -167,7 +167,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
167
167
|
encapsulation: ViewEncapsulation.None,
|
|
168
168
|
host: { "[class]": "hostClasses()" },
|
|
169
169
|
template: "@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n @if (icon()) {\n <div\n class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n <div class=\"lc-page-header__title-row\">\n @if (title()) {\n <!-- One projection slot for the suffix: a slot inside a non-rendered\n @switch branch would swallow it for levels 2 and 3. -->\n <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n @switch (level()) {\n @case (1) {\n <h1 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h1>\n }\n @case (2) {\n <h2 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h2>\n }\n @case (3) {\n <h3 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h3>\n }\n }\n <!-- The overline follows the heading in the DOM (read after it) and\n is shown above it (order: -1 and a full line in the wrapping row). -->\n @if (overline()) {\n <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n }\n }\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n",
|
|
170
|
-
styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"]
|
|
170
|
+
styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-secondary{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-secondary .lc-page-header__title{font-size:var(--font-size-xl, 1.25rem)}.lc-page-header--size-secondary .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"]
|
|
171
171
|
}]
|
|
172
172
|
}],
|
|
173
173
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-page-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.ts","../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Visual size of the page header.\n * - `compact` — dense data-tool pages and section headings (18 px)\n * - `default` — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title` — the \"Weite\" page title: 32 px on phones, 40 / 44 / 48 px\n * from 1024 / 1440 / 1920 px (`--font-size-title`)\n * - `display` — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px\n * from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)\n * - `auth` — the sign-in and registration `<h1>`: 30 px, 34 px from\n * 1024 px (`--font-size-auth-title`)\n */\nexport type PageHeaderSize = 'compact' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';\n\n/**\n * Page header — top-of-page title block with optional subtitle,\n * breadcrumbs, badge, description and an actions area.\n *\n * Density-aware, slot-based, no Tailwind. Drop it at the top of any route\n * to get consistent rhythm between title, metadata and content below.\n *\n * Slots:\n * - `[slot=\"breadcrumbs\"]` — rendered above the title (e.g. `<lc-breadcrumbs>`)\n * - `[slot=\"title-suffix\"]` — inline beside the title, after the optional `badge`\n * (for one or more status chips/badges)\n * - `[slot=\"actions\"]` — right-aligned actions (buttons, menus)\n * - `[slot=\"meta\"]` — secondary metadata under the title row (chips, tags)\n * - default — short header-internal description text\n *\n * `overline` renders a short uppercase label (a date, a section) **above** the\n * title but **after** it in the DOM, so a screen reader that lands on the\n * heading reads the title first and the overline next.\n *\n * Full-blown navigation primitives like `lc-tabs` — which render both the tab\n * strip **and** their panel content — belong **below** the page header, never\n * inside it. The header stays focused on page identity.\n *\n * @example\n * ```html\n * <lc-page-header\n * title=\"Reports\"\n * subtitle=\"Compare period-over-period metrics\"\n * [showDivider]=\"true\"\n * >\n * <lc-breadcrumbs slot=\"breadcrumbs\" [items]=\"crumbs\" />\n * <lc-chip slot=\"title-suffix\" size=\"sm\">Beta</lc-chip>\n * <lc-chip slot=\"title-suffix\" size=\"sm\" variant=\"success\">Ready</lc-chip>\n * <lc-button slot=\"actions\" variant=\"primary\">New report</lc-button>\n * <lc-chip slot=\"meta\">12 active</lc-chip>\n * </lc-page-header>\n * ```\n */\n@Component({\n selector: 'lc-page-header',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet],\n templateUrl: './page-header.component.html',\n styleUrl: './page-header.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class PageHeaderComponent {\n /** Main heading text. */\n title = input<string | undefined>(undefined);\n\n /**\n * Optional leading icon (Tabler icon name) rendered as a brand tile to the\n * left of the title block, mirroring `lc-card`'s header icon. Purely additive.\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 * @default 'md'\n */\n iconSize = input<'sm' | 'md'>('md');\n\n /** Short supporting line below the title. */\n subtitle = input<string | undefined>(undefined);\n\n /**\n * Short label shown above the title (e.g. the date on a daily view, a\n * section name): uppercase through CSS (write it in sentence case), bold,\n * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /\n * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the\n * DOM, so the heading is read first.\n */\n overline = input<string | undefined>(undefined);\n\n /**\n * Heading level for the title — affects semantics, not size.\n * @default 1\n */\n level = input<1 | 2 | 3>(1);\n\n /**\n * Visual size of the page header.\n * - `compact` — dense data-tool pages and section headings (18 px)\n * - `default` — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title` — page title on the responsive title scale, 32–48 px\n * - `display` — the display greeting, 40–72 px, weight 700\n * - `auth` — the sign-in and registration `<h1>`, 30 / 34 px\n * @default 'default'\n */\n size = input<PageHeaderSize>('default');\n\n /**\n * Whether to render a divider line below the header.\n * @default false\n */\n showDivider = input<boolean>(false);\n\n /** Optional badge text next to the title (e.g. `Beta`). */\n badge = input<string | undefined>(undefined);\n\n /**\n * Remove the header's own horizontal padding so its content sits flush with\n * the container edge. Use when the header is already inside a padded wrapper\n * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,\n * when shown, always spans the full width regardless of this setting.\n * @default false\n */\n noPaddingX = input<boolean>(false);\n\n /**\n * Classes of the heading: the global type-scale class (`lc-title`,\n * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.\n */\n protected titleClasses = computed(() => {\n const scale: Partial<Record<PageHeaderSize, string>> = {\n title: 'lc-title',\n display: 'lc-display',\n auth: 'lc-auth-title',\n };\n return ['lc-page-header__title', scale[this.size()]].filter(Boolean).join(' ');\n });\n\n protected hostClasses = computed(() =>\n [\n 'lc-page-header',\n `lc-page-header--size-${this.size()}`,\n this.showDivider() ? 'lc-page-header--divided' : null,\n this.overline() ? 'lc-page-header--has-overline' : null,\n this.noPaddingX() ? 'lc-page-header--flush-x' : null,\n ]\n .filter(Boolean)\n .join(' '),\n );\n}\n","@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n @if (icon()) {\n <div\n class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n <div class=\"lc-page-header__title-row\">\n @if (title()) {\n <!-- One projection slot for the suffix: a slot inside a non-rendered\n @switch branch would swallow it for levels 2 and 3. -->\n <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n @switch (level()) {\n @case (1) {\n <h1 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h1>\n }\n @case (2) {\n <h2 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h2>\n }\n @case (3) {\n <h3 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h3>\n }\n }\n <!-- The overline follows the heading in the DOM (read after it) and\n is shown above it (order: -1 and a full line in the wrapping row). -->\n @if (overline()) {\n <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n }\n }\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-page-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.ts","../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Visual size of the page header.\n * - `compact` — dense data-tool pages and section headings (18 px)\n * - `secondary` — a second title under the page's main one, e.g. the other\n * language of a bilingual page (20 px, `--font-size-xl`;\n * the `compact` spacing; 3.9, AS-25)\n * - `default` — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title` — the \"Weite\" page title: 32 px on phones, 40 / 44 / 48 px\n * from 1024 / 1440 / 1920 px (`--font-size-title`)\n * - `display` — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px\n * from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)\n * - `auth` — the sign-in and registration `<h1>`: 30 px, 34 px from\n * 1024 px (`--font-size-auth-title`)\n */\nexport type PageHeaderSize = 'compact' | 'secondary' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';\n\n/**\n * Page header — top-of-page title block with optional subtitle,\n * breadcrumbs, badge, description and an actions area.\n *\n * Density-aware, slot-based, no Tailwind. Drop it at the top of any route\n * to get consistent rhythm between title, metadata and content below.\n *\n * Slots:\n * - `[slot=\"breadcrumbs\"]` — rendered above the title (e.g. `<lc-breadcrumbs>`)\n * - `[slot=\"title-suffix\"]` — inline beside the title, after the optional `badge`\n * (for one or more status chips/badges)\n * - `[slot=\"actions\"]` — right-aligned actions (buttons, menus)\n * - `[slot=\"meta\"]` — secondary metadata under the title row (chips, tags)\n * - default — short header-internal description text\n *\n * `overline` renders a short uppercase label (a date, a section) **above** the\n * title but **after** it in the DOM, so a screen reader that lands on the\n * heading reads the title first and the overline next.\n *\n * Full-blown navigation primitives like `lc-tabs` — which render both the tab\n * strip **and** their panel content — belong **below** the page header, never\n * inside it. The header stays focused on page identity.\n *\n * @example\n * ```html\n * <lc-page-header\n * title=\"Reports\"\n * subtitle=\"Compare period-over-period metrics\"\n * [showDivider]=\"true\"\n * >\n * <lc-breadcrumbs slot=\"breadcrumbs\" [items]=\"crumbs\" />\n * <lc-chip slot=\"title-suffix\" size=\"sm\">Beta</lc-chip>\n * <lc-chip slot=\"title-suffix\" size=\"sm\" variant=\"success\">Ready</lc-chip>\n * <lc-button slot=\"actions\" variant=\"primary\">New report</lc-button>\n * <lc-chip slot=\"meta\">12 active</lc-chip>\n * </lc-page-header>\n * ```\n */\n@Component({\n selector: 'lc-page-header',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet],\n templateUrl: './page-header.component.html',\n styleUrl: './page-header.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class PageHeaderComponent {\n /** Main heading text. */\n title = input<string | undefined>(undefined);\n\n /**\n * Optional leading icon (Tabler icon name) rendered as a brand tile to the\n * left of the title block, mirroring `lc-card`'s header icon. Purely additive.\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 * @default 'md'\n */\n iconSize = input<'sm' | 'md'>('md');\n\n /** Short supporting line below the title. */\n subtitle = input<string | undefined>(undefined);\n\n /**\n * Short label shown above the title (e.g. the date on a daily view, a\n * section name): uppercase through CSS (write it in sentence case), bold,\n * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /\n * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the\n * DOM, so the heading is read first.\n */\n overline = input<string | undefined>(undefined);\n\n /**\n * Heading level for the title — affects semantics, not size.\n * @default 1\n */\n level = input<1 | 2 | 3>(1);\n\n /**\n * Visual size of the page header.\n * - `compact` — dense data-tool pages and section headings (18 px)\n * - `secondary` — a second title under the main one, e.g. the other\n * language of a bilingual page (20 px, compact spacing)\n * - `default` — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title` — page title on the responsive title scale, 32–48 px\n * - `display` — the display greeting, 40–72 px, weight 700\n * - `auth` — the sign-in and registration `<h1>`, 30 / 34 px\n * @default 'default'\n */\n size = input<PageHeaderSize>('default');\n\n /**\n * Whether to render a divider line below the header.\n * @default false\n */\n showDivider = input<boolean>(false);\n\n /** Optional badge text next to the title (e.g. `Beta`). */\n badge = input<string | undefined>(undefined);\n\n /**\n * Remove the header's own horizontal padding so its content sits flush with\n * the container edge. Use when the header is already inside a padded wrapper\n * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,\n * when shown, always spans the full width regardless of this setting.\n * @default false\n */\n noPaddingX = input<boolean>(false);\n\n /**\n * Classes of the heading: the global type-scale class (`lc-title`,\n * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.\n */\n protected titleClasses = computed(() => {\n const scale: Partial<Record<PageHeaderSize, string>> = {\n title: 'lc-title',\n display: 'lc-display',\n auth: 'lc-auth-title',\n };\n return ['lc-page-header__title', scale[this.size()]].filter(Boolean).join(' ');\n });\n\n protected hostClasses = computed(() =>\n [\n 'lc-page-header',\n `lc-page-header--size-${this.size()}`,\n this.showDivider() ? 'lc-page-header--divided' : null,\n this.overline() ? 'lc-page-header--has-overline' : null,\n this.noPaddingX() ? 'lc-page-header--flush-x' : null,\n ]\n .filter(Boolean)\n .join(' '),\n );\n}\n","@if (true) {\n <div class=\"lc-page-header__breadcrumbs\">\n <ng-content select=\"[slot='breadcrumbs']\" />\n </div>\n\n <div class=\"lc-page-header__row\">\n @if (icon()) {\n <div\n class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n <div class=\"lc-page-header__title-row\">\n @if (title()) {\n <!-- One projection slot for the suffix: a slot inside a non-rendered\n @switch branch would swallow it for levels 2 and 3. -->\n <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n @switch (level()) {\n @case (1) {\n <h1 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h1>\n }\n @case (2) {\n <h2 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h2>\n }\n @case (3) {\n <h3 [class]=\"titleClasses()\">\n {{ title() }}\n @if (badge()) {\n <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n }\n <span class=\"lc-page-header__title-suffix\">\n <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n </span>\n </h3>\n }\n }\n <!-- The overline follows the heading in the DOM (read after it) and\n is shown above it (order: -1 and a full line in the wrapping row). -->\n @if (overline()) {\n <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n }\n }\n\n <div class=\"lc-page-header__actions\">\n <ng-content select=\"[slot='actions']\" />\n </div>\n </div>\n\n @if (subtitle()) {\n <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n </div>\n\n <div class=\"lc-page-header__meta\">\n <ng-content select=\"[slot='meta']\" />\n </div>\n\n <div class=\"lc-page-header__body\">\n <ng-content />\n </div>\n}\n"],"mappings":"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"}
|
|
@@ -81,7 +81,7 @@ var SkeletonComponent = class SkeletonComponent {
|
|
|
81
81
|
} },
|
|
82
82
|
ngImport: i0,
|
|
83
83
|
template: "<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n",
|
|
84
|
-
styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"],
|
|
84
|
+
styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out;min-height:var(--lc-skeleton-height, 0px);max-height:var(--lc-skeleton-height, none)}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"],
|
|
85
85
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
86
86
|
});
|
|
87
87
|
};
|
|
@@ -101,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
101
101
|
"[style.flex-shrink]": "\"0\""
|
|
102
102
|
},
|
|
103
103
|
template: "<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n",
|
|
104
|
-
styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"]
|
|
104
|
+
styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out;min-height:var(--lc-skeleton-height, 0px);max-height:var(--lc-skeleton-height, none)}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"]
|
|
105
105
|
}]
|
|
106
106
|
}],
|
|
107
107
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n * with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n selector: 'lc-skeleton',\n standalone: true,\n templateUrl: './skeleton.component.html',\n styleUrl: './skeleton.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n // The host mirrors the box width so the skeleton sizes correctly inside\n // flex layouts, and never shrinks below it.\n '[style.width]': 'hostWidth()',\n '[style.flex-shrink]': '\"0\"',\n },\n})\nexport class SkeletonComponent {\n /** Shape variant. */\n readonly variant = input<SkeletonVariant>('line');\n\n /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */\n readonly width = input<string>();\n\n
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n * with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - `--lc-skeleton-height` hook: the height from CSS (a container query, `cqi`),\n * winning over the `height` input; set it on the `lc-skeleton` element (on a\n * wrapper it reaches every skeleton inside)\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n selector: 'lc-skeleton',\n standalone: true,\n templateUrl: './skeleton.component.html',\n styleUrl: './skeleton.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n // The host mirrors the box width so the skeleton sizes correctly inside\n // flex layouts, and never shrinks below it.\n '[style.width]': 'hostWidth()',\n '[style.flex-shrink]': '\"0\"',\n },\n})\nexport class SkeletonComponent {\n /** Shape variant. */\n readonly variant = input<SkeletonVariant>('line');\n\n /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */\n readonly width = input<string>();\n\n /**\n * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.\n * The `--lc-skeleton-height` custom property, when set, wins over it.\n */\n readonly height = input<string>();\n\n /** Border radius override (CSS value). */\n readonly borderRadius = input<string>();\n\n protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n protected readonly styles = computed(() => {\n const v = this.variant();\n const defaults: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n circle: { w: '40px', h: '40px', r: '50%' },\n rect: { w: '100%', h: '100px', r: '0.5rem' },\n };\n const d = defaults[v];\n return {\n width: this.width() ?? d.w,\n height: this.height() ?? d.h,\n 'border-radius': this.borderRadius() ?? d.r,\n };\n });\n\n protected readonly hostWidth = computed(() => this.styles().width);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAuCA,IAAa,oBAAb,MAAa,kBAAiB;CAEnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAE/D,SAAS,eAAc;EAOxC,MAAM,IAAI;GAJR,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAY,GAAG;GAAS;GAC9C,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAQ,GAAG;GAAK;GACxC,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAS,GAAG;GAAQ;EAElC,EANA,KAAK,QAMI;EACnB,OAAO;GACL,OAAO,KAAK,MAAK,KAAM,EAAE;GACzB,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,OAAM,CAAE,CAAC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAjCvD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCvC9B;EACA,QAAA,CAAA,8sBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADsCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAb7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAGJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,8sBAAA;EAAA,CAAA"}
|