@lifecorner/angular-ui-kit 3.33.1 → 3.35.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-alert.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-alert.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs +5 -2
- package/fesm2022/lifecorner-angular-ui-kit-combobox.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs +21 -3
- package/fesm2022/lifecorner-angular-ui-kit-confirm-dialog.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-drawer.mjs +30 -2
- package/fesm2022/lifecorner-angular-ui-kit-drawer.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-gallery.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs +22 -3
- package/fesm2022/lifecorner-angular-ui-kit-header.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-overlay.mjs +6 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-overlay.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +25 -3
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-modal.mjs +31 -2
- package/fesm2022/lifecorner-angular-ui-kit-modal.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs +41 -1
- package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs +3 -0
- package/fesm2022/lifecorner-angular-ui-kit-textarea.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-toast.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme-contrast.spec.ts +2 -0
- package/types/lifecorner-angular-ui-kit-alert.d.ts +12 -2
- package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts +5 -1
- package/types/lifecorner-angular-ui-kit-combobox.d.ts +21 -0
- package/types/lifecorner-angular-ui-kit-confirm-dialog.d.ts +16 -0
- package/types/lifecorner-angular-ui-kit-drawer.d.ts +37 -1
- package/types/lifecorner-angular-ui-kit-gallery.d.ts +3 -1
- package/types/lifecorner-angular-ui-kit-header.d.ts +15 -0
- package/types/lifecorner-angular-ui-kit-internal-overlay.d.ts +9 -1
- package/types/lifecorner-angular-ui-kit-list.d.ts +26 -0
- package/types/lifecorner-angular-ui-kit-modal.d.ts +38 -2
- package/types/lifecorner-angular-ui-kit-sidenav.d.ts +42 -1
- package/types/lifecorner-angular-ui-kit-textarea.d.ts +17 -0
- package/types/lifecorner-angular-ui-kit-toast.d.ts +4 -2
|
@@ -153,7 +153,7 @@ var AlertComponent = class AlertComponent {
|
|
|
153
153
|
} },
|
|
154
154
|
ngImport: i0,
|
|
155
155
|
template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon\n [name]=\"defaultIcon()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n\n <div class=\"lc-alert__action\">\n <ng-content select=\"[slot='action']\" />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n",
|
|
156
|
-
styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"],
|
|
156
|
+
styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}@container lc-alert (16rem <= width < 30rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn)))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{order:1;flex:1 1 100%;align-self:auto;min-width:0;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__container:not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"],
|
|
157
157
|
dependencies: [{
|
|
158
158
|
kind: "component",
|
|
159
159
|
type: IconComponent,
|
|
@@ -206,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
206
206
|
"[attr.aria-label]": "ariaLabel()"
|
|
207
207
|
},
|
|
208
208
|
template: "@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon\n [name]=\"defaultIcon()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n\n <div class=\"lc-alert__action\">\n <ng-content select=\"[slot='action']\" />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n",
|
|
209
|
-
styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"]
|
|
209
|
+
styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}@container lc-alert (16rem <= width < 30rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn)))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{order:1;flex:1 1 100%;align-self:auto;min-width:0;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__container:not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"]
|
|
210
210
|
}]
|
|
211
211
|
}],
|
|
212
212
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-alert.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/alert/alert.component.ts","../../../../libs/angular-ui-kit/src/lib/alert/alert.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n model,\n output,\n computed,\n ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Layout of the projected actions (`slot=\"action\"`).\n * - `inline`: one action right of the body, vertically centred (3.2)\n * - `stacked`: the actions in their own row below the title and message;\n * below 576 px of alert width one per line at full width, 8 px apart,\n * from 576 px side by side at their natural width\n *\n * In the narrow layout (below 16rem) the actions start at the alert's inner\n * edge, not under the text.\n */\nexport type AlertActionsLayout = 'inline' | 'stacked';\n\n/**\n * Alert component for inline notifications.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Optional title and icon display\n * - Auto-mapped variant icons\n * - Dismissible with close button; `visible` is two-way bindable so a\n * dismissed alert can be shown again\n * - Content projection for custom body\n * - Action slot for a button rendered right of the body (e.g. retry), or\n * several actions stacked below it (`actionsLayout=\"stacked\"`); 3.12: a text\n * link (`<a slot=\"action\" href=\"…\">`) as the one way forward gets a\n * 44 × 44 px target, link colour, an underline and a focus ring\n * - 3.13.1: narrow layout below 16rem inside the border (alerts under 258 px\n * at 100 % text, 514 px at 200 %): the icon shares the first row with the\n * title, message and actions take the full width below, the padding is one\n * density step smaller (`--lc-density-padding-sm`), and long words\n * hyphenate (`hyphens: auto`, needs the page's `lang`) or break instead of\n * leaving the box\n * - The variant icon is decorative unless `iconAriaLabel` names it (the\n * title and the colour carry the tone; no built-in English word)\n * - Accessible: `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n *\n * @example\n * ```html\n * <lc-alert variant=\"success\" title=\"Success!\" [dismissible]=\"true\">\n * Your changes have been saved.\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Laden fehlgeschlagen\">\n * Die Liste konnte nicht geladen werden.\n * <lc-button slot=\"action\" variant=\"outline\" size=\"sm\">Erneut versuchen</lc-button>\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Senden gerade nicht möglich\">\n * Wir können Ihre Nachricht gerade nicht senden.\n * <a slot=\"action\" href=\"mailto:kontakt@beispiel.example\">Schreiben Sie uns an kontakt@beispiel.example</a>\n * </lc-alert>\n * ```\n */\n@Component({\n selector: 'lc-alert',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [\n ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n ],\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': 'role()',\n '[attr.aria-live]': 'ariaLive()',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class AlertComponent {\n /**\n * Visual variant of the alert\n * @default 'info'\n */\n variant = input<AlertVariant>('info');\n\n /**\n * Alert title (optional)\n */\n title = input<string>();\n\n /**\n * Alert message (alternative to content projection)\n */\n message = input<string>();\n\n /**\n * Icon to display (defaults based on variant)\n */\n icon = input<string>();\n\n /**\n * Whether to show icon\n * @default true\n */\n showIcon = input<boolean>(true);\n\n /**\n * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when\n * the title already says what kind of message this is: the icon is then\n * decorative (`aria-hidden`). The kit sets no default text, so no English\n * word is read on a page in another language.\n */\n iconAriaLabel = input<string | undefined>(undefined);\n\n /**\n * Layout of the projected actions (`slot=\"action\"`): `inline` — one action\n * right of the body (3.2); `stacked` — the actions in their own row below\n * the title and message, one per line at full width and 8 px apart below\n * 576 px of alert width, side by side at their natural width from there.\n * @default 'inline'\n */\n actionsLayout = input<AlertActionsLayout>('inline');\n\n /**\n * Whether the alert can be dismissed\n * @default false\n */\n dismissible = input<boolean>(false);\n\n /**\n * ARIA label for accessibility\n */\n ariaLabel = input<string>();\n\n /** Accessible name of the close button (`dismissible`). */\n closeAriaLabel = input('Close alert');\n\n /**\n * Emitted when alert is dismissed\n */\n readonly dismissed = output<void>();\n\n /**\n * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n * can set it back to `true` to show the alert again.\n */\n visible = model<boolean>(true);\n\n /**\n * Computed host classes\n */\n protected hostClasses = computed(() => {\n const classes = ['lc-alert', `lc-alert--${this.variant()}`];\n if (this.actionsLayout() === 'stacked') {\n classes.push('lc-alert--actions-stacked');\n }\n if (this.showIcon()) {\n classes.push('lc-alert--with-icon');\n }\n if (!this.visible()) {\n classes.push('lc-alert--hidden');\n }\n return classes.join(' ');\n });\n\n /**\n * Computed container classes\n */\n protected containerClasses = computed(() => {\n return 'lc-alert__container';\n });\n\n /** Whether the variant should interrupt the user (error / warning). */\n private readonly isUrgent = computed(() => {\n const variant = this.variant();\n return variant === 'error' || variant === 'warning';\n });\n\n /**\n * Live-region role: `alert` (assertive) only for error / warning,\n * `status` (polite) for info / success.\n */\n protected role = computed(() => (this.isUrgent() ? 'alert' : 'status'));\n\n /**\n * Computed ARIA live region priority\n */\n protected ariaLive = computed(() => (this.isUrgent() ? 'assertive' : 'polite'));\n\n /**\n * Computed default icon based on variant\n */\n protected defaultIcon = computed(() => {\n const icons: Record<AlertVariant, string> = {\n success: 'check-circle',\n error: 'x-circle',\n warning: 'exclamation-triangle',\n info: 'information-circle',\n };\n return this.icon() || icons[this.variant()];\n });\n\n /**\n * Dismiss the alert\n */\n dismiss(): void {\n this.visible.set(false);\n this.dismissed.emit();\n }\n\n /**\n * Handle close button click\n */\n protected onCloseClick(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.dismiss();\n }\n}\n","@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon\n [name]=\"defaultIcon()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n\n <div class=\"lc-alert__action\">\n <ng-content select=\"[slot='action']\" />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-alert.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/alert/alert.component.ts","../../../../libs/angular-ui-kit/src/lib/alert/alert.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n model,\n output,\n computed,\n ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n ICON_CHECK_CIRCLE,\n ICON_CIRCLE_X,\n ICON_EXCLAMATION_TRIANGLE,\n ICON_INFORMATION_CIRCLE,\n ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Layout of the projected actions (`slot=\"action\"`).\n * - `inline`: one action right of the body, vertically centred (3.2); from\n * 16rem to 30rem inside the border (alerts of 258–481 px at 100 % text,\n * 514–961 px at 200 %) a button action takes its own row below the text,\n * lined up with it, at its natural width (3.35)\n * - `stacked`: the actions in their own row below the title and message;\n * below 576 px of alert width one per line at full width, 8 px apart,\n * from 576 px side by side at their natural width\n *\n * In the narrow layout (below 16rem) the actions start at the alert's inner\n * edge, not under the text.\n */\nexport type AlertActionsLayout = 'inline' | 'stacked';\n\n/**\n * Alert component for inline notifications.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Optional title and icon display\n * - Auto-mapped variant icons\n * - Dismissible with close button; `visible` is two-way bindable so a\n * dismissed alert can be shown again\n * - Content projection for custom body\n * - Action slot for a button rendered right of the body (e.g. retry), or\n * several actions stacked below it (`actionsLayout=\"stacked\"`); 3.12: a text\n * link (`<a slot=\"action\" href=\"…\">`) as the one way forward gets a\n * 44 × 44 px target, link colour, an underline and a focus ring\n * - 3.35: from 16rem to 30rem inside the border (alerts of 258–481 px at\n * 100 % text, 514–961 px at 200 %) an inline button action takes its own\n * row below the text, lined up with it, at its natural width, so the\n * message keeps about 200 px beside the ×\n * - 3.13.1: narrow layout below 16rem inside the border (alerts under 258 px\n * at 100 % text, 514 px at 200 %): the icon shares the first row with the\n * title, message and actions take the full width below, the padding is one\n * density step smaller (`--lc-density-padding-sm`), and long words\n * hyphenate (`hyphens: auto`, needs the page's `lang`) or break instead of\n * leaving the box\n * - The variant icon is decorative unless `iconAriaLabel` names it (the\n * title and the colour carry the tone; no built-in English word)\n * - Accessible: `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n *\n * @example\n * ```html\n * <lc-alert variant=\"success\" title=\"Success!\" [dismissible]=\"true\">\n * Your changes have been saved.\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Laden fehlgeschlagen\">\n * Die Liste konnte nicht geladen werden.\n * <lc-button slot=\"action\" variant=\"outline\" size=\"sm\">Erneut versuchen</lc-button>\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Senden gerade nicht möglich\">\n * Wir können Ihre Nachricht gerade nicht senden.\n * <a slot=\"action\" href=\"mailto:kontakt@beispiel.example\">Schreiben Sie uns an kontakt@beispiel.example</a>\n * </lc-alert>\n * ```\n */\n@Component({\n selector: 'lc-alert',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [\n ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n ],\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': 'role()',\n '[attr.aria-live]': 'ariaLive()',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class AlertComponent {\n /**\n * Visual variant of the alert\n * @default 'info'\n */\n variant = input<AlertVariant>('info');\n\n /**\n * Alert title (optional)\n */\n title = input<string>();\n\n /**\n * Alert message (alternative to content projection)\n */\n message = input<string>();\n\n /**\n * Icon to display (defaults based on variant)\n */\n icon = input<string>();\n\n /**\n * Whether to show icon\n * @default true\n */\n showIcon = input<boolean>(true);\n\n /**\n * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when\n * the title already says what kind of message this is: the icon is then\n * decorative (`aria-hidden`). The kit sets no default text, so no English\n * word is read on a page in another language.\n */\n iconAriaLabel = input<string | undefined>(undefined);\n\n /**\n * Layout of the projected actions (`slot=\"action\"`): `inline` — one action\n * right of the body (3.2); from 16rem to 30rem inside the border (alerts of\n * 258–481 px at 100 % text, 514–961 px at 200 %) a button action takes its\n * own row below the text, lined up with it, at its natural width (3.35);\n * `stacked` — the actions in their own row below\n * the title and message, one per line at full width and 8 px apart below\n * 576 px of alert width, side by side at their natural width from there.\n * @default 'inline'\n */\n actionsLayout = input<AlertActionsLayout>('inline');\n\n /**\n * Whether the alert can be dismissed\n * @default false\n */\n dismissible = input<boolean>(false);\n\n /**\n * ARIA label for accessibility\n */\n ariaLabel = input<string>();\n\n /** Accessible name of the close button (`dismissible`). */\n closeAriaLabel = input('Close alert');\n\n /**\n * Emitted when alert is dismissed\n */\n readonly dismissed = output<void>();\n\n /**\n * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n * can set it back to `true` to show the alert again.\n */\n visible = model<boolean>(true);\n\n /**\n * Computed host classes\n */\n protected hostClasses = computed(() => {\n const classes = ['lc-alert', `lc-alert--${this.variant()}`];\n if (this.actionsLayout() === 'stacked') {\n classes.push('lc-alert--actions-stacked');\n }\n if (this.showIcon()) {\n classes.push('lc-alert--with-icon');\n }\n if (!this.visible()) {\n classes.push('lc-alert--hidden');\n }\n return classes.join(' ');\n });\n\n /**\n * Computed container classes\n */\n protected containerClasses = computed(() => {\n return 'lc-alert__container';\n });\n\n /** Whether the variant should interrupt the user (error / warning). */\n private readonly isUrgent = computed(() => {\n const variant = this.variant();\n return variant === 'error' || variant === 'warning';\n });\n\n /**\n * Live-region role: `alert` (assertive) only for error / warning,\n * `status` (polite) for info / success.\n */\n protected role = computed(() => (this.isUrgent() ? 'alert' : 'status'));\n\n /**\n * Computed ARIA live region priority\n */\n protected ariaLive = computed(() => (this.isUrgent() ? 'assertive' : 'polite'));\n\n /**\n * Computed default icon based on variant\n */\n protected defaultIcon = computed(() => {\n const icons: Record<AlertVariant, string> = {\n success: 'check-circle',\n error: 'x-circle',\n warning: 'exclamation-triangle',\n info: 'information-circle',\n };\n return this.icon() || icons[this.variant()];\n });\n\n /**\n * Dismiss the alert\n */\n dismiss(): void {\n this.visible.set(false);\n this.dismissed.emit();\n }\n\n /**\n * Handle close button click\n */\n protected onCloseClick(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.dismiss();\n }\n}\n","@if (visible()) {\n <div [class]=\"containerClasses()\">\n @if (showIcon()) {\n <div class=\"lc-alert__icon\">\n <lc-icon\n [name]=\"defaultIcon()\"\n size=\"md\"\n [decorative]=\"!iconAriaLabel()\"\n [ariaLabel]=\"iconAriaLabel()\"\n />\n </div>\n }\n \n <div class=\"lc-alert__body\">\n @if (title()) {\n <div class=\"lc-alert__title\">{{ title() }}</div>\n }\n \n <div class=\"lc-alert__content\">\n @if (message()) {\n {{ message() }}\n } @else {\n <ng-content />\n }\n </div>\n </div>\n\n <div class=\"lc-alert__action\">\n <ng-content select=\"[slot='action']\" />\n </div>\n\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"lc-alert__close\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick($event)\"\n >\n <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n </button>\n }\n </div>\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent, type BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\n/** A count or status on a bottom-nav entry (`BottomNavItem.badge`, `moreBadge`). */\nexport interface BottomNavBadge {\n /** Text or number inside the badge. */\n value: string | number;\n /** Badge colour (`lc-badge` variant). */\n variant?: BadgeVariant;\n}\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n /** Unique id. */\n id: string;\n /** Visible label, always shown below the icon. */\n label: string;\n /** Icon name (`lc-icon`), drawn at 24 px. */\n icon: string;\n /** Router path the item links to (`routerLink`). */\n route: string;\n /** Sort order; items without one keep their array order. */\n displayOrder?: number;\n /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n badge?: BottomNavBadge;\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n item: BottomNavItem;\n current: boolean;\n more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n * `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n * label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n * its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n * sub-page (`/household/members`) keeps its destination current; `/` only\n * matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n * rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n * without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n * slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n * the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n * bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n * (`z-index` 900). Reserve space for it at the end of the page (see\n * `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n * transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n * variant=\"floating\"\n * ariaLabel=\"Hauptnavigation\"\n * [items]=\"[\n * { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n * { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n * ]\"\n * [activeRoute]=\"router.url\"\n * (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-bottom-nav',\n standalone: true,\n imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n templateUrl: './bottom-nav.component.html',\n styleUrl: './bottom-nav.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'lc-bottom-nav-host',\n },\n})\nexport class BottomNavComponent {\n /** Destinations, left to right (sorted by `displayOrder` when given). */\n readonly items = input<readonly BottomNavItem[]>([]);\n\n /**\n * The current URL (e.g. `router.url`). The item whose route matches its\n * first path segment is current; `/` matches only itself.\n */\n readonly activeRoute = input('');\n\n /** Accessible name of the `<nav>` landmark. */\n readonly ariaLabel = input('Main navigation');\n\n /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n readonly variant = input<BottomNavVariant>('docked');\n\n /**\n * Pin the bar to the bottom of the viewport. Turn off to render it in the\n * document flow (previews, tests, a custom container).\n */\n readonly fixed = input(true);\n\n /**\n * Most entries the bar shows, \"More\" included. With more destinations, or\n * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n * \"More\" entry.\n *\n * @default 5\n */\n readonly maxItems = input(5);\n\n /**\n * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n * and any others move behind it, as on overflow.\n *\n * @default false\n */\n readonly showMore = input(false);\n\n /**\n * Label of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'More'\n */\n readonly moreLabel = input('More');\n\n /**\n * Icon of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'dots'\n */\n readonly moreIcon = input('dots');\n\n /**\n * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n * lists the remaining destinations. Empty renders the entry as a button that\n * emits `moreClick`.\n *\n * @default ''\n */\n readonly moreRoute = input('');\n\n /**\n * Badge on the \"More\" entry (on overflow or with `showMore`), e.g. the open\n * tasks on the pages behind it: drawn like an item badge and read after the\n * label through `badgeAriaLabel`. The kit doesn't add up the hidden\n * destinations' badges; pass the value to show. It sits on the bar's last\n * entry; values up to three characters (`'99+'`) fit: on the last entry a\n * badge that would pass the entry's edge moves left until it ends there\n * (3.33). `null` or `undefined`: no badge.\n *\n * @default null\n */\n readonly moreBadge = input<BottomNavBadge | null | undefined>(null);\n\n /**\n * Text read after an item's label, and after the \"More\" label with\n * `moreBadge`, when it has a badge; `{value}` is replaced with the badge\n * value (e.g. \"3 new\").\n *\n * @default '{value} new'\n */\n readonly badgeAriaLabel = input('{value} new');\n\n /** The current item was tapped again (e.g. scroll the page to the top). */\n readonly reselect = output<BottomNavItem>();\n\n /** The \"More\" entry was tapped while it has no `moreRoute`. */\n readonly moreClick = output<void>();\n\n /** Destinations in display order. */\n private readonly sortedItems = computed(() =>\n [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n );\n\n /** Path of `activeRoute` without query and fragment. */\n private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n /**\n * Entries as rendered: destinations plus, on overflow or with `showMore`,\n * the \"More\" entry, which then takes one of the `maxItems` entries.\n */\n protected readonly entries = computed<BottomNavEntry[]>(() => {\n const items = this.sortedItems();\n const max = Math.max(1, Math.floor(this.maxItems()));\n if (!this.showMore() && items.length <= max) {\n return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n }\n const visible = items.slice(0, max - 1);\n const hidden = items.slice(max - 1);\n const moreRoute = this.moreRoute();\n const moreItem: BottomNavItem = {\n id: '__more',\n label: this.moreLabel(),\n icon: this.moreIcon(),\n route: moreRoute,\n badge: this.moreBadge() ?? undefined,\n };\n const moreCurrent =\n (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n return [\n ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n { item: moreItem, current: moreCurrent, more: true },\n ];\n });\n\n protected readonly navClasses = computed(() => {\n const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n return classes.join(' ');\n });\n\n /** Visually hidden badge text for screen readers. */\n protected badgeText(item: BottomNavItem): string {\n return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n }\n\n protected onItemClick(entry: BottomNavEntry): void {\n if (entry.current && !entry.more) {\n this.reselect.emit(entry.item);\n }\n }\n\n protected onMoreButtonClick(): void {\n this.moreClick.emit();\n }\n\n /** First-segment match: `/household/members` keeps `/household` current. */\n private matches(route: string): boolean {\n const path = this.activePath();\n const target = route.split(/[?#]/)[0] || '/';\n if (target === '/') return path === '/';\n const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n return path === normalized || path.startsWith(`${normalized}/`);\n }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"lc-bottom-nav__list\">\n @for (entry of entries(); track entry.item.id) {\n <li class=\"lc-bottom-nav__entry\">\n @if (entry.more && !entry.item.route) {\n <button\n type=\"button\"\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n (click)=\"onMoreButtonClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </button>\n } @else {\n <a\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n [routerLink]=\"entry.item.route\"\n [attr.aria-current]=\"entry.current ? 'page' : null\"\n (click)=\"onItemClick(entry)\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </a>\n }\n </li>\n }\n </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n @if (entry.item.badge; as badge) {\n <span class=\"lc-bottom-nav__badge\">\n <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n </span>\n }\n </span>\n <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n @if (entry.item.badge) {\n <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n }\n</ng-template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent, type BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\n/** A count or status on a bottom-nav entry (`BottomNavItem.badge`, `moreBadge`). */\nexport interface BottomNavBadge {\n /** Text or number inside the badge. */\n value: string | number;\n /** Badge colour (`lc-badge` variant). */\n variant?: BadgeVariant;\n}\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n /** Unique id. */\n id: string;\n /** Visible label, always shown below the icon. */\n label: string;\n /** Icon name (`lc-icon`), drawn at 24 px. */\n icon: string;\n /** Router path the item links to (`routerLink`). */\n route: string;\n /** Sort order; items without one keep their array order. */\n displayOrder?: number;\n /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n badge?: BottomNavBadge;\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n item: BottomNavItem;\n current: boolean;\n more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n * `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n * label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n * its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n * sub-page (`/household/members`) keeps its destination current; `/` only\n * matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n * rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n * without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n * slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n * the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n * bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n * (`z-index` 900). Reserve space for it at the end of the page (see\n * `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n * transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n * variant=\"floating\"\n * ariaLabel=\"Hauptnavigation\"\n * [items]=\"[\n * { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n * { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n * ]\"\n * [activeRoute]=\"router.url\"\n * (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n selector: 'lc-bottom-nav',\n standalone: true,\n imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n templateUrl: './bottom-nav.component.html',\n styleUrl: './bottom-nav.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'lc-bottom-nav-host',\n },\n})\nexport class BottomNavComponent {\n /** Destinations, left to right (sorted by `displayOrder` when given). */\n readonly items = input<readonly BottomNavItem[]>([]);\n\n /**\n * The current URL (e.g. `router.url`). The item whose route matches its\n * first path segment is current; `/` matches only itself.\n */\n readonly activeRoute = input('');\n\n /** Accessible name of the `<nav>` landmark. */\n readonly ariaLabel = input('Main navigation');\n\n /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n readonly variant = input<BottomNavVariant>('docked');\n\n /**\n * Pin the bar to the bottom of the viewport. Turn off to render it in the\n * document flow (previews, tests, a custom container).\n */\n readonly fixed = input(true);\n\n /**\n * Most entries the bar shows, \"More\" included. With more destinations, or\n * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n * \"More\" entry.\n *\n * @default 5\n */\n readonly maxItems = input(5);\n\n /**\n * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n * and any others move behind it, as on overflow.\n *\n * @default false\n */\n readonly showMore = input(false);\n\n /**\n * Label of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'More'\n */\n readonly moreLabel = input('More');\n\n /**\n * Icon of the \"More\" entry (on overflow or with `showMore`).\n *\n * @default 'dots'\n */\n readonly moreIcon = input('dots');\n\n /**\n * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n * lists the remaining destinations. Empty renders the entry as a button that\n * emits `moreClick`.\n *\n * @default ''\n */\n readonly moreRoute = input('');\n\n /**\n * Badge on the \"More\" entry (on overflow or with `showMore`), e.g. the open\n * tasks on the pages behind it: drawn like an item badge and read after the\n * label through `badgeAriaLabel`. The kit doesn't add up the hidden\n * destinations' badges; pass the value to show. It sits on the bar's last\n * entry; values up to three characters (`'99+'`) fit: on the last entry a\n * badge that would pass the entry's edge moves left until it ends there\n * (3.33). `null` or `undefined`: no badge. Known limit (3.35, 052-n3):\n * '99+' on the last entry of a five-entry bar at 360 px starts 3.2 px\n * (docked) / 3.4 px (floating) left of the pill centre and covers two of the\n * More glyph's three dots; the label and the read badge text still name the\n * entry.\n *\n * @default null\n */\n readonly moreBadge = input<BottomNavBadge | null | undefined>(null);\n\n /**\n * Text read after an item's label, and after the \"More\" label with\n * `moreBadge`, when it has a badge; `{value}` is replaced with the badge\n * value (e.g. \"3 new\").\n *\n * @default '{value} new'\n */\n readonly badgeAriaLabel = input('{value} new');\n\n /** The current item was tapped again (e.g. scroll the page to the top). */\n readonly reselect = output<BottomNavItem>();\n\n /** The \"More\" entry was tapped while it has no `moreRoute`. */\n readonly moreClick = output<void>();\n\n /** Destinations in display order. */\n private readonly sortedItems = computed(() =>\n [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n );\n\n /** Path of `activeRoute` without query and fragment. */\n private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n /**\n * Entries as rendered: destinations plus, on overflow or with `showMore`,\n * the \"More\" entry, which then takes one of the `maxItems` entries.\n */\n protected readonly entries = computed<BottomNavEntry[]>(() => {\n const items = this.sortedItems();\n const max = Math.max(1, Math.floor(this.maxItems()));\n if (!this.showMore() && items.length <= max) {\n return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n }\n const visible = items.slice(0, max - 1);\n const hidden = items.slice(max - 1);\n const moreRoute = this.moreRoute();\n const moreItem: BottomNavItem = {\n id: '__more',\n label: this.moreLabel(),\n icon: this.moreIcon(),\n route: moreRoute,\n badge: this.moreBadge() ?? undefined,\n };\n const moreCurrent =\n (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n return [\n ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n { item: moreItem, current: moreCurrent, more: true },\n ];\n });\n\n protected readonly navClasses = computed(() => {\n const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n return classes.join(' ');\n });\n\n /** Visually hidden badge text for screen readers. */\n protected badgeText(item: BottomNavItem): string {\n return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n }\n\n protected onItemClick(entry: BottomNavEntry): void {\n if (entry.current && !entry.more) {\n this.reselect.emit(entry.item);\n }\n }\n\n protected onMoreButtonClick(): void {\n this.moreClick.emit();\n }\n\n /** First-segment match: `/household/members` keeps `/household` current. */\n private matches(route: string): boolean {\n const path = this.activePath();\n const target = route.split(/[?#]/)[0] || '/';\n if (target === '/') return path === '/';\n const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n return path === normalized || path.startsWith(`${normalized}/`);\n }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"lc-bottom-nav__list\">\n @for (entry of entries(); track entry.item.id) {\n <li class=\"lc-bottom-nav__entry\">\n @if (entry.more && !entry.item.route) {\n <button\n type=\"button\"\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n (click)=\"onMoreButtonClick()\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </button>\n } @else {\n <a\n class=\"lc-bottom-nav__item\"\n [class.lc-bottom-nav__item--current]=\"entry.current\"\n [routerLink]=\"entry.item.route\"\n [attr.aria-current]=\"entry.current ? 'page' : null\"\n (click)=\"onItemClick(entry)\"\n >\n <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </a>\n }\n </li>\n }\n </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n @if (entry.item.badge; as badge) {\n <span class=\"lc-bottom-nav__badge\">\n <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n </span>\n }\n </span>\n <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n @if (entry.item.badge) {\n <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n }\n</ng-template>\n"],"mappings":"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"}
|
|
@@ -213,6 +213,9 @@ var ComboboxComponent = class ComboboxComponent {
|
|
|
213
213
|
this.formDisabled.set(isDisabled);
|
|
214
214
|
if (isDisabled) this.isOpen.set(false);
|
|
215
215
|
}
|
|
216
|
+
focus(options) {
|
|
217
|
+
this.inputEl()?.nativeElement.focus(options);
|
|
218
|
+
}
|
|
216
219
|
clear() {
|
|
217
220
|
this.query.set("");
|
|
218
221
|
this.highlightedIndex.set(-1);
|
|
@@ -524,7 +527,7 @@ var ComboboxComponent = class ComboboxComponent {
|
|
|
524
527
|
],
|
|
525
528
|
ngImport: i0,
|
|
526
529
|
template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- pointer shortcut; the input is the keyboard target -->\n <div\n #inputWrapper\n class=\"lc-combobox__input-wrapper\"\n (mousedown)=\"onFrameMousedown($event)\"\n (click)=\"onFrameClick($event)\"\n >\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!isDisabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [id]=\"inputId\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"isDisabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n [disabled]=\"isDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearClick()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n ancestors cannot clip it. Focus stays in the input (mousedown is\n prevented on the panel), keyboard nav uses aria-activedescendant. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (detach)=\"isOpen.set(false)\"\n >\n <div\n #dropdownEl\n class=\"lc-combobox__dropdown\"\n [style.--_lc-combobox-field-width.px]=\"fieldWidth()\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n [attr.lang]=\"panelLang()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value) {\n @let idx = flatOptions().indexOf(option);\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [id]=\"optionId(idx)\"\n [attr.aria-selected]=\"idx === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(idx)\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" [decorative]=\"true\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n role=\"option\"\n [id]=\"createOptionId\"\n [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </ng-template>\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n }\n</div>\n",
|
|
527
|
-
styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);
|
|
530
|
+
styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);outline:2px solid var(--color-primary-500);outline-offset:0;box-shadow:none}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{outline:2px solid var(--color-error-default);outline-offset:0;box-shadow:none}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.6;cursor:not-allowed;background-color:var(--color-surface-muted)}.lc-combobox--disabled .lc-combobox__input-wrapper:hover{border-color:var(--color-border)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-text-tertiary)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.75rem;margin-block:-.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;border:none;background:transparent;background-clip:content-box;cursor:pointer;color:var(--color-text-tertiary);border-radius:calc(var(--border-radius-sm) + .125rem);flex-shrink:0}.lc-combobox__clear:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-combobox__clear:disabled{cursor:not-allowed}.lc-combobox__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0}.lc-combobox--lg .lc-combobox__clear{margin-inline-start:.625rem}.lc-combobox--lg .lc-combobox__clear:before{content:\"\";position:absolute;inset:-.625rem -.375rem -.625rem -.875rem}.lc-combobox__dropdown{flex:1 1 auto;min-width:max(80px,var(--_lc-combobox-field-width, 0px));max-width:calc(100vw - 2 * var(--spacing-2));max-height:240px;overflow-y:auto;background-color:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3)}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-surface-hover)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600);font-weight:500;border-top:1px solid var(--color-divider)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-text-error)}@media(forced-colors:active){.lc-combobox__input-wrapper:focus-within,.lc-combobox--error .lc-combobox__input-wrapper:focus-within{outline-color:Highlight}.lc-combobox__clear:focus-visible{outline-color:Highlight}}\n"],
|
|
528
531
|
dependencies: [
|
|
529
532
|
{
|
|
530
533
|
kind: "ngmodule",
|
|
@@ -639,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
639
642
|
multi: true
|
|
640
643
|
}],
|
|
641
644
|
template: "<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- pointer shortcut; the input is the keyboard target -->\n <div\n #inputWrapper\n class=\"lc-combobox__input-wrapper\"\n (mousedown)=\"onFrameMousedown($event)\"\n (click)=\"onFrameClick($event)\"\n >\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!isDisabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [id]=\"inputId\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"isDisabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n [disabled]=\"isDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearClick()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n ancestors cannot clip it. Focus stays in the input (mousedown is\n prevented on the panel), keyboard nav uses aria-activedescendant. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (detach)=\"isOpen.set(false)\"\n >\n <div\n #dropdownEl\n class=\"lc-combobox__dropdown\"\n [style.--_lc-combobox-field-width.px]=\"fieldWidth()\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n [attr.lang]=\"panelLang()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value) {\n @let idx = flatOptions().indexOf(option);\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [id]=\"optionId(idx)\"\n [attr.aria-selected]=\"idx === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(idx)\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" [decorative]=\"true\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n role=\"option\"\n [id]=\"createOptionId\"\n [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </ng-template>\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n }\n</div>\n",
|
|
642
|
-
styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);
|
|
645
|
+
styles: [".lc-combobox{display:flex;flex-direction:column;gap:.25rem;position:relative;font-family:var(--font-family-sans)}.lc-combobox__label{font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--color-text-primary);margin-bottom:.125rem}.lc-combobox__input-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;border:1px solid var(--color-field-border);border-radius:var(--border-radius-md, .375rem);background-color:var(--color-surface-2);padding:.25rem .5rem;transition:border-color .15s,box-shadow .15s;cursor:text}.lc-combobox__input-wrapper:hover{border-color:var(--color-text-secondary)}.lc-combobox__input-wrapper:focus-within{border-color:var(--color-primary-500);outline:2px solid var(--color-primary-500);outline-offset:0;box-shadow:none}.lc-combobox--error .lc-combobox__input-wrapper{border-color:var(--color-error-default)}.lc-combobox--error .lc-combobox__input-wrapper:focus-within{outline:2px solid var(--color-error-default);outline-offset:0;box-shadow:none}.lc-combobox--disabled .lc-combobox__input-wrapper{opacity:.6;cursor:not-allowed;background-color:var(--color-surface-muted)}.lc-combobox--disabled .lc-combobox__input-wrapper:hover{border-color:var(--color-border)}.lc-combobox__input{flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-family:inherit}.lc-combobox__input::placeholder{color:var(--color-text-tertiary)}.lc-combobox__input:disabled{cursor:not-allowed}.lc-combobox--xs .lc-combobox__input{font-size:var(--font-size-xs, .75rem);height:1.5rem}.lc-combobox--sm .lc-combobox__input{font-size:var(--font-size-sm, .875rem);height:1.75rem}.lc-combobox--md .lc-combobox__input{font-size:var(--font-size-base, 1rem);height:2rem}.lc-combobox--lg .lc-combobox__input{font-size:var(--font-size-lg, 1.125rem);height:2.75rem;margin-block:-.25rem}.lc-combobox__spinner{flex-shrink:0}.lc-combobox__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;border:none;background:transparent;background-clip:content-box;cursor:pointer;color:var(--color-text-tertiary);border-radius:calc(var(--border-radius-sm) + .125rem);flex-shrink:0}.lc-combobox__clear:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-surface-hover)}.lc-combobox__clear:disabled{cursor:not-allowed}.lc-combobox__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0}.lc-combobox--lg .lc-combobox__clear{margin-inline-start:.625rem}.lc-combobox--lg .lc-combobox__clear:before{content:\"\";position:absolute;inset:-.625rem -.375rem -.625rem -.875rem}.lc-combobox__dropdown{flex:1 1 auto;min-width:max(80px,var(--_lc-combobox-field-width, 0px));max-width:calc(100vw - 2 * var(--spacing-2));max-height:240px;overflow-y:auto;background-color:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-md, .375rem);box-shadow:var(--elevation-3)}.lc-combobox__group-header{padding:.375rem .75rem;font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.lc-combobox__group-header:first-child{margin-top:0}.lc-combobox__option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .1s}.lc-combobox__option--highlighted{background-color:var(--color-surface-hover)}.lc-combobox__option--disabled{opacity:.5;cursor:not-allowed}.lc-combobox__option--create{color:var(--color-primary-600);font-weight:500;border-top:1px solid var(--color-divider)}.lc-combobox__option-icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-combobox__option-content{display:flex;flex-direction:column;min-width:0}.lc-combobox__option-label{font-size:var(--font-size-sm, .875rem);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__option-desc{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-combobox__empty{padding:.75rem;text-align:center;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .875rem)}.lc-combobox__helper{font-size:var(--font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-combobox__error{font-size:var(--font-size-xs, .75rem);color:var(--color-text-error)}@media(forced-colors:active){.lc-combobox__input-wrapper:focus-within,.lc-combobox--error .lc-combobox__input-wrapper:focus-within{outline-color:Highlight}.lc-combobox__clear:focus-visible{outline-color:Highlight}}\n"]
|
|
643
646
|
}]
|
|
644
647
|
}],
|
|
645
648
|
ctorParameters: () => [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lifecorner-angular-ui-kit-combobox.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/combobox/combobox.component.ts","../../../../libs/angular-ui-kit/src/lib/combobox/combobox.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n signal,\n computed,\n afterRenderEffect,\n effect,\n forwardRef,\n ElementRef,\n viewChild,\n HostListener,\n inject,\n isDevMode,\n model,\n untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayModule, type ConnectedPosition } from '@angular/cdk/overlay';\nimport { Observable, Subject, catchError, debounce, defer, of, switchMap, timer } from 'rxjs';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { SpinnerComponent } from '@lifecorner/angular-ui-kit/spinner';\nimport { ChipComponent } from '@lifecorner/angular-ui-kit/chip';\nimport { openPanelLang } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport interface ComboboxOption {\n value: string;\n label: string;\n description?: string;\n icon?: string;\n group?: string;\n disabled?: boolean;\n}\n\nexport type ComboboxValue = ComboboxOption | ComboboxOption[] | null;\n\nexport type ComboboxSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Combobox / async autocomplete component.\n *\n * Supports free-text input with sync/async option suggestions,\n * single/multiple selection, create new entries, and keyboard navigation.\n * The suggestion list is rendered in a CDK overlay so it is never clipped\n * by `overflow: hidden` ancestors (cards, modals, table cells). The dropdown\n * takes the `lang` of the host's closest `[lang]` (3.30.2).\n *\n * The selection is two-way bindable by an option's `value` string\n * (`[(selectedValue)]`, single mode), next to the `valueChange` output with\n * the option object and the forms binding.\n *\n * @example\n * ```html\n * <lc-combobox\n * label=\"Assign to user\"\n * [loadOptions]=\"searchUsers\"\n * [(selectedValue)]=\"assigneeId\"\n * allowCreate\n * />\n * ```\n */\n@Component({\n selector: 'lc-combobox',\n standalone: true,\n imports: [OverlayModule, IconComponent, SpinnerComponent, ChipComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_PLUS])],\n templateUrl: './combobox.component.html',\n styleUrls: ['./combobox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ComboboxComponent),\n multi: true,\n },\n ],\n})\nexport class ComboboxComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Per-instance ids so label/listbox/options can be linked via ARIA */\n readonly inputId = `lc-combobox-${++ComboboxComponent.nextId}`;\n readonly listboxId = `${this.inputId}-listbox`;\n protected readonly createOptionId = `${this.listboxId}-create`;\n\n private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n private readonly dropdownEl = viewChild<ElementRef<HTMLElement>>('dropdownEl');\n private readonly inputWrapper = viewChild<ElementRef<HTMLElement>>('inputWrapper');\n\n private readonly elRef = inject(ElementRef);\n private readonly querySubject = new Subject<string>();\n\n /** Sync options */\n readonly options = input<ComboboxOption[]>([]);\n\n /** Async option loader */\n readonly loadOptions = input<((query: string) => Observable<ComboboxOption[]>)>();\n\n /** Debounce for async queries */\n readonly debounceMs = input<number>(250);\n\n /** Minimum characters before triggering search */\n readonly minChars = input<number>(1);\n\n /** Placeholder text */\n readonly placeholder = input<string>('Search…');\n\n /** Label */\n readonly label = input<string>();\n\n /** Helper text */\n readonly helperText = input<string>();\n\n /** Error message */\n readonly error = input<string>();\n\n /** Disabled state */\n readonly disabled = input<boolean>(false);\n\n /** Allow multiple selections */\n readonly multiple = input<boolean>(false);\n\n /** Allow creating new entries */\n readonly allowCreate = input<boolean>(false);\n\n /** Show loading spinner (controlled) */\n readonly loading = input<boolean>(false);\n\n /** Empty state message */\n readonly emptyMessage = input<string>('No results');\n\n /** Accessible name of the clear button. */\n readonly clearAriaLabel = input('Clear');\n\n /** Label before the query in the \"create\" option (`allowCreate`): `Create \"query\"`. */\n readonly createOptionLabel = input('Create');\n\n /** Size */\n readonly size = input<ComboboxSize>('md');\n\n /**\n * Whether the list opens when the field gets focus (3.32, request 051).\n * With `false`, focus alone (`focus()` from the page, Tab) leaves the list\n * closed and `aria-expanded=\"false\"`; a click or tap on the field, typing or\n * ArrowDown opens it. Use it in forms that move focus into the field\n * themselves, on open or to the first invalid field after a rejected save.\n * Escape and choosing an option work as before.\n * @default true\n */\n readonly openOnFocus = input<boolean>(true);\n\n /**\n * The `value` of the selected option, two-way (3.29, regeln row 2):\n * `[(selectedValue)]=\"month\"`. Shows the matching option's label (from\n * `options`, or the current selection); an unknown value shows an empty\n * field and is filled in when `options` with it arrive. Page writes\n * (including back to `null`) select or clear silently: no\n * `selectedValueChange`, no `valueChange`, no forms `onChange`. Every user\n * choice or clear emits `selectedValueChange`, next to the unchanged\n * `valueChange` (the option object). Single mode only: ignored with\n * `multiple` (a dev warning). Use it or a forms binding, not both.\n * @default null\n */\n readonly selectedValue = model<string | null>(null);\n\n /** Value change event */\n readonly valueChange = output<ComboboxValue>();\n\n /** Query change event */\n readonly queryChange = output<string>();\n\n /** Option selected event */\n readonly optionSelected = output<ComboboxOption>();\n\n /** Created event (allowCreate) */\n readonly created = output<string>();\n\n /** Internal state */\n protected query = signal('');\n protected isOpen = signal(false);\n protected highlightedIndex = signal(-1);\n protected asyncOptions = signal<ComboboxOption[]>([]);\n protected isLoading = signal(false);\n\n /** Disabled via `setDisabledState` (reactive forms) */\n private readonly formDisabled = signal(false);\n\n /** Effective disabled state: `disabled` input OR form control disabled */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /**\n * `lang` of the open dropdown (3.30.2, WCAG 3.1.2): the overlay renders under\n * `<body>`, so it takes the host's closest `[lang]`, else none. Read at every\n * opening and, since 3.33, again when a `lang` changes while the list is\n * open; `null` while closed, so the server never reads the DOM.\n */\n protected readonly panelLang = openPanelLang(this.isOpen);\n\n /**\n * The field's width in px while the list is open (3.33, request 052,\n * 049-n2), read at every opening: the list's floor (`min-width`), so it is\n * at least as wide as the field and wider content still grows it. `null`\n * while closed.\n */\n protected readonly fieldWidth = computed(() =>\n this.isOpen() ? (this.inputWrapper()?.nativeElement.getBoundingClientRect().width ?? null) : null,\n );\n\n /**\n * Below the field, else above it, start- then end-aligned (the CDK's\n * defaults), 4 px from the field on either side (3.33, 047-n1: the gap was\n * a margin inside the pane, so it was 0 above). The list is never pushed,\n * so the offset can't move it off the field.\n */\n protected readonly positions: ConnectedPosition[] = [\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },\n ];\n\n /** Selected values */\n protected selectedSingle = signal<ComboboxOption | null>(null);\n protected selectedMultiple = signal<ComboboxOption[]>([]);\n\n /** The last `selectedValue` the component applied or emitted: a different one is a page write. */\n private seenSelectedValue: string | null = null;\n\n /** A page-written `selectedValue` no option matched yet: selected silently once `options` hold it. */\n private pendingSelectedValue: string | null = null;\n\n /** Resolved visible options */\n protected visibleOptions = computed(() => {\n const q = this.query().toLowerCase();\n const loader = this.loadOptions();\n\n let opts: ComboboxOption[];\n if (loader) {\n opts = this.asyncOptions();\n } else {\n opts = this.options();\n if (q.length >= this.minChars()) {\n opts = opts.filter(\n (o) =>\n o.label.toLowerCase().includes(q) ||\n o.value.toLowerCase().includes(q) ||\n (o.description && o.description.toLowerCase().includes(q))\n );\n }\n }\n\n // Remove already selected in multiple mode\n if (this.multiple()) {\n const selected = new Set(this.selectedMultiple().map((s) => s.value));\n opts = opts.filter((o) => !selected.has(o.value));\n }\n\n return opts;\n });\n\n /** Grouped options */\n protected groupedOptions = computed(() => {\n const opts = this.visibleOptions();\n const groups = new Map<string, ComboboxOption[]>();\n\n for (const opt of opts) {\n const group = opt.group || '';\n if (!groups.has(group)) groups.set(group, []);\n groups.get(group)!.push(opt);\n }\n\n return Array.from(groups.entries()).map(([label, items]) => ({\n label,\n items,\n }));\n });\n\n /** Flat list for keyboard nav */\n protected flatOptions = computed(() => {\n return this.groupedOptions().flatMap((g) => g.items);\n });\n\n /** Whether to show \"Create\" option */\n protected showCreateOption = computed(() => {\n if (!this.allowCreate()) return false;\n const q = this.query().trim();\n if (!q) return false;\n const exact = this.visibleOptions().some(\n (o) => o.label.toLowerCase() === q.toLowerCase()\n );\n return !exact;\n });\n\n /** id of the highlighted option — announced via aria-activedescendant */\n protected readonly activeDescendantId = computed(() => {\n if (!this.isOpen()) return null;\n const i = this.highlightedIndex();\n if (i < 0) return null;\n if (i === this.flatOptions().length) {\n return this.showCreateOption() ? this.createOptionId : null;\n }\n return i < this.flatOptions().length ? this.optionId(i) : null;\n });\n\n /** ids referenced by aria-describedby (helper / error) */\n protected readonly describedBy = computed(() => {\n if (this.error()) return `${this.inputId}-error`;\n if (this.helperText()) return `${this.inputId}-helper`;\n return null;\n });\n\n /** Container classes */\n protected containerClasses = computed(() => {\n const classes = [`lc-combobox`, `lc-combobox--${this.size()}`];\n if (this.isDisabled()) classes.push('lc-combobox--disabled');\n if (this.error()) classes.push('lc-combobox--error');\n if (this.isOpen()) classes.push('lc-combobox--open');\n return classes.join(' ');\n });\n\n protected optionId(index: number): string {\n return `${this.listboxId}-opt-${index}`;\n }\n\n // ControlValueAccessor\n private onChange: (value: ComboboxValue) => void = () => { /* set by registerOnChange */ };\n private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n constructor() {\n // Async loading pipe. `debounce` (not `debounceTime`) reads the signal per\n // emission, so `debounceMs` is honoured after inputs are populated.\n this.querySubject\n .pipe(\n debounce(() => timer(this.debounceMs())),\n switchMap((q) => {\n const loader = this.loadOptions();\n if (!loader || q.length < this.minChars()) {\n return of([] as ComboboxOption[]);\n }\n this.isLoading.set(true);\n // `defer` turns a synchronously throwing loader into an error\n // notification; `catchError` keeps the pipe alive for the next query.\n return defer(() => loader(q)).pipe(catchError(() => of([] as ComboboxOption[])));\n }),\n takeUntilDestroyed()\n )\n .subscribe((results) => {\n this.asyncOptions.set(results);\n this.isLoading.set(false);\n });\n\n // Keep the highlighted option visible while navigating with the keyboard\n // (after render, so the option element exists in the overlay pane).\n afterRenderEffect(() => {\n const id = this.activeDescendantId();\n if (!id) return;\n untracked(() => {\n // ids are generated from a counter, so no CSS escaping is needed\n this.dropdownEl()\n ?.nativeElement.querySelector<HTMLElement>(`#${id}`)\n ?.scrollIntoView?.({ block: 'nearest' });\n });\n });\n\n // `selectedValue` (3.29): a page write selects or clears silently; an\n // unknown value waits for `options` that hold it. The component's own\n // writes (user choice, clear) are already applied, so they are skipped.\n effect(() => {\n const value = this.selectedValue();\n const options = this.options();\n untracked(() => {\n if (value !== this.seenSelectedValue) {\n this.seenSelectedValue = value;\n if (!this.multiple()) {\n this.applySelectedValue(value, options);\n } else if (value !== null && isDevMode()) {\n console.warn('[lc-combobox] selectedValue is ignored with multiple');\n }\n } else if (this.pendingSelectedValue !== null && !this.multiple()) {\n this.applySelectedValue(this.pendingSelectedValue, options);\n }\n });\n });\n }\n\n /** Shows the option with `value` (or clears for `null`) without emitting anything. */\n private applySelectedValue(value: string | null, options: ComboboxOption[]): void {\n this.pendingSelectedValue = null;\n if (value === null) {\n this.selectedSingle.set(null);\n this.query.set('');\n return;\n }\n if (this.selectedSingle()?.value === value) return;\n const match = options.find((o) => o.value === value) ?? null;\n if (!match) this.pendingSelectedValue = value;\n this.selectedSingle.set(match);\n this.query.set(match ? match.label : '');\n }\n\n /** Emits a user's single choice or clear through `selectedValueChange` (not in `multiple` mode). */\n private emitSelectedValue(value: string | null): void {\n if (this.multiple()) return;\n this.pendingSelectedValue = null;\n this.seenSelectedValue = value;\n this.selectedValue.set(value);\n }\n\n writeValue(value: ComboboxValue): void {\n if (this.multiple()) {\n this.selectedMultiple.set(Array.isArray(value) ? value : []);\n } else {\n const single = value && !Array.isArray(value) ? value : null;\n this.pendingSelectedValue = null;\n this.selectedSingle.set(single);\n this.query.set(single ? single.label : '');\n }\n }\n\n registerOnChange(fn: (value: ComboboxValue) => 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 if (isDisabled) this.isOpen.set(false);\n }\n\n /**\n * Clear the current selection and query. Emits `null` (single) or `[]`\n * (multiple) exactly once, like a user-initiated deselect.\n */\n clear(): void {\n this.query.set('');\n this.highlightedIndex.set(-1);\n this.isOpen.set(false);\n const value: ComboboxValue = this.multiple() ? [] : null;\n if (this.multiple()) {\n this.selectedMultiple.set([]);\n } else {\n this.selectedSingle.set(null);\n }\n this.onChange(value);\n this.valueChange.emit(value);\n this.emitSelectedValue(null);\n }\n\n protected onClearClick(): void {\n if (this.isDisabled()) return;\n this.clear();\n this.inputEl()?.nativeElement.focus();\n }\n\n /** Whether a pointer event on the frame hit the input or a button in it (chip ×, clear). */\n private hitsFrameControl(event: MouseEvent): boolean {\n const target = event.target as Element | null;\n if (!target || target === this.inputEl()?.nativeElement) return true;\n const button = target.closest('button');\n return !!button && (event.currentTarget as Element).contains(button);\n }\n\n /**\n * 3.30 (request 047, regeln row 6): a press on the frame beside the input\n * and its buttons keeps focus where it is (no blur, so the list stays open).\n */\n protected onFrameMousedown(event: MouseEvent): void {\n if (!this.hitsFrameControl(event)) event.preventDefault();\n }\n\n /**\n * A click on the frame beside the input and its buttons focuses the input.\n * With `openOnFocus` off (3.32, request 051), a click or tap on the input or\n * the frame also opens the list, which focus alone no longer does.\n */\n protected onFrameClick(event: MouseEvent): void {\n if (this.isDisabled()) return;\n const onInput = event.target === this.inputEl()?.nativeElement;\n if (!onInput) {\n if (this.hitsFrameControl(event)) return;\n this.inputEl()?.nativeElement.focus();\n }\n if (!this.openOnFocus()) this.openIfAny();\n }\n\n protected onInputChange(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.query.set(value);\n this.queryChange.emit(value);\n this.highlightedIndex.set(-1);\n\n if (this.loadOptions()) {\n this.querySubject.next(value);\n }\n\n if (value.length >= this.minChars()) {\n this.isOpen.set(true);\n }\n }\n\n protected onInputFocus(): void {\n if (this.openOnFocus()) this.openIfAny();\n }\n\n /** Opens the list when there is something to show: a long enough query, or options. */\n private openIfAny(): void {\n if (this.query().length >= this.minChars() || this.options().length > 0) {\n this.isOpen.set(true);\n }\n }\n\n protected onInputBlur(): void {\n this.onTouched();\n // Delay to allow click on dropdown\n setTimeout(() => this.isOpen.set(false), 200);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n const flat = this.flatOptions();\n const total = flat.length + (this.showCreateOption() ? 1 : 0);\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen.set(true);\n if (total > 0) this.highlightedIndex.update((i) => (i + 1) % total);\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (total > 0) this.highlightedIndex.update((i) => (i - 1 + total) % total);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex() >= 0) {\n if (this.highlightedIndex() === flat.length && this.showCreateOption()) {\n this.onCreateNew();\n } else {\n const opt = flat[this.highlightedIndex()];\n if (opt && !opt.disabled) {\n this.selectOption(opt);\n }\n }\n } else if (this.showCreateOption()) {\n this.onCreateNew();\n }\n break;\n case 'Escape':\n if (this.isOpen()) {\n this.isOpen.set(false);\n this.highlightedIndex.set(-1);\n // Escape consumed by the list — an enclosing modal must not close too.\n event.stopPropagation();\n }\n break;\n case 'Tab':\n if (this.highlightedIndex() >= 0 && this.isOpen()) {\n const opt = flat[this.highlightedIndex()];\n if (opt && !opt.disabled) {\n this.selectOption(opt);\n }\n }\n this.isOpen.set(false);\n break;\n case 'Backspace':\n if (this.multiple() && !this.query() && this.selectedMultiple().length > 0) {\n this.removeSelected(this.selectedMultiple()[this.selectedMultiple().length - 1]);\n }\n break;\n }\n }\n\n protected selectOption(option: ComboboxOption): void {\n if (this.multiple()) {\n this.selectedMultiple.update((sel) => [...sel, option]);\n this.query.set('');\n const value = this.selectedMultiple();\n this.onChange(value);\n this.valueChange.emit(value);\n } else {\n this.selectedSingle.set(option);\n this.query.set(option.label);\n this.onChange(option);\n this.valueChange.emit(option);\n this.emitSelectedValue(option.value);\n }\n this.optionSelected.emit(option);\n this.isOpen.set(false);\n this.highlightedIndex.set(-1);\n }\n\n protected removeSelected(option: ComboboxOption): void {\n if (this.isDisabled()) return;\n this.selectedMultiple.update((sel) =>\n sel.filter((s) => s.value !== option.value)\n );\n const value = this.selectedMultiple();\n this.onChange(value);\n this.valueChange.emit(value);\n this.inputEl()?.nativeElement.focus();\n }\n\n protected onCreateNew(): void {\n const q = this.query().trim();\n if (!q) return;\n const newOption: ComboboxOption = { value: q, label: q };\n this.created.emit(q);\n this.selectOption(newOption);\n }\n\n @HostListener('document:click', ['$event'])\n protected onDocumentClick(event: MouseEvent): void {\n const target = event.target as Node | null;\n // The dropdown lives in the CDK overlay container, outside the host element.\n if (\n !this.elRef.nativeElement.contains(target) &&\n !this.dropdownEl()?.nativeElement.contains(target)\n ) {\n this.isOpen.set(false);\n }\n }\n}\n","<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- pointer shortcut; the input is the keyboard target -->\n <div\n #inputWrapper\n class=\"lc-combobox__input-wrapper\"\n (mousedown)=\"onFrameMousedown($event)\"\n (click)=\"onFrameClick($event)\"\n >\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!isDisabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [id]=\"inputId\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"isDisabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n [disabled]=\"isDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearClick()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n ancestors cannot clip it. Focus stays in the input (mousedown is\n prevented on the panel), keyboard nav uses aria-activedescendant. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (detach)=\"isOpen.set(false)\"\n >\n <div\n #dropdownEl\n class=\"lc-combobox__dropdown\"\n [style.--_lc-combobox-field-width.px]=\"fieldWidth()\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n [attr.lang]=\"panelLang()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value) {\n @let idx = flatOptions().indexOf(option);\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [id]=\"optionId(idx)\"\n [attr.aria-selected]=\"idx === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(idx)\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" [decorative]=\"true\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n role=\"option\"\n [id]=\"createOptionId\"\n [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </ng-template>\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n }\n</div>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lifecorner-angular-ui-kit-combobox.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/combobox/combobox.component.ts","../../../../libs/angular-ui-kit/src/lib/combobox/combobox.component.html"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n signal,\n computed,\n afterRenderEffect,\n effect,\n forwardRef,\n ElementRef,\n viewChild,\n HostListener,\n inject,\n isDevMode,\n model,\n untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayModule, type ConnectedPosition } from '@angular/cdk/overlay';\nimport { Observable, Subject, catchError, debounce, defer, of, switchMap, timer } from 'rxjs';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_PLUS, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { SpinnerComponent } from '@lifecorner/angular-ui-kit/spinner';\nimport { ChipComponent } from '@lifecorner/angular-ui-kit/chip';\nimport { openPanelLang } from '@lifecorner/angular-ui-kit/internal/a11y';\n\nexport interface ComboboxOption {\n value: string;\n label: string;\n description?: string;\n icon?: string;\n group?: string;\n disabled?: boolean;\n}\n\nexport type ComboboxValue = ComboboxOption | ComboboxOption[] | null;\n\nexport type ComboboxSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Combobox / async autocomplete component.\n *\n * Supports free-text input with sync/async option suggestions,\n * single/multiple selection, create new entries, and keyboard navigation.\n * The suggestion list is rendered in a CDK overlay so it is never clipped\n * by `overflow: hidden` ancestors (cards, modals, table cells). The dropdown\n * takes the `lang` of the host's closest `[lang]` (3.30.2).\n *\n * The selection is two-way bindable by an option's `value` string\n * (`[(selectedValue)]`, single mode), next to the `valueChange` output with\n * the option object and the forms binding.\n *\n * `focus()` (3.35) moves the focus into the field's `<input>` when a form\n * opens or after a rejected save (WCAG 2.4.3); it opens the list as a user's\n * focus does (`openOnFocus`).\n *\n * @example\n * ```html\n * <lc-combobox\n * label=\"Assign to user\"\n * [loadOptions]=\"searchUsers\"\n * [(selectedValue)]=\"assigneeId\"\n * allowCreate\n * />\n * ```\n */\n@Component({\n selector: 'lc-combobox',\n standalone: true,\n imports: [OverlayModule, IconComponent, SpinnerComponent, ChipComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_PLUS])],\n templateUrl: './combobox.component.html',\n styleUrls: ['./combobox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ComboboxComponent),\n multi: true,\n },\n ],\n})\nexport class ComboboxComponent implements ControlValueAccessor {\n private static nextId = 0;\n\n /** Per-instance ids so label/listbox/options can be linked via ARIA */\n readonly inputId = `lc-combobox-${++ComboboxComponent.nextId}`;\n readonly listboxId = `${this.inputId}-listbox`;\n protected readonly createOptionId = `${this.listboxId}-create`;\n\n private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n private readonly dropdownEl = viewChild<ElementRef<HTMLElement>>('dropdownEl');\n private readonly inputWrapper = viewChild<ElementRef<HTMLElement>>('inputWrapper');\n\n private readonly elRef = inject(ElementRef);\n private readonly querySubject = new Subject<string>();\n\n /** Sync options */\n readonly options = input<ComboboxOption[]>([]);\n\n /** Async option loader */\n readonly loadOptions = input<((query: string) => Observable<ComboboxOption[]>)>();\n\n /** Debounce for async queries */\n readonly debounceMs = input<number>(250);\n\n /** Minimum characters before triggering search */\n readonly minChars = input<number>(1);\n\n /** Placeholder text */\n readonly placeholder = input<string>('Search…');\n\n /** Label */\n readonly label = input<string>();\n\n /** Helper text */\n readonly helperText = input<string>();\n\n /** Error message */\n readonly error = input<string>();\n\n /** Disabled state */\n readonly disabled = input<boolean>(false);\n\n /** Allow multiple selections */\n readonly multiple = input<boolean>(false);\n\n /** Allow creating new entries */\n readonly allowCreate = input<boolean>(false);\n\n /** Show loading spinner (controlled) */\n readonly loading = input<boolean>(false);\n\n /** Empty state message */\n readonly emptyMessage = input<string>('No results');\n\n /** Accessible name of the clear button. */\n readonly clearAriaLabel = input('Clear');\n\n /** Label before the query in the \"create\" option (`allowCreate`): `Create \"query\"`. */\n readonly createOptionLabel = input('Create');\n\n /** Size */\n readonly size = input<ComboboxSize>('md');\n\n /**\n * Whether the list opens when the field gets focus (3.32, request 051).\n * With `false`, focus alone (`focus()` from the page, Tab) leaves the list\n * closed and `aria-expanded=\"false\"`; a click or tap on the field, typing or\n * ArrowDown opens it. Use it in forms that move focus into the field\n * themselves, on open or to the first invalid field after a rejected save.\n * Escape and choosing an option work as before.\n * @default true\n */\n readonly openOnFocus = input<boolean>(true);\n\n /**\n * The `value` of the selected option, two-way (3.29, regeln row 2):\n * `[(selectedValue)]=\"month\"`. Shows the matching option's label (from\n * `options`, or the current selection); an unknown value shows an empty\n * field and is filled in when `options` with it arrive. Page writes\n * (including back to `null`) select or clear silently: no\n * `selectedValueChange`, no `valueChange`, no forms `onChange`. Every user\n * choice or clear emits `selectedValueChange`, next to the unchanged\n * `valueChange` (the option object). Single mode only: ignored with\n * `multiple` (a dev warning). Use it or a forms binding, not both.\n * @default null\n */\n readonly selectedValue = model<string | null>(null);\n\n /** Value change event */\n readonly valueChange = output<ComboboxValue>();\n\n /** Query change event */\n readonly queryChange = output<string>();\n\n /** Option selected event */\n readonly optionSelected = output<ComboboxOption>();\n\n /** Created event (allowCreate) */\n readonly created = output<string>();\n\n /** Internal state */\n protected query = signal('');\n protected isOpen = signal(false);\n protected highlightedIndex = signal(-1);\n protected asyncOptions = signal<ComboboxOption[]>([]);\n protected isLoading = signal(false);\n\n /** Disabled via `setDisabledState` (reactive forms) */\n private readonly formDisabled = signal(false);\n\n /** Effective disabled state: `disabled` input OR form control disabled */\n protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n /**\n * `lang` of the open dropdown (3.30.2, WCAG 3.1.2): the overlay renders under\n * `<body>`, so it takes the host's closest `[lang]`, else none. Read at every\n * opening and, since 3.33, again when a `lang` changes while the list is\n * open; `null` while closed, so the server never reads the DOM.\n */\n protected readonly panelLang = openPanelLang(this.isOpen);\n\n /**\n * The field's width in px while the list is open (3.33, request 052,\n * 049-n2), read at every opening: the list's floor (`min-width`), so it is\n * at least as wide as the field and wider content still grows it. `null`\n * while closed.\n */\n protected readonly fieldWidth = computed(() =>\n this.isOpen() ? (this.inputWrapper()?.nativeElement.getBoundingClientRect().width ?? null) : null,\n );\n\n /**\n * Below the field, else above it, start- then end-aligned (the CDK's\n * defaults), 4 px from the field on either side (3.33, 047-n1: the gap was\n * a margin inside the pane, so it was 0 above). The list is never pushed,\n * so the offset can't move it off the field.\n */\n protected readonly positions: ConnectedPosition[] = [\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },\n ];\n\n /** Selected values */\n protected selectedSingle = signal<ComboboxOption | null>(null);\n protected selectedMultiple = signal<ComboboxOption[]>([]);\n\n /** The last `selectedValue` the component applied or emitted: a different one is a page write. */\n private seenSelectedValue: string | null = null;\n\n /** A page-written `selectedValue` no option matched yet: selected silently once `options` hold it. */\n private pendingSelectedValue: string | null = null;\n\n /** Resolved visible options */\n protected visibleOptions = computed(() => {\n const q = this.query().toLowerCase();\n const loader = this.loadOptions();\n\n let opts: ComboboxOption[];\n if (loader) {\n opts = this.asyncOptions();\n } else {\n opts = this.options();\n if (q.length >= this.minChars()) {\n opts = opts.filter(\n (o) =>\n o.label.toLowerCase().includes(q) ||\n o.value.toLowerCase().includes(q) ||\n (o.description && o.description.toLowerCase().includes(q))\n );\n }\n }\n\n // Remove already selected in multiple mode\n if (this.multiple()) {\n const selected = new Set(this.selectedMultiple().map((s) => s.value));\n opts = opts.filter((o) => !selected.has(o.value));\n }\n\n return opts;\n });\n\n /** Grouped options */\n protected groupedOptions = computed(() => {\n const opts = this.visibleOptions();\n const groups = new Map<string, ComboboxOption[]>();\n\n for (const opt of opts) {\n const group = opt.group || '';\n if (!groups.has(group)) groups.set(group, []);\n groups.get(group)!.push(opt);\n }\n\n return Array.from(groups.entries()).map(([label, items]) => ({\n label,\n items,\n }));\n });\n\n /** Flat list for keyboard nav */\n protected flatOptions = computed(() => {\n return this.groupedOptions().flatMap((g) => g.items);\n });\n\n /** Whether to show \"Create\" option */\n protected showCreateOption = computed(() => {\n if (!this.allowCreate()) return false;\n const q = this.query().trim();\n if (!q) return false;\n const exact = this.visibleOptions().some(\n (o) => o.label.toLowerCase() === q.toLowerCase()\n );\n return !exact;\n });\n\n /** id of the highlighted option — announced via aria-activedescendant */\n protected readonly activeDescendantId = computed(() => {\n if (!this.isOpen()) return null;\n const i = this.highlightedIndex();\n if (i < 0) return null;\n if (i === this.flatOptions().length) {\n return this.showCreateOption() ? this.createOptionId : null;\n }\n return i < this.flatOptions().length ? this.optionId(i) : null;\n });\n\n /** ids referenced by aria-describedby (helper / error) */\n protected readonly describedBy = computed(() => {\n if (this.error()) return `${this.inputId}-error`;\n if (this.helperText()) return `${this.inputId}-helper`;\n return null;\n });\n\n /** Container classes */\n protected containerClasses = computed(() => {\n const classes = [`lc-combobox`, `lc-combobox--${this.size()}`];\n if (this.isDisabled()) classes.push('lc-combobox--disabled');\n if (this.error()) classes.push('lc-combobox--error');\n if (this.isOpen()) classes.push('lc-combobox--open');\n return classes.join(' ');\n });\n\n protected optionId(index: number): string {\n return `${this.listboxId}-opt-${index}`;\n }\n\n // ControlValueAccessor\n private onChange: (value: ComboboxValue) => void = () => { /* set by registerOnChange */ };\n private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n constructor() {\n // Async loading pipe. `debounce` (not `debounceTime`) reads the signal per\n // emission, so `debounceMs` is honoured after inputs are populated.\n this.querySubject\n .pipe(\n debounce(() => timer(this.debounceMs())),\n switchMap((q) => {\n const loader = this.loadOptions();\n if (!loader || q.length < this.minChars()) {\n return of([] as ComboboxOption[]);\n }\n this.isLoading.set(true);\n // `defer` turns a synchronously throwing loader into an error\n // notification; `catchError` keeps the pipe alive for the next query.\n return defer(() => loader(q)).pipe(catchError(() => of([] as ComboboxOption[])));\n }),\n takeUntilDestroyed()\n )\n .subscribe((results) => {\n this.asyncOptions.set(results);\n this.isLoading.set(false);\n });\n\n // Keep the highlighted option visible while navigating with the keyboard\n // (after render, so the option element exists in the overlay pane).\n afterRenderEffect(() => {\n const id = this.activeDescendantId();\n if (!id) return;\n untracked(() => {\n // ids are generated from a counter, so no CSS escaping is needed\n this.dropdownEl()\n ?.nativeElement.querySelector<HTMLElement>(`#${id}`)\n ?.scrollIntoView?.({ block: 'nearest' });\n });\n });\n\n // `selectedValue` (3.29): a page write selects or clears silently; an\n // unknown value waits for `options` that hold it. The component's own\n // writes (user choice, clear) are already applied, so they are skipped.\n effect(() => {\n const value = this.selectedValue();\n const options = this.options();\n untracked(() => {\n if (value !== this.seenSelectedValue) {\n this.seenSelectedValue = value;\n if (!this.multiple()) {\n this.applySelectedValue(value, options);\n } else if (value !== null && isDevMode()) {\n console.warn('[lc-combobox] selectedValue is ignored with multiple');\n }\n } else if (this.pendingSelectedValue !== null && !this.multiple()) {\n this.applySelectedValue(this.pendingSelectedValue, options);\n }\n });\n });\n }\n\n /** Shows the option with `value` (or clears for `null`) without emitting anything. */\n private applySelectedValue(value: string | null, options: ComboboxOption[]): void {\n this.pendingSelectedValue = null;\n if (value === null) {\n this.selectedSingle.set(null);\n this.query.set('');\n return;\n }\n if (this.selectedSingle()?.value === value) return;\n const match = options.find((o) => o.value === value) ?? null;\n if (!match) this.pendingSelectedValue = value;\n this.selectedSingle.set(match);\n this.query.set(match ? match.label : '');\n }\n\n /** Emits a user's single choice or clear through `selectedValueChange` (not in `multiple` mode). */\n private emitSelectedValue(value: string | null): void {\n if (this.multiple()) return;\n this.pendingSelectedValue = null;\n this.seenSelectedValue = value;\n this.selectedValue.set(value);\n }\n\n writeValue(value: ComboboxValue): void {\n if (this.multiple()) {\n this.selectedMultiple.set(Array.isArray(value) ? value : []);\n } else {\n const single = value && !Array.isArray(value) ? value : null;\n this.pendingSelectedValue = null;\n this.selectedSingle.set(single);\n this.query.set(single ? single.label : '');\n }\n }\n\n registerOnChange(fn: (value: ComboboxValue) => 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 if (isDisabled) this.isOpen.set(false);\n }\n\n /**\n * Moves the focus into the field's `<input>` (3.35), e.g. when a form opens\n * with this field first, or to the field with the error after a rejected\n * save (422) (WCAG 2.4.3). `options` as for `HTMLElement.focus()`\n * (`{ preventScroll: true }`). Shows the same focus ring as a user's focus.\n * Like a user's focus it opens the list when `openOnFocus` is `true` and\n * there is something to show; with `false` the list stays closed\n * (`aria-expanded=\"false\"`). A disabled field takes no focus (it stays where\n * it is). Call it once the field has rendered, e.g.\n * `afterNextRender(() => this.month().focus(), { injector })` with\n * `month = viewChild.required(ComboboxComponent)` and the page component's\n * `injector = inject(Injector)`. In an `lc-modal` that opens with the field,\n * that call runs after the dialog moved the focus to its first control.\n * Does nothing before the component has rendered.\n * @param options Passed to the native `focus()`.\n */\n focus(options?: FocusOptions): void {\n this.inputEl()?.nativeElement.focus(options);\n }\n\n /**\n * Clear the current selection and query. Emits `null` (single) or `[]`\n * (multiple) exactly once, like a user-initiated deselect.\n */\n clear(): void {\n this.query.set('');\n this.highlightedIndex.set(-1);\n this.isOpen.set(false);\n const value: ComboboxValue = this.multiple() ? [] : null;\n if (this.multiple()) {\n this.selectedMultiple.set([]);\n } else {\n this.selectedSingle.set(null);\n }\n this.onChange(value);\n this.valueChange.emit(value);\n this.emitSelectedValue(null);\n }\n\n protected onClearClick(): void {\n if (this.isDisabled()) return;\n this.clear();\n this.inputEl()?.nativeElement.focus();\n }\n\n /** Whether a pointer event on the frame hit the input or a button in it (chip ×, clear). */\n private hitsFrameControl(event: MouseEvent): boolean {\n const target = event.target as Element | null;\n if (!target || target === this.inputEl()?.nativeElement) return true;\n const button = target.closest('button');\n return !!button && (event.currentTarget as Element).contains(button);\n }\n\n /**\n * 3.30 (request 047, regeln row 6): a press on the frame beside the input\n * and its buttons keeps focus where it is (no blur, so the list stays open).\n */\n protected onFrameMousedown(event: MouseEvent): void {\n if (!this.hitsFrameControl(event)) event.preventDefault();\n }\n\n /**\n * A click on the frame beside the input and its buttons focuses the input.\n * With `openOnFocus` off (3.32, request 051), a click or tap on the input or\n * the frame also opens the list, which focus alone no longer does.\n */\n protected onFrameClick(event: MouseEvent): void {\n if (this.isDisabled()) return;\n const onInput = event.target === this.inputEl()?.nativeElement;\n if (!onInput) {\n if (this.hitsFrameControl(event)) return;\n this.inputEl()?.nativeElement.focus();\n }\n if (!this.openOnFocus()) this.openIfAny();\n }\n\n protected onInputChange(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.query.set(value);\n this.queryChange.emit(value);\n this.highlightedIndex.set(-1);\n\n if (this.loadOptions()) {\n this.querySubject.next(value);\n }\n\n if (value.length >= this.minChars()) {\n this.isOpen.set(true);\n }\n }\n\n protected onInputFocus(): void {\n if (this.openOnFocus()) this.openIfAny();\n }\n\n /** Opens the list when there is something to show: a long enough query, or options. */\n private openIfAny(): void {\n if (this.query().length >= this.minChars() || this.options().length > 0) {\n this.isOpen.set(true);\n }\n }\n\n protected onInputBlur(): void {\n this.onTouched();\n // Delay to allow click on dropdown\n setTimeout(() => this.isOpen.set(false), 200);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n const flat = this.flatOptions();\n const total = flat.length + (this.showCreateOption() ? 1 : 0);\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen.set(true);\n if (total > 0) this.highlightedIndex.update((i) => (i + 1) % total);\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (total > 0) this.highlightedIndex.update((i) => (i - 1 + total) % total);\n break;\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex() >= 0) {\n if (this.highlightedIndex() === flat.length && this.showCreateOption()) {\n this.onCreateNew();\n } else {\n const opt = flat[this.highlightedIndex()];\n if (opt && !opt.disabled) {\n this.selectOption(opt);\n }\n }\n } else if (this.showCreateOption()) {\n this.onCreateNew();\n }\n break;\n case 'Escape':\n if (this.isOpen()) {\n this.isOpen.set(false);\n this.highlightedIndex.set(-1);\n // Escape consumed by the list — an enclosing modal must not close too.\n event.stopPropagation();\n }\n break;\n case 'Tab':\n if (this.highlightedIndex() >= 0 && this.isOpen()) {\n const opt = flat[this.highlightedIndex()];\n if (opt && !opt.disabled) {\n this.selectOption(opt);\n }\n }\n this.isOpen.set(false);\n break;\n case 'Backspace':\n if (this.multiple() && !this.query() && this.selectedMultiple().length > 0) {\n this.removeSelected(this.selectedMultiple()[this.selectedMultiple().length - 1]);\n }\n break;\n }\n }\n\n protected selectOption(option: ComboboxOption): void {\n if (this.multiple()) {\n this.selectedMultiple.update((sel) => [...sel, option]);\n this.query.set('');\n const value = this.selectedMultiple();\n this.onChange(value);\n this.valueChange.emit(value);\n } else {\n this.selectedSingle.set(option);\n this.query.set(option.label);\n this.onChange(option);\n this.valueChange.emit(option);\n this.emitSelectedValue(option.value);\n }\n this.optionSelected.emit(option);\n this.isOpen.set(false);\n this.highlightedIndex.set(-1);\n }\n\n protected removeSelected(option: ComboboxOption): void {\n if (this.isDisabled()) return;\n this.selectedMultiple.update((sel) =>\n sel.filter((s) => s.value !== option.value)\n );\n const value = this.selectedMultiple();\n this.onChange(value);\n this.valueChange.emit(value);\n this.inputEl()?.nativeElement.focus();\n }\n\n protected onCreateNew(): void {\n const q = this.query().trim();\n if (!q) return;\n const newOption: ComboboxOption = { value: q, label: q };\n this.created.emit(q);\n this.selectOption(newOption);\n }\n\n @HostListener('document:click', ['$event'])\n protected onDocumentClick(event: MouseEvent): void {\n const target = event.target as Node | null;\n // The dropdown lives in the CDK overlay container, outside the host element.\n if (\n !this.elRef.nativeElement.contains(target) &&\n !this.dropdownEl()?.nativeElement.contains(target)\n ) {\n this.isOpen.set(false);\n }\n }\n}\n","<div [class]=\"containerClasses()\">\n @if (label()) {\n <label class=\"lc-combobox__label\" [for]=\"inputId\">{{ label() }}</label>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- pointer shortcut; the input is the keyboard target -->\n <div\n #inputWrapper\n class=\"lc-combobox__input-wrapper\"\n (mousedown)=\"onFrameMousedown($event)\"\n (click)=\"onFrameClick($event)\"\n >\n <!-- Selected chips (multiple mode) -->\n @if (multiple()) {\n @for (sel of selectedMultiple(); track sel.value) {\n <lc-chip\n [removable]=\"!isDisabled()\"\n size=\"sm\"\n (remove)=\"removeSelected(sel)\"\n >{{ sel.label }}</lc-chip>\n }\n }\n\n <input\n #inputEl\n type=\"text\"\n class=\"lc-combobox__input\"\n [id]=\"inputId\"\n [placeholder]=\"multiple() && selectedMultiple().length > 0 ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"isDisabled()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n [attr.aria-invalid]=\"error() ? true : null\"\n [attr.aria-describedby]=\"describedBy()\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeydown($event)\"\n />\n\n @if (isLoading() || loading()) {\n <lc-spinner size=\"sm\" class=\"lc-combobox__spinner\" />\n } @else if (!multiple() && selectedSingle()) {\n <button\n type=\"button\"\n class=\"lc-combobox__clear\"\n [disabled]=\"isDisabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearClick()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n >\n <lc-icon name=\"x-mark\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n\n <!-- Dropdown: rendered in the CDK overlay container so overflow-hidden\n ancestors cannot clip it. Focus stays in the input (mousedown is\n prevented on the panel), keyboard nav uses aria-activedescendant. -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"inputWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (detach)=\"isOpen.set(false)\"\n >\n <div\n #dropdownEl\n class=\"lc-combobox__dropdown\"\n [style.--_lc-combobox-field-width.px]=\"fieldWidth()\"\n role=\"listbox\"\n [id]=\"listboxId\"\n [attr.aria-multiselectable]=\"multiple() ? true : null\"\n [attr.lang]=\"panelLang()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (group of groupedOptions(); track group.label) {\n @if (group.label) {\n <div class=\"lc-combobox__group-header\" role=\"presentation\">{{ group.label }}</div>\n }\n @for (option of group.items; track option.value) {\n @let idx = flatOptions().indexOf(option);\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option\"\n [class.lc-combobox__option--highlighted]=\"idx === highlightedIndex()\"\n [class.lc-combobox__option--disabled]=\"option.disabled\"\n role=\"option\"\n [id]=\"optionId(idx)\"\n [attr.aria-selected]=\"idx === highlightedIndex()\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"!option.disabled && selectOption(option)\"\n (mouseenter)=\"highlightedIndex.set(idx)\"\n >\n @if (option.icon) {\n <lc-icon [name]=\"option.icon\" size=\"sm\" class=\"lc-combobox__option-icon\" [decorative]=\"true\" />\n }\n <div class=\"lc-combobox__option-content\">\n <span class=\"lc-combobox__option-label\">{{ option.label }}</span>\n @if (option.description) {\n <span class=\"lc-combobox__option-desc\">{{ option.description }}</span>\n }\n </div>\n </div>\n }\n }\n\n @if (showCreateOption()) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays in the input, keyboard selection via aria-activedescendant -->\n <div\n class=\"lc-combobox__option lc-combobox__option--create\"\n [class.lc-combobox__option--highlighted]=\"highlightedIndex() === flatOptions().length\"\n role=\"option\"\n [id]=\"createOptionId\"\n [attr.aria-selected]=\"highlightedIndex() === flatOptions().length\"\n (click)=\"onCreateNew()\"\n (mouseenter)=\"highlightedIndex.set(flatOptions().length)\"\n >\n <lc-icon name=\"plus\" size=\"sm\" [decorative]=\"true\" />\n <span>{{ createOptionLabel() }} \"{{ query() }}\"</span>\n </div>\n }\n\n @if (visibleOptions().length === 0 && !showCreateOption() && !isLoading() && !loading()) {\n <div class=\"lc-combobox__empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </ng-template>\n\n @if (helperText() && !error()) {\n <span class=\"lc-combobox__helper\" [id]=\"inputId + '-helper'\">{{ helperText() }}</span>\n }\n @if (error()) {\n <span class=\"lc-combobox__error\" [id]=\"inputId + '-error'\" role=\"alert\">{{ error() }}</span>\n }\n</div>\n"],"mappings":"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"}
|