@lifecorner/angular-ui-kit 3.24.1 → 3.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lifecorner-angular-ui-kit-code-block.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-code-block.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs +7 -7
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs +12 -4
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-notification-center.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-number-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-password-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-password-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-slider.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-slider.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tree-view.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-tree-view.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-verification-code-input.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-verification-code-input.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme-contrast.spec.ts +235 -7
- package/types/lifecorner-angular-ui-kit-description-list.d.ts +17 -5
|
@@ -355,7 +355,7 @@ var NotificationCenterComponent = class NotificationCenterComponent {
|
|
|
355
355
|
},
|
|
356
356
|
ngImport: i0,
|
|
357
357
|
template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n",
|
|
358
|
-
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}@media(forced-colors:active){.lc-nc__filter--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:
|
|
358
|
+
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}@media(forced-colors:active){.lc-nc__filter--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-title:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-nc__item-priority--urgent{background:var(--color-error-subtle);color:var(--color-on-error-subtle)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-message,.lc-nc__item--unread .lc-nc__item-time{color:var(--color-text-secondary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-priority,.lc-nc__item--unread .lc-nc__item-category{background-color:var(--color-surface)}.lc-nc__item--unread .lc-nc__item-priority--high{background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle))}.lc-nc__item--unread .lc-nc__item-priority--urgent{background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle))}.lc-nc__item--unread .lc-nc__item-priority--low,.lc-nc__item--unread .lc-nc__item-category{background-image:linear-gradient(var(--color-surface-hover),var(--color-surface-hover))}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-action:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__item-title:focus-visible,.lc-nc__item-action:focus-visible,.lc-nc__item-dismiss:focus-visible{outline-color:Highlight}}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"],
|
|
359
359
|
dependencies: [{
|
|
360
360
|
kind: "component",
|
|
361
361
|
type: IconComponent,
|
|
@@ -418,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
418
418
|
])],
|
|
419
419
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
420
420
|
template: "<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n",
|
|
421
|
-
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}@media(forced-colors:active){.lc-nc__filter--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:
|
|
421
|
+
styles: [":host{display:block}.lc-nc{border:1px solid var(--color-divider);border-radius:var(--border-radius-lg);background-color:var(--color-surface);background-image:var(--gradient-surface);overflow:hidden}.lc-nc__header{display:flex;flex-wrap:wrap;row-gap:var(--spacing-1);align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__header-left{display:flex;align-items:center;gap:8px}.lc-nc__title{margin:0;font-size:var(--typography-font-size-base, 1rem);font-weight:600;color:var(--color-text-primary)}.lc-nc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--border-radius-full);background:var(--color-error-fill);color:var(--color-on-error);font-size:.6875rem;font-weight:600}.lc-nc__header-actions{display:flex;gap:8px;margin-inline-start:auto}.lc-nc__action-btn{border:none;background:none;padding:4px 8px;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;color:var(--color-primary-600);transition:background .15s}.lc-nc__action-btn:hover{background:var(--color-primary-50)}.lc-nc__action-btn--danger{color:var(--color-error-default)}.lc-nc__action-btn--danger:hover{background:#9d0e0e29}.lc-nc__search{padding:8px 16px;border-bottom:1px solid var(--color-divider)}.lc-nc__search-field{width:100%;display:block}.lc-nc__filters{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--color-divider);overflow-x:auto}.lc-nc__filter{border:1px solid var(--color-divider);background:transparent;padding:4px 10px;border-radius:var(--border-radius-full);font-size:.6875rem;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--color-text-secondary);transition:all .15s}.lc-nc__filter:hover:not(.lc-nc__filter--active){background:var(--color-surface-2)}.lc-nc__filter--active{background:var(--color-primary-fill);color:var(--color-on-primary);border-color:var(--color-primary-500)}@media(forced-colors:active){.lc-nc__filter--active:not(:focus-visible){outline:2px solid Highlight;outline-offset:1px}}.lc-nc__list{overflow-y:auto}.lc-nc__group-header{padding:6px 16px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);background:var(--color-surface-2);border-bottom:1px solid var(--color-divider)}.lc-nc__item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-divider);cursor:pointer;transition:background .15s}.lc-nc__item:hover{background:var(--color-surface-2)}.lc-nc__item:last-child{border-bottom:none}.lc-nc__item--unread,.lc-nc__item--unread:hover{background:var(--color-surface-selected)}.lc-nc__item--urgent{border-left:3px solid var(--color-error)}.lc-nc__item-icon{flex-shrink:0;margin-top:2px}.lc-nc__item-icon--info{color:var(--color-on-info-subtle)}.lc-nc__item-icon--success{color:var(--color-on-success-subtle)}.lc-nc__item-icon--warning{color:var(--color-on-warning-subtle)}.lc-nc__item-icon--error{color:var(--color-on-error-subtle)}.lc-nc__item-body{flex:1;min-width:0}.lc-nc__item-header{display:flex;align-items:center;gap:6px}.lc-nc__item-title{display:block;min-width:0;max-width:100%;padding:0;border:none;background:none;font:inherit;font-size:var(--typography-font-size-sm, .875rem);font-weight:500;text-align:left;color:var(--color-text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-nc__item-title:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-title:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item--unread .lc-nc__item-title{font-weight:600}.lc-nc__item-priority{font-size:.625rem;font-weight:600;padding:1px 5px;border-radius:var(--border-radius-sm);flex-shrink:0;text-transform:uppercase}.lc-nc__item-priority--high{background:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-nc__item-priority--urgent{background:var(--color-error-subtle);color:var(--color-on-error-subtle)}.lc-nc__item-priority--low{background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item-message{margin:2px 0 0;font-size:.75rem;color:var(--color-text-tertiary);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lc-nc__item-footer{display:flex;align-items:center;gap:8px;margin-top:4px}.lc-nc__item-time{font-size:.6875rem;color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-message,.lc-nc__item--unread .lc-nc__item-time{color:var(--color-text-secondary)}.lc-nc__item-category{font-size:.625rem;padding:1px 5px;border-radius:var(--border-radius-sm);background:var(--color-surface-hover);color:var(--color-text-tertiary)}.lc-nc__item--unread .lc-nc__item-priority,.lc-nc__item--unread .lc-nc__item-category{background-color:var(--color-surface)}.lc-nc__item--unread .lc-nc__item-priority--high{background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle))}.lc-nc__item--unread .lc-nc__item-priority--urgent{background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle))}.lc-nc__item--unread .lc-nc__item-priority--low,.lc-nc__item--unread .lc-nc__item-category{background-image:linear-gradient(var(--color-surface-hover),var(--color-surface-hover))}.lc-nc__item-action{border:none;background:none;padding:0;font-size:.6875rem;font-weight:600;color:var(--color-primary-600);cursor:pointer}.lc-nc__item-action:hover{text-decoration:underline}.lc-nc__item-action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-nc__item-action:focus-visible{border-radius:var(--border-radius-sm)}.lc-nc__item-dismiss{flex-shrink:0;width:24px;height:24px;border:none;border-radius:var(--border-radius-sm);background:transparent;cursor:pointer;font-size:16px;color:var(--color-text-tertiary);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;opacity:0}.lc-nc__item:hover .lc-nc__item-dismiss,.lc-nc__item:focus-within .lc-nc__item-dismiss{opacity:1}.lc-nc__item-dismiss:hover{background:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-nc__item-dismiss:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(forced-colors:active){.lc-nc__item-title:focus-visible,.lc-nc__item-action:focus-visible,.lc-nc__item-dismiss:focus-visible{outline-color:Highlight}}.lc-nc__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--color-text-tertiary)}.lc-nc__empty-icon{font-size:32px;opacity:.5}.lc-nc__empty-text{font-size:var(--typography-font-size-sm, .875rem)}\n"]
|
|
422
422
|
}]
|
|
423
423
|
}],
|
|
424
424
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-notification-center.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.ts","../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\nimport { SearchInputComponent } from '@lifecorner/angular-ui-kit/search-input';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'error';\nexport type NotificationPriority = 'low' | 'normal' | 'high' | 'urgent';\n\nexport interface Notification {\n id: string;\n title: string;\n message?: string;\n type?: NotificationType;\n priority?: NotificationPriority;\n timestamp: Date;\n read?: boolean;\n icon?: string;\n category?: string;\n actionLabel?: string;\n actionUrl?: string;\n}\n\nconst TYPE_ICONS: Record<NotificationType, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n};\n\nconst PRIORITY_LABELS: Record<NotificationPriority, string> = {\n low: 'Low',\n normal: 'Normal',\n high: 'High',\n urgent: 'Urgent',\n};\n\n@Component({\n selector: 'lc-notification-center',\n standalone: true,\n imports: [IconComponent, SearchInputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './notification-center.component.html',\n styleUrls: ['./notification-center.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationCenterComponent {\n readonly notifications = input.required<Notification[]>();\n readonly title = input('Notifications');\n readonly showFilter = input(true);\n readonly showTimestamp = input(true);\n readonly showPriority = input(false);\n readonly emptyMessage = input('No notifications');\n readonly maxHeight = input('480px');\n readonly groupByCategory = input(false);\n /** Locale used for absolute dates (older than a week). */\n readonly dateLocale = input('de-DE');\n\n /** Label of the mark-all-read action. */\n readonly markAllReadLabel = input('Mark all read');\n\n /** Label of the clear-all action. */\n readonly clearAllLabel = input('Clear all');\n\n /** Placeholder of the search field. */\n readonly searchPlaceholder = input('Search notifications…');\n\n /** Label of the \"all\" filter (the count follows in parentheses). */\n readonly filterAllLabel = input('All');\n\n /** Label of the error filter. */\n readonly filterErrorLabel = input('Error');\n\n /** Label of the warning filter. */\n readonly filterWarningLabel = input('Warning');\n\n /** Label of the success filter. */\n readonly filterSuccessLabel = input('Success');\n\n /** Label of the info filter. */\n readonly filterInfoLabel = input('Info');\n\n /** Accessible name of a dismiss button, followed by the notification's title. */\n readonly dismissAriaLabel = input('Dismiss notification:');\n\n /** Group header for notifications without `category` (`groupByCategory`). */\n readonly otherCategoryLabel = input('Other');\n\n /** Priority badge for `low` (`showPriority`). */\n readonly lowPriorityLabel = input('Low');\n\n /** Priority badge for `high` (`showPriority`). */\n readonly highPriorityLabel = input('High');\n\n /** Priority badge for `urgent` (`showPriority`). */\n readonly urgentPriorityLabel = input('Urgent');\n\n /** Timestamp of notifications younger than a minute. */\n readonly justNowLabel = input('Just now');\n\n /** Timestamp under an hour; `{n}` is replaced by the minutes. */\n readonly minutesAgoLabel = input('{n}m ago');\n\n /** Timestamp under a day; `{n}` is replaced by the hours. */\n readonly hoursAgoLabel = input('{n}h ago');\n\n /** Timestamp under a week; `{n}` is replaced by the days (older ones show the date in `dateLocale`). */\n readonly daysAgoLabel = input('{n}d ago');\n\n readonly notificationClick = output<Notification>();\n readonly notificationDismiss = output<string>();\n readonly notificationAction = output<Notification>();\n readonly markAllRead = output<void>();\n readonly clearAll = output<void>();\n\n protected activeFilter = signal<NotificationType | 'all'>('all');\n protected searchQuery = signal('');\n\n protected readonly unreadCount = computed(() =>\n this.notifications().filter(n => !n.read).length\n );\n\n protected readonly filteredNotifications = computed(() => {\n let items = this.notifications();\n const filter = this.activeFilter();\n const query = this.searchQuery().toLowerCase().trim();\n\n if (filter !== 'all') {\n items = items.filter(n => n.type === filter);\n }\n\n if (query) {\n items = items.filter(\n n =>\n n.title.toLowerCase().includes(query) ||\n n.message?.toLowerCase().includes(query) ||\n n.category?.toLowerCase().includes(query)\n );\n }\n\n // Copy before sorting: without a filter `items` is the caller's array and\n // `sort` would reorder it in place\n return [...items].sort((a, b) => {\n const prio = this.priorityWeight(b.priority) - this.priorityWeight(a.priority);\n if (prio !== 0) return prio;\n return b.timestamp.getTime() - a.timestamp.getTime();\n });\n });\n\n /**\n * The list as rendered: one group per category, or a single group without a\n * category (`null`, no header) when grouping is off.\n */\n protected readonly groupedNotifications = computed((): { category: string | null; items: Notification[] }[] => {\n const items = this.filteredNotifications();\n if (!this.groupByCategory()) return [{ category: null, items }];\n const map = new Map<string, Notification[]>();\n for (const n of items) {\n const cat = n.category || this.otherCategoryLabel();\n if (!map.has(cat)) map.set(cat, []);\n map.get(cat)!.push(n);\n }\n return Array.from(map.entries()).map(([category, items]) => ({ category, items }));\n });\n\n protected readonly filterCounts = computed(() => {\n const items = this.notifications();\n return {\n all: items.length,\n info: items.filter(n => n.type === 'info').length,\n success: items.filter(n => n.type === 'success').length,\n warning: items.filter(n => n.type === 'warning').length,\n error: items.filter(n => n.type === 'error').length,\n };\n });\n\n protected readonly hasNotifications = computed(() => this.filteredNotifications().length > 0);\n\n protected getTypeIcon(type?: NotificationType): string {\n return type ? TYPE_ICONS[type] : 'information-circle';\n }\n\n protected getPriorityLabel(priority?: NotificationPriority): string {\n switch (priority) {\n case 'low':\n return this.lowPriorityLabel();\n case 'high':\n return this.highPriorityLabel();\n case 'urgent':\n return this.urgentPriorityLabel();\n default:\n return priority ? PRIORITY_LABELS[priority] : '';\n }\n }\n\n protected formatTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const mins = Math.floor(diff / 60000);\n if (mins < 1) return this.justNowLabel();\n if (mins < 60) return this.minutesAgoLabel().replace('{n}', String(mins));\n const hours = Math.floor(mins / 60);\n if (hours < 24) return this.hoursAgoLabel().replace('{n}', String(hours));\n const days = Math.floor(hours / 24);\n if (days < 7) return this.daysAgoLabel().replace('{n}', String(days));\n return date.toLocaleDateString(this.dateLocale(), { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n protected setFilter(filter: NotificationType | 'all'): void {\n this.activeFilter.set(filter);\n }\n\n protected onSearch(query: string): void {\n this.searchQuery.set(query);\n }\n\n protected onClick(notification: Notification): void {\n this.notificationClick.emit(notification);\n }\n\n protected onDismiss(id: string, event: Event): void {\n event.stopPropagation();\n this.notificationDismiss.emit(id);\n }\n\n protected onAction(notification: Notification, event: Event): void {\n event.stopPropagation();\n this.notificationAction.emit(notification);\n }\n\n protected onMarkAllRead(): void {\n this.markAllRead.emit();\n }\n\n protected onClearAll(): void {\n this.clearAll.emit();\n }\n\n private priorityWeight(p?: NotificationPriority): number {\n switch (p) {\n case 'urgent': return 4;\n case 'high': return 3;\n case 'normal': return 2;\n case 'low': return 1;\n default: return 2;\n }\n }\n}\n","<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-notification-center.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.ts","../../../../libs/angular-ui-kit/src/lib/notification-center/notification-center.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n signal,\n computed,\n output,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n} from '@lifecorner/angular-ui-kit/icons';\nimport { SearchInputComponent } from '@lifecorner/angular-ui-kit/search-input';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'error';\nexport type NotificationPriority = 'low' | 'normal' | 'high' | 'urgent';\n\nexport interface Notification {\n id: string;\n title: string;\n message?: string;\n type?: NotificationType;\n priority?: NotificationPriority;\n timestamp: Date;\n read?: boolean;\n icon?: string;\n category?: string;\n actionLabel?: string;\n actionUrl?: string;\n}\n\nconst TYPE_ICONS: Record<NotificationType, string> = {\n info: 'information-circle',\n success: 'check-circle',\n warning: 'exclamation-triangle',\n error: 'x-circle',\n};\n\nconst PRIORITY_LABELS: Record<NotificationPriority, string> = {\n low: 'Low',\n normal: 'Normal',\n high: 'High',\n urgent: 'Urgent',\n};\n\n@Component({\n selector: 'lc-notification-center',\n standalone: true,\n imports: [IconComponent, SearchInputComponent],\n viewProviders: [ɵprovideKitIcons([ICON_INFORMATION_CIRCLE, ICON_CHECK_CIRCLE, ICON_EXCLAMATION_TRIANGLE, ICON_CIRCLE_X])],\n templateUrl: './notification-center.component.html',\n styleUrls: ['./notification-center.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationCenterComponent {\n readonly notifications = input.required<Notification[]>();\n readonly title = input('Notifications');\n readonly showFilter = input(true);\n readonly showTimestamp = input(true);\n readonly showPriority = input(false);\n readonly emptyMessage = input('No notifications');\n readonly maxHeight = input('480px');\n readonly groupByCategory = input(false);\n /** Locale used for absolute dates (older than a week). */\n readonly dateLocale = input('de-DE');\n\n /** Label of the mark-all-read action. */\n readonly markAllReadLabel = input('Mark all read');\n\n /** Label of the clear-all action. */\n readonly clearAllLabel = input('Clear all');\n\n /** Placeholder of the search field. */\n readonly searchPlaceholder = input('Search notifications…');\n\n /** Label of the \"all\" filter (the count follows in parentheses). */\n readonly filterAllLabel = input('All');\n\n /** Label of the error filter. */\n readonly filterErrorLabel = input('Error');\n\n /** Label of the warning filter. */\n readonly filterWarningLabel = input('Warning');\n\n /** Label of the success filter. */\n readonly filterSuccessLabel = input('Success');\n\n /** Label of the info filter. */\n readonly filterInfoLabel = input('Info');\n\n /** Accessible name of a dismiss button, followed by the notification's title. */\n readonly dismissAriaLabel = input('Dismiss notification:');\n\n /** Group header for notifications without `category` (`groupByCategory`). */\n readonly otherCategoryLabel = input('Other');\n\n /** Priority badge for `low` (`showPriority`). */\n readonly lowPriorityLabel = input('Low');\n\n /** Priority badge for `high` (`showPriority`). */\n readonly highPriorityLabel = input('High');\n\n /** Priority badge for `urgent` (`showPriority`). */\n readonly urgentPriorityLabel = input('Urgent');\n\n /** Timestamp of notifications younger than a minute. */\n readonly justNowLabel = input('Just now');\n\n /** Timestamp under an hour; `{n}` is replaced by the minutes. */\n readonly minutesAgoLabel = input('{n}m ago');\n\n /** Timestamp under a day; `{n}` is replaced by the hours. */\n readonly hoursAgoLabel = input('{n}h ago');\n\n /** Timestamp under a week; `{n}` is replaced by the days (older ones show the date in `dateLocale`). */\n readonly daysAgoLabel = input('{n}d ago');\n\n readonly notificationClick = output<Notification>();\n readonly notificationDismiss = output<string>();\n readonly notificationAction = output<Notification>();\n readonly markAllRead = output<void>();\n readonly clearAll = output<void>();\n\n protected activeFilter = signal<NotificationType | 'all'>('all');\n protected searchQuery = signal('');\n\n protected readonly unreadCount = computed(() =>\n this.notifications().filter(n => !n.read).length\n );\n\n protected readonly filteredNotifications = computed(() => {\n let items = this.notifications();\n const filter = this.activeFilter();\n const query = this.searchQuery().toLowerCase().trim();\n\n if (filter !== 'all') {\n items = items.filter(n => n.type === filter);\n }\n\n if (query) {\n items = items.filter(\n n =>\n n.title.toLowerCase().includes(query) ||\n n.message?.toLowerCase().includes(query) ||\n n.category?.toLowerCase().includes(query)\n );\n }\n\n // Copy before sorting: without a filter `items` is the caller's array and\n // `sort` would reorder it in place\n return [...items].sort((a, b) => {\n const prio = this.priorityWeight(b.priority) - this.priorityWeight(a.priority);\n if (prio !== 0) return prio;\n return b.timestamp.getTime() - a.timestamp.getTime();\n });\n });\n\n /**\n * The list as rendered: one group per category, or a single group without a\n * category (`null`, no header) when grouping is off.\n */\n protected readonly groupedNotifications = computed((): { category: string | null; items: Notification[] }[] => {\n const items = this.filteredNotifications();\n if (!this.groupByCategory()) return [{ category: null, items }];\n const map = new Map<string, Notification[]>();\n for (const n of items) {\n const cat = n.category || this.otherCategoryLabel();\n if (!map.has(cat)) map.set(cat, []);\n map.get(cat)!.push(n);\n }\n return Array.from(map.entries()).map(([category, items]) => ({ category, items }));\n });\n\n protected readonly filterCounts = computed(() => {\n const items = this.notifications();\n return {\n all: items.length,\n info: items.filter(n => n.type === 'info').length,\n success: items.filter(n => n.type === 'success').length,\n warning: items.filter(n => n.type === 'warning').length,\n error: items.filter(n => n.type === 'error').length,\n };\n });\n\n protected readonly hasNotifications = computed(() => this.filteredNotifications().length > 0);\n\n protected getTypeIcon(type?: NotificationType): string {\n return type ? TYPE_ICONS[type] : 'information-circle';\n }\n\n protected getPriorityLabel(priority?: NotificationPriority): string {\n switch (priority) {\n case 'low':\n return this.lowPriorityLabel();\n case 'high':\n return this.highPriorityLabel();\n case 'urgent':\n return this.urgentPriorityLabel();\n default:\n return priority ? PRIORITY_LABELS[priority] : '';\n }\n }\n\n protected formatTime(date: Date): string {\n const now = new Date();\n const diff = now.getTime() - date.getTime();\n const mins = Math.floor(diff / 60000);\n if (mins < 1) return this.justNowLabel();\n if (mins < 60) return this.minutesAgoLabel().replace('{n}', String(mins));\n const hours = Math.floor(mins / 60);\n if (hours < 24) return this.hoursAgoLabel().replace('{n}', String(hours));\n const days = Math.floor(hours / 24);\n if (days < 7) return this.daysAgoLabel().replace('{n}', String(days));\n return date.toLocaleDateString(this.dateLocale(), { day: '2-digit', month: '2-digit', year: 'numeric' });\n }\n\n protected setFilter(filter: NotificationType | 'all'): void {\n this.activeFilter.set(filter);\n }\n\n protected onSearch(query: string): void {\n this.searchQuery.set(query);\n }\n\n protected onClick(notification: Notification): void {\n this.notificationClick.emit(notification);\n }\n\n protected onDismiss(id: string, event: Event): void {\n event.stopPropagation();\n this.notificationDismiss.emit(id);\n }\n\n protected onAction(notification: Notification, event: Event): void {\n event.stopPropagation();\n this.notificationAction.emit(notification);\n }\n\n protected onMarkAllRead(): void {\n this.markAllRead.emit();\n }\n\n protected onClearAll(): void {\n this.clearAll.emit();\n }\n\n private priorityWeight(p?: NotificationPriority): number {\n switch (p) {\n case 'urgent': return 4;\n case 'high': return 3;\n case 'normal': return 2;\n case 'low': return 1;\n default: return 2;\n }\n }\n}\n","<div class=\"lc-nc\">\n <!-- Header -->\n <div class=\"lc-nc__header\">\n <div class=\"lc-nc__header-left\">\n <h3 class=\"lc-nc__title\">{{ title() }}</h3>\n @if (unreadCount() > 0) {\n <span class=\"lc-nc__badge\">{{ unreadCount() }}</span>\n }\n </div>\n <div class=\"lc-nc__header-actions\">\n @if (unreadCount() > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn\" (click)=\"onMarkAllRead()\">{{ markAllReadLabel() }}</button>\n }\n @if (notifications().length > 0) {\n <button type=\"button\" class=\"lc-nc__action-btn lc-nc__action-btn--danger\" (click)=\"onClearAll()\">{{ clearAllLabel() }}</button>\n }\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"lc-nc__search\">\n <lc-search-input\n class=\"lc-nc__search-field\"\n [placeholder]=\"searchPlaceholder()\"\n [debounceMs]=\"0\"\n (searchChange)=\"onSearch($event)\"\n />\n </div>\n\n <!-- Filters -->\n @if (showFilter()) {\n <div class=\"lc-nc__filters\">\n <button\n type=\"button\"\n class=\"lc-nc__filter\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'all'\"\n [attr.aria-pressed]=\"activeFilter() === 'all'\"\n (click)=\"setFilter('all')\"\n >{{ filterAllLabel() }} ({{ filterCounts().all }})</button>\n @if (filterCounts().error > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--error\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'error'\"\n [attr.aria-pressed]=\"activeFilter() === 'error'\"\n (click)=\"setFilter('error')\"\n >{{ filterErrorLabel() }} ({{ filterCounts().error }})</button>\n }\n @if (filterCounts().warning > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--warning\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'warning'\"\n [attr.aria-pressed]=\"activeFilter() === 'warning'\"\n (click)=\"setFilter('warning')\"\n >{{ filterWarningLabel() }} ({{ filterCounts().warning }})</button>\n }\n @if (filterCounts().success > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--success\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'success'\"\n [attr.aria-pressed]=\"activeFilter() === 'success'\"\n (click)=\"setFilter('success')\"\n >{{ filterSuccessLabel() }} ({{ filterCounts().success }})</button>\n }\n @if (filterCounts().info > 0) {\n <button\n type=\"button\"\n class=\"lc-nc__filter lc-nc__filter--info\"\n [class.lc-nc__filter--active]=\"activeFilter() === 'info'\"\n [attr.aria-pressed]=\"activeFilter() === 'info'\"\n (click)=\"setFilter('info')\"\n >{{ filterInfoLabel() }} ({{ filterCounts().info }})</button>\n }\n </div>\n }\n\n <!-- Notification list -->\n <div class=\"lc-nc__list\" [style.max-height]=\"maxHeight()\">\n @if (!hasNotifications()) {\n <div class=\"lc-nc__empty\">\n <lc-icon name=\"bell\" size=\"lg\" class=\"lc-nc__empty-icon\" [decorative]=\"true\"></lc-icon>\n <span class=\"lc-nc__empty-text\">{{ emptyMessage() }}</span>\n </div>\n } @else {\n @for (group of groupedNotifications(); track group.category ?? '') {\n <div class=\"lc-nc__group\">\n @if (group.category !== null) {\n <div class=\"lc-nc__group-header\">{{ group.category }}</div>\n }\n <!-- The whole row is a mouse target; the title is a real button so\n keyboard and screen-reader users can activate it (its click bubbles\n to the row), and the dismiss/action buttons stop propagation. -->\n @for (n of group.items; track n.id) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- row is a mouse target; its title is a real button for keyboard users -->\n <div\n class=\"lc-nc__item\"\n [class.lc-nc__item--unread]=\"!n.read\"\n [class.lc-nc__item--urgent]=\"n.priority === 'urgent'\"\n (click)=\"onClick(n)\"\n >\n <lc-icon [name]=\"getTypeIcon(n.type)\" size=\"sm\" class=\"lc-nc__item-icon\" [class]=\"'lc-nc__item-icon lc-nc__item-icon--' + (n.type || 'info')\" [decorative]=\"true\"></lc-icon>\n <div class=\"lc-nc__item-body\">\n <div class=\"lc-nc__item-header\">\n <button type=\"button\" class=\"lc-nc__item-title\">{{ n.title }}</button>\n @if (showPriority() && n.priority && n.priority !== 'normal') {\n <span [class]=\"'lc-nc__item-priority lc-nc__item-priority--' + n.priority\">\n {{ getPriorityLabel(n.priority) }}\n </span>\n }\n </div>\n @if (n.message) {\n <p class=\"lc-nc__item-message\">{{ n.message }}</p>\n }\n <div class=\"lc-nc__item-footer\">\n @if (showTimestamp()) {\n <span class=\"lc-nc__item-time\">{{ formatTime(n.timestamp) }}</span>\n }\n @if (n.category) {\n <span class=\"lc-nc__item-category\">{{ n.category }}</span>\n }\n @if (n.actionLabel) {\n <button type=\"button\" class=\"lc-nc__item-action\" (click)=\"onAction(n, $event)\">{{ n.actionLabel }}</button>\n }\n </div>\n </div>\n <button\n type=\"button\"\n class=\"lc-nc__item-dismiss\"\n (click)=\"onDismiss(n.id, $event)\"\n [attr.aria-label]=\"dismissAriaLabel() + ' ' + n.title\"\n >×</button>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n"],"mappings":";;;;;AAkCA,MAAM,aAA+C;CACnD,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACR;AAED,MAAM,kBAAwD;CAC5D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,QAAQ;AACT;AAWD,IAAa,8BAAb,MAAa,4BAA2B;CAC7B,gBAAgB,MAAM,SAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAChD,QAAQ,MAAM,iBAAgB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC9B,aAAa,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,gBAAgB,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,eAAe,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,eAAe,MAAM,oBAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACxC,YAAY,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC1B,kBAAkB,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAE9B,aAAa,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,mBAAmB,MAAM,iBAAgB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGzC,gBAAgB,MAAM,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGlC,oBAAoB,MAAM,yBAAwB,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAGlD,iBAAiB,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,mBAAmB,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,qBAAqB,MAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrC,qBAAqB,MAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrC,kBAAkB,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,mBAAmB,MAAM,yBAAwB,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGjD,qBAAqB,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,mBAAmB,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAG/B,oBAAoB,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,sBAAsB,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,sBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrC,eAAe,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,kBAAkB,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,gBAAgB,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,eAAe,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,oBAAoB,OAAM;CAC1B,sBAAsB,OAAM;CAC5B,qBAAqB,OAAM;CAC3B,cAAc,OAAM;CACpB,WAAW,OAAM;CAEhB,eAAe,OAAiC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CACtD,cAAc,OAAO,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEf,cAAc,eAC/B,KAAK,cAAa,CAAE,CAAC,QAAO,MAAK,CAAC,EAAE,IAAI,CAAC,CAAC,QAC3C,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,wBAAwB,eAAc;EACvD,IAAI,QAAQ,KAAK,cAAa;EAC9B,MAAM,SAAS,KAAK,aAAY;EAChC,MAAM,QAAQ,KAAK,YAAW,CAAE,CAAC,YAAW,CAAE,CAAC,KAAI;EAEnD,IAAI,WAAW,OACb,QAAQ,MAAM,QAAO,MAAK,EAAE,SAAS,MAAM;EAG7C,IAAI,OACF,QAAQ,MAAM,QACZ,MACE,EAAE,MAAM,YAAW,CAAE,CAAC,SAAS,KAAK,KACpC,EAAE,SAAS,YAAW,CAAE,CAAC,SAAS,KAAK,KACvC,EAAE,UAAU,YAAW,CAAE,CAAC,SAAS,KAAK,CAAC;EAM/C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAK;GAC9B,MAAM,OAAO,KAAK,eAAe,EAAE,QAAQ,IAAI,KAAK,eAAe,EAAE,QAAQ;GAC7E,IAAI,SAAS,GAAG,OAAO;GACvB,OAAO,EAAE,UAAU,QAAO,IAAK,EAAE,UAAU,QAAO;EACpD,CAAC;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,wBAAA,CAAA,+BAAA,CAAA,CAAA;CAMiB,uBAAuB,eAAoE;EAC5G,MAAM,QAAQ,KAAK,sBAAqB;EACxC,IAAI,CAAC,KAAK,gBAAe,GAAI,OAAO,CAAC;GAAE,UAAU;GAAM;EAAK,CAAE;EAC9D,MAAM,sBAAM,IAAI,IAAG;EACnB,KAAK,MAAM,KAAK,OAAO;GACrB,MAAM,MAAM,EAAE,YAAY,KAAK,mBAAkB;GACjD,IAAI,CAAC,IAAI,IAAI,GAAG,GAAG,IAAI,IAAI,KAAK,CAAA,CAAE;GAClC,IAAI,IAAI,GAAG,CAAE,CAAC,KAAK,CAAC;EACtB;EACA,OAAO,MAAM,KAAK,IAAI,QAAO,CAAE,CAAC,CAAC,KAAK,CAAC,UAAU,YAAY;GAAE;GAAU;EAAK,EAAG;CACnF,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,uBAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,eAAe,eAAc;EAC9C,MAAM,QAAQ,KAAK,cAAa;EAChC,OAAO;GACL,KAAK,MAAM;GACX,MAAM,MAAM,QAAO,MAAK,EAAE,SAAS,MAAM,CAAC,CAAC;GAC3C,SAAS,MAAM,QAAO,MAAK,EAAE,SAAS,SAAS,CAAC,CAAC;GACjD,SAAS,MAAM,QAAO,MAAK,EAAE,SAAS,SAAS,CAAC,CAAC;GACjD,OAAO,MAAM,QAAO,MAAK,EAAE,SAAS,OAAO,CAAC,CAAC;EAC9C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,mBAAmB,eAAe,KAAK,sBAAqB,CAAE,CAAC,SAAS,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAEnF,YAAY,MAAuB;EAC3C,OAAO,OAAO,WAAW,QAAQ;CACnC;CAEU,iBAAiB,UAA+B;EACxD,QAAQ,UAAR;GACE,KAAK,OACH,OAAO,KAAK,iBAAgB;GAC9B,KAAK,QACH,OAAO,KAAK,kBAAiB;GAC/B,KAAK,UACH,OAAO,KAAK,oBAAmB;GACjC,SACE,OAAO,WAAW,gBAAgB,YAAY;EAClD;CACF;CAEU,WAAW,MAAU;EAE7B,MAAM,wBAAO,IADG,KACH,EAAA,CAAI,QAAO,IAAK,KAAK,QAAO;EACzC,MAAM,OAAO,KAAK,MAAM,OAAO,GAAK;EACpC,IAAI,OAAO,GAAG,OAAO,KAAK,aAAY;EACtC,IAAI,OAAO,IAAI,OAAO,KAAK,gBAAe,CAAE,CAAC,QAAQ,OAAO,OAAO,IAAI,CAAC;EACxE,MAAM,QAAQ,KAAK,MAAM,OAAO,EAAE;EAClC,IAAI,QAAQ,IAAI,OAAO,KAAK,cAAa,CAAE,CAAC,QAAQ,OAAO,OAAO,KAAK,CAAC;EACxE,MAAM,OAAO,KAAK,MAAM,QAAQ,EAAE;EAClC,IAAI,OAAO,GAAG,OAAO,KAAK,aAAY,CAAE,CAAC,QAAQ,OAAO,OAAO,IAAI,CAAC;EACpE,OAAO,KAAK,mBAAmB,KAAK,WAAU,GAAI;GAAE,KAAK;GAAW,OAAO;GAAW,MAAM;EAAS,CAAE;CACzG;CAEU,UAAU,QAAgC;EAClD,KAAK,aAAa,IAAI,MAAM;CAC9B;CAEU,SAAS,OAAa;EAC9B,KAAK,YAAY,IAAI,KAAK;CAC5B;CAEU,QAAQ,cAA0B;EAC1C,KAAK,kBAAkB,KAAK,YAAY;CAC1C;CAEU,UAAU,IAAY,OAAY;EAC1C,MAAM,gBAAe;EACrB,KAAK,oBAAoB,KAAK,EAAE;CAClC;CAEU,SAAS,cAA4B,OAAY;EACzD,MAAM,gBAAe;EACrB,KAAK,mBAAmB,KAAK,YAAY;CAC3C;CAEU,gBAAa;EACrB,KAAK,YAAY,KAAI;CACvB;CAEU,aAAU;EAClB,KAAK,SAAS,KAAI;CACpB;CAEQ,eAAe,GAAwB;EAC7C,QAAQ,GAAR;GACE,KAAK,UAAU,OAAO;GACtB,KAAK,QAAQ,OAAO;GACpB,KAAK,UAAU,OAAO;GACtB,KAAK,OAAO,OAAO;GACnB,SAAS,OAAO;EAClB;CACF;CAxMW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA2B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA3B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA2B,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,qBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,mBAAA;GAAA,qBAAA;GAAA,oBAAA;GAAA,aAAA;GAAA,UAAA;EAAA;EAAA,UAAA;EAAA,UCzDxC;EA4IA,QAAA,CAAA,ogNAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDzFY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAoB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eAC9B,CAAC,iBAAiB;GAAC;GAAyB;GAAmB;GAA2B;EAAa,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK9G,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EATvC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAwB,YACtB;GAAI,SACP,CAAC,eAAe,oBAAoB;GAAC,eAC/B,CAAC,iBAAiB;IAAC;IAAyB;IAAmB;IAA2B;GAAa,CAAC,CAAC;GAAC,iBAGxG,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,ogNAAA;EAAA,CAAA"}
|
|
@@ -259,7 +259,7 @@ var NumberInputComponent = class NumberInputComponent {
|
|
|
259
259
|
}],
|
|
260
260
|
ngImport: i0,
|
|
261
261
|
template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"number-input__control\">\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--decrement\"\n [disabled]=\"isDisabled() || !canDecrement()\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n >\n <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n [id]=\"inputId\"\n [attr.inputmode]=\"inputMode()\"\n class=\"number-input__input\"\n [value]=\"text()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--increment\"\n [disabled]=\"isDisabled() || !canIncrement()\"\n (click)=\"increment()\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n </div>\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n } @else if (helperText()) {\n <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n }\n</div>\n",
|
|
262
|
-
styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);
|
|
262
|
+
styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within{outline-color:Highlight}}\n"],
|
|
263
263
|
dependencies: [{
|
|
264
264
|
kind: "component",
|
|
265
265
|
type: IconComponent,
|
|
@@ -297,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
297
297
|
multi: true
|
|
298
298
|
}],
|
|
299
299
|
template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"number-input__control\">\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--decrement\"\n [disabled]=\"isDisabled() || !canDecrement()\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n >\n <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n [id]=\"inputId\"\n [attr.inputmode]=\"inputMode()\"\n class=\"number-input__input\"\n [value]=\"text()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--increment\"\n [disabled]=\"isDisabled() || !canIncrement()\"\n (click)=\"increment()\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n </div>\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n } @else if (helperText()) {\n <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n }\n</div>\n",
|
|
300
|
-
styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);
|
|
300
|
+
styles: [".number-input{display:inline-flex;flex-direction:column;gap:.375rem}.number-input__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.number-input__control{display:inline-flex;align-items:center;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color .15s ease}.number-input__control:hover{border-color:var(--color-text-secondary)}.number-input__control:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #20849733}.number-input__button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.number-input__button:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.number-input__button:disabled{opacity:.4;cursor:not-allowed}.number-input__button--decrement{border-right:1px solid var(--color-border)}.number-input__button--increment{border-left:1px solid var(--color-border)}.number-input__input{width:4rem;text-align:center;border:none;outline:none;background:transparent;font-size:var(--typography-font-size-base, 1rem);font-variant-numeric:tabular-nums;color:var(--color-text-primary);padding:.5rem .25rem}.number-input__input::placeholder{color:var(--color-text-tertiary)}.number-input__input:disabled{cursor:not-allowed}.number-input__helper,.number-input__error{margin:0;font-size:var(--typography-font-size-xs, .75rem);line-height:1.4}.number-input__helper{color:var(--color-text-tertiary)}.number-input__error{color:var(--color-text-error)}.number-input--error .number-input__control{border-color:var(--color-error-600)}.number-input--error .number-input__control:focus-within{border-color:var(--color-error-600);outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}.number-input--disabled{opacity:.5;pointer-events:none}@media(forced-colors:active){.number-input--error .number-input__control:focus-within{outline-color:Highlight}}\n"]
|
|
301
301
|
}]
|
|
302
302
|
}],
|
|
303
303
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-number-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.ts","../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS } from '@lifecorner/angular-ui-kit/icons';\n\n/** Number of decimals a number is written with (`0.001` → 3, `1e-7` → 7, `5` → 0). */\nfunction decimalsOf(n: number): number {\n if (!Number.isFinite(n)) return 0;\n const [mantissa, exponent] = String(n).split('e');\n const decimals = (mantissa.split('.')[1]?.length ?? 0) - (exponent ? Number(exponent) : 0);\n return Math.max(0, decimals);\n}\n\n/**\n * Reduces raw text to something `Number()` can parse: digits, one leading\n * minus and one decimal point. A comma is taken as a decimal separator so a\n * German keyboard layout does not silently lose the fraction.\n */\nfunction sanitizeNumericText(raw: string): string {\n let out = '';\n let seenPoint = false;\n for (const ch of raw) {\n if (ch >= '0' && ch <= '9') {\n out += ch;\n } else if (ch === '-' && out.length === 0) {\n out += ch;\n } else if ((ch === '.' || ch === ',') && !seenPoint) {\n seenPoint = true;\n out += '.';\n }\n }\n return out;\n}\n\n@Component({\n selector: 'lc-number-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_PLUS])],\n templateUrl: './number-input.component.html',\n styleUrls: ['./number-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NumberInputComponent),\n multi: true,\n },\n ],\n})\n/**\n * Number input component with increment/decrement controls.\n *\n * Features:\n * - Increment and decrement buttons (also ArrowUp / ArrowDown)\n * - Configurable min, max, and step values\n * - Value clamping within bounds; stepping is rounded to the step's precision\n * - Non-numeric characters are rejected as they are typed\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-number-input label=\"Quantity\" [min]=\"0\" [max]=\"100\" [step]=\"1\" />\n * ```\n */\nexport class NumberInputComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Minimum value */\n min = input<number | undefined>(undefined);\n\n /** Maximum value */\n max = input<number | undefined>(undefined);\n\n /** Step increment */\n step = input<number>(1);\n\n /** Label text */\n label = input<string>();\n\n /** Accessible name for the field when no visible `label` is rendered. */\n ariaLabel = input<string>();\n\n /** Placeholder */\n placeholder = input<string>('0');\n\n /** Helper text shown below the control (linked via `aria-describedby`). */\n helperText = input<string>();\n\n /** Error message shown below the control; marks the field `aria-invalid`. */\n error = input<string>();\n\n /** Disabled state */\n disabled = input<boolean>(false);\n\n /** Accessible name of the minus button. */\n decrementAriaLabel = input('Decrease value');\n\n /** Accessible name of the plus button. */\n incrementAriaLabel = input('Increase value');\n\n /** Emits value on change */\n valueChange = output<number>();\n\n /** Per-instance id wiring the label, hint and error to the field. */\n readonly inputId = `lc-number-input-${++NumberInputComponent.nextId}`;\n\n protected value = signal<number | null>(null);\n\n /**\n * Text shown in the field. It is re-derived from the model on `writeValue`,\n * stepping and blur — never while typing — so an in-progress entry such as\n * \"1.\" or \"-\" is not snapped back to \"1\" under the user's cursor.\n */\n protected readonly text = signal('');\n\n /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n private readonly formDisabled = signal(false);\n\n /** Disabled by either route — the one flag the template consults. */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n /** Decimals implied by `step` — stepped results are rounded to it so 0.1 + 0.2 does not drift. */\n private readonly stepPrecision = computed(() => decimalsOf(this.step()));\n\n /** Fractions need a decimal key on touch keyboards; integers do not. */\n protected readonly inputMode = computed(() => (this.stepPrecision() > 0 ? 'decimal' : 'numeric'));\n\n protected readonly describedBy = computed(() => {\n const ids: string[] = [];\n if (this.error()) ids.push(`${this.inputId}-error`);\n else if (this.helperText()) ids.push(`${this.inputId}-helper`);\n return ids.length ? ids.join(' ') : null;\n });\n\n protected containerClasses = computed(() => {\n const classes = ['number-input'];\n if (this.isDisabled()) classes.push('number-input--disabled');\n if (this.error()) classes.push('number-input--error');\n return classes.join(' ');\n });\n\n protected canDecrement = computed(() => {\n const val = this.value();\n const minV = this.min();\n if (val === null || minV === undefined) return true;\n return val > minV;\n });\n\n protected canIncrement = computed(() => {\n const val = this.value();\n const maxV = this.max();\n if (val === null || maxV === undefined) return true;\n return val < maxV;\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: number | null) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n decrement(): void {\n this.stepBy(-1);\n }\n\n increment(): void {\n this.stepBy(1);\n }\n\n private stepBy(direction: 1 | -1): void {\n const cur = this.value() ?? 0;\n // Keep whatever precision the user typed (1.25 + 0.1 → 1.35), but never\n // less than the step's own — that is what removes the binary drift.\n const precision = Math.max(this.stepPrecision(), decimalsOf(cur));\n const next = this.clamp(Number((cur + direction * this.step()).toFixed(precision)));\n this.setValue(next);\n this.text.set(this.format(next));\n }\n\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.canIncrement()) this.increment();\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (this.canDecrement()) this.decrement();\n }\n }\n\n onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const raw = target.value;\n const text = sanitizeNumericText(raw);\n // Property binding alone would not repaint the field when the model does\n // not change (typing \"a\" after \"12\" leaves 12 as-is), so the stripped\n // text is written straight back to the element.\n if (text !== raw) {\n const caret = Math.max(0, (target.selectionStart ?? text.length) - (raw.length - text.length));\n target.value = text;\n target.setSelectionRange(caret, caret);\n }\n this.text.set(text);\n // \"\" would parse as 0; it and the other in-progress entries (\"-\", \".\")\n // mean the model has no number yet.\n const parsed = text === '' ? NaN : Number(text);\n if (Number.isNaN(parsed)) {\n if (this.value() !== null) {\n this.value.set(null);\n this.onChange(null);\n }\n return;\n }\n this.setValue(parsed);\n }\n\n onBlur(): void {\n this.onTouched();\n // Clamp on blur\n const val = this.value();\n if (val !== null) {\n const clamped = this.clamp(val);\n if (clamped !== val) this.setValue(clamped);\n }\n // Whatever half-typed text is left (\"1.\", \"-\", \"007\") is replaced by the\n // model's canonical form. The element is written directly as well, in\n // case the DOM drifted from the bound text without an input event.\n const canonical = this.format(this.value());\n this.text.set(canonical);\n const el = this.inputEl()?.nativeElement;\n if (el) el.value = canonical;\n }\n\n private format(val: number | null): string {\n return val === null ? '' : String(val);\n }\n\n private clamp(val: number): number {\n const minV = this.min();\n const maxV = this.max();\n if (minV !== undefined) val = Math.max(minV, val);\n if (maxV !== undefined) val = Math.min(maxV, val);\n return val;\n }\n\n private setValue(val: number): void {\n if (val === this.value()) return;\n this.value.set(val);\n this.valueChange.emit(val);\n this.onChange(val);\n }\n\n // ControlValueAccessor\n writeValue(val: number | null): void {\n this.value.set(val);\n this.text.set(this.format(val));\n }\n\n registerOnChange(fn: (val: number | null) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"number-input__control\">\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--decrement\"\n [disabled]=\"isDisabled() || !canDecrement()\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n >\n <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n [id]=\"inputId\"\n [attr.inputmode]=\"inputMode()\"\n class=\"number-input__input\"\n [value]=\"text()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--increment\"\n [disabled]=\"isDisabled() || !canIncrement()\"\n (click)=\"increment()\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n </div>\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n } @else if (helperText()) {\n <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n }\n</div>\n"],"mappings":";;;;;AAgBA,SAAS,WAAW,GAAS;CAC3B,IAAI,CAAC,OAAO,SAAS,CAAC,GAAG,OAAO;CAChC,MAAM,CAAC,UAAU,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG;CAChD,MAAM,YAAY,SAAS,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,UAAU,MAAM,WAAW,OAAO,QAAQ,IAAI;CACxF,OAAO,KAAK,IAAI,GAAG,QAAQ;AAC7B;AAOA,SAAS,oBAAoB,KAAW;CACtC,IAAI,MAAM;CACV,IAAI,YAAY;CAChB,KAAK,MAAM,MAAM,KACf,IAAI,MAAM,OAAO,MAAM,KACrB,OAAO;MACF,IAAI,OAAO,OAAO,IAAI,WAAW,GACtC,OAAO;MACF,KAAK,OAAO,OAAO,OAAO,QAAQ,CAAC,WAAW;EACnD,YAAY;EACZ,OAAO;CACT;CAEF,OAAO;AACT;AAkCA,IAAa,uBAAb,MAAa,qBAAoB;CACvB,OAAO,SAAS;CAGxB,MAAM,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAG1C,MAAM,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAG1C,OAAO,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,cAAc,MAAc,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,aAAa,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,qBAAqB,MAAM,kBAAiB,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAG5C,qBAAqB,MAAM,kBAAiB,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAG5C,cAAc,OAAM;CAGX,UAAU,mBAAmB,EAAE,qBAAqB;CAEnD,QAAQ,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAO1B,OAAO,OAAO,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnB,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG1B,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,aAAY,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAErE,UAAU,UAAwC,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG5D,gBAAgB,eAAe,WAAW,KAAK,KAAI,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrD,YAAY,eAAgB,KAAK,cAAa,IAAK,IAAI,YAAY,WAAW,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE9E,cAAc,eAAc;EAC7C,MAAM,MAAgB,CAAA;EACtB,IAAI,KAAK,MAAK,GAAI,IAAI,KAAK,GAAG,KAAK,QAAO,OAAQ;OAC7C,IAAI,KAAK,WAAU,GAAI,IAAI,KAAK,GAAG,KAAK,QAAO,QAAS;EAC7D,OAAO,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI;CACtC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,mBAAmB,eAAc;EACzC,MAAM,UAAU,CAAC,cAAc;EAC/B,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,wBAAwB;EAC5D,IAAI,KAAK,MAAK,GAAI,QAAQ,KAAK,qBAAqB;EACpD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,eAAe,eAAc;EACrC,MAAM,MAAM,KAAK,MAAK;EACtB,MAAM,OAAO,KAAK,IAAG;EACrB,IAAI,QAAQ,QAAQ,SAAS,QAAW,OAAO;EAC/C,OAAO,MAAM;CACf,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,eAAe,eAAc;EACrC,MAAM,MAAM,KAAK,MAAK;EACtB,MAAM,OAAO,KAAK,IAAG;EACrB,IAAI,QAAQ,QAAQ,SAAS,QAAW,OAAO;EAC/C,OAAO,MAAM;CACf,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAGM,iBAA8C,CAAE;CAEhD,kBAA6B,CAAE;CAEvC,YAAS;EACP,KAAK,OAAO,EAAE;CAChB;CAEA,YAAS;EACP,KAAK,OAAO,CAAC;CACf;CAEQ,OAAO,WAAiB;EAC9B,MAAM,MAAM,KAAK,MAAK,KAAM;EAG5B,MAAM,YAAY,KAAK,IAAI,KAAK,cAAa,GAAI,WAAW,GAAG,CAAC;EAChE,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAM,YAAY,KAAK,KAAI,EAAA,CAAI,QAAQ,SAAS,CAAC,CAAC;EAClF,KAAK,SAAS,IAAI;EAClB,KAAK,KAAK,IAAI,KAAK,OAAO,IAAI,CAAC;CACjC;CAEA,UAAU,OAAoB;EAC5B,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAc;GACpB,IAAI,KAAK,aAAY,GAAI,KAAK,UAAS;EACzC,OAAO,IAAI,MAAM,QAAQ,aAAa;GACpC,MAAM,eAAc;GACpB,IAAI,KAAK,aAAY,GAAI,KAAK,UAAS;EACzC;CACF;CAEA,QAAQ,OAAY;EAClB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,OAAO;EACnB,MAAM,OAAO,oBAAoB,GAAG;EAIpC,IAAI,SAAS,KAAK;GAChB,MAAM,QAAQ,KAAK,IAAI,IAAI,OAAO,kBAAkB,KAAK,WAAW,IAAI,SAAS,KAAK,OAAO;GAC7F,OAAO,QAAQ;GACf,OAAO,kBAAkB,OAAO,KAAK;EACvC;EACA,KAAK,KAAK,IAAI,IAAI;EAGlB,MAAM,SAAS,SAAS,KAAK,MAAM,OAAO,IAAI;EAC9C,IAAI,OAAO,MAAM,MAAM,GAAG;GACxB,IAAI,KAAK,MAAK,MAAO,MAAM;IACzB,KAAK,MAAM,IAAI,IAAI;IACnB,KAAK,SAAS,IAAI;GACpB;GACA;EACF;EACA,KAAK,SAAS,MAAM;CACtB;CAEA,SAAM;EACJ,KAAK,UAAS;EAEd,MAAM,MAAM,KAAK,MAAK;EACtB,IAAI,QAAQ,MAAM;GAChB,MAAM,UAAU,KAAK,MAAM,GAAG;GAC9B,IAAI,YAAY,KAAK,KAAK,SAAS,OAAO;EAC5C;EAIA,MAAM,YAAY,KAAK,OAAO,KAAK,MAAK,CAAE;EAC1C,KAAK,KAAK,IAAI,SAAS;EACvB,MAAM,KAAK,KAAK,QAAO,CAAE,EAAE;EAC3B,IAAI,IAAI,GAAG,QAAQ;CACrB;CAEQ,OAAO,KAAkB;EAC/B,OAAO,QAAQ,OAAO,KAAK,OAAO,GAAG;CACvC;CAEQ,MAAM,KAAW;EACvB,MAAM,OAAO,KAAK,IAAG;EACrB,MAAM,OAAO,KAAK,IAAG;EACrB,IAAI,SAAS,QAAW,MAAM,KAAK,IAAI,MAAM,GAAG;EAChD,IAAI,SAAS,QAAW,MAAM,KAAK,IAAI,MAAM,GAAG;EAChD,OAAO;CACT;CAEQ,SAAS,KAAW;EAC1B,IAAI,QAAQ,KAAK,MAAK,GAAI;EAC1B,KAAK,MAAM,IAAI,GAAG;EAClB,KAAK,YAAY,KAAK,GAAG;EACzB,KAAK,SAAS,GAAG;CACnB;CAGA,WAAW,KAAkB;EAC3B,KAAK,MAAM,IAAI,GAAG;EAClB,KAAK,KAAK,IAAI,KAAK,OAAO,GAAG,CAAC;CAChC;CAEA,iBAAiB,IAAgC;EAC/C,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,aAAa,IAAI,UAAU;CAClC;CA5MW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,oBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,aAAA,cAAA;EAAA,WAxBpB,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,oBAAoB;GAClD,OAAO;EACR,CACF;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,SAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC1DH;EAgDA,QAAA,CAAA,ojEAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDDY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eACR,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA4BnC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAhChC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,aAAa;GAAC,eACT,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;GAAC,iBAG7B,wBAAwB;GAAM,WACpC,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,oBAAqB;IAClD,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,ojEAAA;EAAA,CAAA;CA2EkE,CAAA;CAAA,gBAAA;EAAA,KAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,KAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,oBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,oBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAS,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-number-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.ts","../../../../libs/angular-ui-kit/src/lib/number-input/number-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS } from '@lifecorner/angular-ui-kit/icons';\n\n/** Number of decimals a number is written with (`0.001` → 3, `1e-7` → 7, `5` → 0). */\nfunction decimalsOf(n: number): number {\n if (!Number.isFinite(n)) return 0;\n const [mantissa, exponent] = String(n).split('e');\n const decimals = (mantissa.split('.')[1]?.length ?? 0) - (exponent ? Number(exponent) : 0);\n return Math.max(0, decimals);\n}\n\n/**\n * Reduces raw text to something `Number()` can parse: digits, one leading\n * minus and one decimal point. A comma is taken as a decimal separator so a\n * German keyboard layout does not silently lose the fraction.\n */\nfunction sanitizeNumericText(raw: string): string {\n let out = '';\n let seenPoint = false;\n for (const ch of raw) {\n if (ch >= '0' && ch <= '9') {\n out += ch;\n } else if (ch === '-' && out.length === 0) {\n out += ch;\n } else if ((ch === '.' || ch === ',') && !seenPoint) {\n seenPoint = true;\n out += '.';\n }\n }\n return out;\n}\n\n@Component({\n selector: 'lc-number-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_PLUS])],\n templateUrl: './number-input.component.html',\n styleUrls: ['./number-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NumberInputComponent),\n multi: true,\n },\n ],\n})\n/**\n * Number input component with increment/decrement controls.\n *\n * Features:\n * - Increment and decrement buttons (also ArrowUp / ArrowDown)\n * - Configurable min, max, and step values\n * - Value clamping within bounds; stepping is rounded to the step's precision\n * - Non-numeric characters are rejected as they are typed\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-number-input label=\"Quantity\" [min]=\"0\" [max]=\"100\" [step]=\"1\" />\n * ```\n */\nexport class NumberInputComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Minimum value */\n min = input<number | undefined>(undefined);\n\n /** Maximum value */\n max = input<number | undefined>(undefined);\n\n /** Step increment */\n step = input<number>(1);\n\n /** Label text */\n label = input<string>();\n\n /** Accessible name for the field when no visible `label` is rendered. */\n ariaLabel = input<string>();\n\n /** Placeholder */\n placeholder = input<string>('0');\n\n /** Helper text shown below the control (linked via `aria-describedby`). */\n helperText = input<string>();\n\n /** Error message shown below the control; marks the field `aria-invalid`. */\n error = input<string>();\n\n /** Disabled state */\n disabled = input<boolean>(false);\n\n /** Accessible name of the minus button. */\n decrementAriaLabel = input('Decrease value');\n\n /** Accessible name of the plus button. */\n incrementAriaLabel = input('Increase value');\n\n /** Emits value on change */\n valueChange = output<number>();\n\n /** Per-instance id wiring the label, hint and error to the field. */\n readonly inputId = `lc-number-input-${++NumberInputComponent.nextId}`;\n\n protected value = signal<number | null>(null);\n\n /**\n * Text shown in the field. It is re-derived from the model on `writeValue`,\n * stepping and blur — never while typing — so an in-progress entry such as\n * \"1.\" or \"-\" is not snapped back to \"1\" under the user's cursor.\n */\n protected readonly text = signal('');\n\n /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n private readonly formDisabled = signal(false);\n\n /** Disabled by either route — the one flag the template consults. */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n /** Decimals implied by `step` — stepped results are rounded to it so 0.1 + 0.2 does not drift. */\n private readonly stepPrecision = computed(() => decimalsOf(this.step()));\n\n /** Fractions need a decimal key on touch keyboards; integers do not. */\n protected readonly inputMode = computed(() => (this.stepPrecision() > 0 ? 'decimal' : 'numeric'));\n\n protected readonly describedBy = computed(() => {\n const ids: string[] = [];\n if (this.error()) ids.push(`${this.inputId}-error`);\n else if (this.helperText()) ids.push(`${this.inputId}-helper`);\n return ids.length ? ids.join(' ') : null;\n });\n\n protected containerClasses = computed(() => {\n const classes = ['number-input'];\n if (this.isDisabled()) classes.push('number-input--disabled');\n if (this.error()) classes.push('number-input--error');\n return classes.join(' ');\n });\n\n protected canDecrement = computed(() => {\n const val = this.value();\n const minV = this.min();\n if (val === null || minV === undefined) return true;\n return val > minV;\n });\n\n protected canIncrement = computed(() => {\n const val = this.value();\n const maxV = this.max();\n if (val === null || maxV === undefined) return true;\n return val < maxV;\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: number | null) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n decrement(): void {\n this.stepBy(-1);\n }\n\n increment(): void {\n this.stepBy(1);\n }\n\n private stepBy(direction: 1 | -1): void {\n const cur = this.value() ?? 0;\n // Keep whatever precision the user typed (1.25 + 0.1 → 1.35), but never\n // less than the step's own — that is what removes the binary drift.\n const precision = Math.max(this.stepPrecision(), decimalsOf(cur));\n const next = this.clamp(Number((cur + direction * this.step()).toFixed(precision)));\n this.setValue(next);\n this.text.set(this.format(next));\n }\n\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.canIncrement()) this.increment();\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (this.canDecrement()) this.decrement();\n }\n }\n\n onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n const raw = target.value;\n const text = sanitizeNumericText(raw);\n // Property binding alone would not repaint the field when the model does\n // not change (typing \"a\" after \"12\" leaves 12 as-is), so the stripped\n // text is written straight back to the element.\n if (text !== raw) {\n const caret = Math.max(0, (target.selectionStart ?? text.length) - (raw.length - text.length));\n target.value = text;\n target.setSelectionRange(caret, caret);\n }\n this.text.set(text);\n // \"\" would parse as 0; it and the other in-progress entries (\"-\", \".\")\n // mean the model has no number yet.\n const parsed = text === '' ? NaN : Number(text);\n if (Number.isNaN(parsed)) {\n if (this.value() !== null) {\n this.value.set(null);\n this.onChange(null);\n }\n return;\n }\n this.setValue(parsed);\n }\n\n onBlur(): void {\n this.onTouched();\n // Clamp on blur\n const val = this.value();\n if (val !== null) {\n const clamped = this.clamp(val);\n if (clamped !== val) this.setValue(clamped);\n }\n // Whatever half-typed text is left (\"1.\", \"-\", \"007\") is replaced by the\n // model's canonical form. The element is written directly as well, in\n // case the DOM drifted from the bound text without an input event.\n const canonical = this.format(this.value());\n this.text.set(canonical);\n const el = this.inputEl()?.nativeElement;\n if (el) el.value = canonical;\n }\n\n private format(val: number | null): string {\n return val === null ? '' : String(val);\n }\n\n private clamp(val: number): number {\n const minV = this.min();\n const maxV = this.max();\n if (minV !== undefined) val = Math.max(minV, val);\n if (maxV !== undefined) val = Math.min(maxV, val);\n return val;\n }\n\n private setValue(val: number): void {\n if (val === this.value()) return;\n this.value.set(val);\n this.valueChange.emit(val);\n this.onChange(val);\n }\n\n // ControlValueAccessor\n writeValue(val: number | null): void {\n this.value.set(val);\n this.text.set(this.format(val));\n }\n\n registerOnChange(fn: (val: number | null) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n}\n","<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"number-input__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n <div class=\"number-input__control\">\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--decrement\"\n [disabled]=\"isDisabled() || !canDecrement()\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"decrementAriaLabel()\"\n >\n <lc-icon name=\"minus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n <input\n #inputEl\n type=\"text\"\n [id]=\"inputId\"\n [attr.inputmode]=\"inputMode()\"\n class=\"number-input__input\"\n [value]=\"text()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n <button\n type=\"button\"\n class=\"number-input__button number-input__button--increment\"\n [disabled]=\"isDisabled() || !canIncrement()\"\n (click)=\"increment()\"\n [attr.aria-label]=\"incrementAriaLabel()\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n </button>\n </div>\n @if (error()) {\n <p [id]=\"inputId + '-error'\" class=\"number-input__error\" role=\"alert\">{{ error() }}</p>\n } @else if (helperText()) {\n <p [id]=\"inputId + '-helper'\" class=\"number-input__helper\">{{ helperText() }}</p>\n }\n</div>\n"],"mappings":"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"}
|
|
@@ -380,7 +380,7 @@ var PasswordInputComponent = class PasswordInputComponent {
|
|
|
380
380
|
}],
|
|
381
381
|
ngImport: i0,
|
|
382
382
|
template: "<div class=\"lc-password-input\">\n <label [for]=\"inputId\" class=\"lc-label\">\n {{ label() }}\n @if (required() && requiredIndicator()) {\n <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n <div class=\"lc-input-wrapper\">\n <input\n [id]=\"inputId\"\n [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize()\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n autocorrect=\"off\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n class=\"lc-input\"\n [class.lc-input-error]=\"error()\"\n />\n\n <button\n type=\"button\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n [attr.aria-pressed]=\"isPasswordVisible()\"\n [attr.aria-controls]=\"inputId\"\n class=\"lc-toggle-btn\"\n [disabled]=\"isDisabled()\"\n >\n @if (isPasswordVisible()) {\n <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n } @else {\n <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n }\n </button>\n </div>\n\n @if (error()) {\n <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n {{ error() }}\n </div>\n } @else if (helperText()) {\n <div [id]=\"helperId\" class=\"lc-helper\">\n {{ helperText() }}\n </div>\n }\n\n @if (showStrengthMeter()) {\n <div class=\"lc-strength-meter\">\n <!-- The bar is decorative; the live label below carries the meaning -->\n <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n </div>\n <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n </div>\n </div>\n }\n\n @if (showRequirements()) {\n <lc-alert variant=\"info\" [dismissible]=\"false\">\n <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n @for (req of requirements(); track req.label) {\n <li\n class=\"lc-requirement\"\n [class.lc-requirement-met]=\"req.met\"\n [class.lc-requirement-unmet]=\"!req.met\"\n >\n <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n <span class=\"lc-requirement-label\">{{ req.label }}</span>\n <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n </li>\n }\n </ul>\n </lc-alert>\n }\n</div>\n",
|
|
383
|
-
styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{
|
|
383
|
+
styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}@media(forced-colors:active){.lc-input.lc-input-error:focus{outline-color:Highlight}}.lc-toggle-btn{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease;color:var(--color-text-secondary)}.lc-toggle-btn:hover{opacity:.7}.lc-toggle-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.lc-icon{font-size:1.25rem}.lc-error{font-size:.875rem;color:var(--color-text-error)}.lc-helper{font-size:.875rem;color:var(--color-text-secondary)}.lc-strength-meter{display:flex;align-items:center;gap:.75rem}.lc-strength-bar{flex:1;height:.375rem;background-color:var(--color-surface-sunken);border-radius:var(--border-radius-sm);overflow:hidden}.lc-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.lc-strength-fill.lc-strength-weak{background-color:var(--color-error-500)}.lc-strength-fill.lc-strength-fair{background-color:var(--color-warning-500)}.lc-strength-fill.lc-strength-good{background-color:var(--color-primary-500)}.lc-strength-fill.lc-strength-strong{background-color:var(--color-success-500)}.lc-strength-label{position:relative;font-size:.875rem;font-weight:500;min-width:4rem;text-align:right}.lc-strength-label.lc-strength-weak{color:var(--color-text-error)}.lc-strength-label.lc-strength-fair{color:var(--color-text-warning)}.lc-strength-label.lc-strength-good{color:var(--color-on-primary-subtle)}.lc-strength-label.lc-strength-strong{color:var(--color-text-success)}.lc-requirements{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.lc-requirement{position:relative;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;font-size:.875rem}.lc-requirement.lc-requirement-met{color:var(--color-text-success);font-weight:600}.lc-requirement.lc-requirement-met .lc-requirement-icon{color:var(--color-text-success)}.lc-requirement.lc-requirement-unmet{color:inherit}.lc-requirement.lc-requirement-unmet .lc-requirement-icon{color:inherit;opacity:.7}.lc-requirement-icon{font-weight:600;min-width:1rem}.lc-requirement-label{flex:1}\n"],
|
|
384
384
|
dependencies: [{
|
|
385
385
|
kind: "component",
|
|
386
386
|
type: IconComponent,
|
|
@@ -436,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
436
436
|
}],
|
|
437
437
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
438
438
|
template: "<div class=\"lc-password-input\">\n <label [for]=\"inputId\" class=\"lc-label\">\n {{ label() }}\n @if (required() && requiredIndicator()) {\n <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n <div class=\"lc-input-wrapper\">\n <input\n [id]=\"inputId\"\n [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize()\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n autocorrect=\"off\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n class=\"lc-input\"\n [class.lc-input-error]=\"error()\"\n />\n\n <button\n type=\"button\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n [attr.aria-pressed]=\"isPasswordVisible()\"\n [attr.aria-controls]=\"inputId\"\n class=\"lc-toggle-btn\"\n [disabled]=\"isDisabled()\"\n >\n @if (isPasswordVisible()) {\n <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n } @else {\n <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n }\n </button>\n </div>\n\n @if (error()) {\n <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n {{ error() }}\n </div>\n } @else if (helperText()) {\n <div [id]=\"helperId\" class=\"lc-helper\">\n {{ helperText() }}\n </div>\n }\n\n @if (showStrengthMeter()) {\n <div class=\"lc-strength-meter\">\n <!-- The bar is decorative; the live label below carries the meaning -->\n <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n </div>\n <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n </div>\n </div>\n }\n\n @if (showRequirements()) {\n <lc-alert variant=\"info\" [dismissible]=\"false\">\n <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n @for (req of requirements(); track req.label) {\n <li\n class=\"lc-requirement\"\n [class.lc-requirement-met]=\"req.met\"\n [class.lc-requirement-unmet]=\"!req.met\"\n >\n <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n <span class=\"lc-requirement-label\">{{ req.label }}</span>\n <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n </li>\n }\n </ul>\n </lc-alert>\n }\n</div>\n",
|
|
439
|
-
styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{
|
|
439
|
+
styles: [".lc-password-input{display:flex;flex-direction:column;gap:.5rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lc-input-wrapper{position:relative;display:flex;align-items:center}.lc-input{box-sizing:border-box;width:100%;min-height:2.875rem;padding:.625rem 3rem .625rem .875rem;font-size:1rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-secondary);cursor:not-allowed;opacity:.6}.lc-input.lc-input-error{border-color:var(--color-error-600)}.lc-input.lc-input-error:focus{outline:2px solid var(--color-error-600);outline-offset:0;box-shadow:none}@media(forced-colors:active){.lc-input.lc-input-error:focus{outline-color:Highlight}}.lc-toggle-btn{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease;color:var(--color-text-secondary)}.lc-toggle-btn:hover{opacity:.7}.lc-toggle-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.lc-icon{font-size:1.25rem}.lc-error{font-size:.875rem;color:var(--color-text-error)}.lc-helper{font-size:.875rem;color:var(--color-text-secondary)}.lc-strength-meter{display:flex;align-items:center;gap:.75rem}.lc-strength-bar{flex:1;height:.375rem;background-color:var(--color-surface-sunken);border-radius:var(--border-radius-sm);overflow:hidden}.lc-strength-fill{height:100%;transition:width .3s ease,background-color .3s ease}.lc-strength-fill.lc-strength-weak{background-color:var(--color-error-500)}.lc-strength-fill.lc-strength-fair{background-color:var(--color-warning-500)}.lc-strength-fill.lc-strength-good{background-color:var(--color-primary-500)}.lc-strength-fill.lc-strength-strong{background-color:var(--color-success-500)}.lc-strength-label{position:relative;font-size:.875rem;font-weight:500;min-width:4rem;text-align:right}.lc-strength-label.lc-strength-weak{color:var(--color-text-error)}.lc-strength-label.lc-strength-fair{color:var(--color-text-warning)}.lc-strength-label.lc-strength-good{color:var(--color-on-primary-subtle)}.lc-strength-label.lc-strength-strong{color:var(--color-text-success)}.lc-requirements{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.lc-requirement{position:relative;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;font-size:.875rem}.lc-requirement.lc-requirement-met{color:var(--color-text-success);font-weight:600}.lc-requirement.lc-requirement-met .lc-requirement-icon{color:var(--color-text-success)}.lc-requirement.lc-requirement-unmet{color:inherit}.lc-requirement.lc-requirement-unmet .lc-requirement-icon{color:inherit;opacity:.7}.lc-requirement-icon{font-weight:600;min-width:1rem}.lc-requirement-label{flex:1}\n"]
|
|
440
440
|
}]
|
|
441
441
|
}],
|
|
442
442
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-password-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.ts","../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EYE, ICON_EYE_SLASH } from '@lifecorner/angular-ui-kit/icons';\nimport { AlertComponent } from '@lifecorner/angular-ui-kit/alert';\nimport type { InputAutocapitalize, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\n\nlet nextUniqueId = 0;\n\n/**\n * Password strength information\n */\nexport interface PasswordStrength {\n score: number; // 0-5 (number of requirements met)\n level: 'Weak' | 'Fair' | 'Good' | 'Strong';\n percentage: number; // 0-100\n}\n\n/**\n * Individual password requirement\n */\nexport interface PasswordRequirement {\n label: string;\n met: boolean;\n icon: string;\n}\n\nconst SYMBOL_PATTERN = /[!@#$%^&*()_+\\-=[\\]{}|;:,.<>?]/;\n\n/** The length rule when no `minLength` is set (the 3.2 rule). */\nconst DEFAULT_MIN_LENGTH = 8;\n\n/**\n * How the strength meter scores a password:\n * - `composition` (default, 3.2): share of five rules met — length and four character classes.\n * - `length`: the length only, as NIST SP 800-63B asks (no composition rules):\n * below `minLength` Weak, from it Fair, from 1.5 × Good, from 2 × Strong.\n */\nexport type PasswordStrengthMode = 'composition' | 'length';\n\n/**\n * Password Input Component with Show/Hide Toggle and Strength Meter\n *\n * Features:\n * - Show/Hide password toggle (eye icon)\n * - Real-time password strength indicator (Weak/Fair/Good/Strong)\n * - Visual strength meter bar with color coding\n * - Validation feedback (length, uppercase, lowercase, digit, symbol)\n * - Accessible ARIA attributes\n * - Reactive Forms ControlValueAccessor implementation\n *\n * Strength levels (share of the 5 requirements met):\n * - Weak: < 40%\n * - Fair: 40–59%\n * - Good: 60–79%\n * - Strong: >= 80%\n *\n * Requirements:\n * - Minimum 8 characters\n * - At least one uppercase letter (A-Z)\n * - At least one lowercase letter (a-z)\n * - At least one digit (0-9)\n * - At least one symbol (!@#$%^&*()_+-=[]{}|;:,.<>?)\n *\n * NIST-style use (3.3): `strengthMode=\"length\"`, `minLength`, `helperText` for\n * the rule, or no meter and no checklist at all.\n *\n * Usage:\n * ```html\n * <lc-password-input\n * [formControl]=\"passwordControl\"\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * [showStrengthMeter]=\"true\"\n * ></lc-password-input>\n * ```\n */\n@Component({\n selector: 'lc-password-input',\n standalone: true,\n imports: [IconComponent, AlertComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EYE, ICON_EYE_SLASH])],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n },\n ],\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent implements ControlValueAccessor {\n /** Label text (displayed above the input) */\n readonly label = input<string>('Password');\n\n /** Placeholder text */\n readonly placeholder = input<string>('Enter password');\n\n /** Whether to show the strength meter bar + level text */\n readonly showStrengthMeter = input<boolean>(false);\n\n /** Whether to show the requirements checklist */\n readonly showRequirements = input<boolean>(false);\n\n /** Whether the input is disabled */\n readonly disabled = input<boolean>(false);\n\n /** Whether the input is required */\n readonly required = input<boolean>(false);\n\n /**\n * Show the `*` of a `required` field; `false` keeps `required` and\n * `aria-required` without the asterisk.\n * @default true\n */\n readonly requiredIndicator = input<boolean>(true);\n\n /** Error message to display (also sets aria-invalid) */\n readonly error = input<string | undefined>(undefined);\n\n /** Help below the field, e.g. the password rule; linked by `aria-describedby`. The error replaces it. */\n readonly helperText = input<string>();\n\n /**\n * Minimum length: the native `minlength` and the length rule of the\n * requirement list and the meter. Unset = no attribute, rule of 8 (3.2).\n */\n readonly minLength = input<number>();\n\n /** How the strength meter scores: `composition` (3.2) or `length` (NIST, no character-class rules). */\n readonly strengthMode = input<PasswordStrengthMode>('composition');\n\n /**\n * Native `autocomplete`: `current-password` (sign-in), `new-password`\n * (registration, change), so password managers fill and save the right\n * password. Unset = no attribute.\n */\n readonly autocomplete = input<string>();\n\n /** Native `name` of the inner input. Unset = no attribute. */\n readonly name = input<string>();\n\n /**\n * Native `autocapitalize`. Default `off`: a shown password must not be\n * capitalised by the on-screen keyboard.\n * @default 'off'\n */\n readonly autocapitalize = input<InputAutocapitalize>('off');\n\n /**\n * Native `spellcheck`. Default `false`: a shown password must never go to a\n * spell checker (some send text to a server).\n * @default false\n */\n readonly spellcheck = input<boolean>(false);\n\n /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */\n readonly enterkeyhint = input<InputEnterKeyHint>();\n\n /** Accessible name of the visibility toggle while the password is hidden. */\n readonly showPasswordAriaLabel = input('Show password');\n\n /** Accessible name of the visibility toggle while the password is shown. */\n readonly hidePasswordAriaLabel = input('Hide password');\n\n /** Screen-reader prefix of the strength level (`showStrengthMeter`). */\n readonly strengthLabel = input('Password strength:');\n\n /** Shown for strength level `Weak`. */\n readonly weakLabel = input('Weak');\n\n /** Shown for strength level `Fair`. */\n readonly fairLabel = input('Fair');\n\n /** Shown for strength level `Good`. */\n readonly goodLabel = input('Good');\n\n /** Shown for strength level `Strong`. */\n readonly strongLabel = input('Strong');\n\n /** Accessible name of the requirement list (`showRequirements`). */\n readonly requirementsAriaLabel = input('Password requirements');\n\n /** Requirement: at least 8 characters. */\n readonly minLengthRequirementLabel = input('At least 8 characters');\n\n /** Requirement: one uppercase letter. */\n readonly uppercaseRequirementLabel = input('One uppercase letter (A-Z)');\n\n /** Requirement: one lowercase letter. */\n readonly lowercaseRequirementLabel = input('One lowercase letter (a-z)');\n\n /** Requirement: one digit. */\n readonly digitRequirementLabel = input('One digit (0-9)');\n\n /** Requirement: one symbol. */\n readonly symbolRequirementLabel = input('One symbol (!@#$%^&*)');\n\n /** Screen-reader suffix of a met requirement. */\n readonly requirementMetLabel = input('(met)');\n\n /** Screen-reader suffix of an unmet requirement. */\n readonly requirementNotMetLabel = input('(not met)');\n\n /** Emitted whenever the value (and thus the strength) is recalculated */\n readonly strengthChange = output<PasswordStrength>();\n\n /** Per-instance ids so label/error linkage survives several inputs on one page */\n readonly inputId = `lc-password-input-${nextUniqueId++}`;\n readonly errorId = `${this.inputId}-error`;\n readonly helperId = `${this.inputId}-helper`;\n readonly strengthId = `${this.inputId}-strength`;\n\n // Internal state\n readonly value = signal<string>('');\n readonly isPasswordVisible = signal<boolean>(false);\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly formDisabled = signal<boolean>(false);\n\n /** Computed disabled state from both input and form control */\n readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /** The length rule: `minLength`, else 8. */\n readonly requiredLength = computed(() => this.minLength() ?? DEFAULT_MIN_LENGTH);\n\n readonly requirements = computed<PasswordRequirement[]>(() => {\n const password = this.value();\n const checks: Array<[string, boolean]> = [[this.minLengthRequirementLabel(), password.length >= this.requiredLength()]];\n if (this.strengthMode() === 'composition') {\n checks.push(\n [this.uppercaseRequirementLabel(), /[A-Z]/.test(password)],\n [this.lowercaseRequirementLabel(), /[a-z]/.test(password)],\n [this.digitRequirementLabel(), /[0-9]/.test(password)],\n [this.symbolRequirementLabel(), SYMBOL_PATTERN.test(password)],\n );\n }\n return checks.map(([label, met]) => ({ label, met, icon: met ? '✓' : '✗' }));\n });\n\n readonly strength = computed<PasswordStrength>(() =>\n this.strengthMode() === 'length' ? this.lengthStrength() : this.compositionStrength(),\n );\n\n /** The strength level as shown to the user (the level itself stays English: it is API and class name). */\n readonly strengthText = computed(() => {\n switch (this.strength().level) {\n case 'Strong':\n return this.strongLabel();\n case 'Good':\n return this.goodLabel();\n case 'Fair':\n return this.fairLabel();\n default:\n return this.weakLabel();\n }\n });\n\n /** Lower-cased level for the modifier classes (lc-strength-weak …) */\n readonly strengthLevelClass = computed(() => `lc-strength-${this.strength().level.toLowerCase()}`);\n\n readonly describedBy = computed(() => {\n const ids: string[] = [];\n if (this.error()) ids.push(this.errorId);\n else if (this.helperText()) ids.push(this.helperId);\n if (this.showStrengthMeter()) ids.push(this.strengthId);\n return ids.length ? ids.join(' ') : null;\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n /**\n * ControlValueAccessor: Write value from form control\n */\n writeValue(value: string | null | undefined): void {\n this.value.set(value || '');\n this.strengthChange.emit(this.strength());\n }\n\n /**\n * ControlValueAccessor: Register onChange callback\n */\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n /**\n * ControlValueAccessor: Register onTouched callback\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * ControlValueAccessor: Set disabled state\n */\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n\n /**\n * Toggle password visibility\n */\n togglePasswordVisibility(): void {\n this.isPasswordVisible.update((visible) => !visible);\n }\n\n /**\n * Handle input changes\n */\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.value.set(input.value);\n this.onChange(input.value);\n this.strengthChange.emit(this.strength());\n }\n\n /**\n * Handle blur event\n */\n onBlur(): void {\n this.onTouched();\n }\n\n /** 3.2 scoring: the share of the five rules met. */\n private compositionStrength(): PasswordStrength {\n const requirements = this.requirements();\n const score = requirements.filter((r) => r.met).length;\n const percentage = (score / requirements.length) * 100;\n\n let level: PasswordStrength['level'] = 'Weak';\n if (percentage >= 80) {\n level = 'Strong';\n } else if (percentage >= 60) {\n level = 'Good';\n } else if (percentage >= 40) {\n level = 'Fair';\n }\n\n return { score, level, percentage };\n }\n\n /** NIST scoring: the length against `minLength` (score 0–4 like the four levels). */\n private lengthStrength(): PasswordStrength {\n const length = this.value().length;\n const min = this.requiredLength();\n const percentage = Math.min(100, Math.round((length / (2 * min)) * 100));\n\n let level: PasswordStrength['level'] = 'Weak';\n let score = length > 0 ? 1 : 0;\n if (length >= 2 * min) {\n level = 'Strong';\n score = 4;\n } else if (length >= 1.5 * min) {\n level = 'Good';\n score = 3;\n } else if (length >= min) {\n level = 'Fair';\n score = 2;\n }\n\n return { score, level, percentage };\n }\n}\n","<div class=\"lc-password-input\">\n <label [for]=\"inputId\" class=\"lc-label\">\n {{ label() }}\n @if (required() && requiredIndicator()) {\n <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n <div class=\"lc-input-wrapper\">\n <input\n [id]=\"inputId\"\n [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize()\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n autocorrect=\"off\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n class=\"lc-input\"\n [class.lc-input-error]=\"error()\"\n />\n\n <button\n type=\"button\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n [attr.aria-pressed]=\"isPasswordVisible()\"\n [attr.aria-controls]=\"inputId\"\n class=\"lc-toggle-btn\"\n [disabled]=\"isDisabled()\"\n >\n @if (isPasswordVisible()) {\n <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n } @else {\n <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n }\n </button>\n </div>\n\n @if (error()) {\n <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n {{ error() }}\n </div>\n } @else if (helperText()) {\n <div [id]=\"helperId\" class=\"lc-helper\">\n {{ helperText() }}\n </div>\n }\n\n @if (showStrengthMeter()) {\n <div class=\"lc-strength-meter\">\n <!-- The bar is decorative; the live label below carries the meaning -->\n <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n </div>\n <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n </div>\n </div>\n }\n\n @if (showRequirements()) {\n <lc-alert variant=\"info\" [dismissible]=\"false\">\n <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n @for (req of requirements(); track req.label) {\n <li\n class=\"lc-requirement\"\n [class.lc-requirement-met]=\"req.met\"\n [class.lc-requirement-unmet]=\"!req.met\"\n >\n <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n <span class=\"lc-requirement-label\">{{ req.label }}</span>\n <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n </li>\n }\n </ul>\n </lc-alert>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-password-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.ts","../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n computed,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_EYE, ICON_EYE_SLASH } from '@lifecorner/angular-ui-kit/icons';\nimport { AlertComponent } from '@lifecorner/angular-ui-kit/alert';\nimport type { InputAutocapitalize, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\n\nlet nextUniqueId = 0;\n\n/**\n * Password strength information\n */\nexport interface PasswordStrength {\n score: number; // 0-5 (number of requirements met)\n level: 'Weak' | 'Fair' | 'Good' | 'Strong';\n percentage: number; // 0-100\n}\n\n/**\n * Individual password requirement\n */\nexport interface PasswordRequirement {\n label: string;\n met: boolean;\n icon: string;\n}\n\nconst SYMBOL_PATTERN = /[!@#$%^&*()_+\\-=[\\]{}|;:,.<>?]/;\n\n/** The length rule when no `minLength` is set (the 3.2 rule). */\nconst DEFAULT_MIN_LENGTH = 8;\n\n/**\n * How the strength meter scores a password:\n * - `composition` (default, 3.2): share of five rules met — length and four character classes.\n * - `length`: the length only, as NIST SP 800-63B asks (no composition rules):\n * below `minLength` Weak, from it Fair, from 1.5 × Good, from 2 × Strong.\n */\nexport type PasswordStrengthMode = 'composition' | 'length';\n\n/**\n * Password Input Component with Show/Hide Toggle and Strength Meter\n *\n * Features:\n * - Show/Hide password toggle (eye icon)\n * - Real-time password strength indicator (Weak/Fair/Good/Strong)\n * - Visual strength meter bar with color coding\n * - Validation feedback (length, uppercase, lowercase, digit, symbol)\n * - Accessible ARIA attributes\n * - Reactive Forms ControlValueAccessor implementation\n *\n * Strength levels (share of the 5 requirements met):\n * - Weak: < 40%\n * - Fair: 40–59%\n * - Good: 60–79%\n * - Strong: >= 80%\n *\n * Requirements:\n * - Minimum 8 characters\n * - At least one uppercase letter (A-Z)\n * - At least one lowercase letter (a-z)\n * - At least one digit (0-9)\n * - At least one symbol (!@#$%^&*()_+-=[]{}|;:,.<>?)\n *\n * NIST-style use (3.3): `strengthMode=\"length\"`, `minLength`, `helperText` for\n * the rule, or no meter and no checklist at all.\n *\n * Usage:\n * ```html\n * <lc-password-input\n * [formControl]=\"passwordControl\"\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * [showStrengthMeter]=\"true\"\n * ></lc-password-input>\n * ```\n */\n@Component({\n selector: 'lc-password-input',\n standalone: true,\n imports: [IconComponent, AlertComponent],\n viewProviders: [ɵprovideKitIcons([ICON_EYE, ICON_EYE_SLASH])],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n },\n ],\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent implements ControlValueAccessor {\n /** Label text (displayed above the input) */\n readonly label = input<string>('Password');\n\n /** Placeholder text */\n readonly placeholder = input<string>('Enter password');\n\n /** Whether to show the strength meter bar + level text */\n readonly showStrengthMeter = input<boolean>(false);\n\n /** Whether to show the requirements checklist */\n readonly showRequirements = input<boolean>(false);\n\n /** Whether the input is disabled */\n readonly disabled = input<boolean>(false);\n\n /** Whether the input is required */\n readonly required = input<boolean>(false);\n\n /**\n * Show the `*` of a `required` field; `false` keeps `required` and\n * `aria-required` without the asterisk.\n * @default true\n */\n readonly requiredIndicator = input<boolean>(true);\n\n /** Error message to display (also sets aria-invalid) */\n readonly error = input<string | undefined>(undefined);\n\n /** Help below the field, e.g. the password rule; linked by `aria-describedby`. The error replaces it. */\n readonly helperText = input<string>();\n\n /**\n * Minimum length: the native `minlength` and the length rule of the\n * requirement list and the meter. Unset = no attribute, rule of 8 (3.2).\n */\n readonly minLength = input<number>();\n\n /** How the strength meter scores: `composition` (3.2) or `length` (NIST, no character-class rules). */\n readonly strengthMode = input<PasswordStrengthMode>('composition');\n\n /**\n * Native `autocomplete`: `current-password` (sign-in), `new-password`\n * (registration, change), so password managers fill and save the right\n * password. Unset = no attribute.\n */\n readonly autocomplete = input<string>();\n\n /** Native `name` of the inner input. Unset = no attribute. */\n readonly name = input<string>();\n\n /**\n * Native `autocapitalize`. Default `off`: a shown password must not be\n * capitalised by the on-screen keyboard.\n * @default 'off'\n */\n readonly autocapitalize = input<InputAutocapitalize>('off');\n\n /**\n * Native `spellcheck`. Default `false`: a shown password must never go to a\n * spell checker (some send text to a server).\n * @default false\n */\n readonly spellcheck = input<boolean>(false);\n\n /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */\n readonly enterkeyhint = input<InputEnterKeyHint>();\n\n /** Accessible name of the visibility toggle while the password is hidden. */\n readonly showPasswordAriaLabel = input('Show password');\n\n /** Accessible name of the visibility toggle while the password is shown. */\n readonly hidePasswordAriaLabel = input('Hide password');\n\n /** Screen-reader prefix of the strength level (`showStrengthMeter`). */\n readonly strengthLabel = input('Password strength:');\n\n /** Shown for strength level `Weak`. */\n readonly weakLabel = input('Weak');\n\n /** Shown for strength level `Fair`. */\n readonly fairLabel = input('Fair');\n\n /** Shown for strength level `Good`. */\n readonly goodLabel = input('Good');\n\n /** Shown for strength level `Strong`. */\n readonly strongLabel = input('Strong');\n\n /** Accessible name of the requirement list (`showRequirements`). */\n readonly requirementsAriaLabel = input('Password requirements');\n\n /** Requirement: at least 8 characters. */\n readonly minLengthRequirementLabel = input('At least 8 characters');\n\n /** Requirement: one uppercase letter. */\n readonly uppercaseRequirementLabel = input('One uppercase letter (A-Z)');\n\n /** Requirement: one lowercase letter. */\n readonly lowercaseRequirementLabel = input('One lowercase letter (a-z)');\n\n /** Requirement: one digit. */\n readonly digitRequirementLabel = input('One digit (0-9)');\n\n /** Requirement: one symbol. */\n readonly symbolRequirementLabel = input('One symbol (!@#$%^&*)');\n\n /** Screen-reader suffix of a met requirement. */\n readonly requirementMetLabel = input('(met)');\n\n /** Screen-reader suffix of an unmet requirement. */\n readonly requirementNotMetLabel = input('(not met)');\n\n /** Emitted whenever the value (and thus the strength) is recalculated */\n readonly strengthChange = output<PasswordStrength>();\n\n /** Per-instance ids so label/error linkage survives several inputs on one page */\n readonly inputId = `lc-password-input-${nextUniqueId++}`;\n readonly errorId = `${this.inputId}-error`;\n readonly helperId = `${this.inputId}-helper`;\n readonly strengthId = `${this.inputId}-strength`;\n\n // Internal state\n readonly value = signal<string>('');\n readonly isPasswordVisible = signal<boolean>(false);\n\n // Internal disabled state (for ControlValueAccessor)\n private readonly formDisabled = signal<boolean>(false);\n\n /** Computed disabled state from both input and form control */\n readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /** The length rule: `minLength`, else 8. */\n readonly requiredLength = computed(() => this.minLength() ?? DEFAULT_MIN_LENGTH);\n\n readonly requirements = computed<PasswordRequirement[]>(() => {\n const password = this.value();\n const checks: Array<[string, boolean]> = [[this.minLengthRequirementLabel(), password.length >= this.requiredLength()]];\n if (this.strengthMode() === 'composition') {\n checks.push(\n [this.uppercaseRequirementLabel(), /[A-Z]/.test(password)],\n [this.lowercaseRequirementLabel(), /[a-z]/.test(password)],\n [this.digitRequirementLabel(), /[0-9]/.test(password)],\n [this.symbolRequirementLabel(), SYMBOL_PATTERN.test(password)],\n );\n }\n return checks.map(([label, met]) => ({ label, met, icon: met ? '✓' : '✗' }));\n });\n\n readonly strength = computed<PasswordStrength>(() =>\n this.strengthMode() === 'length' ? this.lengthStrength() : this.compositionStrength(),\n );\n\n /** The strength level as shown to the user (the level itself stays English: it is API and class name). */\n readonly strengthText = computed(() => {\n switch (this.strength().level) {\n case 'Strong':\n return this.strongLabel();\n case 'Good':\n return this.goodLabel();\n case 'Fair':\n return this.fairLabel();\n default:\n return this.weakLabel();\n }\n });\n\n /** Lower-cased level for the modifier classes (lc-strength-weak …) */\n readonly strengthLevelClass = computed(() => `lc-strength-${this.strength().level.toLowerCase()}`);\n\n readonly describedBy = computed(() => {\n const ids: string[] = [];\n if (this.error()) ids.push(this.errorId);\n else if (this.helperText()) ids.push(this.helperId);\n if (this.showStrengthMeter()) ids.push(this.strengthId);\n return ids.length ? ids.join(' ') : null;\n });\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: string) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n /**\n * ControlValueAccessor: Write value from form control\n */\n writeValue(value: string | null | undefined): void {\n this.value.set(value || '');\n this.strengthChange.emit(this.strength());\n }\n\n /**\n * ControlValueAccessor: Register onChange callback\n */\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n /**\n * ControlValueAccessor: Register onTouched callback\n */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /**\n * ControlValueAccessor: Set disabled state\n */\n setDisabledState(isDisabled: boolean): void {\n this.formDisabled.set(isDisabled);\n }\n\n /**\n * Toggle password visibility\n */\n togglePasswordVisibility(): void {\n this.isPasswordVisible.update((visible) => !visible);\n }\n\n /**\n * Handle input changes\n */\n onInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.value.set(input.value);\n this.onChange(input.value);\n this.strengthChange.emit(this.strength());\n }\n\n /**\n * Handle blur event\n */\n onBlur(): void {\n this.onTouched();\n }\n\n /** 3.2 scoring: the share of the five rules met. */\n private compositionStrength(): PasswordStrength {\n const requirements = this.requirements();\n const score = requirements.filter((r) => r.met).length;\n const percentage = (score / requirements.length) * 100;\n\n let level: PasswordStrength['level'] = 'Weak';\n if (percentage >= 80) {\n level = 'Strong';\n } else if (percentage >= 60) {\n level = 'Good';\n } else if (percentage >= 40) {\n level = 'Fair';\n }\n\n return { score, level, percentage };\n }\n\n /** NIST scoring: the length against `minLength` (score 0–4 like the four levels). */\n private lengthStrength(): PasswordStrength {\n const length = this.value().length;\n const min = this.requiredLength();\n const percentage = Math.min(100, Math.round((length / (2 * min)) * 100));\n\n let level: PasswordStrength['level'] = 'Weak';\n let score = length > 0 ? 1 : 0;\n if (length >= 2 * min) {\n level = 'Strong';\n score = 4;\n } else if (length >= 1.5 * min) {\n level = 'Good';\n score = 3;\n } else if (length >= min) {\n level = 'Fair';\n score = 2;\n }\n\n return { score, level, percentage };\n }\n}\n","<div class=\"lc-password-input\">\n <label [for]=\"inputId\" class=\"lc-label\">\n {{ label() }}\n @if (required() && requiredIndicator()) {\n <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n <div class=\"lc-input-wrapper\">\n <input\n [id]=\"inputId\"\n [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.autocomplete]=\"autocomplete() ?? null\"\n [attr.name]=\"name() ?? null\"\n [attr.autocapitalize]=\"autocapitalize()\"\n [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n autocorrect=\"off\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n class=\"lc-input\"\n [class.lc-input-error]=\"error()\"\n />\n\n <button\n type=\"button\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n [attr.aria-pressed]=\"isPasswordVisible()\"\n [attr.aria-controls]=\"inputId\"\n class=\"lc-toggle-btn\"\n [disabled]=\"isDisabled()\"\n >\n @if (isPasswordVisible()) {\n <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n } @else {\n <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n }\n </button>\n </div>\n\n @if (error()) {\n <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n {{ error() }}\n </div>\n } @else if (helperText()) {\n <div [id]=\"helperId\" class=\"lc-helper\">\n {{ helperText() }}\n </div>\n }\n\n @if (showStrengthMeter()) {\n <div class=\"lc-strength-meter\">\n <!-- The bar is decorative; the live label below carries the meaning -->\n <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n </div>\n <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n </div>\n </div>\n }\n\n @if (showRequirements()) {\n <lc-alert variant=\"info\" [dismissible]=\"false\">\n <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n @for (req of requirements(); track req.label) {\n <li\n class=\"lc-requirement\"\n [class.lc-requirement-met]=\"req.met\"\n [class.lc-requirement-unmet]=\"!req.met\"\n >\n <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n <span class=\"lc-requirement-label\">{{ req.label }}</span>\n <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n </li>\n }\n </ul>\n </lc-alert>\n }\n</div>\n"],"mappings":"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"}
|