@lifecorner/angular-ui-kit 3.21.0 → 3.22.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-card.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-code-block.mjs +3 -3
- package/fesm2022/lifecorner-angular-ui-kit-code-block.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs +3 -3
- package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs +11 -11
- package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-diff-viewer.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-diff-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-file-upload.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-icon.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-icon.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-icons.mjs +80 -2
- package/fesm2022/lifecorner-angular-ui-kit-icons.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-icon-set.mjs +34 -2
- package/fesm2022/lifecorner-angular-ui-kit-internal-icon-set.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs +9 -9
- package/fesm2022/lifecorner-angular-ui-kit-kanban-board.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs +19 -5
- package/fesm2022/lifecorner-angular-ui-kit-log-viewer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-markdown.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-markdown.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-pipeline.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-pipeline.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-rating.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-rating.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs +3 -3
- package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-tree-view.mjs +3 -1
- package/fesm2022/lifecorner-angular-ui-kit-tree-view.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme-contrast.spec.ts +239 -0
- package/types/lifecorner-angular-ui-kit-icons.d.ts +14 -1
|
@@ -98,7 +98,7 @@ var ProgressBarComponent = class ProgressBarComponent {
|
|
|
98
98
|
host: { properties: { "class.lc-progress-bar--inline": "inline()" } },
|
|
99
99
|
ngImport: i0,
|
|
100
100
|
template: "@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n",
|
|
101
|
-
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color
|
|
101
|
+
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:var(--color-on-success-subtle)}.progress-bar--warning .progress-bar__fill{background-color:var(--color-on-warning-subtle)}.progress-bar--error .progress-bar__fill{background-color:var(--color-on-error-subtle)}.progress-bar--info .progress-bar__fill{background-color:var(--color-on-info-subtle)}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:var(--color-on-success-subtle)}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:var(--color-on-warning-subtle)}.progress-bar-circular--error .progress-bar-circular__fill{stroke:var(--color-on-error-subtle)}.progress-bar-circular--info .progress-bar-circular__fill{stroke:var(--color-on-info-subtle)}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.progress-bar--indeterminate .progress-bar__fill{width:100%!important;animation:none;transform:none;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem);mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem)}.progress-bar-circular__fill--indeterminate{animation:none;stroke-dasharray:10.472 10.472;stroke-dashoffset:0;stroke-linecap:butt}}@media(forced-colors:active){.progress-bar .progress-bar__fill{forced-color-adjust:none;background-color:Highlight}.progress-bar__track{outline:1px solid CanvasText}.progress-bar-circular .progress-bar-circular__fill{forced-color-adjust:none;stroke:Highlight}.progress-bar-circular__track{stroke:GrayText}.progress-bar__label,.progress-bar-circular__label{color:CanvasText}}\n"],
|
|
102
102
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
103
103
|
});
|
|
104
104
|
};
|
|
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
115
115
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
116
116
|
host: { "[class.lc-progress-bar--inline]": "inline()" },
|
|
117
117
|
template: "@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n",
|
|
118
|
-
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color
|
|
118
|
+
styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:var(--color-on-success-subtle)}.progress-bar--warning .progress-bar__fill{background-color:var(--color-on-warning-subtle)}.progress-bar--error .progress-bar__fill{background-color:var(--color-on-error-subtle)}.progress-bar--info .progress-bar__fill{background-color:var(--color-on-info-subtle)}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:var(--color-on-success-subtle)}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:var(--color-on-warning-subtle)}.progress-bar-circular--error .progress-bar-circular__fill{stroke:var(--color-on-error-subtle)}.progress-bar-circular--info .progress-bar-circular__fill{stroke:var(--color-on-info-subtle)}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.progress-bar--indeterminate .progress-bar__fill{width:100%!important;animation:none;transform:none;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem);mask-image:repeating-linear-gradient(45deg,#000 0 .375rem,transparent .375rem .75rem)}.progress-bar-circular__fill--indeterminate{animation:none;stroke-dasharray:10.472 10.472;stroke-dashoffset:0;stroke-linecap:butt}}@media(forced-colors:active){.progress-bar .progress-bar__fill{forced-color-adjust:none;background-color:Highlight}.progress-bar__track{outline:1px solid CanvasText}.progress-bar-circular .progress-bar-circular__fill{forced-color-adjust:none;stroke:Highlight}.progress-bar-circular__track{stroke:GrayText}.progress-bar__label,.progress-bar-circular__label{color:CanvasText}}\n"]
|
|
119
119
|
}]
|
|
120
120
|
}],
|
|
121
121
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-progress-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ProgressBarVariant = 'linear' | 'circular';\n\n/**\n * Progress bar component for displaying completion status.\n *\n * Features:\n * - Linear and circular progress variants\n * - Color theme options (primary, secondary, success, warning, error)\n * - Multiple size presets (xs, sm, md, lg)\n * - Animated value transitions\n * - Accessible with ARIA progressbar role\n *\n * The bar is a visual aid; the text next to it carries the meaning. Write the\n * status as text ('USM wird geladen …') and announce changes from a live\n * region (`role=\"status\"`). Screen readers don't announce a progress bar's\n * changes by themselves. Give `ariaLabel` the same words as the status. Under\n * `forced-colors: active` the fill is `Highlight`, the linear track gets a\n * 1 px `CanvasText` outline and the circle's track is `GrayText` (3.17).\n *\n * @example\n * ```html\n * <lc-progress-bar [value]=\"75\" color=\"primary\" size=\"md\"></lc-progress-bar>\n * <lc-progress-bar [value]=\"50\" variant=\"circular\" color=\"success\"></lc-progress-bar>\n *\n * <!-- thin bar inside a list row: fixed width, flows with the line -->\n * <lc-progress-bar [value]=\"60\" size=\"sm\" [inline]=\"true\"\n * style=\"--lc-progress-bar-height: 6px\"></lc-progress-bar>\n * ```\n */\n@Component({\n selector: 'lc-progress-bar',\n standalone: true,\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-progress-bar--inline]': 'inline()',\n },\n})\nexport class ProgressBarComponent {\n /**\n * Progress value between 0 and 100.\n * @default 0\n */\n value = input<number>(0);\n\n /**\n * Color theme.\n * @default 'primary'\n */\n color = input<ProgressBarColor>('primary');\n\n /**\n * Height/thickness of the bar.\n * @default 'md'\n */\n size = input<ProgressBarSize>('md');\n\n /**\n * Visual variant.\n * @default 'linear'\n */\n variant = input<ProgressBarVariant>('linear');\n\n /**\n * Whether to show the percentage label.\n * @default false\n */\n showLabel = input<boolean>(false);\n\n /**\n * Inline mode for list rows: the bar flows with the surrounding line at a\n * fixed width instead of filling its container. Width is settable via\n * `--lc-progress-bar-inline-width` (default 5rem), the track height via\n * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.\n * @default false\n */\n inline = input<boolean>(false);\n\n /**\n * Progress of unknown length: no value (`aria-valuenow` is absent) and no\n * label. The linear bar moves a 40 % segment across the track, and the\n * circle spins. Under `prefers-reduced-motion: reduce` nothing moves: the\n * linear bar shows a full-width striped fill and the circle a dashed ring,\n * so it still reads as busy, not as a value (3.17).\n * @default false\n */\n indeterminate = input<boolean>(false);\n\n /**\n * Accessible label for screen readers.\n */\n ariaLabel = input<string>('Progress');\n\n protected clampedValue = computed(() => Math.max(0, Math.min(100, this.value())));\n\n protected barClasses = computed(() => {\n return [\n 'progress-bar',\n `progress-bar--${this.color()}`,\n `progress-bar--${this.size()}`,\n this.indeterminate() ? 'progress-bar--indeterminate' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n // Circular variant helpers\n protected readonly circleRadius = 40;\n protected readonly circleCircumference = 2 * Math.PI * 40;\n\n protected strokeDashoffset = computed(() => {\n return this.circleCircumference * (1 - this.clampedValue() / 100);\n });\n}\n","@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n"],"mappings":";;AAgDA,IAAa,uBAAb,MAAa,qBAAoB;CAK/B,QAAQ,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMxB,QAAQ,MAAwB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAM1C,OAAO,MAAuB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAMnC,UAAU,MAA0B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAM7C,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CASjC,SAAS,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAU9B,gBAAgB,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAKrC,YAAY,MAAc,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE3B,eAAe,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAK,CAAE,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEvE,aAAa,eAAc;EACnC,OAAO;GACL;GACA,iBAAiB,KAAK,MAAK;GAC3B,iBAAiB,KAAK,KAAI;GAC1B,KAAK,cAAa,IAAK,gCAAgC;EACxD,CAAA,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGiB,eAAe;CACf,sBAAsB,IAAI,KAAK,KAAK;CAE7C,mBAAmB,eAAc;EACzC,OAAO,KAAK,uBAAuB,IAAI,KAAK,aAAY,IAAK;CAC/D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CA1ES,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,OAAA;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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;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,QAAA;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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,iCAAA,WAAA,EAAA;EAAA,UAAA;EAAA,UChDjC;EAiDA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-progress-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n computed,\n} from '@angular/core';\n\nexport type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ProgressBarVariant = 'linear' | 'circular';\n\n/**\n * Progress bar component for displaying completion status.\n *\n * Features:\n * - Linear and circular progress variants\n * - Color theme options (primary, secondary, success, warning, error)\n * - Multiple size presets (xs, sm, md, lg)\n * - Animated value transitions\n * - Accessible with ARIA progressbar role\n *\n * The bar is a visual aid; the text next to it carries the meaning. Write the\n * status as text ('USM wird geladen …') and announce changes from a live\n * region (`role=\"status\"`). Screen readers don't announce a progress bar's\n * changes by themselves. Give `ariaLabel` the same words as the status. Under\n * `forced-colors: active` the fill is `Highlight`, the linear track gets a\n * 1 px `CanvasText` outline and the circle's track is `GrayText` (3.17).\n *\n * @example\n * ```html\n * <lc-progress-bar [value]=\"75\" color=\"primary\" size=\"md\"></lc-progress-bar>\n * <lc-progress-bar [value]=\"50\" variant=\"circular\" color=\"success\"></lc-progress-bar>\n *\n * <!-- thin bar inside a list row: fixed width, flows with the line -->\n * <lc-progress-bar [value]=\"60\" size=\"sm\" [inline]=\"true\"\n * style=\"--lc-progress-bar-height: 6px\"></lc-progress-bar>\n * ```\n */\n@Component({\n selector: 'lc-progress-bar',\n standalone: true,\n templateUrl: './progress-bar.component.html',\n styleUrls: ['./progress-bar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class.lc-progress-bar--inline]': 'inline()',\n },\n})\nexport class ProgressBarComponent {\n /**\n * Progress value between 0 and 100.\n * @default 0\n */\n value = input<number>(0);\n\n /**\n * Color theme.\n * @default 'primary'\n */\n color = input<ProgressBarColor>('primary');\n\n /**\n * Height/thickness of the bar.\n * @default 'md'\n */\n size = input<ProgressBarSize>('md');\n\n /**\n * Visual variant.\n * @default 'linear'\n */\n variant = input<ProgressBarVariant>('linear');\n\n /**\n * Whether to show the percentage label.\n * @default false\n */\n showLabel = input<boolean>(false);\n\n /**\n * Inline mode for list rows: the bar flows with the surrounding line at a\n * fixed width instead of filling its container. Width is settable via\n * `--lc-progress-bar-inline-width` (default 5rem), the track height via\n * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.\n * @default false\n */\n inline = input<boolean>(false);\n\n /**\n * Progress of unknown length: no value (`aria-valuenow` is absent) and no\n * label. The linear bar moves a 40 % segment across the track, and the\n * circle spins. Under `prefers-reduced-motion: reduce` nothing moves: the\n * linear bar shows a full-width striped fill and the circle a dashed ring,\n * so it still reads as busy, not as a value (3.17).\n * @default false\n */\n indeterminate = input<boolean>(false);\n\n /**\n * Accessible label for screen readers.\n */\n ariaLabel = input<string>('Progress');\n\n protected clampedValue = computed(() => Math.max(0, Math.min(100, this.value())));\n\n protected barClasses = computed(() => {\n return [\n 'progress-bar',\n `progress-bar--${this.color()}`,\n `progress-bar--${this.size()}`,\n this.indeterminate() ? 'progress-bar--indeterminate' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n // Circular variant helpers\n protected readonly circleRadius = 40;\n protected readonly circleCircumference = 2 * Math.PI * 40;\n\n protected strokeDashoffset = computed(() => {\n return this.circleCircumference * (1 - this.clampedValue() / 100);\n });\n}\n","@if (variant() === 'linear') {\n <div\n [class]=\"barClasses()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <div class=\"progress-bar__track\">\n <div\n class=\"progress-bar__fill\"\n [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n ></div>\n </div>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n }\n </div>\n} @else {\n <div\n class=\"progress-bar-circular\"\n [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n <circle\n class=\"progress-bar-circular__track\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n />\n <circle\n class=\"progress-bar-circular__fill\"\n cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n fill=\"none\"\n [attr.stroke-dasharray]=\"circleCircumference\"\n [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n />\n </svg>\n @if (showLabel() && !indeterminate()) {\n <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n }\n </div>\n}\n"],"mappings":"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"}
|
|
@@ -209,7 +209,7 @@ var RatingComponent = class RatingComponent {
|
|
|
209
209
|
}],
|
|
210
210
|
ngImport: i0,
|
|
211
211
|
template: "<div [class]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n @if (label()) {\n <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n <div\n class=\"rating__stars\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n (keydown)=\"onKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n @for (star of stars(); track star) {\n <button\n #starBtn\n type=\"button\"\n class=\"rating__star\"\n role=\"radio\"\n [class.rating__star--filled]=\"isStarFilled(star)\"\n [class.rating__star--half]=\"isStarHalf(star)\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"star === focusableStar() ? 0 : -1\"\n [attr.aria-checked]=\"isStarChecked(star)\"\n [attr.aria-label]=\"starLabel(star)\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n >\n @if (isStarFilled(star)) {\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n } @else if (isStarHalf(star)) {\n <span class=\"rating__icon rating__icon--half\">\n <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n </span>\n } @else {\n <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n }\n </button>\n }\n </div>\n @if (showValue()) {\n <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n }\n</div>\n",
|
|
212
|
-
styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-warning)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-warning);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"],
|
|
212
|
+
styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-on-warning-subtle)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-on-warning-subtle);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"],
|
|
213
213
|
dependencies: [{
|
|
214
214
|
kind: "component",
|
|
215
215
|
type: IconComponent,
|
|
@@ -247,7 +247,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
247
247
|
multi: true
|
|
248
248
|
}],
|
|
249
249
|
template: "<div [class]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n @if (label()) {\n <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n <div\n class=\"rating__stars\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n (keydown)=\"onKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n @for (star of stars(); track star) {\n <button\n #starBtn\n type=\"button\"\n class=\"rating__star\"\n role=\"radio\"\n [class.rating__star--filled]=\"isStarFilled(star)\"\n [class.rating__star--half]=\"isStarHalf(star)\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"star === focusableStar() ? 0 : -1\"\n [attr.aria-checked]=\"isStarChecked(star)\"\n [attr.aria-label]=\"starLabel(star)\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n >\n @if (isStarFilled(star)) {\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n } @else if (isStarHalf(star)) {\n <span class=\"rating__icon rating__icon--half\">\n <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n </span>\n } @else {\n <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n }\n </button>\n }\n </div>\n @if (showValue()) {\n <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n }\n</div>\n",
|
|
250
|
-
styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-warning)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-warning);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"]
|
|
250
|
+
styles: [".rating{display:inline-flex;align-items:center;gap:.5rem}.rating__label{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.rating__stars{display:inline-flex;align-items:center;gap:.125rem}.rating__star{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:.125rem;cursor:pointer;border-radius:.25rem;transition:transform .15s ease}.rating__star:hover:not(:disabled){transform:scale(1.15)}.rating__star:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.rating__star:disabled{cursor:default}.rating__icon{transition:color .15s ease}.rating__icon--filled{color:var(--color-on-warning-subtle)}.rating__icon--half{position:relative;display:inline-flex;color:var(--color-border-strong)}.rating__icon--empty{color:var(--color-border-strong)}.rating__icon-fill{position:absolute;inset:0;color:var(--color-on-warning-subtle);clip-path:inset(0 50% 0 0)}:host-context([dir=rtl]) .rating__icon-fill{clip-path:inset(0 0 0 50%)}.rating__value{font-size:var(--typography-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--color-text-tertiary)}.rating--sm .rating__star{padding:.0625rem}.rating--lg .rating__star{padding:.1875rem}.rating--lg .rating__value{font-size:var(--typography-font-size-base, 1rem)}.rating--readonly .rating__star{cursor:default}.rating--readonly .rating__star:hover{transform:none}.rating--disabled{opacity:.5;pointer-events:none}\n"]
|
|
251
251
|
}]
|
|
252
252
|
}],
|
|
253
253
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-rating.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/rating/rating.component.ts","../../../../libs/angular-ui-kit/src/lib/rating/rating.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_STAR, ICON_STAR_SOLID } from '@lifecorner/angular-ui-kit/icons';\n\nexport type RatingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n selector: 'lc-rating',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_STAR, ICON_STAR_SOLID])],\n templateUrl: './rating.component.html',\n styleUrls: ['./rating.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => RatingComponent),\n multi: true,\n },\n ],\n})\n/**\n * Rating component for star-based value selection.\n *\n * Features:\n * - Configurable maximum star count\n * - Half-star rating support (click the left half of a star, or step with the arrow keys)\n * - Multiple size variants (sm, md, lg)\n * - Read-only and disabled states\n * - Hover preview with visual feedback\n * - Keyboard: Arrow keys step the value, Home/End jump to the ends\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-rating [max]=\"5\" [allowHalf]=\"true\" label=\"Rate this\" />\n * ```\n */\nexport class RatingComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Maximum number of stars */\n max = input<number>(5);\n\n /** Size variant */\n size = input<RatingSize>('md');\n\n /** Whether the rating is read-only */\n readonly = input<boolean>(false);\n\n /** Whether the rating is disabled */\n disabled = input<boolean>(false);\n\n /** Whether to allow half-star ratings */\n allowHalf = input<boolean>(false);\n\n /** Label text */\n label = input<string>();\n\n /** Whether to show the numeric value */\n showValue = input<boolean>(false);\n\n /** Accessible name of the star group when no visible `label` is set. */\n ariaLabel = input('Rating');\n\n /** Emits the selected rating */\n ratingChange = output<number>();\n\n /** Per-instance id naming the radiogroup by the visible label. */\n protected readonly labelId = `lc-rating-${++RatingComponent.nextId}-label`;\n\n protected value = signal(0);\n protected hoveredValue = signal(0);\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 /** Whether clicks and keys change the value. Read-only stays focusable, it just does not react. */\n protected readonly interactive = computed(() => !this.readonly() && !this.isDisabled());\n\n private readonly starButtons = viewChildren<ElementRef<HTMLButtonElement>>('starBtn');\n\n protected stars = computed(() => {\n return Array.from({ length: this.max() }, (_, i) => i + 1);\n });\n\n /** Smallest change the value can make. */\n private readonly stepSize = computed(() => (this.allowHalf() ? 0.5 : 1));\n\n /**\n * The star that carries the group's single tab stop (roving tabindex): the\n * one holding the current value, or the first when nothing is selected.\n */\n protected readonly focusableStar = computed(() => Math.max(1, Math.ceil(this.value())));\n\n protected ratingClasses = computed(() => {\n const classes = ['rating', `rating--${this.size()}`];\n if (this.readonly()) classes.push('rating--readonly');\n if (this.isDisabled()) classes.push('rating--disabled');\n return classes.join(' ');\n });\n\n protected getStarState(star: number): 'full' | 'half' | 'empty' {\n const active = this.hoveredValue() || this.value();\n if (star <= Math.floor(active)) return 'full';\n if (this.allowHalf() && star - 0.5 <= active) return 'half';\n return 'empty';\n }\n\n protected isStarFilled(star: number): boolean {\n return this.getStarState(star) === 'full';\n }\n\n protected isStarHalf(star: number): boolean {\n return this.getStarState(star) === 'half';\n }\n\n /** `aria-checked` for the radio that represents the current value (2.5 lives on star 3). */\n protected isStarChecked(star: number): boolean {\n const val = this.value();\n return val > 0 && Math.ceil(val) === star;\n }\n\n /** Radio label — names the half value on the star that holds it. */\n protected starLabel(star: number): string {\n const val = this.value();\n const shown = this.isStarChecked(star) && val !== star ? val : star;\n return `${shown} of ${this.max()} stars`;\n }\n\n /**\n * The value a pointer at `clientX` over `star` stands for: the left half of\n * a star (right half in RTL) is the half step when halves are allowed.\n * Keyboard-triggered clicks carry no coordinates and mean the whole star.\n */\n private valueAt(star: number, event: MouseEvent): number {\n if (!this.allowHalf() || event.detail === 0) return star;\n const el = event.currentTarget as HTMLElement;\n const rect = el.getBoundingClientRect();\n if (!rect.width) return star;\n const fromStart = event.clientX - rect.left;\n const rtl = getComputedStyle(el).direction === 'rtl';\n const inFirstHalf = rtl ? fromStart > rect.width / 2 : fromStart < rect.width / 2;\n return inFirstHalf ? star - 0.5 : star;\n }\n\n protected onStarClick(star: number, event: MouseEvent): void {\n if (!this.interactive()) return;\n this.select(this.valueAt(star, event));\n this.onTouched();\n }\n\n protected onStarHover(star: number, event: MouseEvent): void {\n if (!this.interactive()) return;\n this.hoveredValue.set(this.valueAt(star, event));\n }\n\n protected onMouseLeave(): void {\n this.hoveredValue.set(0);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (!this.interactive()) return;\n const step = this.stepSize();\n const cur = this.value();\n let next: number;\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = Math.min(this.max(), cur + step);\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n next = Math.max(step, cur - step);\n break;\n case 'Home':\n next = step;\n break;\n case 'End':\n next = this.max();\n break;\n default:\n return;\n }\n event.preventDefault();\n this.select(next);\n // Roving tabindex: focus follows the checked star.\n this.starButtons()[this.focusableStar() - 1]?.nativeElement.focus();\n }\n\n /** Marks the control touched once focus leaves the group (not when it moves between stars). */\n protected onFocusOut(event: FocusEvent): void {\n const group = event.currentTarget as HTMLElement;\n if (event.relatedTarget instanceof Node && group.contains(event.relatedTarget)) return;\n this.onTouched();\n }\n\n private select(val: number): void {\n if (val === this.value()) return;\n this.value.set(val);\n this.ratingChange.emit(val);\n this.onChange(val);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: number) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n writeValue(val: number): void {\n this.value.set(val ?? 0);\n }\n\n registerOnChange(fn: (val: number) => 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]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n @if (label()) {\n <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n <div\n class=\"rating__stars\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n (keydown)=\"onKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n @for (star of stars(); track star) {\n <button\n #starBtn\n type=\"button\"\n class=\"rating__star\"\n role=\"radio\"\n [class.rating__star--filled]=\"isStarFilled(star)\"\n [class.rating__star--half]=\"isStarHalf(star)\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"star === focusableStar() ? 0 : -1\"\n [attr.aria-checked]=\"isStarChecked(star)\"\n [attr.aria-label]=\"starLabel(star)\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n >\n @if (isStarFilled(star)) {\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n } @else if (isStarHalf(star)) {\n <span class=\"rating__icon rating__icon--half\">\n <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n </span>\n } @else {\n <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n }\n </button>\n }\n </div>\n @if (showValue()) {\n <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-rating.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/rating/rating.component.ts","../../../../libs/angular-ui-kit/src/lib/rating/rating.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n computed,\n signal,\n forwardRef,\n viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_STAR, ICON_STAR_SOLID } from '@lifecorner/angular-ui-kit/icons';\n\nexport type RatingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n selector: 'lc-rating',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_STAR, ICON_STAR_SOLID])],\n templateUrl: './rating.component.html',\n styleUrls: ['./rating.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => RatingComponent),\n multi: true,\n },\n ],\n})\n/**\n * Rating component for star-based value selection.\n *\n * Features:\n * - Configurable maximum star count\n * - Half-star rating support (click the left half of a star, or step with the arrow keys)\n * - Multiple size variants (sm, md, lg)\n * - Read-only and disabled states\n * - Hover preview with visual feedback\n * - Keyboard: Arrow keys step the value, Home/End jump to the ends\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-rating [max]=\"5\" [allowHalf]=\"true\" label=\"Rate this\" />\n * ```\n */\nexport class RatingComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Maximum number of stars */\n max = input<number>(5);\n\n /** Size variant */\n size = input<RatingSize>('md');\n\n /** Whether the rating is read-only */\n readonly = input<boolean>(false);\n\n /** Whether the rating is disabled */\n disabled = input<boolean>(false);\n\n /** Whether to allow half-star ratings */\n allowHalf = input<boolean>(false);\n\n /** Label text */\n label = input<string>();\n\n /** Whether to show the numeric value */\n showValue = input<boolean>(false);\n\n /** Accessible name of the star group when no visible `label` is set. */\n ariaLabel = input('Rating');\n\n /** Emits the selected rating */\n ratingChange = output<number>();\n\n /** Per-instance id naming the radiogroup by the visible label. */\n protected readonly labelId = `lc-rating-${++RatingComponent.nextId}-label`;\n\n protected value = signal(0);\n protected hoveredValue = signal(0);\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 /** Whether clicks and keys change the value. Read-only stays focusable, it just does not react. */\n protected readonly interactive = computed(() => !this.readonly() && !this.isDisabled());\n\n private readonly starButtons = viewChildren<ElementRef<HTMLButtonElement>>('starBtn');\n\n protected stars = computed(() => {\n return Array.from({ length: this.max() }, (_, i) => i + 1);\n });\n\n /** Smallest change the value can make. */\n private readonly stepSize = computed(() => (this.allowHalf() ? 0.5 : 1));\n\n /**\n * The star that carries the group's single tab stop (roving tabindex): the\n * one holding the current value, or the first when nothing is selected.\n */\n protected readonly focusableStar = computed(() => Math.max(1, Math.ceil(this.value())));\n\n protected ratingClasses = computed(() => {\n const classes = ['rating', `rating--${this.size()}`];\n if (this.readonly()) classes.push('rating--readonly');\n if (this.isDisabled()) classes.push('rating--disabled');\n return classes.join(' ');\n });\n\n protected getStarState(star: number): 'full' | 'half' | 'empty' {\n const active = this.hoveredValue() || this.value();\n if (star <= Math.floor(active)) return 'full';\n if (this.allowHalf() && star - 0.5 <= active) return 'half';\n return 'empty';\n }\n\n protected isStarFilled(star: number): boolean {\n return this.getStarState(star) === 'full';\n }\n\n protected isStarHalf(star: number): boolean {\n return this.getStarState(star) === 'half';\n }\n\n /** `aria-checked` for the radio that represents the current value (2.5 lives on star 3). */\n protected isStarChecked(star: number): boolean {\n const val = this.value();\n return val > 0 && Math.ceil(val) === star;\n }\n\n /** Radio label — names the half value on the star that holds it. */\n protected starLabel(star: number): string {\n const val = this.value();\n const shown = this.isStarChecked(star) && val !== star ? val : star;\n return `${shown} of ${this.max()} stars`;\n }\n\n /**\n * The value a pointer at `clientX` over `star` stands for: the left half of\n * a star (right half in RTL) is the half step when halves are allowed.\n * Keyboard-triggered clicks carry no coordinates and mean the whole star.\n */\n private valueAt(star: number, event: MouseEvent): number {\n if (!this.allowHalf() || event.detail === 0) return star;\n const el = event.currentTarget as HTMLElement;\n const rect = el.getBoundingClientRect();\n if (!rect.width) return star;\n const fromStart = event.clientX - rect.left;\n const rtl = getComputedStyle(el).direction === 'rtl';\n const inFirstHalf = rtl ? fromStart > rect.width / 2 : fromStart < rect.width / 2;\n return inFirstHalf ? star - 0.5 : star;\n }\n\n protected onStarClick(star: number, event: MouseEvent): void {\n if (!this.interactive()) return;\n this.select(this.valueAt(star, event));\n this.onTouched();\n }\n\n protected onStarHover(star: number, event: MouseEvent): void {\n if (!this.interactive()) return;\n this.hoveredValue.set(this.valueAt(star, event));\n }\n\n protected onMouseLeave(): void {\n this.hoveredValue.set(0);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (!this.interactive()) return;\n const step = this.stepSize();\n const cur = this.value();\n let next: number;\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = Math.min(this.max(), cur + step);\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n next = Math.max(step, cur - step);\n break;\n case 'Home':\n next = step;\n break;\n case 'End':\n next = this.max();\n break;\n default:\n return;\n }\n event.preventDefault();\n this.select(next);\n // Roving tabindex: focus follows the checked star.\n this.starButtons()[this.focusableStar() - 1]?.nativeElement.focus();\n }\n\n /** Marks the control touched once focus leaves the group (not when it moves between stars). */\n protected onFocusOut(event: FocusEvent): void {\n const group = event.currentTarget as HTMLElement;\n if (event.relatedTarget instanceof Node && group.contains(event.relatedTarget)) return;\n this.onTouched();\n }\n\n private select(val: number): void {\n if (val === this.value()) return;\n this.value.set(val);\n this.ratingChange.emit(val);\n this.onChange(val);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (val: number) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => void = () => {};\n\n writeValue(val: number): void {\n this.value.set(val ?? 0);\n }\n\n registerOnChange(fn: (val: number) => 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]=\"ratingClasses()\" (mouseleave)=\"onMouseLeave()\">\n @if (label()) {\n <span class=\"rating__label\" [id]=\"labelId\">{{ label() }}</span>\n }\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- keydown bubbles from the focused star radio (roving tabindex) -->\n <div\n class=\"rating__stars\"\n role=\"radiogroup\"\n [attr.aria-labelledby]=\"label() ? labelId : null\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n (keydown)=\"onKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n @for (star of stars(); track star) {\n <button\n #starBtn\n type=\"button\"\n class=\"rating__star\"\n role=\"radio\"\n [class.rating__star--filled]=\"isStarFilled(star)\"\n [class.rating__star--half]=\"isStarHalf(star)\"\n [disabled]=\"isDisabled()\"\n [tabindex]=\"star === focusableStar() ? 0 : -1\"\n [attr.aria-checked]=\"isStarChecked(star)\"\n [attr.aria-label]=\"starLabel(star)\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n >\n @if (isStarFilled(star)) {\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon rating__icon--filled\" [decorative]=\"true\" />\n } @else if (isStarHalf(star)) {\n <span class=\"rating__icon rating__icon--half\">\n <lc-icon name=\"star\" [size]=\"size()\" [decorative]=\"true\" />\n <lc-icon name=\"star\" variant=\"solid\" [size]=\"size()\" class=\"rating__icon-fill\" [decorative]=\"true\" />\n </span>\n } @else {\n <lc-icon name=\"star\" [size]=\"size()\" class=\"rating__icon rating__icon--empty\" [decorative]=\"true\" />\n }\n </button>\n }\n </div>\n @if (showValue()) {\n <span class=\"rating__value\">{{ value() }}/{{ max() }}</span>\n }\n</div>\n"],"mappings":";;;;;AAkDA,IAAa,kBAAb,MAAa,gBAAe;CAClB,OAAO,SAAS;CAGxB,MAAM,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGtB,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,YAAY,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,eAAe,OAAM;CAGF,UAAU,aAAa,EAAE,gBAAgB,OAAM;CAExD,QAAQ,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjB,eAAe,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAGjB,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;CAGnE,cAAc,eAAe,CAAC,KAAK,SAAQ,KAAM,CAAC,KAAK,WAAU,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEtE,cAAc,aAA4C,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAE3E,QAAQ,eAAc;EAC9B,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAG,EAAE,IAAK,GAAG,MAAM,IAAI,CAAC;CAC3D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGe,WAAW,eAAgB,KAAK,UAAS,IAAK,KAAM,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMrD,gBAAgB,eAAe,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,MAAK,CAAE,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAE7E,gBAAgB,eAAc;EACtC,MAAM,UAAU,CAAC,UAAU,WAAW,KAAK,KAAI,GAAI;EACnD,IAAI,KAAK,SAAQ,GAAI,QAAQ,KAAK,kBAAkB;EACpD,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,kBAAkB;EACtD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,aAAa,MAAY;EACjC,MAAM,SAAS,KAAK,aAAY,KAAM,KAAK,MAAK;EAChD,IAAI,QAAQ,KAAK,MAAM,MAAM,GAAG,OAAO;EACvC,IAAI,KAAK,UAAS,KAAM,OAAO,MAAO,QAAQ,OAAO;EACrD,OAAO;CACT;CAEU,aAAa,MAAY;EACjC,OAAO,KAAK,aAAa,IAAI,MAAM;CACrC;CAEU,WAAW,MAAY;EAC/B,OAAO,KAAK,aAAa,IAAI,MAAM;CACrC;CAGU,cAAc,MAAY;EAClC,MAAM,MAAM,KAAK,MAAK;EACtB,OAAO,MAAM,KAAK,KAAK,KAAK,GAAG,MAAM;CACvC;CAGU,UAAU,MAAY;EAC9B,MAAM,MAAM,KAAK,MAAK;EAEtB,OAAO,GADO,KAAK,cAAc,IAAI,KAAK,QAAQ,OAAO,MAAM,KAChD,MAAO,KAAK,IAAG,EAAE;CAClC;CAOQ,QAAQ,MAAc,OAAiB;EAC7C,IAAI,CAAC,KAAK,UAAS,KAAM,MAAM,WAAW,GAAG,OAAO;EACpD,MAAM,KAAK,MAAM;EACjB,MAAM,OAAO,GAAG,sBAAqB;EACrC,IAAI,CAAC,KAAK,OAAO,OAAO;EACxB,MAAM,YAAY,MAAM,UAAU,KAAK;EAGvC,QAFY,iBAAiB,EAAE,CAAC,CAAC,cAAc,QACrB,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,QAAQ,KAC3D,OAAO,KAAM;CACpC;CAEU,YAAY,MAAc,OAAiB;EACnD,IAAI,CAAC,KAAK,YAAW,GAAI;EACzB,KAAK,OAAO,KAAK,QAAQ,MAAM,KAAK,CAAC;EACrC,KAAK,UAAS;CAChB;CAEU,YAAY,MAAc,OAAiB;EACnD,IAAI,CAAC,KAAK,YAAW,GAAI;EACzB,KAAK,aAAa,IAAI,KAAK,QAAQ,MAAM,KAAK,CAAC;CACjD;CAEU,eAAY;EACpB,KAAK,aAAa,IAAI,CAAC;CACzB;CAEU,UAAU,OAAoB;EACtC,IAAI,CAAC,KAAK,YAAW,GAAI;EACzB,MAAM,OAAO,KAAK,SAAQ;EAC1B,MAAM,MAAM,KAAK,MAAK;EACtB,IAAI;EACJ,QAAQ,MAAM,KAAd;GACE,KAAK;GACL,KAAK;IACH,OAAO,KAAK,IAAI,KAAK,IAAG,GAAI,MAAM,IAAI;IACtC;GACF,KAAK;GACL,KAAK;IACH,OAAO,KAAK,IAAI,MAAM,MAAM,IAAI;IAChC;GACF,KAAK;IACH,OAAO;IACP;GACF,KAAK;IACH,OAAO,KAAK,IAAG;IACf;GACF,SACE;EACJ;EACA,MAAM,eAAc;EACpB,KAAK,OAAO,IAAI;EAEhB,KAAK,YAAW,CAAE,CAAC,KAAK,cAAa,IAAK,EAAE,EAAE,cAAc,MAAK;CACnE;CAGU,WAAW,OAAiB;EACpC,MAAM,QAAQ,MAAM;EACpB,IAAI,MAAM,yBAAyB,QAAQ,MAAM,SAAS,MAAM,aAAa,GAAG;EAChF,KAAK,UAAS;CAChB;CAEQ,OAAO,KAAW;EACxB,IAAI,QAAQ,KAAK,MAAK,GAAI;EAC1B,KAAK,MAAM,IAAI,GAAG;EAClB,KAAK,aAAa,KAAK,GAAG;EAC1B,KAAK,SAAS,GAAG;CACnB;CAGQ,iBAAuC,CAAE;CAEzC,kBAA6B,CAAE;CAEvC,WAAW,KAAW;EACpB,KAAK,MAAM,IAAI,OAAO,CAAC;CACzB;CAEA,iBAAiB,IAAyB;EACxC,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,aAAa,IAAI,UAAU;CAClC;CA5LW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;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,UAAA;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,WAAA;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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,cAAA,eAAA;EAAA,WAzBf,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,eAAe;GAC7C,OAAO;EACR,CACF;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,WAAA,CAAA,SAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UC/BH;EA+CA,QAAA,CAAA,u/CAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD3BY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eACR,CAAC,iBAAiB,CAAC,WAAW,eAAe,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA6BpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAjC3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,SACP,CAAC,aAAa;GAAC,eACT,CAAC,iBAAiB,CAAC,WAAW,eAAe,CAAC,CAAC;GAAC,iBAG9C,wBAAwB;GAAM,WACpC,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,eAAgB;IAC7C,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,u/CAAA;EAAA,CAAA;CAgE0E,CAAA;CAAA,gBAAA;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,UAAA,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,WAAA,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,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,cAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAS,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}
|
|
@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
|
|
|
2
2
|
import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, untracked, viewChild } from "@angular/core";
|
|
3
3
|
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
|
4
4
|
import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
|
|
5
|
-
import { ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
|
|
5
|
+
import { ICON_SEARCH, ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
|
|
6
6
|
import { Subject, debounce, distinctUntilChanged, filter, of, timer } from "rxjs";
|
|
7
7
|
let nextUniqueId = 0;
|
|
8
8
|
var SearchInputComponent = class SearchInputComponent {
|
|
@@ -176,7 +176,7 @@ var SearchInputComponent = class SearchInputComponent {
|
|
|
176
176
|
"strict"
|
|
177
177
|
]
|
|
178
178
|
}],
|
|
179
|
-
viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
|
|
179
|
+
viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],
|
|
180
180
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
181
181
|
});
|
|
182
182
|
};
|
|
@@ -191,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
191
191
|
selector: "lc-search-input",
|
|
192
192
|
standalone: true,
|
|
193
193
|
imports: [IconComponent],
|
|
194
|
-
viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
|
|
194
|
+
viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],
|
|
195
195
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
196
196
|
template: "<div [class]=\"wrapperClasses()\">\n <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n <input\n #searchInputEl\n type=\"search\"\n class=\"search-input__field\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n />\n @if (value()) {\n <button\n type=\"button\"\n class=\"search-input__clear\"\n (click)=\"clear()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"disabled()\"\n >\n <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n </button>\n }\n</div>\n",
|
|
197
197
|
styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n model,\n output,\n computed,\n ElementRef,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' | 'md' | 'lg';\n\n/** A value travelling through the debounce pipe. */\ninterface SearchEmission {\n readonly value: string;\n /** Bypass the debounce (clear button, external writes). */\n readonly immediate: boolean;\n /** Only update the dedupe baseline, never reach `searchChange` (external writes). */\n readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/**\n * Search input component with integrated search functionality.\n *\n * Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n *\n * @example\n * ```html\n * <lc-search-input\n * placeholder=\"Search...\"\n * [debounceMs]=\"300\"\n * [(value)]=\"query\"\n * (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n */\n@Component({\n selector: 'lc-search-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n templateUrl: './search-input.component.html',\n styleUrls: ['./search-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n /**\n * id of the native input (lets a parent `<label for>` point at it).\n * @default generated\n */\n readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n /**\n * Placeholder text.\n * @default 'Search…'\n */\n placeholder = input<string>('Search…');\n\n /**\n * Size variant.\n * @default 'md'\n */\n size = input<SearchInputSize>('md');\n\n /**\n * Debounce delay in milliseconds. 0 means no debounce.\n * @default 300\n */\n debounceMs = input<number>(300);\n\n /**\n * Whether the search input is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Accessible name of the input.\n * @default 'Search'\n */\n readonly ariaLabel = input<string>();\n\n /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */\n readonly ariaLabelledBy = input<string>();\n\n /** Accessible name of the clear button. */\n readonly clearAriaLabel = input('Clear search');\n\n /**\n * Current query (two-way bindable). Writing it from outside updates the\n * field without emitting `searchChange`; `valueChange` emits on every\n * keystroke (undebounced) and on clear.\n */\n readonly value = model<string>('');\n\n /**\n * Emitted when the search value changes (debounced).\n */\n readonly searchChange = output<string>();\n\n /**\n * Emitted when the user presses Enter.\n */\n readonly searchSubmit = output<string>();\n\n protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n protected wrapperClasses = computed(() => {\n return [\n 'search-input',\n `search-input--${this.size()}`,\n this.disabled() ? 'search-input--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n private readonly input$ = new Subject<SearchEmission>();\n /** Last value pushed into the pipe (by typing, clear or an external write). */\n private lastPushed = '';\n\n constructor() {\n this.input$\n .pipe(\n // debounceMs is read per emission, so changing it takes effect immediately.\n // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n debounce(({ immediate }) => {\n const ms = this.debounceMs();\n return immediate || ms <= 0 ? of(null) : timer(ms);\n }),\n distinctUntilChanged((a, b) => a.value === b.value),\n filter(({ silent }) => !silent),\n takeUntilDestroyed(),\n )\n .subscribe(({ value }) => this.searchChange.emit(value));\n\n // A value written from outside is already known to the parent: run it through\n // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n // debounce) without echoing a searchChange back.\n effect(() => {\n const value = this.value();\n untracked(() => {\n if (value !== this.lastPushed) {\n this.push(value, { immediate: true, silent: true });\n }\n });\n });\n }\n\n protected onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.push(val, { immediate: false, silent: false });\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.searchSubmit.emit(this.value());\n }\n }\n\n protected clear(): void {\n this.value.set('');\n // immediate: emits '' synchronously through the pipe, exactly once\n this.push('', { immediate: true, silent: false });\n this.inputRef()?.nativeElement.focus();\n }\n\n private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n this.lastPushed = value;\n this.input$.next({ value, ...opts });\n }\n}\n","<div [class]=\"wrapperClasses()\">\n <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n <input\n #searchInputEl\n type=\"search\"\n class=\"search-input__field\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n />\n @if (value()) {\n <button\n type=\"button\"\n class=\"search-input__clear\"\n (click)=\"clear()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"disabled()\"\n >\n <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n </button>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n model,\n output,\n computed,\n ElementRef,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_SEARCH, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' | 'md' | 'lg';\n\n/** A value travelling through the debounce pipe. */\ninterface SearchEmission {\n readonly value: string;\n /** Bypass the debounce (clear button, external writes). */\n readonly immediate: boolean;\n /** Only update the dedupe baseline, never reach `searchChange` (external writes). */\n readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/**\n * Search input component with integrated search functionality.\n *\n * Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n *\n * @example\n * ```html\n * <lc-search-input\n * placeholder=\"Search...\"\n * [debounceMs]=\"300\"\n * [(value)]=\"query\"\n * (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n */\n@Component({\n selector: 'lc-search-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],\n templateUrl: './search-input.component.html',\n styleUrls: ['./search-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n /**\n * id of the native input (lets a parent `<label for>` point at it).\n * @default generated\n */\n readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n /**\n * Placeholder text.\n * @default 'Search…'\n */\n placeholder = input<string>('Search…');\n\n /**\n * Size variant.\n * @default 'md'\n */\n size = input<SearchInputSize>('md');\n\n /**\n * Debounce delay in milliseconds. 0 means no debounce.\n * @default 300\n */\n debounceMs = input<number>(300);\n\n /**\n * Whether the search input is disabled.\n * @default false\n */\n disabled = input<boolean>(false);\n\n /**\n * Accessible name of the input.\n * @default 'Search'\n */\n readonly ariaLabel = input<string>();\n\n /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */\n readonly ariaLabelledBy = input<string>();\n\n /** Accessible name of the clear button. */\n readonly clearAriaLabel = input('Clear search');\n\n /**\n * Current query (two-way bindable). Writing it from outside updates the\n * field without emitting `searchChange`; `valueChange` emits on every\n * keystroke (undebounced) and on clear.\n */\n readonly value = model<string>('');\n\n /**\n * Emitted when the search value changes (debounced).\n */\n readonly searchChange = output<string>();\n\n /**\n * Emitted when the user presses Enter.\n */\n readonly searchSubmit = output<string>();\n\n protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n protected wrapperClasses = computed(() => {\n return [\n 'search-input',\n `search-input--${this.size()}`,\n this.disabled() ? 'search-input--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n private readonly input$ = new Subject<SearchEmission>();\n /** Last value pushed into the pipe (by typing, clear or an external write). */\n private lastPushed = '';\n\n constructor() {\n this.input$\n .pipe(\n // debounceMs is read per emission, so changing it takes effect immediately.\n // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n debounce(({ immediate }) => {\n const ms = this.debounceMs();\n return immediate || ms <= 0 ? of(null) : timer(ms);\n }),\n distinctUntilChanged((a, b) => a.value === b.value),\n filter(({ silent }) => !silent),\n takeUntilDestroyed(),\n )\n .subscribe(({ value }) => this.searchChange.emit(value));\n\n // A value written from outside is already known to the parent: run it through\n // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n // debounce) without echoing a searchChange back.\n effect(() => {\n const value = this.value();\n untracked(() => {\n if (value !== this.lastPushed) {\n this.push(value, { immediate: true, silent: true });\n }\n });\n });\n }\n\n protected onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.push(val, { immediate: false, silent: false });\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.searchSubmit.emit(this.value());\n }\n }\n\n protected clear(): void {\n this.value.set('');\n // immediate: emits '' synchronously through the pipe, exactly once\n this.push('', { immediate: true, silent: false });\n this.inputRef()?.nativeElement.focus();\n }\n\n private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n this.lastPushed = value;\n this.input$.next({ value, ...opts });\n }\n}\n","<div [class]=\"wrapperClasses()\">\n <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n <input\n #searchInputEl\n type=\"search\"\n class=\"search-input__field\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n />\n @if (value()) {\n <button\n type=\"button\"\n class=\"search-input__clear\"\n (click)=\"clear()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"disabled()\"\n >\n <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n </button>\n }\n</div>\n"],"mappings":"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"}
|
|
@@ -60,7 +60,7 @@ var StatusDotComponent = class StatusDotComponent {
|
|
|
60
60
|
},
|
|
61
61
|
ngImport: i0,
|
|
62
62
|
template: "<span\n [class]=\"dotClasses()\"\n [attr.role]=\"label() ? 'img' : null\"\n [attr.aria-label]=\"label() || null\"\n [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
|
|
63
|
-
styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"],
|
|
63
|
+
styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-on-success-subtle)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-on-warning-subtle)}.lc-status-dot--blocked{color:var(--color-on-error-subtle)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"],
|
|
64
64
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
65
65
|
encapsulation: i0.ViewEncapsulation.None
|
|
66
66
|
});
|
|
@@ -79,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
79
79
|
encapsulation: ViewEncapsulation.None,
|
|
80
80
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
81
81
|
template: "<span\n [class]=\"dotClasses()\"\n [attr.role]=\"label() ? 'img' : null\"\n [attr.aria-label]=\"label() || null\"\n [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
|
|
82
|
-
styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"]
|
|
82
|
+
styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-on-success-subtle)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-on-warning-subtle)}.lc-status-dot--blocked{color:var(--color-on-error-subtle)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"]
|
|
83
83
|
}]
|
|
84
84
|
}],
|
|
85
85
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-status-dot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.ts","../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';\nexport type StatusDotSize = 'sm' | 'md';\n\n/**\n * Status dot — the small traffic-light atom used in list rows, rails and\n * boards to signal an item's state at a glance.\n *\n * Features:\n * - Five semantic tones: done (success), run (brand teal), wait (warning),\n * blocked (error), open (neutral)\n * - Optional pulse animation for \"in progress\" states (static under\n * prefers-reduced-motion)\n * - Decorative by default (aria-hidden); pass `label` to expose the state\n * to assistive technology\n *\n * @example\n * ```html\n * <lc-status-dot tone=\"run\" [pulse]=\"true\" label=\"In Arbeit\" />\n * <lc-status-dot tone=\"blocked\" />\n * ```\n */\n@Component({\n selector: 'lc-status-dot',\n standalone: true,\n imports: [],\n templateUrl: './status-dot.component.html',\n styleUrl: './status-dot.component.scss',\n encapsulation: ViewEncapsulation.None, // Required for dynamic tone class styling\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusDotComponent {\n /** Semantic tone of the dot */\n readonly tone = input<StatusDotTone>('open');\n\n /** Size of the dot (sm = 6px for dense list rows, md = 8px) */\n readonly size = input<StatusDotSize>('md');\n\n /**\n * Pulse animation for \"in progress\" states. Renders static under\n * prefers-reduced-motion.\n * @default false\n */\n readonly pulse = input(false);\n\n /**\n * Accessible label for the state (e.g. \"In Arbeit\"). Without it the dot is\n * treated as decorative and hidden from assistive technology.\n */\n readonly label = input('');\n\n readonly dotClasses = computed(() => {\n const classes = ['lc-status-dot', `lc-status-dot--${this.tone()}`, `lc-status-dot--${this.size()}`];\n if (this.pulse()) {\n classes.push('lc-status-dot--pulse');\n }\n return classes.join(' ');\n });\n}\n","<span\n [class]=\"dotClasses()\"\n [attr.role]=\"label() ? 'img' : null\"\n [attr.aria-label]=\"label() || null\"\n [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n"],"mappings":";;AAgCA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMpB,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,aAAa,eAAc;EAClC,MAAM,UAAU;GAAC;GAAiB,kBAAkB,KAAK,KAAI;GAAM,kBAAkB,KAAK,KAAI;EAAI;EAClG,IAAI,KAAK,MAAK,GACZ,QAAQ,KAAK,sBAAsB;EAErC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CA1BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UChC/B;EAMA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-status-dot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.ts","../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';\nexport type StatusDotSize = 'sm' | 'md';\n\n/**\n * Status dot — the small traffic-light atom used in list rows, rails and\n * boards to signal an item's state at a glance.\n *\n * Features:\n * - Five semantic tones: done (success), run (brand teal), wait (warning),\n * blocked (error), open (neutral)\n * - Optional pulse animation for \"in progress\" states (static under\n * prefers-reduced-motion)\n * - Decorative by default (aria-hidden); pass `label` to expose the state\n * to assistive technology\n *\n * @example\n * ```html\n * <lc-status-dot tone=\"run\" [pulse]=\"true\" label=\"In Arbeit\" />\n * <lc-status-dot tone=\"blocked\" />\n * ```\n */\n@Component({\n selector: 'lc-status-dot',\n standalone: true,\n imports: [],\n templateUrl: './status-dot.component.html',\n styleUrl: './status-dot.component.scss',\n encapsulation: ViewEncapsulation.None, // Required for dynamic tone class styling\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusDotComponent {\n /** Semantic tone of the dot */\n readonly tone = input<StatusDotTone>('open');\n\n /** Size of the dot (sm = 6px for dense list rows, md = 8px) */\n readonly size = input<StatusDotSize>('md');\n\n /**\n * Pulse animation for \"in progress\" states. Renders static under\n * prefers-reduced-motion.\n * @default false\n */\n readonly pulse = input(false);\n\n /**\n * Accessible label for the state (e.g. \"In Arbeit\"). Without it the dot is\n * treated as decorative and hidden from assistive technology.\n */\n readonly label = input('');\n\n readonly dotClasses = computed(() => {\n const classes = ['lc-status-dot', `lc-status-dot--${this.tone()}`, `lc-status-dot--${this.size()}`];\n if (this.pulse()) {\n classes.push('lc-status-dot--pulse');\n }\n return classes.join(' ');\n });\n}\n","<span\n [class]=\"dotClasses()\"\n [attr.role]=\"label() ? 'img' : null\"\n [attr.aria-label]=\"label() || null\"\n [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n"],"mappings":";;AAgCA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMpB,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,aAAa,eAAc;EAClC,MAAM,UAAU;GAAC;GAAiB,kBAAkB,KAAK,KAAI;GAAM,kBAAkB,KAAK,KAAI;EAAI;EAClG,IAAI,KAAK,MAAK,GACZ,QAAQ,KAAK,sBAAsB;EAErC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CA1BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UChC/B;EAMA,QAAA,CAAA,89BAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AD0Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAT9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAA;GAAE,eAGI,kBAAkB;GAAI,iBACpB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,89BAAA;EAAA,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input, model, output, signal } from "@angular/core";
|
|
3
3
|
import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
|
|
4
|
-
import { ICON_CHECK, ICON_CHEVRON_RIGHT, ICON_FILE, ICON_FILE_TEXT, ICON_KEY, ICON_SETTINGS } from "@lifecorner/angular-ui-kit/icons";
|
|
4
|
+
import { ICON_CHECK, ICON_CHEVRON_RIGHT, ICON_FILE, ICON_FILE_TEXT, ICON_KEY, ICON_LOCK, ICON_SETTINGS } from "@lifecorner/angular-ui-kit/icons";
|
|
5
5
|
const FOLDER_ICON = "folder";
|
|
6
6
|
const FOLDER_OPEN_ICON = "folder-open";
|
|
7
7
|
const FILE_FALLBACK_ICON = "file";
|
|
@@ -409,6 +409,7 @@ var TreeViewComponent = class TreeViewComponent {
|
|
|
409
409
|
ICON_FILE,
|
|
410
410
|
ICON_FILE_TEXT,
|
|
411
411
|
ICON_KEY,
|
|
412
|
+
ICON_LOCK,
|
|
412
413
|
ICON_SETTINGS
|
|
413
414
|
])],
|
|
414
415
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
@@ -431,6 +432,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
431
432
|
ICON_FILE,
|
|
432
433
|
ICON_FILE_TEXT,
|
|
433
434
|
ICON_KEY,
|
|
435
|
+
ICON_LOCK,
|
|
434
436
|
ICON_SETTINGS
|
|
435
437
|
])],
|
|
436
438
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-tree-view.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/tree-view/file-icons.ts","../../../../libs/angular-ui-kit/src/lib/tree-view/tree-view.component.ts","../../../../libs/angular-ui-kit/src/lib/tree-view/tree-view.component.html"],"sourcesContent":["/**\n * File-type → icon mapping for the TreeView component.\n *\n * Icon names refer to Tabler Icons (the design system's icon source).\n * Resolution order for a file node:\n * 1. explicit `node.icon`\n * 2. exact file name match (e.g. `package.json`, `Dockerfile`)\n * 3. file extension match (e.g. `.ts`, `.png`)\n * 4. generic file fallback\n */\n\n/** Icon used for collapsed folders. */\nexport const FOLDER_ICON = 'folder';\n/** Icon used for expanded (open) folders. */\nexport const FOLDER_OPEN_ICON = 'folder-open';\n/** Generic fallback icon for files with no specific match. */\nexport const FILE_FALLBACK_ICON = 'file';\n\n/** Map of well-known file names (lower-cased) to icons. */\nconst FILE_NAME_ICONS: Record<string, string> = {\n 'package.json': 'brand-npm',\n 'package-lock.json': 'brand-npm',\n 'yarn.lock': 'brand-yarn',\n 'pnpm-lock.yaml': 'brand-pnpm',\n 'dockerfile': 'brand-docker',\n 'docker-compose.yml': 'brand-docker',\n 'docker-compose.yaml': 'brand-docker',\n '.gitignore': 'brand-git',\n '.gitattributes': 'brand-git',\n '.gitmodules': 'brand-git',\n 'readme.md': 'book',\n 'license': 'license',\n 'license.md': 'license',\n '.env': 'key',\n '.env.local': 'key',\n '.editorconfig': 'settings',\n '.prettierrc': 'settings',\n '.eslintrc': 'settings',\n 'tsconfig.json': 'brand-typescript',\n 'angular.json': 'brand-angular',\n 'nx.json': 'settings',\n 'makefile': 'terminal',\n};\n\n/** Map of file extensions (without dot, lower-cased) to icons. */\nconst FILE_EXT_ICONS: Record<string, string> = {\n // Languages\n ts: 'brand-typescript',\n tsx: 'brand-typescript',\n js: 'brand-javascript',\n jsx: 'brand-javascript',\n mjs: 'brand-javascript',\n cjs: 'brand-javascript',\n html: 'brand-html5',\n htm: 'brand-html5',\n css: 'brand-css3',\n scss: 'brand-sass',\n sass: 'brand-sass',\n less: 'brand-css3',\n py: 'brand-python',\n rb: 'diamond',\n go: 'brand-golang',\n rs: 'brand-rust',\n java: 'coffee',\n kt: 'brand-kotlin',\n swift: 'brand-swift',\n c: 'file-code',\n h: 'file-code',\n cpp: 'brand-cpp',\n cs: 'brand-c-sharp',\n php: 'brand-php',\n dart: 'brand-flutter',\n sh: 'terminal-2',\n bash: 'terminal-2',\n zsh: 'terminal-2',\n sql: 'database',\n // Data / config\n json: 'braces',\n jsonc: 'braces',\n yml: 'file-code',\n yaml: 'file-code',\n toml: 'file-code',\n xml: 'file-code',\n ini: 'settings',\n env: 'key',\n // Docs\n md: 'markdown',\n mdx: 'markdown',\n txt: 'file-text',\n pdf: 'file-type-pdf',\n doc: 'file-text',\n docx: 'file-text',\n csv: 'file-spreadsheet',\n xls: 'file-spreadsheet',\n xlsx: 'file-spreadsheet',\n // Images\n png: 'photo',\n jpg: 'photo',\n jpeg: 'photo',\n gif: 'photo',\n webp: 'photo',\n svg: 'file-vector',\n ico: 'photo',\n bmp: 'photo',\n // Media\n mp3: 'music',\n wav: 'music',\n mp4: 'video',\n mov: 'video',\n webm: 'video',\n // Archives\n zip: 'file-zip',\n tar: 'file-zip',\n gz: 'file-zip',\n rar: 'file-zip',\n '7z': 'file-zip',\n // Fonts\n woff: 'typography',\n woff2: 'typography',\n ttf: 'typography',\n otf: 'typography',\n // Misc\n lock: 'lock',\n};\n\n/**\n * Resolve the icon name for a file based on its name.\n * Performs exact-name then extension lookup, falling back to a generic file icon.\n */\nexport function resolveFileIcon(fileName: string): string {\n const lower = fileName.toLowerCase();\n\n const byName = FILE_NAME_ICONS[lower];\n if (byName) return byName;\n\n const dotIndex = lower.lastIndexOf('.');\n if (dotIndex > 0 && dotIndex < lower.length - 1) {\n const ext = lower.slice(dotIndex + 1);\n const byExt = FILE_EXT_ICONS[ext];\n if (byExt) return byExt;\n }\n\n return FILE_FALLBACK_ICON;\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n inject,\n input,\n model,\n output,\n signal,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK,\n ICON_CHEVRON_RIGHT,\n ICON_FILE,\n ICON_FILE_TEXT,\n ICON_KEY,\n ICON_SETTINGS,\n} from '@lifecorner/angular-ui-kit/icons';\nimport {\n FILE_FALLBACK_ICON,\n FOLDER_ICON,\n FOLDER_OPEN_ICON,\n resolveFileIcon,\n} from './file-icons';\n\n// ── Public types ─────────────────────────────────────────────────────────────\n\n/**\n * Node type. `'file'` and `'folder'` get the built-in file-tree treatment\n * (extension icons, folder open/close icons). Any other string marks a custom\n * domain type: such nodes render a colored type dot (or an explicit `icon`)\n * instead of file icons.\n */\nexport type TreeNodeType = 'file' | 'folder' | (string & {});\n\nexport type TreeNodeStatus =\n | 'default'\n | 'added'\n | 'modified'\n | 'removed'\n | 'muted'\n | 'success'\n | 'busy';\n\n/**\n * A node in the tree. Any node carrying `children` can expand — this covers\n * file trees (folders) as well as arbitrary domain hierarchies.\n */\nexport interface TreeNode {\n /** Display name, e.g. `app.component.ts` or `src`. */\n name: string;\n /**\n * Node type. Optional — inferred as `folder` when `children` is present,\n * otherwise `file`. May be any string for domain hierarchies.\n */\n type?: TreeNodeType;\n /**\n * Stable identifier. Optional — when omitted, the full path is used,\n * which is stable as long as names are unique among siblings.\n */\n id?: string;\n /** Child nodes. Any node with children can expand / collapse. */\n children?: TreeNode[];\n /**\n * Explicit Tabler icon name. Overrides automatic file-type / folder\n * icon resolution and the custom-type dot.\n */\n icon?: string;\n /**\n * Accent color for the node's icon / type dot. Any CSS color, including\n * `var(--…)` token references.\n */\n color?: string;\n /** Optional badge text shown to the right of the node (e.g. git status, count). */\n badge?: string;\n /**\n * Tone of the badge / node accent. `success` additionally renders a ✓\n * indicator, `busy` a pulsing dot (static under `prefers-reduced-motion`).\n */\n status?: TreeNodeStatus;\n /** Whether this node starts expanded. Ignored for nodes without children. */\n expanded?: boolean;\n /** Disable selection / interaction for this node. */\n disabled?: boolean;\n}\n\n// ── Internal flattened representation ─────────────────────────────────────────\n\ninterface FlatNode {\n id: string;\n name: string;\n type: TreeNodeType;\n depth: number;\n hasChildren: boolean;\n expanded: boolean;\n /** Resolved icon, or `null` for custom-type nodes that render a type dot. */\n icon: string | null;\n color?: string;\n badge?: string;\n status: TreeNodeStatus;\n disabled: boolean;\n /** Whether each ancestor level still has following siblings (for guide lines). */\n ancestorHasSibling: boolean[];\n /** Whether this node is the last among its siblings. */\n isLast: boolean;\n /** 1-based position among its siblings (aria-posinset). */\n posInSet: number;\n /** Number of siblings including itself (aria-setsize). */\n setSize: number;\n /** Id of the parent node, `null` for root nodes. */\n parentId: string | null;\n}\n\nconst BADGE_STATUS_COLOR: Record<TreeNodeStatus, string> = {\n default: 'var(--color-text-tertiary)',\n added: 'var(--color-success-default, #16a34a)',\n modified: 'var(--color-warning-default, #d97706)',\n removed: 'var(--color-error-default, #dc2626)',\n muted: 'var(--color-text-disabled)',\n success: 'var(--color-success-default, #16a34a)',\n busy: 'var(--color-primary-500, #6366f1)',\n};\n\nfunction nodeType(node: TreeNode): TreeNodeType {\n return node.type ?? (node.children ? 'folder' : 'file');\n}\n\nfunction isExpandable(node: TreeNode): boolean {\n return !!node.children?.length;\n}\n\n/**\n * Tree view component for visualizing hierarchies — file / folder trees as\n * well as arbitrary domain object trees with custom node types.\n *\n * Features:\n * - Recursive rendering from a single `nodes` input; any node with children\n * can expand / collapse\n * - Automatic file-type icons by extension and well-known file name,\n * with open / closed folder icons (for `file` / `folder` nodes)\n * - Custom node types: colored type dots or explicit icons via `type`,\n * `color`, `icon`\n * - Expand / collapse, with expand-all / collapse-all helpers\n * - Two-way bound selection and a `nodeClick` event\n * - Indentation guide lines for readability\n * - Optional per-node status badges (added / modified / removed) and status\n * indicators (`success` ✓, `busy` pulse)\n * - Keyboard accessible: roving tabindex (one tab stop), Arrow keys / Home /\n * End move focus, Enter / Space toggle or select, Left / Right collapse /\n * expand or move to parent / first child\n * - Dark / light theme support via design tokens\n *\n * @example\n * ```html\n * <lc-tree-view [nodes]=\"projectTree\" [(selectedId)]=\"selected\" />\n * ```\n */\n@Component({\n selector: 'lc-tree-view',\n standalone: true,\n imports: [IconComponent],\n // Its own glyphs and the inline ones of the built-in file-type map (file-icons.ts).\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT, ICON_CHECK, ICON_FILE, ICON_FILE_TEXT, ICON_KEY, ICON_SETTINGS])],\n templateUrl: './tree-view.component.html',\n styleUrls: ['./tree-view.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'lc-tree-view' },\n})\nexport class TreeViewComponent {\n /** The root-level nodes of the tree. */\n readonly nodes = input.required<TreeNode[]>();\n\n /** Id (or path) of the currently selected node (two-way bindable). */\n readonly selectedId = model<string | null>(null);\n\n /** Show indentation guide lines. */\n readonly showGuides = input(true);\n\n /** Show the expand-all / collapse-all toolbar. */\n readonly showToolbar = input(true);\n\n /** Label of the toolbar's expand-all button. */\n readonly expandAllLabel = input('Expand all');\n\n /** Label of the toolbar's collapse-all button. */\n readonly collapseAllLabel = input('Collapse all');\n\n /** Icon size for node icons. */\n readonly iconSize = input<'xs' | 'sm' | 'md'>('sm');\n\n /** Accessible name of a folder's expand toggle. */\n readonly expandAriaLabel = input('Expand');\n\n /** Accessible name of a folder's collapse toggle. */\n readonly collapseAriaLabel = input('Collapse');\n\n /** Emitted when a node is clicked / activated. */\n readonly nodeClick = output<TreeNode>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /** Set of node ids the user has explicitly expanded / collapsed. */\n private readonly expandOverrides = signal<Map<string, boolean>>(new Map());\n\n /** Id of the node that last had keyboard focus (roving tabindex). */\n private readonly focusedId = signal<string | null>(null);\n\n /** Flattened, render-ready list of visible nodes. */\n protected readonly visibleNodes = computed<FlatNode[]>(() => {\n const out: FlatNode[] = [];\n const overrides = this.expandOverrides();\n this.flatten(this.nodes(), 0, '', [], overrides, out, null);\n return out;\n });\n\n /**\n * The single tab stop of the tree: the last focused node if it is still\n * visible, else the selected node, else the first enabled node.\n */\n protected readonly tabStopId = computed<string | null>(() => {\n const nodes = this.visibleNodes();\n const focusable = (id: string | null) =>\n id !== null && nodes.some((n) => n.id === id && !n.disabled);\n const focused = this.focusedId();\n if (focusable(focused)) return focused;\n const selected = this.selectedId();\n if (focusable(selected)) return selected;\n return nodes.find((n) => !n.disabled)?.id ?? null;\n });\n\n protected badgeColor(status: TreeNodeStatus): string {\n return BADGE_STATUS_COLOR[status];\n }\n\n protected onNodeClick(flat: FlatNode): void {\n if (flat.disabled) return;\n if (flat.hasChildren) {\n this.toggle(flat);\n }\n this.selectedId.set(flat.id);\n const original = this.findNode(this.nodes(), '', flat.id);\n if (original) this.nodeClick.emit(original);\n }\n\n protected onToggleClick(flat: FlatNode, event: Event): void {\n event.stopPropagation();\n if (!flat.disabled) this.toggle(flat);\n }\n\n protected onFocus(flat: FlatNode): void {\n this.focusedId.set(flat.id);\n }\n\n protected onKeydown(flat: FlatNode, event: KeyboardEvent): void {\n if (flat.disabled) return;\n const nodes = this.visibleNodes();\n const index = nodes.findIndex((n) => n.id === flat.id);\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.onNodeClick(flat);\n break;\n case 'ArrowRight':\n event.preventDefault();\n if (!flat.hasChildren) return;\n if (!flat.expanded) {\n this.setExpanded(flat.id, true);\n } else {\n // Expanded: move to the first child.\n this.focusIndex(index + 1);\n }\n break;\n case 'ArrowLeft':\n event.preventDefault();\n if (flat.hasChildren && flat.expanded) {\n this.setExpanded(flat.id, false);\n } else if (flat.parentId !== null) {\n // Leaf or collapsed node: move to the parent.\n this.focusIndex(nodes.findIndex((n) => n.id === flat.parentId));\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, index, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, index, -1));\n break;\n case 'Home':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, -1, 1));\n break;\n case 'End':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, nodes.length, -1));\n break;\n }\n }\n\n /** Expand every folder in the tree. */\n expandAll(): void {\n this.setAll(true);\n }\n\n /** Collapse every folder in the tree. */\n collapseAll(): void {\n this.setAll(false);\n }\n\n protected trackById = (_: number, n: FlatNode): string => n.id;\n\n // ── internals ──────────────────────────────────────────────────────────────\n\n /** Index of the next enabled node from `from` in direction `dir`, or -1. */\n private nextEnabled(nodes: FlatNode[], from: number, dir: 1 | -1): number {\n for (let i = from + dir; i >= 0 && i < nodes.length; i += dir) {\n if (!nodes[i].disabled) return i;\n }\n return -1;\n }\n\n /**\n * Moves keyboard focus to the visible node at `index`. The rows are\n * rendered in `visibleNodes()` order, so the index maps 1:1 to the DOM.\n */\n private focusIndex(index: number): void {\n const nodes = this.visibleNodes();\n if (index < 0 || index >= nodes.length || nodes[index].disabled) return;\n this.focusedId.set(nodes[index].id);\n const items = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-tree-view__item');\n items[index]?.focus();\n }\n\n private toggle(flat: FlatNode): void {\n this.setExpanded(flat.id, !flat.expanded);\n }\n\n private setExpanded(id: string, value: boolean): void {\n this.expandOverrides.update((map) => {\n const next = new Map(map);\n next.set(id, value);\n return next;\n });\n }\n\n private setAll(value: boolean): void {\n const next = new Map<string, boolean>();\n const walk = (nodes: TreeNode[], parentPath: string): void => {\n for (const node of nodes) {\n const id = node.id ?? `${parentPath}/${node.name}`;\n if (node.children?.length) {\n next.set(id, value);\n walk(node.children, id);\n }\n }\n };\n walk(this.nodes(), '');\n this.expandOverrides.set(next);\n }\n\n private isExpanded(\n id: string,\n node: TreeNode,\n overrides: Map<string, boolean>,\n ): boolean {\n const override = overrides.get(id);\n if (override !== undefined) return override;\n return node.expanded ?? false;\n }\n\n private flatten(\n nodes: TreeNode[],\n depth: number,\n parentPath: string,\n ancestorHasSibling: boolean[],\n overrides: Map<string, boolean>,\n out: FlatNode[],\n parentId: string | null,\n ): void {\n nodes.forEach((node, index) => {\n const id = node.id ?? `${parentPath}/${node.name}`;\n const type = nodeType(node);\n const hasChildren = isExpandable(node);\n const expanded = hasChildren && this.isExpanded(id, node, overrides);\n const isLast = index === nodes.length - 1;\n\n out.push({\n id,\n name: node.name,\n type,\n depth,\n hasChildren,\n expanded,\n icon: this.resolveIcon(node, type, expanded),\n color: node.color,\n badge: node.badge,\n status: node.status ?? 'default',\n disabled: node.disabled ?? false,\n ancestorHasSibling,\n isLast,\n posInSet: index + 1,\n setSize: nodes.length,\n parentId,\n });\n\n if (expanded && node.children) {\n this.flatten(\n node.children,\n depth + 1,\n id,\n [...ancestorHasSibling, !isLast],\n overrides,\n out,\n id,\n );\n }\n });\n }\n\n private resolveIcon(\n node: TreeNode,\n type: TreeNodeType,\n expanded: boolean,\n ): string | null {\n if (node.icon) return node.icon;\n if (type === 'folder') return expanded ? FOLDER_OPEN_ICON : FOLDER_ICON;\n if (type === 'file') {\n return node.name ? resolveFileIcon(node.name) : FILE_FALLBACK_ICON;\n }\n // Custom domain type without explicit icon: render a colored type dot.\n return null;\n }\n\n private findNode(\n nodes: TreeNode[],\n parentPath: string,\n targetId: string,\n ): TreeNode | null {\n for (const node of nodes) {\n const id = node.id ?? `${parentPath}/${node.name}`;\n if (id === targetId) return node;\n if (node.children) {\n const found = this.findNode(node.children, id, targetId);\n if (found) return found;\n }\n }\n return null;\n }\n}\n","@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" [attr.title]=\"expandAllLabel()\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>{{ expandAllLabel() }}</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" [attr.title]=\"collapseAllLabel()\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>{{ collapseAllLabel() }}</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-posinset]=\"node.posInSet\"\n [attr.aria-setsize]=\"node.setSize\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [attr.aria-busy]=\"node.status === 'busy' ? true : null\"\n [tabindex]=\"node.id === tabStopId() ? 0 : -1\"\n (focus)=\"onFocus(node)\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? collapseAriaLabel() : expandAriaLabel()\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon, or type dot for custom node types -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.color ?? (node.status === 'default' ? null : badgeColor(node.status))\n \"\n >\n @if (node.icon; as icon) {\n <lc-icon [name]=\"icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n } @else {\n <span\n class=\"lc-tree-view__type-dot\"\n [style.background-color]=\"node.color ?? null\"\n ></span>\n }\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n\n <!-- status indicator -->\n @if (node.status === 'success') {\n <span class=\"lc-tree-view__status lc-tree-view__status--success\">\n <lc-icon name=\"check\" size=\"xs\" [decorative]=\"true\" />\n </span>\n } @else if (node.status === 'busy') {\n <span class=\"lc-tree-view__status lc-tree-view__status--busy\"></span>\n }\n </li>\n }\n</ul>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-tree-view.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/tree-view/file-icons.ts","../../../../libs/angular-ui-kit/src/lib/tree-view/tree-view.component.ts","../../../../libs/angular-ui-kit/src/lib/tree-view/tree-view.component.html"],"sourcesContent":["/**\n * File-type → icon mapping for the TreeView component.\n *\n * Icon names refer to Tabler Icons (the design system's icon source).\n * Resolution order for a file node:\n * 1. explicit `node.icon`\n * 2. exact file name match (e.g. `package.json`, `Dockerfile`)\n * 3. file extension match (e.g. `.ts`, `.png`)\n * 4. generic file fallback\n */\n\n/** Icon used for collapsed folders. */\nexport const FOLDER_ICON = 'folder';\n/** Icon used for expanded (open) folders. */\nexport const FOLDER_OPEN_ICON = 'folder-open';\n/** Generic fallback icon for files with no specific match. */\nexport const FILE_FALLBACK_ICON = 'file';\n\n/** Map of well-known file names (lower-cased) to icons. */\nconst FILE_NAME_ICONS: Record<string, string> = {\n 'package.json': 'brand-npm',\n 'package-lock.json': 'brand-npm',\n 'yarn.lock': 'brand-yarn',\n 'pnpm-lock.yaml': 'brand-pnpm',\n 'dockerfile': 'brand-docker',\n 'docker-compose.yml': 'brand-docker',\n 'docker-compose.yaml': 'brand-docker',\n '.gitignore': 'brand-git',\n '.gitattributes': 'brand-git',\n '.gitmodules': 'brand-git',\n 'readme.md': 'book',\n 'license': 'license',\n 'license.md': 'license',\n '.env': 'key',\n '.env.local': 'key',\n '.editorconfig': 'settings',\n '.prettierrc': 'settings',\n '.eslintrc': 'settings',\n 'tsconfig.json': 'brand-typescript',\n 'angular.json': 'brand-angular',\n 'nx.json': 'settings',\n 'makefile': 'terminal',\n};\n\n/** Map of file extensions (without dot, lower-cased) to icons. */\nconst FILE_EXT_ICONS: Record<string, string> = {\n // Languages\n ts: 'brand-typescript',\n tsx: 'brand-typescript',\n js: 'brand-javascript',\n jsx: 'brand-javascript',\n mjs: 'brand-javascript',\n cjs: 'brand-javascript',\n html: 'brand-html5',\n htm: 'brand-html5',\n css: 'brand-css3',\n scss: 'brand-sass',\n sass: 'brand-sass',\n less: 'brand-css3',\n py: 'brand-python',\n rb: 'diamond',\n go: 'brand-golang',\n rs: 'brand-rust',\n java: 'coffee',\n kt: 'brand-kotlin',\n swift: 'brand-swift',\n c: 'file-code',\n h: 'file-code',\n cpp: 'brand-cpp',\n cs: 'brand-c-sharp',\n php: 'brand-php',\n dart: 'brand-flutter',\n sh: 'terminal-2',\n bash: 'terminal-2',\n zsh: 'terminal-2',\n sql: 'database',\n // Data / config\n json: 'braces',\n jsonc: 'braces',\n yml: 'file-code',\n yaml: 'file-code',\n toml: 'file-code',\n xml: 'file-code',\n ini: 'settings',\n env: 'key',\n // Docs\n md: 'markdown',\n mdx: 'markdown',\n txt: 'file-text',\n pdf: 'file-type-pdf',\n doc: 'file-text',\n docx: 'file-text',\n csv: 'file-spreadsheet',\n xls: 'file-spreadsheet',\n xlsx: 'file-spreadsheet',\n // Images\n png: 'photo',\n jpg: 'photo',\n jpeg: 'photo',\n gif: 'photo',\n webp: 'photo',\n svg: 'file-vector',\n ico: 'photo',\n bmp: 'photo',\n // Media\n mp3: 'music',\n wav: 'music',\n mp4: 'video',\n mov: 'video',\n webm: 'video',\n // Archives\n zip: 'file-zip',\n tar: 'file-zip',\n gz: 'file-zip',\n rar: 'file-zip',\n '7z': 'file-zip',\n // Fonts\n woff: 'typography',\n woff2: 'typography',\n ttf: 'typography',\n otf: 'typography',\n // Misc\n lock: 'lock',\n};\n\n/**\n * Resolve the icon name for a file based on its name.\n * Performs exact-name then extension lookup, falling back to a generic file icon.\n */\nexport function resolveFileIcon(fileName: string): string {\n const lower = fileName.toLowerCase();\n\n const byName = FILE_NAME_ICONS[lower];\n if (byName) return byName;\n\n const dotIndex = lower.lastIndexOf('.');\n if (dotIndex > 0 && dotIndex < lower.length - 1) {\n const ext = lower.slice(dotIndex + 1);\n const byExt = FILE_EXT_ICONS[ext];\n if (byExt) return byExt;\n }\n\n return FILE_FALLBACK_ICON;\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n inject,\n input,\n model,\n output,\n signal,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK,\n ICON_CHEVRON_RIGHT,\n ICON_FILE,\n ICON_FILE_TEXT,\n ICON_KEY,\n ICON_LOCK,\n ICON_SETTINGS,\n} from '@lifecorner/angular-ui-kit/icons';\nimport {\n FILE_FALLBACK_ICON,\n FOLDER_ICON,\n FOLDER_OPEN_ICON,\n resolveFileIcon,\n} from './file-icons';\n\n// ── Public types ─────────────────────────────────────────────────────────────\n\n/**\n * Node type. `'file'` and `'folder'` get the built-in file-tree treatment\n * (extension icons, folder open/close icons). Any other string marks a custom\n * domain type: such nodes render a colored type dot (or an explicit `icon`)\n * instead of file icons.\n */\nexport type TreeNodeType = 'file' | 'folder' | (string & {});\n\nexport type TreeNodeStatus =\n | 'default'\n | 'added'\n | 'modified'\n | 'removed'\n | 'muted'\n | 'success'\n | 'busy';\n\n/**\n * A node in the tree. Any node carrying `children` can expand — this covers\n * file trees (folders) as well as arbitrary domain hierarchies.\n */\nexport interface TreeNode {\n /** Display name, e.g. `app.component.ts` or `src`. */\n name: string;\n /**\n * Node type. Optional — inferred as `folder` when `children` is present,\n * otherwise `file`. May be any string for domain hierarchies.\n */\n type?: TreeNodeType;\n /**\n * Stable identifier. Optional — when omitted, the full path is used,\n * which is stable as long as names are unique among siblings.\n */\n id?: string;\n /** Child nodes. Any node with children can expand / collapse. */\n children?: TreeNode[];\n /**\n * Explicit Tabler icon name. Overrides automatic file-type / folder\n * icon resolution and the custom-type dot.\n */\n icon?: string;\n /**\n * Accent color for the node's icon / type dot. Any CSS color, including\n * `var(--…)` token references.\n */\n color?: string;\n /** Optional badge text shown to the right of the node (e.g. git status, count). */\n badge?: string;\n /**\n * Tone of the badge / node accent. `success` additionally renders a ✓\n * indicator, `busy` a pulsing dot (static under `prefers-reduced-motion`).\n */\n status?: TreeNodeStatus;\n /** Whether this node starts expanded. Ignored for nodes without children. */\n expanded?: boolean;\n /** Disable selection / interaction for this node. */\n disabled?: boolean;\n}\n\n// ── Internal flattened representation ─────────────────────────────────────────\n\ninterface FlatNode {\n id: string;\n name: string;\n type: TreeNodeType;\n depth: number;\n hasChildren: boolean;\n expanded: boolean;\n /** Resolved icon, or `null` for custom-type nodes that render a type dot. */\n icon: string | null;\n color?: string;\n badge?: string;\n status: TreeNodeStatus;\n disabled: boolean;\n /** Whether each ancestor level still has following siblings (for guide lines). */\n ancestorHasSibling: boolean[];\n /** Whether this node is the last among its siblings. */\n isLast: boolean;\n /** 1-based position among its siblings (aria-posinset). */\n posInSet: number;\n /** Number of siblings including itself (aria-setsize). */\n setSize: number;\n /** Id of the parent node, `null` for root nodes. */\n parentId: string | null;\n}\n\nconst BADGE_STATUS_COLOR: Record<TreeNodeStatus, string> = {\n default: 'var(--color-text-tertiary)',\n added: 'var(--color-success-default, #16a34a)',\n modified: 'var(--color-warning-default, #d97706)',\n removed: 'var(--color-error-default, #dc2626)',\n muted: 'var(--color-text-disabled)',\n success: 'var(--color-success-default, #16a34a)',\n busy: 'var(--color-primary-500, #6366f1)',\n};\n\nfunction nodeType(node: TreeNode): TreeNodeType {\n return node.type ?? (node.children ? 'folder' : 'file');\n}\n\nfunction isExpandable(node: TreeNode): boolean {\n return !!node.children?.length;\n}\n\n/**\n * Tree view component for visualizing hierarchies — file / folder trees as\n * well as arbitrary domain object trees with custom node types.\n *\n * Features:\n * - Recursive rendering from a single `nodes` input; any node with children\n * can expand / collapse\n * - Automatic file-type icons by extension and well-known file name,\n * with open / closed folder icons (for `file` / `folder` nodes)\n * - Custom node types: colored type dots or explicit icons via `type`,\n * `color`, `icon`\n * - Expand / collapse, with expand-all / collapse-all helpers\n * - Two-way bound selection and a `nodeClick` event\n * - Indentation guide lines for readability\n * - Optional per-node status badges (added / modified / removed) and status\n * indicators (`success` ✓, `busy` pulse)\n * - Keyboard accessible: roving tabindex (one tab stop), Arrow keys / Home /\n * End move focus, Enter / Space toggle or select, Left / Right collapse /\n * expand or move to parent / first child\n * - Dark / light theme support via design tokens\n *\n * @example\n * ```html\n * <lc-tree-view [nodes]=\"projectTree\" [(selectedId)]=\"selected\" />\n * ```\n */\n@Component({\n selector: 'lc-tree-view',\n standalone: true,\n imports: [IconComponent],\n // Its own glyphs and the inline ones of the built-in file-type map (file-icons.ts).\n viewProviders: [ɵprovideKitIcons([ICON_CHEVRON_RIGHT, ICON_CHECK, ICON_FILE, ICON_FILE_TEXT, ICON_KEY, ICON_LOCK, ICON_SETTINGS])],\n templateUrl: './tree-view.component.html',\n styleUrls: ['./tree-view.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'lc-tree-view' },\n})\nexport class TreeViewComponent {\n /** The root-level nodes of the tree. */\n readonly nodes = input.required<TreeNode[]>();\n\n /** Id (or path) of the currently selected node (two-way bindable). */\n readonly selectedId = model<string | null>(null);\n\n /** Show indentation guide lines. */\n readonly showGuides = input(true);\n\n /** Show the expand-all / collapse-all toolbar. */\n readonly showToolbar = input(true);\n\n /** Label of the toolbar's expand-all button. */\n readonly expandAllLabel = input('Expand all');\n\n /** Label of the toolbar's collapse-all button. */\n readonly collapseAllLabel = input('Collapse all');\n\n /** Icon size for node icons. */\n readonly iconSize = input<'xs' | 'sm' | 'md'>('sm');\n\n /** Accessible name of a folder's expand toggle. */\n readonly expandAriaLabel = input('Expand');\n\n /** Accessible name of a folder's collapse toggle. */\n readonly collapseAriaLabel = input('Collapse');\n\n /** Emitted when a node is clicked / activated. */\n readonly nodeClick = output<TreeNode>();\n\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n /** Set of node ids the user has explicitly expanded / collapsed. */\n private readonly expandOverrides = signal<Map<string, boolean>>(new Map());\n\n /** Id of the node that last had keyboard focus (roving tabindex). */\n private readonly focusedId = signal<string | null>(null);\n\n /** Flattened, render-ready list of visible nodes. */\n protected readonly visibleNodes = computed<FlatNode[]>(() => {\n const out: FlatNode[] = [];\n const overrides = this.expandOverrides();\n this.flatten(this.nodes(), 0, '', [], overrides, out, null);\n return out;\n });\n\n /**\n * The single tab stop of the tree: the last focused node if it is still\n * visible, else the selected node, else the first enabled node.\n */\n protected readonly tabStopId = computed<string | null>(() => {\n const nodes = this.visibleNodes();\n const focusable = (id: string | null) =>\n id !== null && nodes.some((n) => n.id === id && !n.disabled);\n const focused = this.focusedId();\n if (focusable(focused)) return focused;\n const selected = this.selectedId();\n if (focusable(selected)) return selected;\n return nodes.find((n) => !n.disabled)?.id ?? null;\n });\n\n protected badgeColor(status: TreeNodeStatus): string {\n return BADGE_STATUS_COLOR[status];\n }\n\n protected onNodeClick(flat: FlatNode): void {\n if (flat.disabled) return;\n if (flat.hasChildren) {\n this.toggle(flat);\n }\n this.selectedId.set(flat.id);\n const original = this.findNode(this.nodes(), '', flat.id);\n if (original) this.nodeClick.emit(original);\n }\n\n protected onToggleClick(flat: FlatNode, event: Event): void {\n event.stopPropagation();\n if (!flat.disabled) this.toggle(flat);\n }\n\n protected onFocus(flat: FlatNode): void {\n this.focusedId.set(flat.id);\n }\n\n protected onKeydown(flat: FlatNode, event: KeyboardEvent): void {\n if (flat.disabled) return;\n const nodes = this.visibleNodes();\n const index = nodes.findIndex((n) => n.id === flat.id);\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.onNodeClick(flat);\n break;\n case 'ArrowRight':\n event.preventDefault();\n if (!flat.hasChildren) return;\n if (!flat.expanded) {\n this.setExpanded(flat.id, true);\n } else {\n // Expanded: move to the first child.\n this.focusIndex(index + 1);\n }\n break;\n case 'ArrowLeft':\n event.preventDefault();\n if (flat.hasChildren && flat.expanded) {\n this.setExpanded(flat.id, false);\n } else if (flat.parentId !== null) {\n // Leaf or collapsed node: move to the parent.\n this.focusIndex(nodes.findIndex((n) => n.id === flat.parentId));\n }\n break;\n case 'ArrowDown':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, index, 1));\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, index, -1));\n break;\n case 'Home':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, -1, 1));\n break;\n case 'End':\n event.preventDefault();\n this.focusIndex(this.nextEnabled(nodes, nodes.length, -1));\n break;\n }\n }\n\n /** Expand every folder in the tree. */\n expandAll(): void {\n this.setAll(true);\n }\n\n /** Collapse every folder in the tree. */\n collapseAll(): void {\n this.setAll(false);\n }\n\n protected trackById = (_: number, n: FlatNode): string => n.id;\n\n // ── internals ──────────────────────────────────────────────────────────────\n\n /** Index of the next enabled node from `from` in direction `dir`, or -1. */\n private nextEnabled(nodes: FlatNode[], from: number, dir: 1 | -1): number {\n for (let i = from + dir; i >= 0 && i < nodes.length; i += dir) {\n if (!nodes[i].disabled) return i;\n }\n return -1;\n }\n\n /**\n * Moves keyboard focus to the visible node at `index`. The rows are\n * rendered in `visibleNodes()` order, so the index maps 1:1 to the DOM.\n */\n private focusIndex(index: number): void {\n const nodes = this.visibleNodes();\n if (index < 0 || index >= nodes.length || nodes[index].disabled) return;\n this.focusedId.set(nodes[index].id);\n const items = this.host.nativeElement.querySelectorAll<HTMLElement>('.lc-tree-view__item');\n items[index]?.focus();\n }\n\n private toggle(flat: FlatNode): void {\n this.setExpanded(flat.id, !flat.expanded);\n }\n\n private setExpanded(id: string, value: boolean): void {\n this.expandOverrides.update((map) => {\n const next = new Map(map);\n next.set(id, value);\n return next;\n });\n }\n\n private setAll(value: boolean): void {\n const next = new Map<string, boolean>();\n const walk = (nodes: TreeNode[], parentPath: string): void => {\n for (const node of nodes) {\n const id = node.id ?? `${parentPath}/${node.name}`;\n if (node.children?.length) {\n next.set(id, value);\n walk(node.children, id);\n }\n }\n };\n walk(this.nodes(), '');\n this.expandOverrides.set(next);\n }\n\n private isExpanded(\n id: string,\n node: TreeNode,\n overrides: Map<string, boolean>,\n ): boolean {\n const override = overrides.get(id);\n if (override !== undefined) return override;\n return node.expanded ?? false;\n }\n\n private flatten(\n nodes: TreeNode[],\n depth: number,\n parentPath: string,\n ancestorHasSibling: boolean[],\n overrides: Map<string, boolean>,\n out: FlatNode[],\n parentId: string | null,\n ): void {\n nodes.forEach((node, index) => {\n const id = node.id ?? `${parentPath}/${node.name}`;\n const type = nodeType(node);\n const hasChildren = isExpandable(node);\n const expanded = hasChildren && this.isExpanded(id, node, overrides);\n const isLast = index === nodes.length - 1;\n\n out.push({\n id,\n name: node.name,\n type,\n depth,\n hasChildren,\n expanded,\n icon: this.resolveIcon(node, type, expanded),\n color: node.color,\n badge: node.badge,\n status: node.status ?? 'default',\n disabled: node.disabled ?? false,\n ancestorHasSibling,\n isLast,\n posInSet: index + 1,\n setSize: nodes.length,\n parentId,\n });\n\n if (expanded && node.children) {\n this.flatten(\n node.children,\n depth + 1,\n id,\n [...ancestorHasSibling, !isLast],\n overrides,\n out,\n id,\n );\n }\n });\n }\n\n private resolveIcon(\n node: TreeNode,\n type: TreeNodeType,\n expanded: boolean,\n ): string | null {\n if (node.icon) return node.icon;\n if (type === 'folder') return expanded ? FOLDER_OPEN_ICON : FOLDER_ICON;\n if (type === 'file') {\n return node.name ? resolveFileIcon(node.name) : FILE_FALLBACK_ICON;\n }\n // Custom domain type without explicit icon: render a colored type dot.\n return null;\n }\n\n private findNode(\n nodes: TreeNode[],\n parentPath: string,\n targetId: string,\n ): TreeNode | null {\n for (const node of nodes) {\n const id = node.id ?? `${parentPath}/${node.name}`;\n if (id === targetId) return node;\n if (node.children) {\n const found = this.findNode(node.children, id, targetId);\n if (found) return found;\n }\n }\n return null;\n }\n}\n","@if (showToolbar()) {\n <div class=\"lc-tree-view__toolbar\">\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" [attr.title]=\"expandAllLabel()\">\n <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n <span>{{ expandAllLabel() }}</span>\n </button>\n <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" [attr.title]=\"collapseAllLabel()\">\n <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n <span>{{ collapseAllLabel() }}</span>\n </button>\n </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n @for (node of visibleNodes(); track trackById($index, node)) {\n <li\n class=\"lc-tree-view__item\"\n [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n [class.lc-tree-view__item--disabled]=\"node.disabled\"\n [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n role=\"treeitem\"\n [attr.aria-level]=\"node.depth + 1\"\n [attr.aria-posinset]=\"node.posInSet\"\n [attr.aria-setsize]=\"node.setSize\"\n [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n [attr.aria-selected]=\"node.id === selectedId()\"\n [attr.aria-disabled]=\"node.disabled ? true : null\"\n [attr.aria-busy]=\"node.status === 'busy' ? true : null\"\n [tabindex]=\"node.id === tabStopId() ? 0 : -1\"\n (focus)=\"onFocus(node)\"\n (click)=\"onNodeClick(node)\"\n (keydown)=\"onKeydown(node, $event)\"\n >\n <!-- indentation + guide lines -->\n @for (hasSibling of node.ancestorHasSibling; track $index) {\n <span\n class=\"lc-tree-view__indent\"\n [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n ></span>\n }\n\n <!-- expand / collapse chevron -->\n <span class=\"lc-tree-view__chevron\">\n @if (node.hasChildren) {\n <button\n type=\"button\"\n class=\"lc-tree-view__chevron-btn\"\n [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n (click)=\"onToggleClick(node, $event)\"\n [attr.aria-label]=\"node.expanded ? collapseAriaLabel() : expandAriaLabel()\"\n tabindex=\"-1\"\n >\n <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </span>\n\n <!-- type / file icon, or type dot for custom node types -->\n <span\n class=\"lc-tree-view__icon\"\n [style.color]=\"\n node.color ?? (node.status === 'default' ? null : badgeColor(node.status))\n \"\n >\n @if (node.icon; as icon) {\n <lc-icon [name]=\"icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n } @else {\n <span\n class=\"lc-tree-view__type-dot\"\n [style.background-color]=\"node.color ?? null\"\n ></span>\n }\n </span>\n\n <!-- label -->\n <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n <!-- badge -->\n @if (node.badge) {\n <span\n class=\"lc-tree-view__badge\"\n [style.color]=\"badgeColor(node.status)\"\n [style.border-color]=\"badgeColor(node.status)\"\n >{{ node.badge }}</span\n >\n }\n\n <!-- status indicator -->\n @if (node.status === 'success') {\n <span class=\"lc-tree-view__status lc-tree-view__status--success\">\n <lc-icon name=\"check\" size=\"xs\" [decorative]=\"true\" />\n </span>\n } @else if (node.status === 'busy') {\n <span class=\"lc-tree-view__status lc-tree-view__status--busy\"></span>\n }\n </li>\n }\n</ul>\n"],"mappings":"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"}
|