@lifecorner/angular-ui-kit 3.23.1 → 3.24.1
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-accordion.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-accordion.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs +124 -21
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs +70 -5
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map +1 -1
- package/package.json +1 -1
- package/types/lifecorner-angular-ui-kit-accordion.d.ts +3 -1
- package/types/lifecorner-angular-ui-kit-card.d.ts +73 -5
- package/types/lifecorner-angular-ui-kit-file-upload.d.ts +48 -7
|
@@ -221,7 +221,7 @@ var AccordionComponent = class AccordionComponent {
|
|
|
221
221
|
}],
|
|
222
222
|
ngImport: i0,
|
|
223
223
|
template: "<div [class]=\"accordionClasses()\">\n <!-- The heading wrapper gives the disclosure button a heading level (WAI-ARIA accordion pattern). -->\n <div class=\"lc-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"lc-accordion__header\"\n type=\"button\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-labelledby]=\"headerLabelledBy()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <!-- The label starts the name and the template's text follows it, so\n the name contains what is shown (WCAG 2.5.3). -->\n @if (richHeaderLabel()) {\n <span hidden [id]=\"headerId + '-label'\">{{ richHeaderLabel() }},</span>\n }\n <span class=\"lc-accordion__header-content\" [attr.id]=\"richHeaderLabel() ? headerId + '-content' : null\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n [decorative]=\"true\"\n ></lc-icon>\n </button>\n </div>\n\n <!--\n A collapsed panel is `inert`: its eagerly projected body stays in the DOM\n (for the height animation) but is neither focusable nor exposed to AT.\n -->\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerLabelledBy() ?? headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n",
|
|
224
|
-
styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--lc-accordion-border, var(--color-border));background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__heading{display:block;margin:0}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-weight:600;letter-spacing:-.01em;color:var(--lc-accordion-header-fg, var(--color-text-primary));background:var(--lc-accordion-header-bg, transparent);border:var(--lc-accordion-header-border, none);border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem .875rem);font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 1.375rem);font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s linear .3s}.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 1.125rem 1rem);opacity:1;transform:translateY(0);visibility:visible;transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem .875rem .75rem)}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 1.375rem 1.25rem)}.lc-accordion--plain{border:none;background:transparent;overflow:visible}.lc-accordion--plain .lc-accordion__header{position:relative;isolation:isolate;min-height:var(--size-min-touch-height, 2.75rem);background:transparent;border:none}.lc-accordion--plain.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem 0)}.lc-accordion--plain.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 0)}.lc-accordion--plain.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 0)}.lc-accordion--plain .lc-accordion__header:hover{background-color:transparent}.lc-accordion--plain .lc-accordion__header:focus-visible{outline:none}.lc-accordion--plain .lc-accordion__header:before{content:\"\";position:absolute;inset-block:0;inset-inline:calc(-1 * var(--
|
|
224
|
+
styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--lc-accordion-border, var(--color-border));background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__heading{display:block;margin:0}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-weight:600;letter-spacing:-.01em;color:var(--lc-accordion-header-fg, var(--color-text-primary));background:var(--lc-accordion-header-bg, transparent);border:var(--lc-accordion-header-border, none);border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem .875rem);font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 1.375rem);font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s linear .3s}.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 1.125rem 1rem);opacity:1;transform:translateY(0);visibility:visible;transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem .875rem .75rem)}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 1.375rem 1.25rem)}.lc-accordion--plain{border:none;background:transparent;overflow:visible}.lc-accordion--plain .lc-accordion__header{position:relative;isolation:isolate;min-height:var(--size-min-touch-height, 2.75rem);background:transparent;border:none}.lc-accordion--plain.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem 0)}.lc-accordion--plain.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 0)}.lc-accordion--plain.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 0)}.lc-accordion--plain .lc-accordion__header:hover{background-color:transparent}.lc-accordion--plain .lc-accordion__header:focus-visible{outline:none}@property --_lc-accordion-header-bleed{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}.lc-accordion--plain .lc-accordion__header:before{--_lc-accordion-header-bleed: var(--lc-accordion-header-bleed, var(--spacing-2));content:\"\";position:absolute;inset-block:0;inset-inline:calc(-1 * var(--_lc-accordion-header-bleed));z-index:-1;border:var(--lc-accordion-header-border, none);border-radius:var(--border-radius-md);background:var(--lc-accordion-header-bg, transparent);transition:background-color .15s ease}.lc-accordion--plain .lc-accordion__header:hover:before{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion--plain .lc-accordion__header:focus-visible:before{outline:2px solid var(--color-primary);outline-offset:-2px}.lc-accordion--plain .lc-accordion__title{min-width:0;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3;text-align:start}.lc-accordion--plain .lc-accordion__panel{overflow-x:visible;overflow-y:clip}.lc-accordion--plain .lc-accordion__body{padding:0;overflow-x:visible;overflow-y:clip}.lc-accordion--plain.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem 0 .75rem)}.lc-accordion--plain.lc-accordion--md.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 0 1rem)}.lc-accordion--plain.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 0 1.25rem)}@media(prefers-reduced-motion:reduce){.lc-accordion--plain .lc-accordion__header,.lc-accordion--plain .lc-accordion__header:before,.lc-accordion--plain .lc-accordion__icon,.lc-accordion--plain .lc-accordion__panel,.lc-accordion--plain .lc-accordion__body{transition:none}}@media(forced-colors:active){.lc-accordion--plain .lc-accordion__header:focus-visible:before{outline-color:Highlight}}\n"],
|
|
225
225
|
dependencies: [{
|
|
226
226
|
kind: "component",
|
|
227
227
|
type: IconComponent,
|
|
@@ -263,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
263
263
|
viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],
|
|
264
264
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
265
265
|
template: "<div [class]=\"accordionClasses()\">\n <!-- The heading wrapper gives the disclosure button a heading level (WAI-ARIA accordion pattern). -->\n <div class=\"lc-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"lc-accordion__header\"\n type=\"button\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-labelledby]=\"headerLabelledBy()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <!-- The label starts the name and the template's text follows it, so\n the name contains what is shown (WCAG 2.5.3). -->\n @if (richHeaderLabel()) {\n <span hidden [id]=\"headerId + '-label'\">{{ richHeaderLabel() }},</span>\n }\n <span class=\"lc-accordion__header-content\" [attr.id]=\"richHeaderLabel() ? headerId + '-content' : null\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n [decorative]=\"true\"\n ></lc-icon>\n </button>\n </div>\n\n <!--\n A collapsed panel is `inert`: its eagerly projected body stays in the DOM\n (for the height animation) but is neither focusable nor exposed to AT.\n -->\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerLabelledBy() ?? headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n",
|
|
266
|
-
styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--lc-accordion-border, var(--color-border));background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__heading{display:block;margin:0}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-weight:600;letter-spacing:-.01em;color:var(--lc-accordion-header-fg, var(--color-text-primary));background:var(--lc-accordion-header-bg, transparent);border:var(--lc-accordion-header-border, none);border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem .875rem);font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 1.375rem);font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s linear .3s}.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 1.125rem 1rem);opacity:1;transform:translateY(0);visibility:visible;transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem .875rem .75rem)}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 1.375rem 1.25rem)}.lc-accordion--plain{border:none;background:transparent;overflow:visible}.lc-accordion--plain .lc-accordion__header{position:relative;isolation:isolate;min-height:var(--size-min-touch-height, 2.75rem);background:transparent;border:none}.lc-accordion--plain.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem 0)}.lc-accordion--plain.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 0)}.lc-accordion--plain.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 0)}.lc-accordion--plain .lc-accordion__header:hover{background-color:transparent}.lc-accordion--plain .lc-accordion__header:focus-visible{outline:none}.lc-accordion--plain .lc-accordion__header:before{content:\"\";position:absolute;inset-block:0;inset-inline:calc(-1 * var(--
|
|
266
|
+
styles: [":host{display:block}.lc-accordion{border-radius:var(--border-radius-lg);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}.lc-accordion--outlined{border:1px solid var(--lc-accordion-border, var(--color-border));background:var(--color-surface);box-shadow:var(--elevation-1)}.lc-accordion--outlined:hover:not(.lc-accordion--disabled){box-shadow:var(--elevation-1)}.lc-accordion--flat{border:none;background:transparent}.lc-accordion--disabled{opacity:.5;pointer-events:none}.lc-accordion__heading{display:block;margin:0}.lc-accordion__header{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-weight:600;letter-spacing:-.01em;color:var(--lc-accordion-header-fg, var(--color-text-primary));background:var(--lc-accordion-header-bg, transparent);border:var(--lc-accordion-header-border, none);border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-accordion__header:hover{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--border-radius-md)}.lc-accordion__header:disabled{cursor:not-allowed}.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem .875rem);font-size:.8125rem}.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 1.125rem);font-size:.9375rem}.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 1.375rem);font-size:1.0625rem}.lc-accordion__title{flex:1;text-align:left}.lc-accordion__header-content{display:flex;flex:1;min-width:0;align-items:center;gap:.75rem;text-align:left;font-weight:inherit}.lc-accordion__icon{flex-shrink:0;color:var(--color-text-secondary);transition:transform .3s cubic-bezier(.25,.46,.45,.94),color .2s ease}.lc-accordion--chevron-leading .lc-accordion__icon{order:-1}.lc-accordion__header:hover .lc-accordion__icon{color:var(--color-text-primary)}.lc-accordion--expanded .lc-accordion__icon{transform:rotate(-180deg)}.lc-accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.lc-accordion--expanded .lc-accordion__panel{grid-template-rows:1fr}.lc-accordion__body{min-height:0;overflow:hidden;padding:0 1.125rem;color:var(--color-text-secondary);font-size:.875rem;line-height:1.6;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .2s ease 50ms,transform .2s ease 50ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s linear .3s}.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 1.125rem 1rem);opacity:1;transform:translateY(0);visibility:visible;transition:opacity .25s ease 80ms,transform .25s ease 80ms,padding .3s cubic-bezier(.25,.46,.45,.94),visibility 0s}.lc-accordion--sm .lc-accordion__body{padding:0 .875rem;font-size:.8125rem}.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem .875rem .75rem)}.lc-accordion--lg .lc-accordion__body{padding:0 1.375rem;font-size:.9375rem}.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 1.375rem 1.25rem)}.lc-accordion--plain{border:none;background:transparent;overflow:visible}.lc-accordion--plain .lc-accordion__header{position:relative;isolation:isolate;min-height:var(--size-min-touch-height, 2.75rem);background:transparent;border:none}.lc-accordion--plain.lc-accordion--sm .lc-accordion__header{padding:var(--lc-accordion-header-padding, .625rem 0)}.lc-accordion--plain.lc-accordion--md .lc-accordion__header{padding:var(--lc-accordion-header-padding, .875rem 0)}.lc-accordion--plain.lc-accordion--lg .lc-accordion__header{padding:var(--lc-accordion-header-padding, 1.125rem 0)}.lc-accordion--plain .lc-accordion__header:hover{background-color:transparent}.lc-accordion--plain .lc-accordion__header:focus-visible{outline:none}@property --_lc-accordion-header-bleed{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0px;}.lc-accordion--plain .lc-accordion__header:before{--_lc-accordion-header-bleed: var(--lc-accordion-header-bleed, var(--spacing-2));content:\"\";position:absolute;inset-block:0;inset-inline:calc(-1 * var(--_lc-accordion-header-bleed));z-index:-1;border:var(--lc-accordion-header-border, none);border-radius:var(--border-radius-md);background:var(--lc-accordion-header-bg, transparent);transition:background-color .15s ease}.lc-accordion--plain .lc-accordion__header:hover:before{background-color:var(--lc-accordion-header-hover-bg, var(--color-surface-hover))}.lc-accordion--plain .lc-accordion__header:focus-visible:before{outline:2px solid var(--color-primary);outline-offset:-2px}.lc-accordion--plain .lc-accordion__title{min-width:0;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3;text-align:start}.lc-accordion--plain .lc-accordion__panel{overflow-x:visible;overflow-y:clip}.lc-accordion--plain .lc-accordion__body{padding:0;overflow-x:visible;overflow-y:clip}.lc-accordion--plain.lc-accordion--sm.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .625rem 0 .75rem)}.lc-accordion--plain.lc-accordion--md.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, .875rem 0 1rem)}.lc-accordion--plain.lc-accordion--lg.lc-accordion--expanded .lc-accordion__body{padding:var(--lc-accordion-body-padding, 1rem 0 1.25rem)}@media(prefers-reduced-motion:reduce){.lc-accordion--plain .lc-accordion__header,.lc-accordion--plain .lc-accordion__header:before,.lc-accordion--plain .lc-accordion__icon,.lc-accordion--plain .lc-accordion__panel,.lc-accordion--plain .lc-accordion__body{transition:none}}@media(forced-colors:active){.lc-accordion--plain .lc-accordion__header:focus-visible:before{outline-color:Highlight}}\n"]
|
|
267
267
|
}]
|
|
268
268
|
}],
|
|
269
269
|
ctorParameters: () => [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-accordion.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/accordion/accordion-header.directive.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion-content.directive.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion.component.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion.component.html","../../../../libs/angular-ui-kit/src/lib/accordion/accordion-group.component.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n/**\n * Marks an `<ng-template>` as the rich header content for an `<lc-accordion>`.\n *\n * When present, the projected template is rendered inside the header button\n * instead of the plain `title` string. The accordion still owns the disclosure\n * chevron, click/keyboard handling and focus ring — the consumer only supplies\n * the (non-interactive) inner content.\n *\n * A11y constraint: the header is itself a `<button>`, so the template must not\n * contain nested interactive elements (no button/link/input). Text, badges and\n * other non-interactive nodes only.\n *\n * Name (WCAG 2.5.3 Label in Name): the header is named by the template's\n * text; the accordion's `ariaLabel` (or `title`), if set, comes first through\n * `aria-labelledby`. Separate the template's parts with whitespace\n * (`&ngsp;`), so they read as words (\"Item label Done 12:04\"), and set a\n * label only for context that the template doesn't show.\n *\n * @example\n * ```html\n * <lc-accordion variant=\"flat\" chevronPosition=\"leading\">\n * <ng-template lcAccordionHeader>\n * <span class=\"title\">Item label</span>&ngsp;\n * <lc-badge variant=\"success\" size=\"sm\">Done</lc-badge>&ngsp;\n * <span style=\"margin-left: auto;\">12:04</span>\n * </ng-template>\n * <div>Body…</div>\n * </lc-accordion>\n * ```\n */\n@Directive({\n selector: '[lcAccordionHeader]',\n standalone: true,\n})\nexport class AccordionHeaderDirective {\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n/**\n * Marks an `<ng-template>` as the (optionally lazy) body content for an\n * `<lc-accordion>`.\n *\n * Unlike default `<ng-content>` projection — which Angular always instantiates\n * eagerly — a template referenced through this directive is only stamped out\n * when the accordion decides to render its body. That is what makes\n * `[lazy]=\"true\"` and `[destroyOnClose]=\"true\"` possible: expensive children\n * (HTTP-backed panels, charts, live-polling views) are not created until the\n * panel is first opened.\n *\n * @example\n * ```html\n * <lc-accordion [lazy]=\"true\">\n * <ng-template lcAccordionContent>\n * <expensive-panel [id]=\"id\" />\n * </ng-template>\n * </lc-accordion>\n * ```\n */\n@Directive({\n selector: '[lcAccordionContent]',\n standalone: true,\n})\nexport class AccordionContentDirective {\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n model,\n computed,\n signal,\n contentChild,\n effect,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN } from '@lifecorner/angular-ui-kit/icons';\nimport { AccordionHeaderDirective } from './accordion-header.directive';\nimport { AccordionContentDirective } from './accordion-content.directive';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\n\n/** Unique id source for header/panel wiring (aria-controls / aria-labelledby). */\nlet accordionUid = 0;\n\n/** Where the disclosure chevron sits relative to the header content. */\nexport type AccordionChevronPosition = 'leading' | 'trailing';\n\n/** Visual variant of `lc-accordion`. */\nexport type AccordionVariant = 'outlined' | 'flat' | 'plain';\n\n/**\n * Accordion component for collapsible content sections.\n *\n * Features:\n * - Expandable/collapsible content panels\n * - Two-way binding for expanded state\n * - Animated expand/collapse transitions\n * - Plain-string `title` **or** a rich projected header (`lcAccordionHeader`)\n * - Eager `<ng-content>` body **or** lazy/destroyable template body\n * (`lcAccordionContent` + `[lazy]` / `[destroyOnClose]`)\n * - Accessible: header is a real `<button>` inside a heading with\n * `aria-expanded` / `aria-controls`, keyboard support and a visible focus\n * ring; the collapsed panel is `inert` (not focusable, hidden from AT)\n *\n * @example Plain (unchanged, fully backward compatible)\n * ```html\n * <lc-accordion title=\"Section Title\" [(expanded)]=\"isOpen\">\n * <p>Collapsible content here</p>\n * </lc-accordion>\n * ```\n *\n * @example Rich header + lazy body\n * ```html\n * <lc-accordion variant=\"flat\" chevronPosition=\"leading\" [lazy]=\"true\">\n * <ng-template lcAccordionHeader>\n * <span class=\"title\">Item label</span>&ngsp;\n * <lc-badge variant=\"success\" size=\"sm\">Done</lc-badge>&ngsp;\n * <span style=\"margin-left: auto;\">12:04</span>\n * </ng-template>\n * <ng-template lcAccordionContent>\n * <expensive-panel />\n * </ng-template>\n * </lc-accordion>\n * ```\n */\n@Component({\n selector: 'lc-accordion',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet],\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],\n templateUrl: './accordion.component.html',\n styleUrl: './accordion.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionComponent {\n /**\n * Title displayed in the accordion header. Optional: when a\n * `lcAccordionHeader` template is projected it takes precedence, and `title`\n * (if set) starts the header's accessible name when `ariaLabel` is empty.\n * @default ''\n */\n readonly title = input<string>('');\n\n /**\n * Start of the header button's accessible name; falls back to `title`. A\n * plain `title` is appended unless contained (WCAG 2.5.3 Label in Name).\n * With an `lcAccordionHeader` template, the name is this label (or `title`)\n * followed by the template's text, through `aria-labelledby`. Separate the\n * template's parts with whitespace (`&ngsp;`), and set a label only for\n * context that the template doesn't show.\n * @default ''\n */\n readonly ariaLabel = input<string>('');\n\n /** Whether the accordion is expanded (two-way binding) */\n readonly expanded = model<boolean>(false);\n\n /**\n * Visual variant. `'outlined'`: border and surface. `'flat'`: no border or\n * background; header and body keep their inset. `'plain'`: no border,\n * background or inline inset, so the title, chevron and body line up with\n * the content edge of the sheet or card around it; the hover background and\n * focus ring reach 8 px past that edge (`--lc-accordion-header-bleed`), so\n * keep that much room before a clipping edge.\n * @default 'outlined'\n */\n readonly variant = input<AccordionVariant>('outlined');\n\n /** Size of the header */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Whether the accordion is disabled */\n readonly disabled = input<boolean>(false);\n\n /**\n * Heading level (1–6) announced for the header button, so the accordion\n * fits into the surrounding document outline.\n * @default 3\n */\n readonly headingLevel = input<1 | 2 | 3 | 4 | 5 | 6>(3);\n\n /**\n * Where the disclosure chevron sits. `'trailing'` (default) preserves the\n * original layout. `'leading'` puts the chevron first so a right-aligned\n * header element (e.g. a timestamp using `margin-left: auto`) stays pinned to\n * the right edge.\n */\n readonly chevronPosition = input<AccordionChevronPosition>('trailing');\n\n /**\n * When `true`, a `lcAccordionContent` body is not instantiated until the\n * panel is first expanded; once created it is kept in the DOM on collapse.\n * Default `false` = today's behavior (projected immediately). Has no effect\n * on default `<ng-content>` bodies, which Angular always projects eagerly.\n */\n readonly lazy = input<boolean>(false);\n\n /**\n * When `true`, a `lcAccordionContent` body is destroyed on collapse and\n * recreated on the next open. Takes precedence over {@link lazy}.\n */\n readonly destroyOnClose = input<boolean>(false);\n\n /** Rich header template, if projected via `lcAccordionHeader`. */\n readonly headerTemplate = contentChild(AccordionHeaderDirective);\n\n /** Lazy/deferred body template, if projected via `lcAccordionContent`. */\n readonly contentTemplate = contentChild(AccordionContentDirective);\n\n /** Stable ids wiring the header button to its panel for screen readers. */\n protected readonly headerId = `lc-accordion-header-${accordionUid}`;\n protected readonly panelId = `lc-accordion-panel-${accordionUid++}`;\n\n /** Latches to `true` the first time the panel is opened (for lazy bodies). */\n private readonly hasBeenOpened = signal(false);\n\n constructor() {\n // Record the first open so lazy bodies can render (and stay) afterwards.\n effect(() => {\n if (this.expanded()) {\n this.hasBeenOpened.set(true);\n }\n });\n }\n\n /**\n * Label that starts a rich header's name (`ariaLabel`, else `title`); empty\n * without a header template.\n */\n protected readonly richHeaderLabel = computed(() =>\n this.headerTemplate() ? (this.ariaLabel() || this.title()).trim() : '',\n );\n\n /**\n * Accessible label of a plain header button (AS-33, WCAG 2.5.3 Label in\n * Name): the explicit override, else the title, then the visible title\n * unless contained. A rich header has none: it is named by its content.\n */\n protected readonly headerAriaLabel = computed(() =>\n this.headerTemplate() ? null : nameWithText(this.ariaLabel() || this.title(), this.title()) || null,\n );\n\n /** A labelled rich header: its hidden label, then the template's text. */\n protected readonly headerLabelledBy = computed(() =>\n this.richHeaderLabel() ? `${this.headerId}-label ${this.headerId}-content` : null,\n );\n\n /**\n * Whether the `lcAccordionContent` body should currently be in the DOM.\n * - `destroyOnClose`: only while expanded.\n * - `lazy`: from the first open onward.\n * - otherwise: always (eager).\n */\n protected readonly shouldRenderBody = computed(() => {\n if (this.destroyOnClose()) return this.expanded();\n if (this.lazy()) return this.hasBeenOpened();\n return true;\n });\n\n /** Computed CSS classes */\n protected accordionClasses = computed(() => {\n const classes = [\n 'lc-accordion',\n `lc-accordion--${this.variant()}`,\n `lc-accordion--${this.size()}`,\n `lc-accordion--chevron-${this.chevronPosition()}`,\n ];\n if (this.expanded()) classes.push('lc-accordion--expanded');\n if (this.disabled()) classes.push('lc-accordion--disabled');\n return classes.join(' ');\n });\n\n /** Toggle expanded state */\n protected toggle(): void {\n if (!this.disabled()) {\n this.expanded.update((v) => !v);\n }\n }\n\n /** Handle keyboard events for accessibility */\n protected onKeydown(event: KeyboardEvent): void {\n if (this.disabled()) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.toggle();\n }\n }\n}\n","<div [class]=\"accordionClasses()\">\n <!-- The heading wrapper gives the disclosure button a heading level (WAI-ARIA accordion pattern). -->\n <div class=\"lc-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"lc-accordion__header\"\n type=\"button\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-labelledby]=\"headerLabelledBy()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <!-- The label starts the name and the template's text follows it, so\n the name contains what is shown (WCAG 2.5.3). -->\n @if (richHeaderLabel()) {\n <span hidden [id]=\"headerId + '-label'\">{{ richHeaderLabel() }},</span>\n }\n <span class=\"lc-accordion__header-content\" [attr.id]=\"richHeaderLabel() ? headerId + '-content' : null\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n [decorative]=\"true\"\n ></lc-icon>\n </button>\n </div>\n\n <!--\n A collapsed panel is `inert`: its eagerly projected body stays in the DOM\n (for the height animation) but is neither focusable nor exposed to AT.\n -->\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerLabelledBy() ?? headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n contentChildren,\n effect,\n untracked,\n} from '@angular/core';\nimport { AccordionComponent } from './accordion.component';\n\n@Component({\n selector: 'lc-accordion-group',\n standalone: true,\n template: '<ng-content></ng-content>',\n styleUrl: './accordion-group.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionGroupComponent {\n /** When false (default), only one accordion can be expanded at a time. */\n readonly multi = input<boolean>(false);\n\n readonly accordions = contentChildren(AccordionComponent);\n\n private previousExpanded = new Set<AccordionComponent>();\n\n constructor() {\n effect(() => {\n const accordions = this.accordions();\n const multi = this.multi();\n\n // Read expanded state of every child so the effect re-runs on change\n const currentlyExpanded = accordions.filter((a) => a.expanded());\n\n if (multi) {\n this.previousExpanded = new Set(currentlyExpanded);\n return;\n }\n\n // Find newly expanded accordion\n const newlyExpanded = currentlyExpanded.find(\n (a) => !this.previousExpanded.has(a)\n );\n\n if (newlyExpanded && currentlyExpanded.length > 1) {\n untracked(() => {\n accordions.forEach((a) => {\n if (a !== newlyExpanded && a.expanded()) {\n a.expanded.set(false);\n }\n });\n });\n }\n\n this.previousExpanded = new Set(\n accordions.filter((a) => a.expanded())\n );\n });\n }\n\n /** Collapse all accordions. */\n collapseAll(): void {\n this.accordions().forEach((a) => a.expanded.set(false));\n }\n\n /** Expand all accordions (only meaningful when multi=true). */\n expandAll(): void {\n this.accordions().forEach((a) => {\n if (!a.disabled()) {\n a.expanded.set(true);\n }\n });\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-accordion.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/accordion/accordion-header.directive.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion-content.directive.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion.component.ts","../../../../libs/angular-ui-kit/src/lib/accordion/accordion.component.html","../../../../libs/angular-ui-kit/src/lib/accordion/accordion-group.component.ts"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\n\n/**\n * Marks an `<ng-template>` as the rich header content for an `<lc-accordion>`.\n *\n * When present, the projected template is rendered inside the header button\n * instead of the plain `title` string. The accordion still owns the disclosure\n * chevron, click/keyboard handling and focus ring — the consumer only supplies\n * the (non-interactive) inner content.\n *\n * A11y constraint: the header is itself a `<button>`, so the template must not\n * contain nested interactive elements (no button/link/input). Text, badges and\n * other non-interactive nodes only.\n *\n * Name (WCAG 2.5.3 Label in Name): the header is named by the template's\n * text; the accordion's `ariaLabel` (or `title`), if set, comes first through\n * `aria-labelledby`. Separate the template's parts with whitespace\n * (`&ngsp;`), so they read as words (\"Item label Done 12:04\"), and set a\n * label only for context that the template doesn't show.\n *\n * @example\n * ```html\n * <lc-accordion variant=\"flat\" chevronPosition=\"leading\">\n * <ng-template lcAccordionHeader>\n * <span class=\"title\">Item label</span>&ngsp;\n * <lc-badge variant=\"success\" size=\"sm\">Done</lc-badge>&ngsp;\n * <span style=\"margin-left: auto;\">12:04</span>\n * </ng-template>\n * <div>Body…</div>\n * </lc-accordion>\n * ```\n */\n@Directive({\n selector: '[lcAccordionHeader]',\n standalone: true,\n})\nexport class AccordionHeaderDirective {\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n/**\n * Marks an `<ng-template>` as the (optionally lazy) body content for an\n * `<lc-accordion>`.\n *\n * Unlike default `<ng-content>` projection — which Angular always instantiates\n * eagerly — a template referenced through this directive is only stamped out\n * when the accordion decides to render its body. That is what makes\n * `[lazy]=\"true\"` and `[destroyOnClose]=\"true\"` possible: expensive children\n * (HTTP-backed panels, charts, live-polling views) are not created until the\n * panel is first opened.\n *\n * @example\n * ```html\n * <lc-accordion [lazy]=\"true\">\n * <ng-template lcAccordionContent>\n * <expensive-panel [id]=\"id\" />\n * </ng-template>\n * </lc-accordion>\n * ```\n */\n@Directive({\n selector: '[lcAccordionContent]',\n standalone: true,\n})\nexport class AccordionContentDirective {\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n model,\n computed,\n signal,\n contentChild,\n effect,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_CHEVRON_DOWN } from '@lifecorner/angular-ui-kit/icons';\nimport { AccordionHeaderDirective } from './accordion-header.directive';\nimport { AccordionContentDirective } from './accordion-content.directive';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\n\n/** Unique id source for header/panel wiring (aria-controls / aria-labelledby). */\nlet accordionUid = 0;\n\n/** Where the disclosure chevron sits relative to the header content. */\nexport type AccordionChevronPosition = 'leading' | 'trailing';\n\n/** Visual variant of `lc-accordion`. */\nexport type AccordionVariant = 'outlined' | 'flat' | 'plain';\n\n/**\n * Accordion component for collapsible content sections.\n *\n * Features:\n * - Expandable/collapsible content panels\n * - Two-way binding for expanded state\n * - Animated expand/collapse transitions\n * - Plain-string `title` **or** a rich projected header (`lcAccordionHeader`)\n * - Eager `<ng-content>` body **or** lazy/destroyable template body\n * (`lcAccordionContent` + `[lazy]` / `[destroyOnClose]`)\n * - Accessible: header is a real `<button>` inside a heading with\n * `aria-expanded` / `aria-controls`, keyboard support and a visible focus\n * ring; the collapsed panel is `inert` (not focusable, hidden from AT)\n *\n * @example Plain (unchanged, fully backward compatible)\n * ```html\n * <lc-accordion title=\"Section Title\" [(expanded)]=\"isOpen\">\n * <p>Collapsible content here</p>\n * </lc-accordion>\n * ```\n *\n * @example Rich header + lazy body\n * ```html\n * <lc-accordion variant=\"flat\" chevronPosition=\"leading\" [lazy]=\"true\">\n * <ng-template lcAccordionHeader>\n * <span class=\"title\">Item label</span>&ngsp;\n * <lc-badge variant=\"success\" size=\"sm\">Done</lc-badge>&ngsp;\n * <span style=\"margin-left: auto;\">12:04</span>\n * </ng-template>\n * <ng-template lcAccordionContent>\n * <expensive-panel />\n * </ng-template>\n * </lc-accordion>\n * ```\n */\n@Component({\n selector: 'lc-accordion',\n standalone: true,\n imports: [IconComponent, NgTemplateOutlet],\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_DOWN])],\n templateUrl: './accordion.component.html',\n styleUrl: './accordion.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionComponent {\n /**\n * Title displayed in the accordion header. Optional: when a\n * `lcAccordionHeader` template is projected it takes precedence, and `title`\n * (if set) starts the header's accessible name when `ariaLabel` is empty.\n * @default ''\n */\n readonly title = input<string>('');\n\n /**\n * Start of the header button's accessible name; falls back to `title`. A\n * plain `title` is appended unless contained (WCAG 2.5.3 Label in Name).\n * With an `lcAccordionHeader` template, the name is this label (or `title`)\n * followed by the template's text, through `aria-labelledby`. Separate the\n * template's parts with whitespace (`&ngsp;`), and set a label only for\n * context that the template doesn't show.\n * @default ''\n */\n readonly ariaLabel = input<string>('');\n\n /** Whether the accordion is expanded (two-way binding) */\n readonly expanded = model<boolean>(false);\n\n /**\n * Visual variant. `'outlined'`: border and surface. `'flat'`: no border or\n * background; header and body keep their inset. `'plain'`: no border,\n * background or inline inset, so the title, chevron and body line up with\n * the content edge of the sheet or card around it; the hover background and\n * focus ring reach 8 px past that edge (`--lc-accordion-header-bleed`), so\n * keep that much room before a clipping or scrolling edge (`overflow: hidden`\n * or `overflow-x: auto`). The hook takes a length; `0px` puts them on the\n * edge.\n * @default 'outlined'\n */\n readonly variant = input<AccordionVariant>('outlined');\n\n /** Size of the header */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Whether the accordion is disabled */\n readonly disabled = input<boolean>(false);\n\n /**\n * Heading level (1–6) announced for the header button, so the accordion\n * fits into the surrounding document outline.\n * @default 3\n */\n readonly headingLevel = input<1 | 2 | 3 | 4 | 5 | 6>(3);\n\n /**\n * Where the disclosure chevron sits. `'trailing'` (default) preserves the\n * original layout. `'leading'` puts the chevron first so a right-aligned\n * header element (e.g. a timestamp using `margin-left: auto`) stays pinned to\n * the right edge.\n */\n readonly chevronPosition = input<AccordionChevronPosition>('trailing');\n\n /**\n * When `true`, a `lcAccordionContent` body is not instantiated until the\n * panel is first expanded; once created it is kept in the DOM on collapse.\n * Default `false` = today's behavior (projected immediately). Has no effect\n * on default `<ng-content>` bodies, which Angular always projects eagerly.\n */\n readonly lazy = input<boolean>(false);\n\n /**\n * When `true`, a `lcAccordionContent` body is destroyed on collapse and\n * recreated on the next open. Takes precedence over {@link lazy}.\n */\n readonly destroyOnClose = input<boolean>(false);\n\n /** Rich header template, if projected via `lcAccordionHeader`. */\n readonly headerTemplate = contentChild(AccordionHeaderDirective);\n\n /** Lazy/deferred body template, if projected via `lcAccordionContent`. */\n readonly contentTemplate = contentChild(AccordionContentDirective);\n\n /** Stable ids wiring the header button to its panel for screen readers. */\n protected readonly headerId = `lc-accordion-header-${accordionUid}`;\n protected readonly panelId = `lc-accordion-panel-${accordionUid++}`;\n\n /** Latches to `true` the first time the panel is opened (for lazy bodies). */\n private readonly hasBeenOpened = signal(false);\n\n constructor() {\n // Record the first open so lazy bodies can render (and stay) afterwards.\n effect(() => {\n if (this.expanded()) {\n this.hasBeenOpened.set(true);\n }\n });\n }\n\n /**\n * Label that starts a rich header's name (`ariaLabel`, else `title`); empty\n * without a header template.\n */\n protected readonly richHeaderLabel = computed(() =>\n this.headerTemplate() ? (this.ariaLabel() || this.title()).trim() : '',\n );\n\n /**\n * Accessible label of a plain header button (AS-33, WCAG 2.5.3 Label in\n * Name): the explicit override, else the title, then the visible title\n * unless contained. A rich header has none: it is named by its content.\n */\n protected readonly headerAriaLabel = computed(() =>\n this.headerTemplate() ? null : nameWithText(this.ariaLabel() || this.title(), this.title()) || null,\n );\n\n /** A labelled rich header: its hidden label, then the template's text. */\n protected readonly headerLabelledBy = computed(() =>\n this.richHeaderLabel() ? `${this.headerId}-label ${this.headerId}-content` : null,\n );\n\n /**\n * Whether the `lcAccordionContent` body should currently be in the DOM.\n * - `destroyOnClose`: only while expanded.\n * - `lazy`: from the first open onward.\n * - otherwise: always (eager).\n */\n protected readonly shouldRenderBody = computed(() => {\n if (this.destroyOnClose()) return this.expanded();\n if (this.lazy()) return this.hasBeenOpened();\n return true;\n });\n\n /** Computed CSS classes */\n protected accordionClasses = computed(() => {\n const classes = [\n 'lc-accordion',\n `lc-accordion--${this.variant()}`,\n `lc-accordion--${this.size()}`,\n `lc-accordion--chevron-${this.chevronPosition()}`,\n ];\n if (this.expanded()) classes.push('lc-accordion--expanded');\n if (this.disabled()) classes.push('lc-accordion--disabled');\n return classes.join(' ');\n });\n\n /** Toggle expanded state */\n protected toggle(): void {\n if (!this.disabled()) {\n this.expanded.update((v) => !v);\n }\n }\n\n /** Handle keyboard events for accessibility */\n protected onKeydown(event: KeyboardEvent): void {\n if (this.disabled()) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.toggle();\n }\n }\n}\n","<div [class]=\"accordionClasses()\">\n <!-- The heading wrapper gives the disclosure button a heading level (WAI-ARIA accordion pattern). -->\n <div class=\"lc-accordion__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"lc-accordion__header\"\n type=\"button\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-label]=\"headerAriaLabel()\"\n [attr.aria-labelledby]=\"headerLabelledBy()\"\n [attr.aria-disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (headerTemplate(); as header) {\n <!-- The label starts the name and the template's text follows it, so\n the name contains what is shown (WCAG 2.5.3). -->\n @if (richHeaderLabel()) {\n <span hidden [id]=\"headerId + '-label'\">{{ richHeaderLabel() }},</span>\n }\n <span class=\"lc-accordion__header-content\" [attr.id]=\"richHeaderLabel() ? headerId + '-content' : null\">\n <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\n </span>\n } @else {\n <span class=\"lc-accordion__title\">{{ title() }}</span>\n }\n <lc-icon\n class=\"lc-accordion__icon\"\n name=\"chevron-down\"\n size=\"sm\"\n [decorative]=\"true\"\n ></lc-icon>\n </button>\n </div>\n\n <!--\n A collapsed panel is `inert`: its eagerly projected body stays in the DOM\n (for the height animation) but is neither focusable nor exposed to AT.\n -->\n <div\n class=\"lc-accordion__panel\"\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerLabelledBy() ?? headerId\"\n [attr.aria-hidden]=\"!expanded()\"\n [attr.inert]=\"expanded() ? null : ''\"\n >\n <div class=\"lc-accordion__body\">\n @if (contentTemplate(); as content) {\n @if (shouldRenderBody()) {\n <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n }\n } @else {\n <ng-content></ng-content>\n }\n </div>\n </div>\n</div>\n","import {\n Component,\n ChangeDetectionStrategy,\n input,\n contentChildren,\n effect,\n untracked,\n} from '@angular/core';\nimport { AccordionComponent } from './accordion.component';\n\n@Component({\n selector: 'lc-accordion-group',\n standalone: true,\n template: '<ng-content></ng-content>',\n styleUrl: './accordion-group.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionGroupComponent {\n /** When false (default), only one accordion can be expanded at a time. */\n readonly multi = input<boolean>(false);\n\n readonly accordions = contentChildren(AccordionComponent);\n\n private previousExpanded = new Set<AccordionComponent>();\n\n constructor() {\n effect(() => {\n const accordions = this.accordions();\n const multi = this.multi();\n\n // Read expanded state of every child so the effect re-runs on change\n const currentlyExpanded = accordions.filter((a) => a.expanded());\n\n if (multi) {\n this.previousExpanded = new Set(currentlyExpanded);\n return;\n }\n\n // Find newly expanded accordion\n const newlyExpanded = currentlyExpanded.find(\n (a) => !this.previousExpanded.has(a)\n );\n\n if (newlyExpanded && currentlyExpanded.length > 1) {\n untracked(() => {\n accordions.forEach((a) => {\n if (a !== newlyExpanded && a.expanded()) {\n a.expanded.set(false);\n }\n });\n });\n }\n\n this.previousExpanded = new Set(\n accordions.filter((a) => a.expanded())\n );\n });\n }\n\n /** Collapse all accordions. */\n collapseAll(): void {\n this.accordions().forEach((a) => a.expanded.set(false));\n }\n\n /** Expand all accordions (only meaningful when multi=true). */\n expandAll(): void {\n this.accordions().forEach((a) => {\n if (!a.disabled()) {\n a.expanded.set(true);\n }\n });\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectionStrategy, Component, HostListener, computed, input, output } from "@angular/core";
|
|
2
|
+
import { ChangeDetectionStrategy, Component, HostListener, computed, effect, input, isDevMode, output } from "@angular/core";
|
|
3
|
+
import { NgTemplateOutlet } from "@angular/common";
|
|
4
|
+
import { RouterLink } from "@angular/router";
|
|
3
5
|
import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
|
|
6
|
+
function hasRoute(route) {
|
|
7
|
+
return route !== "" && route !== null && route !== void 0;
|
|
8
|
+
}
|
|
4
9
|
var CardComponent = class CardComponent {
|
|
5
10
|
title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
|
|
6
11
|
subtitle = input(void 0, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
|
|
@@ -16,8 +21,24 @@ var CardComponent = class CardComponent {
|
|
|
16
21
|
borderRadius = input("md", ...ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []);
|
|
17
22
|
headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
|
|
18
23
|
ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
24
|
+
href = input(void 0, ...ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []);
|
|
25
|
+
route = input(void 0, ...ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []);
|
|
26
|
+
queryParams = input(void 0, ...ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []);
|
|
19
27
|
cardClick = output();
|
|
20
|
-
|
|
28
|
+
linkMode = computed(() => {
|
|
29
|
+
if (this.variant() === "dashed") return null;
|
|
30
|
+
if (this.href()) return "href";
|
|
31
|
+
return hasRoute(this.route()) ? "route" : null;
|
|
32
|
+
}, ...ngDevMode ? [{ debugName: "linkMode" }] : /* istanbul ignore next */ []);
|
|
33
|
+
isClickable = computed(() => this.clickable() && this.variant() !== "dashed" && !this.linkMode(), ...ngDevMode ? [{ debugName: "isClickable" }] : /* istanbul ignore next */ []);
|
|
34
|
+
cardAriaLabel = computed(() => this.linkMode() ? void 0 : this.ariaLabel(), ...ngDevMode ? [{ debugName: "cardAriaLabel" }] : /* istanbul ignore next */ []);
|
|
35
|
+
constructor() {
|
|
36
|
+
if (isDevMode()) effect(() => {
|
|
37
|
+
if (!this.linkMode()) return;
|
|
38
|
+
if (this.href() && hasRoute(this.route())) console.warn("[lc-card] href and route are both set: href wins");
|
|
39
|
+
if (!this.title() && !this.ariaLabel()) console.warn("[lc-card] a link card without title needs an ariaLabel to name its link");
|
|
40
|
+
});
|
|
41
|
+
}
|
|
21
42
|
cardClasses = computed(() => {
|
|
22
43
|
const classes = [
|
|
23
44
|
"card",
|
|
@@ -26,6 +47,7 @@ var CardComponent = class CardComponent {
|
|
|
26
47
|
`card-radius-${this.borderRadius()}`
|
|
27
48
|
];
|
|
28
49
|
if (this.isClickable()) classes.push("card-clickable");
|
|
50
|
+
if (this.linkMode()) classes.push("card-linked");
|
|
29
51
|
if (this.selected() && this.variant() !== "dashed") classes.push("card-selected");
|
|
30
52
|
return classes.join(" ");
|
|
31
53
|
}, ...ngDevMode ? [{ debugName: "cardClasses" }] : /* istanbul ignore next */ []);
|
|
@@ -155,27 +177,79 @@ var CardComponent = class CardComponent {
|
|
|
155
177
|
isSignal: true,
|
|
156
178
|
isRequired: false,
|
|
157
179
|
transformFunction: null
|
|
180
|
+
},
|
|
181
|
+
href: {
|
|
182
|
+
classPropertyName: "href",
|
|
183
|
+
publicName: "href",
|
|
184
|
+
isSignal: true,
|
|
185
|
+
isRequired: false,
|
|
186
|
+
transformFunction: null
|
|
187
|
+
},
|
|
188
|
+
route: {
|
|
189
|
+
classPropertyName: "route",
|
|
190
|
+
publicName: "route",
|
|
191
|
+
isSignal: true,
|
|
192
|
+
isRequired: false,
|
|
193
|
+
transformFunction: null
|
|
194
|
+
},
|
|
195
|
+
queryParams: {
|
|
196
|
+
classPropertyName: "queryParams",
|
|
197
|
+
publicName: "queryParams",
|
|
198
|
+
isSignal: true,
|
|
199
|
+
isRequired: false,
|
|
200
|
+
transformFunction: null
|
|
158
201
|
}
|
|
159
202
|
},
|
|
160
203
|
outputs: { cardClick: "cardClick" },
|
|
161
204
|
host: { listeners: { "keydown": "handleKeydown($event)" } },
|
|
162
205
|
ngImport: i0,
|
|
163
|
-
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]=\"
|
|
164
|
-
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{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-
|
|
165
|
-
dependencies: [
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
206
|
+
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 (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\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\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",
|
|
207
|
+
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 ::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))}\n"],
|
|
208
|
+
dependencies: [
|
|
209
|
+
{
|
|
210
|
+
kind: "component",
|
|
211
|
+
type: IconComponent,
|
|
212
|
+
selector: "lc-icon",
|
|
213
|
+
inputs: [
|
|
214
|
+
"name",
|
|
215
|
+
"variant",
|
|
216
|
+
"size",
|
|
217
|
+
"color",
|
|
218
|
+
"ariaLabel",
|
|
219
|
+
"decorative",
|
|
220
|
+
"strict"
|
|
221
|
+
]
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
kind: "directive",
|
|
225
|
+
type: NgTemplateOutlet,
|
|
226
|
+
selector: "[ngTemplateOutlet]",
|
|
227
|
+
inputs: [
|
|
228
|
+
"ngTemplateOutletContext",
|
|
229
|
+
"ngTemplateOutlet",
|
|
230
|
+
"ngTemplateOutletInjector"
|
|
231
|
+
]
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
kind: "directive",
|
|
235
|
+
type: RouterLink,
|
|
236
|
+
selector: "[routerLink]",
|
|
237
|
+
inputs: [
|
|
238
|
+
"target",
|
|
239
|
+
"queryParams",
|
|
240
|
+
"fragment",
|
|
241
|
+
"queryParamsHandling",
|
|
242
|
+
"state",
|
|
243
|
+
"info",
|
|
244
|
+
"relativeTo",
|
|
245
|
+
"preserveFragment",
|
|
246
|
+
"skipLocationChange",
|
|
247
|
+
"replaceUrl",
|
|
248
|
+
"browserUrl",
|
|
249
|
+
"routerLink"
|
|
250
|
+
]
|
|
251
|
+
}
|
|
252
|
+
],
|
|
179
253
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
180
254
|
});
|
|
181
255
|
};
|
|
@@ -189,12 +263,17 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
189
263
|
args: [{
|
|
190
264
|
selector: "lc-card",
|
|
191
265
|
standalone: true,
|
|
192
|
-
imports: [
|
|
266
|
+
imports: [
|
|
267
|
+
IconComponent,
|
|
268
|
+
NgTemplateOutlet,
|
|
269
|
+
RouterLink
|
|
270
|
+
],
|
|
193
271
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
194
|
-
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]=\"
|
|
195
|
-
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{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-
|
|
272
|
+
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 (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\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\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",
|
|
273
|
+
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 ::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))}\n"]
|
|
196
274
|
}]
|
|
197
275
|
}],
|
|
276
|
+
ctorParameters: () => [],
|
|
198
277
|
propDecorators: {
|
|
199
278
|
title: [{
|
|
200
279
|
type: i0.Input,
|
|
@@ -308,6 +387,30 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
308
387
|
required: false
|
|
309
388
|
}]
|
|
310
389
|
}],
|
|
390
|
+
href: [{
|
|
391
|
+
type: i0.Input,
|
|
392
|
+
args: [{
|
|
393
|
+
isSignal: true,
|
|
394
|
+
alias: "href",
|
|
395
|
+
required: false
|
|
396
|
+
}]
|
|
397
|
+
}],
|
|
398
|
+
route: [{
|
|
399
|
+
type: i0.Input,
|
|
400
|
+
args: [{
|
|
401
|
+
isSignal: true,
|
|
402
|
+
alias: "route",
|
|
403
|
+
required: false
|
|
404
|
+
}]
|
|
405
|
+
}],
|
|
406
|
+
queryParams: [{
|
|
407
|
+
type: i0.Input,
|
|
408
|
+
args: [{
|
|
409
|
+
isSignal: true,
|
|
410
|
+
alias: "queryParams",
|
|
411
|
+
required: false
|
|
412
|
+
}]
|
|
413
|
+
}],
|
|
311
414
|
cardClick: [{
|
|
312
415
|
type: i0.Output,
|
|
313
416
|
args: ["cardClick"]
|
|
@@ -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 output,\n HostListener,\n computed,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\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/**\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 *\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 & profile\" icon=\"git-branch\">\n * ...\n * </lc-card>\n * ```\n */\n@Component({\n selector: 'lc-card',\n standalone: true,\n imports: [IconComponent],\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\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 * @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)\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 * ARIA label for accessibility\n */\n ariaLabel = input<string | undefined>(undefined);\n\n /**\n * Emitted when card is clicked (if clickable)\n */\n readonly cardClick = output<MouseEvent>();\n\n /**\n * Whether the card acts as a button: `clickable`, except for the dashed\n * \"coming soon\" tile, which is never interactive.\n */\n protected isClickable = computed(() => this.clickable() && this.variant() !== 'dashed');\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 // 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 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]=\"ariaLabel()\"\n [attr.tabindex]=\"isClickable() ? 0 : null\"\n (click)=\"handleClick($event)\"\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 @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 <!-- 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\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\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 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 } from '@lifecorner/angular-ui-kit/icon';\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/** 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 *\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 & 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 */\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})\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 * 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 /**\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.\n */\n protected readonly linkMode = computed<'href' | 'route' | null>(() => {\n if (this.variant() === 'dashed') 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, and a link card, whose\n * anchor is the only interactive element.\n */\n protected isClickable = computed(\n () => this.clickable() && this.variant() !== 'dashed' && !this.linkMode(),\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.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 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 (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\">{{ subtitle() }}</p>\n }\n </div>\n <div class=\"card__header-action\">\n <ng-content select=\"[card-header-action]\"></ng-content>\n </div>\n </div>\n }\n <ng-content select=\"[card-header]\"></ng-content>\n <div class=\"card__body\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[card-footer]\"></ng-content>\n</div>\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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"}
|
|
@@ -2,6 +2,18 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
import { ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from "@angular/core";
|
|
3
3
|
import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
|
|
4
4
|
import { ICON_FILE, ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
|
|
5
|
+
const MIME_PART = "[!#$%&'*+.^_`|~0-9a-z-]+";
|
|
6
|
+
const MIME_TOKEN = new RegExp(`^${MIME_PART}/${MIME_PART}$`);
|
|
7
|
+
function isAcceptToken(token) {
|
|
8
|
+
return token.length > 1 && token.startsWith(".") || MIME_TOKEN.test(token);
|
|
9
|
+
}
|
|
10
|
+
function matchesToken(file, token) {
|
|
11
|
+
if (token.startsWith(".")) return (file.name || "").toLowerCase().endsWith(token);
|
|
12
|
+
const type = (file.type || "").toLowerCase();
|
|
13
|
+
if (token === "*/*") return true;
|
|
14
|
+
if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
|
|
15
|
+
return type === token;
|
|
16
|
+
}
|
|
5
17
|
var FileUploadComponent = class FileUploadComponent {
|
|
6
18
|
accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
|
|
7
19
|
multiple = input(false, ...ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []);
|
|
@@ -11,6 +23,7 @@ var FileUploadComponent = class FileUploadComponent {
|
|
|
11
23
|
acceptedLabel = input("Accepted:", ...ngDevMode ? [{ debugName: "acceptedLabel" }] : /* istanbul ignore next */ []);
|
|
12
24
|
maxSizeLabel = input("Max:", ...ngDevMode ? [{ debugName: "maxSizeLabel" }] : /* istanbul ignore next */ []);
|
|
13
25
|
removeFileAriaLabel = input("Remove file", ...ngDevMode ? [{ debugName: "removeFileAriaLabel" }] : /* istanbul ignore next */ []);
|
|
26
|
+
locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
|
|
14
27
|
filesSelected = output();
|
|
15
28
|
fileRejected = output();
|
|
16
29
|
isDragOver = signal(false, ...ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []);
|
|
@@ -28,6 +41,25 @@ var FileUploadComponent = class FileUploadComponent {
|
|
|
28
41
|
this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : "",
|
|
29
42
|
this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : ""
|
|
30
43
|
].filter(Boolean).join(", "), ...ngDevMode ? [{ debugName: "dropzoneAriaLabel" }] : /* istanbul ignore next */ []);
|
|
44
|
+
sizeFormats = computed(() => {
|
|
45
|
+
const locale = this.locale();
|
|
46
|
+
if (!locale) return null;
|
|
47
|
+
try {
|
|
48
|
+
return {
|
|
49
|
+
whole: new Intl.NumberFormat(locale, {
|
|
50
|
+
minimumFractionDigits: 0,
|
|
51
|
+
maximumFractionDigits: 0
|
|
52
|
+
}),
|
|
53
|
+
tenths: new Intl.NumberFormat(locale, {
|
|
54
|
+
minimumFractionDigits: 1,
|
|
55
|
+
maximumFractionDigits: 1
|
|
56
|
+
})
|
|
57
|
+
};
|
|
58
|
+
} catch {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
}, ...ngDevMode ? [{ debugName: "sizeFormats" }] : /* istanbul ignore next */ []);
|
|
62
|
+
acceptTokens = computed(() => (this.accept() || "").split(",").map((token) => token.trim().toLowerCase()).filter(isAcceptToken), ...ngDevMode ? [{ debugName: "acceptTokens" }] : /* istanbul ignore next */ []);
|
|
31
63
|
onDragOver(event) {
|
|
32
64
|
event.preventDefault();
|
|
33
65
|
event.stopPropagation();
|
|
@@ -58,19 +90,37 @@ var FileUploadComponent = class FileUploadComponent {
|
|
|
58
90
|
this.filesSelected.emit(this.selectedFiles());
|
|
59
91
|
}
|
|
60
92
|
formatSize(bytes) {
|
|
93
|
+
const formats = this.sizeFormats();
|
|
94
|
+
if (formats) {
|
|
95
|
+
if (bytes < 1024) return `${formats.whole.format(bytes)} B`;
|
|
96
|
+
if (bytes < 1048576) return `${formats.tenths.format(bytes / 1024)} KB`;
|
|
97
|
+
return `${formats.tenths.format(bytes / 1048576)} MB`;
|
|
98
|
+
}
|
|
61
99
|
if (bytes < 1024) return `${bytes} B`;
|
|
62
100
|
if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
63
101
|
return `${(bytes / 1048576).toFixed(1)} MB`;
|
|
64
102
|
}
|
|
103
|
+
rejectionOf(file) {
|
|
104
|
+
const tokens = this.acceptTokens();
|
|
105
|
+
if (tokens.length && !tokens.some((token) => matchesToken(file, token))) return {
|
|
106
|
+
file,
|
|
107
|
+
reason: "File type not accepted",
|
|
108
|
+
code: "type"
|
|
109
|
+
};
|
|
110
|
+
if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) return {
|
|
111
|
+
file,
|
|
112
|
+
reason: "File too large",
|
|
113
|
+
code: "size"
|
|
114
|
+
};
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
65
117
|
processFiles(fileList) {
|
|
66
118
|
const files = Array.from(fileList);
|
|
67
119
|
const accepted = [];
|
|
68
120
|
for (const file of files) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
reason: "File too large"
|
|
73
|
-
});
|
|
121
|
+
const rejection = this.rejectionOf(file);
|
|
122
|
+
if (rejection) {
|
|
123
|
+
this.fileRejected.emit(rejection);
|
|
74
124
|
continue;
|
|
75
125
|
}
|
|
76
126
|
accepted.push({
|
|
@@ -154,6 +204,13 @@ var FileUploadComponent = class FileUploadComponent {
|
|
|
154
204
|
isSignal: true,
|
|
155
205
|
isRequired: false,
|
|
156
206
|
transformFunction: null
|
|
207
|
+
},
|
|
208
|
+
locale: {
|
|
209
|
+
classPropertyName: "locale",
|
|
210
|
+
publicName: "locale",
|
|
211
|
+
isSignal: true,
|
|
212
|
+
isRequired: false,
|
|
213
|
+
transformFunction: null
|
|
157
214
|
}
|
|
158
215
|
},
|
|
159
216
|
outputs: {
|
|
@@ -270,6 +327,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
270
327
|
required: false
|
|
271
328
|
}]
|
|
272
329
|
}],
|
|
330
|
+
locale: [{
|
|
331
|
+
type: i0.Input,
|
|
332
|
+
args: [{
|
|
333
|
+
isSignal: true,
|
|
334
|
+
alias: "locale",
|
|
335
|
+
required: false
|
|
336
|
+
}]
|
|
337
|
+
}],
|
|
273
338
|
filesSelected: [{
|
|
274
339
|
type: i0.Output,
|
|
275
340
|
args: ["filesSelected"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/**\n * File upload / dropzone component with drag & drop support.\n *\n * @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n */\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * File upload component with drag-and-drop support.\n *\n * Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation\n * - Multi-file upload support\n * - File list display with removal\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n */\nexport class FileUploadComponent {\n /**\n * Accepted file types (e.g. \".pdf,.jpg,image/*\").\n */\n accept = input<string>('');\n\n /**\n * Allow multiple files.\n * @default false\n */\n multiple = input<boolean>(false);\n\n /**\n * Maximum file size in bytes. 0 for unlimited.\n * @default 0\n */\n maxSizeBytes = input<number>(0);\n\n /**\n * Whether the dropzone is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Hint text shown in the dropzone. The drop zone's accessible name is\n * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3\n * Label in Name).\n * @default 'Drag & drop files here, or click to browse'\n */\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /**\n * Prefix of the accepted file types line (`accept`). The shown line is part\n * of the drop zone's accessible name, after `hint`.\n * @default 'Accepted:'\n */\n acceptedLabel = input('Accepted:');\n\n /**\n * Prefix of the maximum file size line (`maxSizeBytes`). The shown line is\n * part of the drop zone's accessible name, after `hint`.\n * @default 'Max:'\n */\n maxSizeLabel = input('Max:');\n\n /** Accessible name of a selected file's remove button. */\n removeFileAriaLabel = input('Remove file');\n\n /**\n * Emitted with selected files after validation.\n */\n readonly filesSelected = output<FileUploadFile[]>();\n\n /**\n * Emitted when a file is rejected (too large or wrong type).\n */\n readonly fileRejected = output<{ file: File; reason: string }>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n /**\n * Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the\n * accepted and max lines it shows, comma-separated.\n */\n protected readonly dropzoneAriaLabel = computed(() =>\n [\n this.hint(),\n this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : '',\n this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : '',\n ]\n .filter(Boolean)\n .join(', '),\n );\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() || !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n this.fileRejected.emit({ file, reason: 'File too large' });\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-file-upload.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.ts","../../../../libs/angular-ui-kit/src/lib/file-upload/file-upload.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n output,\n signal,\n computed,\n ElementRef,\n viewChild,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_FILE, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\n\nexport interface FileUploadFile {\n file: File;\n name: string;\n size: number;\n type: string;\n}\n\n/** Why `lc-file-upload` rejected a file. */\nexport type FileUploadRejectionCode = 'size' | 'type';\n\n/** Payload of `lc-file-upload`'s `fileRejected`. */\nexport interface FileUploadRejection {\n file: File;\n /** Fixed English text (\"File type not accepted\", \"File too large\"); translate from `code`. */\n reason: string;\n /** `'type'`: matches no `accept` token (checked first); `'size'`: over `maxSizeBytes`. */\n code: FileUploadRejectionCode;\n}\n\n/** RFC 9110 `token` (lower-cased): one MIME type or subtype, without parameters. */\nconst MIME_PART = \"[!#$%&'*+.^_`|~0-9a-z-]+\";\nconst MIME_TOKEN = new RegExp(`^${MIME_PART}/${MIME_PART}$`);\n\n/**\n * Whether `token` is an `accept` token the check knows: `.ext`, `type/subtype`\n * or `type/*`. A MIME type with parameters (`text/csv;charset=utf-8`) is not\n * one, as for Chromium's picker.\n */\nfunction isAcceptToken(token: string): boolean {\n return (token.length > 1 && token.startsWith('.')) || MIME_TOKEN.test(token);\n}\n\n/** Whether `file` matches one `accept` token (lower-cased). The any-type wildcard matches every file. */\nfunction matchesToken(file: File, token: string): boolean {\n if (token.startsWith('.')) return (file.name || '').toLowerCase().endsWith(token);\n const type = (file.type || '').toLowerCase();\n if (token === '*/*') return true;\n if (token.endsWith('/*')) return type.startsWith(token.slice(0, -1));\n return type === token;\n}\n\n/**\n * File upload / dropzone component with drag & drop support.\n *\n * @example\n * ```html\n * <lc-file-upload\n * accept=\".pdf,.png,.jpg\"\n * [multiple]=\"true\"\n * [maxSizeBytes]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></lc-file-upload>\n * ```\n */\n@Component({\n selector: 'lc-file-upload',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_FILE, ICON_X_MARK])],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * File upload component with drag-and-drop support.\n *\n * Features:\n * - Drag-and-drop file dropzone with visual feedback\n * - Click-to-browse file selection\n * - File type and size validation, the same for picked and dropped files\n * (3.24): type first (`accept`), then size (`maxSizeBytes`); a file that\n * fails emits one `fileRejected` (`{ file, reason, code }`, `code` `'type'`\n * or `'size'`), before `filesSelected`. The kit shows no rejection message:\n * show your own, translated from `code`.\n * - Multi-file upload support. With `multiple=false` a new pick or drop\n * replaces the selection with its first accepted file; if all its files\n * are rejected, the selection is cleared and `filesSelected` emits `[]`.\n * - File list display with removal\n * - Sizes in the page's notation with `locale` (3.24, `'de-DE'`: \"20,0 MB\")\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-file-upload accept=\".pdf,.jpg\" [multiple]=\"true\" [maxSizeBytes]=\"5242880\" />\n * ```\n */\nexport class FileUploadComponent {\n /**\n * Accepted types, comma-separated, case-insensitive: extensions (`.csv`),\n * MIME types (`text/csv`), wildcards (`image/*`); `*\\/*` accepts every type.\n * Since 3.24 checked for picked and dropped files alike; a file matching no\n * token is rejected with `code: 'type'`. Tokens that are neither, such as a\n * MIME type with parameters (`text/csv;charset=utf-8`), are ignored, as by\n * the browser's picker; none left = every type. Prefer extensions: systems report MIME\n * types differently (a CSV can arrive as `application/vnd.ms-excel`).\n * @default ''\n */\n accept = input<string>('');\n\n /**\n * Allow multiple files. `false`: one file. A new pick or drop replaces the\n * selection with its first accepted file; if all its files are rejected\n * (size or type), the selection is cleared and `filesSelected` emits `[]`.\n * `true`: accepted files are added to the selection.\n * @default false\n */\n multiple = input<boolean>(false);\n\n /**\n * Maximum file size in bytes. 0 for unlimited.\n * @default 0\n */\n maxSizeBytes = input<number>(0);\n\n /**\n * Whether the dropzone is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Hint text shown in the dropzone. The drop zone's accessible name is\n * `hint`, then the shown accepted and max lines, comma-separated (WCAG 2.5.3\n * Label in Name).\n * @default 'Drag & drop files here, or click to browse'\n */\n hint = input<string>('Drag & drop files here, or click to browse');\n\n /**\n * Prefix of the accepted file types line (`accept`). The shown line is part\n * of the drop zone's accessible name, after `hint`.\n * @default 'Accepted:'\n */\n acceptedLabel = input('Accepted:');\n\n /**\n * Prefix of the maximum file size line (`maxSizeBytes`). The shown line is\n * part of the drop zone's accessible name, after `hint`.\n * @default 'Max:'\n */\n maxSizeLabel = input('Max:');\n\n /** Accessible name of a selected file's remove button. */\n removeFileAriaLabel = input('Remove file');\n\n /**\n * BCP 47 locale of the shown sizes (max line, drop zone name, file list):\n * `'de-DE'` gives \"20,0 MB\". Units stay B/KB/MB (1024 base). Empty keeps\n * the built-in notation (\"20.0 MB\"); an invalid locale falls back to it.\n * @default ''\n */\n locale = input<string>('');\n\n /**\n * Emitted with selected files after validation.\n */\n readonly filesSelected = output<FileUploadFile[]>();\n\n /**\n * Emitted once per rejected file, before `filesSelected`. `code`: `'type'`\n * (matches no `accept` token; checked first) or `'size'` (over\n * `maxSizeBytes`). `reason` is a fixed English text (\"File type not\n * accepted\", \"File too large\"); translate from `code`.\n */\n readonly fileRejected = output<FileUploadRejection>();\n\n protected isDragOver = signal(false);\n protected selectedFiles = signal<FileUploadFile[]>([]);\n protected readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n protected dropzoneClasses = computed(() => {\n return [\n 'file-upload',\n this.isDragOver() ? 'file-upload--drag-over' : '',\n this.disabled() ? 'file-upload--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n /**\n * Name of the drop zone (AS-33, WCAG 2.5.3 Label in Name): `hint`, then the\n * accepted and max lines it shows, comma-separated.\n */\n protected readonly dropzoneAriaLabel = computed(() =>\n [\n this.hint(),\n this.accept() ? `${this.acceptedLabel()} ${this.accept()}` : '',\n this.maxSizeBytes() > 0 ? `${this.maxSizeLabel()} ${this.formatSize(this.maxSizeBytes())}` : '',\n ]\n .filter(Boolean)\n .join(', '),\n );\n\n /**\n * The size notation of `locale` (3.24): whole bytes, KB/MB to one decimal.\n * Null keeps the built-in `toFixed` notation (no or an invalid locale).\n */\n private readonly sizeFormats = computed(() => {\n const locale = this.locale();\n if (!locale) return null;\n try {\n return {\n whole: new Intl.NumberFormat(locale, { minimumFractionDigits: 0, maximumFractionDigits: 0 }),\n tenths: new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }),\n };\n } catch {\n return null;\n }\n });\n\n /** The `accept` tokens the check knows, lower-cased; empty = every type. */\n private readonly acceptTokens = computed(() =>\n // `|| ''`: an untyped template may bind null, as it could before 3.24.\n (this.accept() || '')\n .split(',')\n .map((token) => token.trim().toLowerCase())\n .filter(isAcceptToken),\n );\n\n protected onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this.isDragOver.set(true);\n }\n }\n\n protected onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n }\n\n protected onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver.set(false);\n if (this.disabled() || !event.dataTransfer?.files.length) return;\n this.processFiles(event.dataTransfer.files);\n }\n\n protected onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files?.length) {\n this.processFiles(input.files);\n }\n // Reset so the same file can be re-selected\n input.value = '';\n }\n\n protected openFilePicker(): void {\n if (!this.disabled()) {\n this.fileInputRef()?.nativeElement.click();\n }\n }\n\n protected removeFile(index: number): void {\n this.selectedFiles.update((files) => files.filter((_, i) => i !== index));\n this.filesSelected.emit(this.selectedFiles());\n }\n\n protected formatSize(bytes: number): string {\n const formats = this.sizeFormats();\n if (formats) {\n if (bytes < 1024) return `${formats.whole.format(bytes)} B`;\n if (bytes < 1024 * 1024) return `${formats.tenths.format(bytes / 1024)} KB`;\n return `${formats.tenths.format(bytes / (1024 * 1024))} MB`;\n }\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n }\n\n /** Why `file` is rejected: type first, then size; null when it is accepted. */\n private rejectionOf(file: File): FileUploadRejection | null {\n const tokens = this.acceptTokens();\n if (tokens.length && !tokens.some((token) => matchesToken(file, token))) {\n return { file, reason: 'File type not accepted', code: 'type' };\n }\n if (this.maxSizeBytes() > 0 && file.size > this.maxSizeBytes()) {\n return { file, reason: 'File too large', code: 'size' };\n }\n return null;\n }\n\n private processFiles(fileList: FileList): void {\n const files = Array.from(fileList);\n const accepted: FileUploadFile[] = [];\n\n for (const file of files) {\n const rejection = this.rejectionOf(file);\n if (rejection) {\n this.fileRejected.emit(rejection);\n continue;\n }\n accepted.push({\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n });\n }\n\n if (this.multiple()) {\n this.selectedFiles.update((prev) => [...prev, ...accepted]);\n } else {\n this.selectedFiles.set(accepted.slice(0, 1));\n }\n\n this.filesSelected.emit(this.selectedFiles());\n }\n}\n","<div\n [class]=\"dropzoneClasses()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFilePicker()\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n [attr.aria-label]=\"dropzoneAriaLabel()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <input\n #fileInput\n type=\"file\"\n class=\"file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"file-upload__content\">\n <lc-icon name=\"cloud-arrow-up\" class=\"file-upload__icon\" [decorative]=\"true\"></lc-icon>\n <!-- Real spaces between the lines, so the visible text reads as words\n that the drop zone's name contains (WCAG 2.5.3). -->\n <p class=\"file-upload__hint\">{{ hint() }}</p>\n @if (accept()) {\n &ngsp;<p class=\"file-upload__accept\">{{ acceptedLabel() }} {{ accept() }}</p>\n }\n @if (maxSizeBytes() > 0) {\n &ngsp;<p class=\"file-upload__accept\">{{ maxSizeLabel() }} {{ formatSize(maxSizeBytes()) }}</p>\n }\n </div>\n</div>\n\n@if (selectedFiles().length > 0) {\n <ul class=\"file-upload__list\">\n @for (f of selectedFiles(); track f.name; let i = $index) {\n <li class=\"file-upload__file\">\n <lc-icon name=\"document\" class=\"file-upload__file-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"file-upload__file-name\">{{ f.name }}</span>\n <span class=\"file-upload__file-size\">{{ formatSize(f.size) }}</span>\n <button\n type=\"button\"\n class=\"file-upload__file-remove\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"removeFileAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" [decorative]=\"true\"></lc-icon>\n </button>\n </li>\n }\n </ul>\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -125,7 +125,9 @@ export declare class AccordionComponent {
|
|
|
125
125
|
* background or inline inset, so the title, chevron and body line up with
|
|
126
126
|
* the content edge of the sheet or card around it; the hover background and
|
|
127
127
|
* focus ring reach 8 px past that edge (`--lc-accordion-header-bleed`), so
|
|
128
|
-
* keep that much room before a clipping edge
|
|
128
|
+
* keep that much room before a clipping or scrolling edge (`overflow: hidden`
|
|
129
|
+
* or `overflow-x: auto`). The hook takes a length; `0px` puts them on the
|
|
130
|
+
* edge.
|
|
129
131
|
* @default 'outlined'
|
|
130
132
|
*/
|
|
131
133
|
readonly variant: import("@angular/core").InputSignal<AccordionVariant>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Params } from "@angular/router";
|
|
1
2
|
import * as i0 from "@angular/core";
|
|
2
3
|
/** Visual variant of `lc-card`. */
|
|
3
4
|
export type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';
|
|
@@ -12,6 +13,8 @@ export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
|
|
|
12
13
|
* - Border radius options (none, sm, md, lg, xl, full)
|
|
13
14
|
* - Optional title display, with an optional leading icon tile
|
|
14
15
|
* - Content projection for flexible body content
|
|
16
|
+
* - Link mode (3.24): `href` or `route` make the whole card a real link,
|
|
17
|
+
* the title stays a heading
|
|
15
18
|
*
|
|
16
19
|
* @example
|
|
17
20
|
* ```html
|
|
@@ -23,6 +26,12 @@ export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
|
|
|
23
26
|
* <lc-card title="Repository" subtitle="Checkout & profile" icon="git-branch">
|
|
24
27
|
* ...
|
|
25
28
|
* </lc-card>
|
|
29
|
+
*
|
|
30
|
+
* <!-- An overview card that opens a page: heading h2 with a link inside -->
|
|
31
|
+
* <lc-card title="SAP-Ist" variant="outlined" [headingLevel]="2"
|
|
32
|
+
* [route]="['/quellen', 'sap-ist']" [queryParams]="{ ansicht: 'laeufe' }">
|
|
33
|
+
* ...
|
|
34
|
+
* </lc-card>
|
|
26
35
|
* ```
|
|
27
36
|
*/
|
|
28
37
|
export declare class CardComponent {
|
|
@@ -75,7 +84,8 @@ export declare class CardComponent {
|
|
|
75
84
|
* `--shadow-auth-card`, no accent line — the sign-in card
|
|
76
85
|
* - dashed: the muted "coming soon" tile — `--color-muted-tile` fill, 1 px
|
|
77
86
|
* dashed `--color-muted-tile-border`, secondary ink, icons in
|
|
78
|
-
* `--color-muted-tile-icon`. Never clickable: `clickable` is ignored
|
|
87
|
+
* `--color-muted-tile-icon`. Never clickable: `clickable` is ignored;
|
|
88
|
+
* `href` and `route` are ignored too
|
|
79
89
|
* @default 'elevated'
|
|
80
90
|
*/
|
|
81
91
|
variant: import("@angular/core").InputSignal<CardVariant>;
|
|
@@ -85,7 +95,8 @@ export declare class CardComponent {
|
|
|
85
95
|
*/
|
|
86
96
|
padding: import("@angular/core").InputSignal<"sm" | "md" | "none" | "xs" | "lg">;
|
|
87
97
|
/**
|
|
88
|
-
* Whether the card is clickable (hover effects, cursor pointer)
|
|
98
|
+
* Whether the card is clickable (hover effects, cursor pointer). Has no
|
|
99
|
+
* effect on a link card (`href`/`route`).
|
|
89
100
|
* @default false
|
|
90
101
|
*/
|
|
91
102
|
clickable: import("@angular/core").InputSignal<boolean>;
|
|
@@ -107,18 +118,60 @@ export declare class CardComponent {
|
|
|
107
118
|
*/
|
|
108
119
|
headingLevel: import("@angular/core").InputSignal<CardHeadingLevel>;
|
|
109
120
|
/**
|
|
110
|
-
*
|
|
121
|
+
* Accessible name. On a link card (`href`/`route`) it names the link
|
|
122
|
+
* instead of the card; it must contain the visible title (WCAG 2.5.3) and
|
|
123
|
+
* the heading reads it too, so keep it short. Without it the link is named
|
|
124
|
+
* by the title, and the card's content (badge, list) is read as normal
|
|
125
|
+
* content. On other cards it labels the card.
|
|
126
|
+
* @default undefined
|
|
111
127
|
*/
|
|
112
128
|
ariaLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
113
129
|
/**
|
|
114
|
-
*
|
|
130
|
+
* URL the card links to (3.24, quellen row 1). The card becomes a real
|
|
131
|
+
* link: the built-in `title` is an `<a href>` inside its heading, and the
|
|
132
|
+
* link covers the whole card (click, Enter, middle click, "open in new
|
|
133
|
+
* tab", "copy link"). No router needed; works in prerendered HTML. Wins
|
|
134
|
+
* over `route`. Ignored by `dashed`. On a link card `clickable` has no
|
|
135
|
+
* effect and `cardClick` is not emitted.
|
|
136
|
+
* @default undefined
|
|
137
|
+
*/
|
|
138
|
+
href: import("@angular/core").InputSignal<string | undefined>;
|
|
139
|
+
/**
|
|
140
|
+
* In-app route the card links to through the Angular router (`RouterLink`
|
|
141
|
+
* commands: `'/quellen/usm'` or `['/quellen', id]`), relative to the
|
|
142
|
+
* consumer's route, rendered as a real `<a href>` like `href`. Needs the
|
|
143
|
+
* app's router (`provideRouter`); without one, use `href`. `''` and `null`
|
|
144
|
+
* mean no link.
|
|
145
|
+
* @default undefined
|
|
146
|
+
*/
|
|
147
|
+
route: import("@angular/core").InputSignal<string | readonly unknown[] | null | undefined>;
|
|
148
|
+
/**
|
|
149
|
+
* Query parameters of `route`, as `RouterLink`'s `queryParams`
|
|
150
|
+
* (`{ ansicht: 'laeufe' }`). Ignored with `href` (write the query into the
|
|
151
|
+
* URL).
|
|
152
|
+
* @default undefined
|
|
153
|
+
*/
|
|
154
|
+
queryParams: import("@angular/core").InputSignal<Params | null | undefined>;
|
|
155
|
+
/**
|
|
156
|
+
* Emitted when a `clickable` card is clicked or activated with Enter or
|
|
157
|
+
* Space. Not emitted on a link card (`href`/`route`): the link navigates by
|
|
158
|
+
* itself (one navigation); bind the native `(click)` for analytics.
|
|
115
159
|
*/
|
|
116
160
|
readonly cardClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
|
|
161
|
+
/**
|
|
162
|
+
* How the card links (3.24): `href` wins over `route`; `''`/`null` routes
|
|
163
|
+
* are no link, and the dashed "coming soon" tile never links.
|
|
164
|
+
*/
|
|
165
|
+
protected readonly linkMode: import("@angular/core").Signal<"href" | "route" | null>;
|
|
117
166
|
/**
|
|
118
167
|
* Whether the card acts as a button: `clickable`, except for the dashed
|
|
119
|
-
* "coming soon" tile, which is never interactive
|
|
168
|
+
* "coming soon" tile, which is never interactive, and a link card, whose
|
|
169
|
+
* anchor is the only interactive element.
|
|
120
170
|
*/
|
|
121
171
|
protected isClickable: import("@angular/core").Signal<boolean>;
|
|
172
|
+
/** `ariaLabel` on the card; on a link card it names the anchor instead. */
|
|
173
|
+
protected readonly cardAriaLabel: import("@angular/core").Signal<string | undefined>;
|
|
174
|
+
constructor();
|
|
122
175
|
/**
|
|
123
176
|
* Compute card CSS classes based on inputs
|
|
124
177
|
*/
|
|
@@ -207,6 +260,21 @@ export declare class CardComponent {
|
|
|
207
260
|
"required": false;
|
|
208
261
|
"isSignal": true;
|
|
209
262
|
};
|
|
263
|
+
"href": {
|
|
264
|
+
"alias": "href";
|
|
265
|
+
"required": false;
|
|
266
|
+
"isSignal": true;
|
|
267
|
+
};
|
|
268
|
+
"route": {
|
|
269
|
+
"alias": "route";
|
|
270
|
+
"required": false;
|
|
271
|
+
"isSignal": true;
|
|
272
|
+
};
|
|
273
|
+
"queryParams": {
|
|
274
|
+
"alias": "queryParams";
|
|
275
|
+
"required": false;
|
|
276
|
+
"isSignal": true;
|
|
277
|
+
};
|
|
210
278
|
}, {
|
|
211
279
|
"cardClick": "cardClick";
|
|
212
280
|
}, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
|
|
@@ -6,6 +6,16 @@ export interface FileUploadFile {
|
|
|
6
6
|
size: number;
|
|
7
7
|
type: string;
|
|
8
8
|
}
|
|
9
|
+
/** Why `lc-file-upload` rejected a file. */
|
|
10
|
+
export type FileUploadRejectionCode = 'size' | 'type';
|
|
11
|
+
/** Payload of `lc-file-upload`'s `fileRejected`. */
|
|
12
|
+
export interface FileUploadRejection {
|
|
13
|
+
file: File;
|
|
14
|
+
/** Fixed English text ("File type not accepted", "File too large"); translate from `code`. */
|
|
15
|
+
reason: string;
|
|
16
|
+
/** `'type'`: matches no `accept` token (checked first); `'size'`: over `maxSizeBytes`. */
|
|
17
|
+
code: FileUploadRejectionCode;
|
|
18
|
+
}
|
|
9
19
|
/**
|
|
10
20
|
* File upload / dropzone component with drag & drop support.
|
|
11
21
|
*
|
|
@@ -21,11 +31,21 @@ export interface FileUploadFile {
|
|
|
21
31
|
*/
|
|
22
32
|
export declare class FileUploadComponent {
|
|
23
33
|
/**
|
|
24
|
-
* Accepted
|
|
34
|
+
* Accepted types, comma-separated, case-insensitive: extensions (`.csv`),
|
|
35
|
+
* MIME types (`text/csv`), wildcards (`image/*`); `*\/*` accepts every type.
|
|
36
|
+
* Since 3.24 checked for picked and dropped files alike; a file matching no
|
|
37
|
+
* token is rejected with `code: 'type'`. Tokens that are neither, such as a
|
|
38
|
+
* MIME type with parameters (`text/csv;charset=utf-8`), are ignored, as by
|
|
39
|
+
* the browser's picker; none left = every type. Prefer extensions: systems report MIME
|
|
40
|
+
* types differently (a CSV can arrive as `application/vnd.ms-excel`).
|
|
41
|
+
* @default ''
|
|
25
42
|
*/
|
|
26
43
|
accept: import("@angular/core").InputSignal<string>;
|
|
27
44
|
/**
|
|
28
|
-
* Allow multiple files.
|
|
45
|
+
* Allow multiple files. `false`: one file. A new pick or drop replaces the
|
|
46
|
+
* selection with its first accepted file; if all its files are rejected
|
|
47
|
+
* (size or type), the selection is cleared and `filesSelected` emits `[]`.
|
|
48
|
+
* `true`: accepted files are added to the selection.
|
|
29
49
|
* @default false
|
|
30
50
|
*/
|
|
31
51
|
multiple: import("@angular/core").InputSignal<boolean>;
|
|
@@ -60,17 +80,24 @@ export declare class FileUploadComponent {
|
|
|
60
80
|
maxSizeLabel: import("@angular/core").InputSignal<string>;
|
|
61
81
|
/** Accessible name of a selected file's remove button. */
|
|
62
82
|
removeFileAriaLabel: import("@angular/core").InputSignal<string>;
|
|
83
|
+
/**
|
|
84
|
+
* BCP 47 locale of the shown sizes (max line, drop zone name, file list):
|
|
85
|
+
* `'de-DE'` gives "20,0 MB". Units stay B/KB/MB (1024 base). Empty keeps
|
|
86
|
+
* the built-in notation ("20.0 MB"); an invalid locale falls back to it.
|
|
87
|
+
* @default ''
|
|
88
|
+
*/
|
|
89
|
+
locale: import("@angular/core").InputSignal<string>;
|
|
63
90
|
/**
|
|
64
91
|
* Emitted with selected files after validation.
|
|
65
92
|
*/
|
|
66
93
|
readonly filesSelected: import("@angular/core").OutputEmitterRef<FileUploadFile[]>;
|
|
67
94
|
/**
|
|
68
|
-
* Emitted
|
|
95
|
+
* Emitted once per rejected file, before `filesSelected`. `code`: `'type'`
|
|
96
|
+
* (matches no `accept` token; checked first) or `'size'` (over
|
|
97
|
+
* `maxSizeBytes`). `reason` is a fixed English text ("File type not
|
|
98
|
+
* accepted", "File too large"); translate from `code`.
|
|
69
99
|
*/
|
|
70
|
-
readonly fileRejected: import("@angular/core").OutputEmitterRef<
|
|
71
|
-
file: File;
|
|
72
|
-
reason: string;
|
|
73
|
-
}>;
|
|
100
|
+
readonly fileRejected: import("@angular/core").OutputEmitterRef<FileUploadRejection>;
|
|
74
101
|
protected isDragOver: import("@angular/core").WritableSignal<boolean>;
|
|
75
102
|
protected selectedFiles: import("@angular/core").WritableSignal<FileUploadFile[]>;
|
|
76
103
|
protected readonly fileInputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
@@ -80,6 +107,13 @@ export declare class FileUploadComponent {
|
|
|
80
107
|
* accepted and max lines it shows, comma-separated.
|
|
81
108
|
*/
|
|
82
109
|
protected readonly dropzoneAriaLabel: import("@angular/core").Signal<string>;
|
|
110
|
+
/**
|
|
111
|
+
* The size notation of `locale` (3.24): whole bytes, KB/MB to one decimal.
|
|
112
|
+
* Null keeps the built-in `toFixed` notation (no or an invalid locale).
|
|
113
|
+
*/
|
|
114
|
+
private readonly sizeFormats;
|
|
115
|
+
/** The `accept` tokens the check knows, lower-cased; empty = every type. */
|
|
116
|
+
private readonly acceptTokens;
|
|
83
117
|
protected onDragOver(event: DragEvent): void;
|
|
84
118
|
protected onDragLeave(event: DragEvent): void;
|
|
85
119
|
protected onDrop(event: DragEvent): void;
|
|
@@ -87,6 +121,8 @@ export declare class FileUploadComponent {
|
|
|
87
121
|
protected openFilePicker(): void;
|
|
88
122
|
protected removeFile(index: number): void;
|
|
89
123
|
protected formatSize(bytes: number): string;
|
|
124
|
+
/** Why `file` is rejected: type first, then size; null when it is accepted. */
|
|
125
|
+
private rejectionOf;
|
|
90
126
|
private processFiles;
|
|
91
127
|
static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
|
|
92
128
|
static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "lc-file-upload", never, {
|
|
@@ -130,6 +166,11 @@ export declare class FileUploadComponent {
|
|
|
130
166
|
"required": false;
|
|
131
167
|
"isSignal": true;
|
|
132
168
|
};
|
|
169
|
+
"locale": {
|
|
170
|
+
"alias": "locale";
|
|
171
|
+
"required": false;
|
|
172
|
+
"isSignal": true;
|
|
173
|
+
};
|
|
133
174
|
}, {
|
|
134
175
|
"filesSelected": "filesSelected";
|
|
135
176
|
"fileRejected": "fileRejected";
|