voyage-lib 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +64 -64
  2. package/fesm2022/voyage-lib.mjs +463 -454
  3. package/fesm2022/voyage-lib.mjs.map +1 -1
  4. package/package.json +3 -2
package/fesm2022/voyage-lib.mjs CHANGED
@@ -57,11 +57,11 @@ class SnackbarComponent {
57
57
  this.svc.dismiss(item.id);
58
58
  }
59
59
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
60
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarComponent, isStandalone: true, selector: "vl-snackbar", ngImport: i0, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n @for (item of svc.items(); track item.id) {\n <div\n class=\"vl-snackbar-item\"\n [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n [class.vl-snackbar-exiting]=\"item.exiting\"\n role=\"alert\">\n\n <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n @switch (item.type) {\n @case ('success') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @default {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <div class=\"vl-snackbar-body\">\n @if (item.title) {\n <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n }\n <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n @if (item.action) {\n <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n {{ item.action.label }}\n </button>\n }\n </div>\n\n @if (item.dismissible) {\n <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n </svg>\n </button>\n }\n\n @if (item.duration > 0) {\n <span\n class=\"vl-snackbar-progress\"\n [style.animation-duration.ms]=\"item.duration\"\n aria-hidden=\"true\">\n </span>\n }\n </div>\n }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None });
60
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarComponent, isStandalone: true, selector: "vl-snackbar", ngImport: i0, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\r\n @for (item of svc.items(); track item.id) {\r\n <div\r\n class=\"vl-snackbar-item\"\r\n [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\r\n [class.vl-snackbar-exiting]=\"item.exiting\"\r\n role=\"alert\">\r\n\r\n <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\r\n\r\n <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\r\n @switch (item.type) {\r\n @case ('success') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @case ('error') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @case ('warning') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @default {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n }\r\n </span>\r\n\r\n <div class=\"vl-snackbar-body\">\r\n @if (item.title) {\r\n <p class=\"vl-snackbar-title\">{{ item.title }}</p>\r\n }\r\n <p class=\"vl-snackbar-message\">{{ item.message }}</p>\r\n @if (item.action) {\r\n <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\r\n {{ item.action.label }}\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (item.dismissible) {\r\n <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\r\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\r\n <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (item.duration > 0) {\r\n <span\r\n class=\"vl-snackbar-progress\"\r\n [style.animation-duration.ms]=\"item.duration\"\r\n aria-hidden=\"true\">\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None });
61
61
  }
62
62
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, decorators: [{
63
63
  type: Component,
64
- args: [{ selector: 'vl-snackbar', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n @for (item of svc.items(); track item.id) {\n <div\n class=\"vl-snackbar-item\"\n [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n [class.vl-snackbar-exiting]=\"item.exiting\"\n role=\"alert\">\n\n <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n @switch (item.type) {\n @case ('success') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('error') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @case ('warning') {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n </svg>\n }\n @default {\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n </svg>\n }\n }\n </span>\n\n <div class=\"vl-snackbar-body\">\n @if (item.title) {\n <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n }\n <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n @if (item.action) {\n <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n {{ item.action.label }}\n </button>\n }\n </div>\n\n @if (item.dismissible) {\n <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n </svg>\n </button>\n }\n\n @if (item.duration > 0) {\n <span\n class=\"vl-snackbar-progress\"\n [style.animation-duration.ms]=\"item.duration\"\n aria-hidden=\"true\">\n </span>\n }\n </div>\n }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"] }]
64
+ args: [{ selector: 'vl-snackbar', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\r\n @for (item of svc.items(); track item.id) {\r\n <div\r\n class=\"vl-snackbar-item\"\r\n [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\r\n [class.vl-snackbar-exiting]=\"item.exiting\"\r\n role=\"alert\">\r\n\r\n <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\r\n\r\n <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\r\n @switch (item.type) {\r\n @case ('success') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @case ('error') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @case ('warning') {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n @default {\r\n <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n }\r\n }\r\n </span>\r\n\r\n <div class=\"vl-snackbar-body\">\r\n @if (item.title) {\r\n <p class=\"vl-snackbar-title\">{{ item.title }}</p>\r\n }\r\n <p class=\"vl-snackbar-message\">{{ item.message }}</p>\r\n @if (item.action) {\r\n <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\r\n {{ item.action.label }}\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (item.dismissible) {\r\n <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\r\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\r\n <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\r\n </svg>\r\n </button>\r\n }\r\n\r\n @if (item.duration > 0) {\r\n <span\r\n class=\"vl-snackbar-progress\"\r\n [style.animation-duration.ms]=\"item.duration\"\r\n aria-hidden=\"true\">\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"] }]
65
65
  }] });
66
66
 
67
67
  /**
@@ -85,26 +85,26 @@ class AvatarComponent {
85
85
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
86
86
  }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
87
87
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
88
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "vl-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
89
- <div class="vl-avatar" [class]="'vl-avatar-' + size()">
90
- @if (src() && !imgError) {
91
- <img [src]="src()" [alt]="name()" (error)="imgError = true" />
92
- } @else {
93
- <span class="vl-avatar-initials">{{ initials() }}</span>
94
- }
95
- </div>
88
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "vl-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
89
+ <div class="vl-avatar" [class]="'vl-avatar-' + size()">
90
+ @if (src() && !imgError) {
91
+ <img [src]="src()" [alt]="name()" (error)="imgError = true" />
92
+ } @else {
93
+ <span class="vl-avatar-initials">{{ initials() }}</span>
94
+ }
95
+ </div>
96
96
  `, isInline: true, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"], encapsulation: i0.ViewEncapsulation.None });
97
97
  }
98
98
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
99
99
  type: Component,
100
- args: [{ selector: 'vl-avatar', standalone: true, template: `
101
- <div class="vl-avatar" [class]="'vl-avatar-' + size()">
102
- @if (src() && !imgError) {
103
- <img [src]="src()" [alt]="name()" (error)="imgError = true" />
104
- } @else {
105
- <span class="vl-avatar-initials">{{ initials() }}</span>
106
- }
107
- </div>
100
+ args: [{ selector: 'vl-avatar', standalone: true, template: `
101
+ <div class="vl-avatar" [class]="'vl-avatar-' + size()">
102
+ @if (src() && !imgError) {
103
+ <img [src]="src()" [alt]="name()" (error)="imgError = true" />
104
+ } @else {
105
+ <span class="vl-avatar-initials">{{ initials() }}</span>
106
+ }
107
+ </div>
108
108
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"] }]
109
109
  }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
110
110
 
@@ -124,32 +124,32 @@ class BadgeComponent {
124
124
  /** Override background color. Takes precedence over variant. */
125
125
  bgColor = input('', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
126
126
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
127
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "vl-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
128
- <span class="vl-badge" [class]="'vl-badge-' + variant()"
129
- [style.color]="color() || null"
130
- [style.background-color]="bgColor() || null"
131
- [style.border-color]="color() ? color() + '33' : null">
132
- @if (dot()) {
133
- <span class="vl-badge-dot"
134
- [style.background-color]="color() || null"></span>
135
- }
136
- <ng-content />
137
- </span>
127
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "vl-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
128
+ <span class="vl-badge" [class]="'vl-badge-' + variant()"
129
+ [style.color]="color() || null"
130
+ [style.background-color]="bgColor() || null"
131
+ [style.border-color]="color() ? color() + '33' : null">
132
+ @if (dot()) {
133
+ <span class="vl-badge-dot"
134
+ [style.background-color]="color() || null"></span>
135
+ }
136
+ <ng-content />
137
+ </span>
138
138
  `, isInline: true, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"], encapsulation: i0.ViewEncapsulation.None });
139
139
  }
140
140
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
141
141
  type: Component,
142
- args: [{ selector: 'vl-badge', standalone: true, template: `
143
- <span class="vl-badge" [class]="'vl-badge-' + variant()"
144
- [style.color]="color() || null"
145
- [style.background-color]="bgColor() || null"
146
- [style.border-color]="color() ? color() + '33' : null">
147
- @if (dot()) {
148
- <span class="vl-badge-dot"
149
- [style.background-color]="color() || null"></span>
150
- }
151
- <ng-content />
152
- </span>
142
+ args: [{ selector: 'vl-badge', standalone: true, template: `
143
+ <span class="vl-badge" [class]="'vl-badge-' + variant()"
144
+ [style.color]="color() || null"
145
+ [style.background-color]="bgColor() || null"
146
+ [style.border-color]="color() ? color() + '33' : null">
147
+ @if (dot()) {
148
+ <span class="vl-badge-dot"
149
+ [style.background-color]="color() || null"></span>
150
+ }
151
+ <ng-content />
152
+ </span>
153
153
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"] }]
154
154
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }] } });
155
155
 
@@ -162,52 +162,52 @@ class ButtonComponent {
162
162
  return `vl-btn-${this.variant()}`;
163
163
  }
164
164
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
165
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "vl-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
166
- <button
167
- class="vl-btn"
168
- [class]="variantClass()"
169
- [class.vl-btn-sm]="size() === 'sm'"
170
- [class.vl-btn-md]="size() === 'md'"
171
- [class.vl-btn-lg]="size() === 'lg'"
172
- [class.vl-btn-loading]="loading()"
173
- [disabled]="disabled() || loading()">
174
-
175
- @if (loading()) {
176
- <span class="vl-btn-spinner" aria-hidden="true">
177
- <svg viewBox="0 0 24 24" fill="none">
178
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
179
- <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
180
- </svg>
181
- </span>
182
- }
183
-
184
- <ng-content />
185
- </button>
165
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "vl-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
166
+ <button
167
+ class="vl-btn"
168
+ [class]="variantClass()"
169
+ [class.vl-btn-sm]="size() === 'sm'"
170
+ [class.vl-btn-md]="size() === 'md'"
171
+ [class.vl-btn-lg]="size() === 'lg'"
172
+ [class.vl-btn-loading]="loading()"
173
+ [disabled]="disabled() || loading()">
174
+
175
+ @if (loading()) {
176
+ <span class="vl-btn-spinner" aria-hidden="true">
177
+ <svg viewBox="0 0 24 24" fill="none">
178
+ <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
179
+ <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
180
+ </svg>
181
+ </span>
182
+ }
183
+
184
+ <ng-content />
185
+ </button>
186
186
  `, isInline: true, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
187
187
  }
188
188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
189
189
  type: Component,
190
- args: [{ selector: 'vl-button', standalone: true, template: `
191
- <button
192
- class="vl-btn"
193
- [class]="variantClass()"
194
- [class.vl-btn-sm]="size() === 'sm'"
195
- [class.vl-btn-md]="size() === 'md'"
196
- [class.vl-btn-lg]="size() === 'lg'"
197
- [class.vl-btn-loading]="loading()"
198
- [disabled]="disabled() || loading()">
199
-
200
- @if (loading()) {
201
- <span class="vl-btn-spinner" aria-hidden="true">
202
- <svg viewBox="0 0 24 24" fill="none">
203
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
204
- <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
205
- </svg>
206
- </span>
207
- }
208
-
209
- <ng-content />
210
- </button>
190
+ args: [{ selector: 'vl-button', standalone: true, template: `
191
+ <button
192
+ class="vl-btn"
193
+ [class]="variantClass()"
194
+ [class.vl-btn-sm]="size() === 'sm'"
195
+ [class.vl-btn-md]="size() === 'md'"
196
+ [class.vl-btn-lg]="size() === 'lg'"
197
+ [class.vl-btn-loading]="loading()"
198
+ [disabled]="disabled() || loading()">
199
+
200
+ @if (loading()) {
201
+ <span class="vl-btn-spinner" aria-hidden="true">
202
+ <svg viewBox="0 0 24 24" fill="none">
203
+ <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
204
+ <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
205
+ </svg>
206
+ </span>
207
+ }
208
+
209
+ <ng-content />
210
+ </button>
211
211
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"] }]
212
212
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
213
213
 
@@ -224,42 +224,42 @@ class CardComponent {
224
224
  hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
225
225
  sectionTitle = input('', ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
226
226
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
227
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
228
- <div class="vl-card"
229
- [class.vl-card-hover]="hover()"
230
- [class.vl-card-p-none]="padding() === 'none'"
231
- [class.vl-card-p-sm]="padding() === 'sm'"
232
- [class.vl-card-p-md]="padding() === 'md'"
233
- [class.vl-card-p-lg]="padding() === 'lg'">
234
-
235
- @if (sectionTitle()) {
236
- <div class="vl-card-section-header">
237
- <span>{{ sectionTitle() }}</span>
238
- </div>
239
- }
240
-
241
- <ng-content />
242
- </div>
227
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
228
+ <div class="vl-card"
229
+ [class.vl-card-hover]="hover()"
230
+ [class.vl-card-p-none]="padding() === 'none'"
231
+ [class.vl-card-p-sm]="padding() === 'sm'"
232
+ [class.vl-card-p-md]="padding() === 'md'"
233
+ [class.vl-card-p-lg]="padding() === 'lg'">
234
+
235
+ @if (sectionTitle()) {
236
+ <div class="vl-card-section-header">
237
+ <span>{{ sectionTitle() }}</span>
238
+ </div>
239
+ }
240
+
241
+ <ng-content />
242
+ </div>
243
243
  `, isInline: true, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
244
244
  }
245
245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
246
246
  type: Component,
247
- args: [{ selector: 'vl-card', standalone: true, template: `
248
- <div class="vl-card"
249
- [class.vl-card-hover]="hover()"
250
- [class.vl-card-p-none]="padding() === 'none'"
251
- [class.vl-card-p-sm]="padding() === 'sm'"
252
- [class.vl-card-p-md]="padding() === 'md'"
253
- [class.vl-card-p-lg]="padding() === 'lg'">
254
-
255
- @if (sectionTitle()) {
256
- <div class="vl-card-section-header">
257
- <span>{{ sectionTitle() }}</span>
258
- </div>
259
- }
260
-
261
- <ng-content />
262
- </div>
247
+ args: [{ selector: 'vl-card', standalone: true, template: `
248
+ <div class="vl-card"
249
+ [class.vl-card-hover]="hover()"
250
+ [class.vl-card-p-none]="padding() === 'none'"
251
+ [class.vl-card-p-sm]="padding() === 'sm'"
252
+ [class.vl-card-p-md]="padding() === 'md'"
253
+ [class.vl-card-p-lg]="padding() === 'lg'">
254
+
255
+ @if (sectionTitle()) {
256
+ <div class="vl-card-section-header">
257
+ <span>{{ sectionTitle() }}</span>
258
+ </div>
259
+ }
260
+
261
+ <ng-content />
262
+ </div>
263
263
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"] }]
264
264
  }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }] } });
265
265
 
@@ -290,11 +290,11 @@ class DialogComponent {
290
290
  this.closed.emit();
291
291
  }
292
292
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
293
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "vl-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", footerAction: "footerAction" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\n <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n <div class=\"vl-dialog-panel\"\n [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n [class.vl-dialog-panel-md]=\"size() === 'md'\"\n [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n <div class=\"vl-dialog-header\">\n <div>\n <h2>{{ title() }}</h2>\n @if (subtitle()) {\n <p>{{ subtitle() }}</p>\n }\n </div>\n <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"vl-dialog-body\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div class=\"vl-dialog-footer\">\n @if (footerButtons().length) {\n @for (btn of footerButtons(); track btn.key) {\n <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\n [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\n {{ btn.label }}\n </vl-button>\n }\n } @else {\n <ng-content select=\"[dialog-footer]\" />\n }\n </div>\n }\n\n </div>\n </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "vl-button", inputs: ["variant", "size", "loading", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
293
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "vl-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", footerAction: "footerAction" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\r\n <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\r\n\r\n <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\r\n\r\n <div class=\"vl-dialog-panel\"\r\n [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\r\n [class.vl-dialog-panel-md]=\"size() === 'md'\"\r\n [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\r\n\r\n <div class=\"vl-dialog-header\">\r\n <div>\r\n <h2>{{ title() }}</h2>\r\n @if (subtitle()) {\r\n <p>{{ subtitle() }}</p>\r\n }\r\n </div>\r\n <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\r\n <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"vl-dialog-body\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (hasFooter()) {\r\n <div class=\"vl-dialog-footer\">\r\n @if (footerButtons().length) {\r\n @for (btn of footerButtons(); track btn.key) {\r\n <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\r\n [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\r\n {{ btn.label }}\r\n </vl-button>\r\n }\r\n } @else {\r\n <ng-content select=\"[dialog-footer]\" />\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n}\r\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "vl-button", inputs: ["variant", "size", "loading", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
294
294
  }
295
295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
296
296
  type: Component,
297
- args: [{ selector: 'vl-dialog', standalone: true, imports: [ButtonComponent], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n <div class=\"vl-dialog-panel\"\n [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n [class.vl-dialog-panel-md]=\"size() === 'md'\"\n [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n <div class=\"vl-dialog-header\">\n <div>\n <h2>{{ title() }}</h2>\n @if (subtitle()) {\n <p>{{ subtitle() }}</p>\n }\n </div>\n <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"vl-dialog-body\">\n <ng-content />\n </div>\n\n @if (hasFooter()) {\n <div class=\"vl-dialog-footer\">\n @if (footerButtons().length) {\n @for (btn of footerButtons(); track btn.key) {\n <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\n [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\n {{ btn.label }}\n </vl-button>\n }\n } @else {\n <ng-content select=\"[dialog-footer]\" />\n }\n </div>\n }\n\n </div>\n </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"] }]
297
+ args: [{ selector: 'vl-dialog', standalone: true, imports: [ButtonComponent], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\r\n <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\r\n\r\n <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\r\n\r\n <div class=\"vl-dialog-panel\"\r\n [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\r\n [class.vl-dialog-panel-md]=\"size() === 'md'\"\r\n [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\r\n\r\n <div class=\"vl-dialog-header\">\r\n <div>\r\n <h2>{{ title() }}</h2>\r\n @if (subtitle()) {\r\n <p>{{ subtitle() }}</p>\r\n }\r\n </div>\r\n <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\r\n <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"vl-dialog-body\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (hasFooter()) {\r\n <div class=\"vl-dialog-footer\">\r\n @if (footerButtons().length) {\r\n @for (btn of footerButtons(); track btn.key) {\r\n <vl-button [variant]=\"btn.variant ?? 'primary'\" [disabled]=\"btn.disabled ?? false\"\r\n [loading]=\"btn.loading ?? false\" (click)=\"footerAction.emit(btn.key)\">\r\n {{ btn.label }}\r\n </vl-button>\r\n }\r\n } @else {\r\n <ng-content select=\"[dialog-footer]\" />\r\n }\r\n </div>\r\n }\r\n\r\n </div>\r\n </div>\r\n}\r\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"] }]
298
298
  }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], footerAction: [{ type: i0.Output, args: ["footerAction"] }], onEscape: [{
299
299
  type: HostListener,
300
300
  args: ['document:keydown.escape']
@@ -333,42 +333,42 @@ class ConfirmDialogComponent {
333
333
  key === 'confirm' ? this.confirmed.emit() : this.cancelled.emit();
334
334
  }
335
335
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
336
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: true, selector: "vl-confirm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
337
- <vl-dialog
338
- [isOpen]="isOpen()"
339
- [title]="title()"
340
- [subtitle]="subtitle()"
341
- size="sm"
342
- [hasFooter]="true"
343
- [footerButtons]="footerButtons()"
344
- (footerAction)="onFooterAction($event)"
345
- (closed)="cancelled.emit()">
346
-
347
- <div class="vl-confirm-body">
348
- <p class="vl-confirm-message">{{ message() }}</p>
349
- <ng-content />
350
- </div>
351
- </vl-dialog>
336
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: true, selector: "vl-confirm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
337
+ <vl-dialog
338
+ [isOpen]="isOpen()"
339
+ [title]="title()"
340
+ [subtitle]="subtitle()"
341
+ size="sm"
342
+ [hasFooter]="true"
343
+ [footerButtons]="footerButtons()"
344
+ (footerAction)="onFooterAction($event)"
345
+ (closed)="cancelled.emit()">
346
+
347
+ <div class="vl-confirm-body">
348
+ <p class="vl-confirm-message">{{ message() }}</p>
349
+ <ng-content />
350
+ </div>
351
+ </vl-dialog>
352
352
  `, isInline: true, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "vl-dialog", inputs: ["isOpen", "title", "subtitle", "size", "hasFooter", "footerButtons"], outputs: ["closed", "footerAction"] }], encapsulation: i0.ViewEncapsulation.None });
353
353
  }
354
354
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
355
355
  type: Component,
356
- args: [{ selector: 'vl-confirm-dialog', standalone: true, imports: [DialogComponent], template: `
357
- <vl-dialog
358
- [isOpen]="isOpen()"
359
- [title]="title()"
360
- [subtitle]="subtitle()"
361
- size="sm"
362
- [hasFooter]="true"
363
- [footerButtons]="footerButtons()"
364
- (footerAction)="onFooterAction($event)"
365
- (closed)="cancelled.emit()">
366
-
367
- <div class="vl-confirm-body">
368
- <p class="vl-confirm-message">{{ message() }}</p>
369
- <ng-content />
370
- </div>
371
- </vl-dialog>
356
+ args: [{ selector: 'vl-confirm-dialog', standalone: true, imports: [DialogComponent], template: `
357
+ <vl-dialog
358
+ [isOpen]="isOpen()"
359
+ [title]="title()"
360
+ [subtitle]="subtitle()"
361
+ size="sm"
362
+ [hasFooter]="true"
363
+ [footerButtons]="footerButtons()"
364
+ (footerAction)="onFooterAction($event)"
365
+ (closed)="cancelled.emit()">
366
+
367
+ <div class="vl-confirm-body">
368
+ <p class="vl-confirm-message">{{ message() }}</p>
369
+ <ng-content />
370
+ </div>
371
+ </vl-dialog>
372
372
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}\n"] }]
373
373
  }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
374
374
 
@@ -389,50 +389,50 @@ class EmptyStateComponent {
389
389
  title = input('Nothing here yet', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
390
390
  description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
391
391
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
392
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EmptyStateComponent, isStandalone: true, selector: "vl-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
393
- <div class="vl-empty-state">
394
- <div class="vl-empty-state-icon">
395
- @if (icon()) {
396
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
397
- stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
398
- <path [attr.d]="icon()" />
399
- </svg>
400
- } @else {
401
- <ng-content select="[empty-icon]" />
402
- }
403
- </div>
404
- <h3 class="vl-empty-state-title">{{ title() }}</h3>
405
- @if (description()) {
406
- <p class="vl-empty-state-description">{{ description() }}</p>
407
- }
408
- <div class="vl-empty-state-action">
409
- <ng-content />
410
- </div>
411
- </div>
392
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EmptyStateComponent, isStandalone: true, selector: "vl-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
393
+ <div class="vl-empty-state">
394
+ <div class="vl-empty-state-icon">
395
+ @if (icon()) {
396
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
397
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
398
+ <path [attr.d]="icon()" />
399
+ </svg>
400
+ } @else {
401
+ <ng-content select="[empty-icon]" />
402
+ }
403
+ </div>
404
+ <h3 class="vl-empty-state-title">{{ title() }}</h3>
405
+ @if (description()) {
406
+ <p class="vl-empty-state-description">{{ description() }}</p>
407
+ }
408
+ <div class="vl-empty-state-action">
409
+ <ng-content />
410
+ </div>
411
+ </div>
412
412
  `, isInline: true, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"], encapsulation: i0.ViewEncapsulation.None });
413
413
  }
414
414
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, decorators: [{
415
415
  type: Component,
416
- args: [{ selector: 'vl-empty-state', standalone: true, template: `
417
- <div class="vl-empty-state">
418
- <div class="vl-empty-state-icon">
419
- @if (icon()) {
420
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
421
- stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
422
- <path [attr.d]="icon()" />
423
- </svg>
424
- } @else {
425
- <ng-content select="[empty-icon]" />
426
- }
427
- </div>
428
- <h3 class="vl-empty-state-title">{{ title() }}</h3>
429
- @if (description()) {
430
- <p class="vl-empty-state-description">{{ description() }}</p>
431
- }
432
- <div class="vl-empty-state-action">
433
- <ng-content />
434
- </div>
435
- </div>
416
+ args: [{ selector: 'vl-empty-state', standalone: true, template: `
417
+ <div class="vl-empty-state">
418
+ <div class="vl-empty-state-icon">
419
+ @if (icon()) {
420
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
421
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
422
+ <path [attr.d]="icon()" />
423
+ </svg>
424
+ } @else {
425
+ <ng-content select="[empty-icon]" />
426
+ }
427
+ </div>
428
+ <h3 class="vl-empty-state-title">{{ title() }}</h3>
429
+ @if (description()) {
430
+ <p class="vl-empty-state-description">{{ description() }}</p>
431
+ }
432
+ <div class="vl-empty-state-action">
433
+ <ng-content />
434
+ </div>
435
+ </div>
436
436
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"] }]
437
437
  }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
438
438
 
@@ -452,48 +452,48 @@ class InputComponent {
452
452
  prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
453
453
  required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
454
454
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
455
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "vl-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
456
- <div class="vl-input-root">
457
- @if (label()) {
458
- <label class="vl-input-label" [class.vl-input-label-required]="required()">
459
- {{ label() }}
460
- </label>
461
- }
462
- <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
463
- @if (prefix()) {
464
- <span class="vl-input-prefix">{{ prefix() }}</span>
465
- }
466
- <ng-content />
467
- </div>
468
- @if (error()) {
469
- <p class="vl-input-error">{{ error() }}</p>
470
- } @else if (hint()) {
471
- <p class="vl-input-hint">{{ hint() }}</p>
472
- }
473
- </div>
455
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "vl-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
456
+ <div class="vl-input-root">
457
+ @if (label()) {
458
+ <label class="vl-input-label" [class.vl-input-label-required]="required()">
459
+ {{ label() }}
460
+ </label>
461
+ }
462
+ <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
463
+ @if (prefix()) {
464
+ <span class="vl-input-prefix">{{ prefix() }}</span>
465
+ }
466
+ <ng-content />
467
+ </div>
468
+ @if (error()) {
469
+ <p class="vl-input-error">{{ error() }}</p>
470
+ } @else if (hint()) {
471
+ <p class="vl-input-hint">{{ hint() }}</p>
472
+ }
473
+ </div>
474
474
  `, isInline: true, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
475
475
  }
476
476
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
477
477
  type: Component,
478
- args: [{ selector: 'vl-input', standalone: true, template: `
479
- <div class="vl-input-root">
480
- @if (label()) {
481
- <label class="vl-input-label" [class.vl-input-label-required]="required()">
482
- {{ label() }}
483
- </label>
484
- }
485
- <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
486
- @if (prefix()) {
487
- <span class="vl-input-prefix">{{ prefix() }}</span>
488
- }
489
- <ng-content />
490
- </div>
491
- @if (error()) {
492
- <p class="vl-input-error">{{ error() }}</p>
493
- } @else if (hint()) {
494
- <p class="vl-input-hint">{{ hint() }}</p>
495
- }
496
- </div>
478
+ args: [{ selector: 'vl-input', standalone: true, template: `
479
+ <div class="vl-input-root">
480
+ @if (label()) {
481
+ <label class="vl-input-label" [class.vl-input-label-required]="required()">
482
+ {{ label() }}
483
+ </label>
484
+ }
485
+ <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
486
+ @if (prefix()) {
487
+ <span class="vl-input-prefix">{{ prefix() }}</span>
488
+ }
489
+ <ng-content />
490
+ </div>
491
+ @if (error()) {
492
+ <p class="vl-input-error">{{ error() }}</p>
493
+ } @else if (hint()) {
494
+ <p class="vl-input-hint">{{ hint() }}</p>
495
+ }
496
+ </div>
497
497
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
498
498
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
499
499
 
@@ -501,34 +501,34 @@ class LoaderComponent {
501
501
  message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
502
502
  fullPage = input(false, ...(ngDevMode ? [{ debugName: "fullPage" }] : /* istanbul ignore next */ []));
503
503
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
504
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: LoaderComponent, isStandalone: true, selector: "vl-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
505
- <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
506
- <div class="vl-loader-spinner">
507
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
508
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
509
- <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
510
- </svg>
511
- </div>
512
- @if (message()) {
513
- <p class="vl-loader-message">{{ message() }}</p>
514
- }
515
- </div>
504
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: LoaderComponent, isStandalone: true, selector: "vl-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
505
+ <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
506
+ <div class="vl-loader-spinner">
507
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
508
+ <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
509
+ <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
510
+ </svg>
511
+ </div>
512
+ @if (message()) {
513
+ <p class="vl-loader-message">{{ message() }}</p>
514
+ }
515
+ </div>
516
516
  `, isInline: true, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
517
517
  }
518
518
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, decorators: [{
519
519
  type: Component,
520
- args: [{ selector: 'vl-loader', standalone: true, template: `
521
- <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
522
- <div class="vl-loader-spinner">
523
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
524
- <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
525
- <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
526
- </svg>
527
- </div>
528
- @if (message()) {
529
- <p class="vl-loader-message">{{ message() }}</p>
530
- }
531
- </div>
520
+ args: [{ selector: 'vl-loader', standalone: true, template: `
521
+ <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
522
+ <div class="vl-loader-spinner">
523
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
524
+ <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
525
+ <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
526
+ </svg>
527
+ </div>
528
+ @if (message()) {
529
+ <p class="vl-loader-message">{{ message() }}</p>
530
+ }
531
+ </div>
532
532
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"] }]
533
533
  }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }] } });
534
534
 
@@ -542,50 +542,50 @@ class PasswordStrengthComponent {
542
542
  strength = input(null, ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
543
543
  showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
544
544
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
545
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PasswordStrengthComponent, isStandalone: true, selector: "vl-password-strength", inputs: { strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
546
- <div class="vl-pw-root">
547
- <div class="vl-pw-bars">
548
- <div class="vl-pw-bar"
549
- [class.vl-pw-bar-weak]="strength() === 'weak'"
550
- [class.vl-pw-bar-inactive]="!strength()"></div>
551
- <div class="vl-pw-bar"
552
- [class.vl-pw-bar-medium]="strength() === 'medium'"
553
- [class.vl-pw-bar-strong]="strength() === 'strong'"
554
- [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
555
- <div class="vl-pw-bar"
556
- [class.vl-pw-bar-strong]="strength() === 'strong'"
557
- [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
558
- </div>
559
- @if (showLabel() && strength()) {
560
- <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
561
- {{ strength() | titlecase }}
562
- </span>
563
- }
564
- </div>
545
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PasswordStrengthComponent, isStandalone: true, selector: "vl-password-strength", inputs: { strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
546
+ <div class="vl-pw-root">
547
+ <div class="vl-pw-bars">
548
+ <div class="vl-pw-bar"
549
+ [class.vl-pw-bar-weak]="strength() === 'weak'"
550
+ [class.vl-pw-bar-inactive]="!strength()"></div>
551
+ <div class="vl-pw-bar"
552
+ [class.vl-pw-bar-medium]="strength() === 'medium'"
553
+ [class.vl-pw-bar-strong]="strength() === 'strong'"
554
+ [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
555
+ <div class="vl-pw-bar"
556
+ [class.vl-pw-bar-strong]="strength() === 'strong'"
557
+ [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
558
+ </div>
559
+ @if (showLabel() && strength()) {
560
+ <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
561
+ {{ strength() | titlecase }}
562
+ </span>
563
+ }
564
+ </div>
565
565
  `, isInline: true, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"], dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
566
566
  }
567
567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
568
568
  type: Component,
569
- args: [{ selector: 'vl-password-strength', standalone: true, imports: [TitleCasePipe], template: `
570
- <div class="vl-pw-root">
571
- <div class="vl-pw-bars">
572
- <div class="vl-pw-bar"
573
- [class.vl-pw-bar-weak]="strength() === 'weak'"
574
- [class.vl-pw-bar-inactive]="!strength()"></div>
575
- <div class="vl-pw-bar"
576
- [class.vl-pw-bar-medium]="strength() === 'medium'"
577
- [class.vl-pw-bar-strong]="strength() === 'strong'"
578
- [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
579
- <div class="vl-pw-bar"
580
- [class.vl-pw-bar-strong]="strength() === 'strong'"
581
- [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
582
- </div>
583
- @if (showLabel() && strength()) {
584
- <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
585
- {{ strength() | titlecase }}
586
- </span>
587
- }
588
- </div>
569
+ args: [{ selector: 'vl-password-strength', standalone: true, imports: [TitleCasePipe], template: `
570
+ <div class="vl-pw-root">
571
+ <div class="vl-pw-bars">
572
+ <div class="vl-pw-bar"
573
+ [class.vl-pw-bar-weak]="strength() === 'weak'"
574
+ [class.vl-pw-bar-inactive]="!strength()"></div>
575
+ <div class="vl-pw-bar"
576
+ [class.vl-pw-bar-medium]="strength() === 'medium'"
577
+ [class.vl-pw-bar-strong]="strength() === 'strong'"
578
+ [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
579
+ <div class="vl-pw-bar"
580
+ [class.vl-pw-bar-strong]="strength() === 'strong'"
581
+ [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
582
+ </div>
583
+ @if (showLabel() && strength()) {
584
+ <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
585
+ {{ strength() | titlecase }}
586
+ </span>
587
+ }
588
+ </div>
589
589
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"] }]
590
590
  }], propDecorators: { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }] } });
591
591
 
@@ -613,52 +613,52 @@ class ProgressBarComponent {
613
613
  return 'primary';
614
614
  }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
615
615
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
616
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressBarComponent, isStandalone: true, selector: "vl-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
617
- <div class="vl-progress-root">
618
- @if (label()) {
619
- <div class="vl-progress-header">
620
- <span class="vl-progress-label">{{ label() }}</span>
621
- @if (showLabel()) {
622
- <span class="vl-progress-pct">{{ clampedValue() }}%</span>
623
- }
624
- </div>
625
- } @else if (showLabel()) {
626
- <div class="vl-progress-header vl-progress-header-end">
627
- <span class="vl-progress-pct">{{ clampedValue() }}%</span>
628
- </div>
629
- }
630
- <div class="vl-progress-track">
631
- <div class="vl-progress-fill"
632
- [class]="'vl-progress-fill-' + resolvedVariant()"
633
- [style.width.%]="clampedValue()">
634
- </div>
635
- </div>
636
- </div>
616
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressBarComponent, isStandalone: true, selector: "vl-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
617
+ <div class="vl-progress-root">
618
+ @if (label()) {
619
+ <div class="vl-progress-header">
620
+ <span class="vl-progress-label">{{ label() }}</span>
621
+ @if (showLabel()) {
622
+ <span class="vl-progress-pct">{{ clampedValue() }}%</span>
623
+ }
624
+ </div>
625
+ } @else if (showLabel()) {
626
+ <div class="vl-progress-header vl-progress-header-end">
627
+ <span class="vl-progress-pct">{{ clampedValue() }}%</span>
628
+ </div>
629
+ }
630
+ <div class="vl-progress-track">
631
+ <div class="vl-progress-fill"
632
+ [class]="'vl-progress-fill-' + resolvedVariant()"
633
+ [style.width.%]="clampedValue()">
634
+ </div>
635
+ </div>
636
+ </div>
637
637
  `, isInline: true, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
638
638
  }
639
639
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
640
640
  type: Component,
641
- args: [{ selector: 'vl-progress-bar', standalone: true, template: `
642
- <div class="vl-progress-root">
643
- @if (label()) {
644
- <div class="vl-progress-header">
645
- <span class="vl-progress-label">{{ label() }}</span>
646
- @if (showLabel()) {
647
- <span class="vl-progress-pct">{{ clampedValue() }}%</span>
648
- }
649
- </div>
650
- } @else if (showLabel()) {
651
- <div class="vl-progress-header vl-progress-header-end">
652
- <span class="vl-progress-pct">{{ clampedValue() }}%</span>
653
- </div>
654
- }
655
- <div class="vl-progress-track">
656
- <div class="vl-progress-fill"
657
- [class]="'vl-progress-fill-' + resolvedVariant()"
658
- [style.width.%]="clampedValue()">
659
- </div>
660
- </div>
661
- </div>
641
+ args: [{ selector: 'vl-progress-bar', standalone: true, template: `
642
+ <div class="vl-progress-root">
643
+ @if (label()) {
644
+ <div class="vl-progress-header">
645
+ <span class="vl-progress-label">{{ label() }}</span>
646
+ @if (showLabel()) {
647
+ <span class="vl-progress-pct">{{ clampedValue() }}%</span>
648
+ }
649
+ </div>
650
+ } @else if (showLabel()) {
651
+ <div class="vl-progress-header vl-progress-header-end">
652
+ <span class="vl-progress-pct">{{ clampedValue() }}%</span>
653
+ </div>
654
+ }
655
+ <div class="vl-progress-track">
656
+ <div class="vl-progress-fill"
657
+ [class]="'vl-progress-fill-' + resolvedVariant()"
658
+ [style.width.%]="clampedValue()">
659
+ </div>
660
+ </div>
661
+ </div>
662
662
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"] }]
663
663
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
664
664
 
@@ -678,52 +678,52 @@ class SelectComponent {
678
678
  hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
679
679
  required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
680
680
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
681
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectComponent, isStandalone: true, selector: "vl-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
682
- <div class="vl-select-root">
683
- @if (label()) {
684
- <label class="vl-select-label" [class.vl-select-label-required]="required()">
685
- {{ label() }}
686
- </label>
687
- }
688
- <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
689
- <ng-content />
690
- <span class="vl-select-caret" aria-hidden="true">
691
- <svg viewBox="0 0 16 16" fill="currentColor">
692
- <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
693
- </svg>
694
- </span>
695
- </div>
696
- @if (error()) {
697
- <p class="vl-select-error">{{ error() }}</p>
698
- } @else if (hint()) {
699
- <p class="vl-select-hint">{{ hint() }}</p>
700
- }
701
- </div>
681
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectComponent, isStandalone: true, selector: "vl-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
682
+ <div class="vl-select-root">
683
+ @if (label()) {
684
+ <label class="vl-select-label" [class.vl-select-label-required]="required()">
685
+ {{ label() }}
686
+ </label>
687
+ }
688
+ <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
689
+ <ng-content />
690
+ <span class="vl-select-caret" aria-hidden="true">
691
+ <svg viewBox="0 0 16 16" fill="currentColor">
692
+ <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
693
+ </svg>
694
+ </span>
695
+ </div>
696
+ @if (error()) {
697
+ <p class="vl-select-error">{{ error() }}</p>
698
+ } @else if (hint()) {
699
+ <p class="vl-select-hint">{{ hint() }}</p>
700
+ }
701
+ </div>
702
702
  `, isInline: true, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
703
703
  }
704
704
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, decorators: [{
705
705
  type: Component,
706
- args: [{ selector: 'vl-select', standalone: true, template: `
707
- <div class="vl-select-root">
708
- @if (label()) {
709
- <label class="vl-select-label" [class.vl-select-label-required]="required()">
710
- {{ label() }}
711
- </label>
712
- }
713
- <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
714
- <ng-content />
715
- <span class="vl-select-caret" aria-hidden="true">
716
- <svg viewBox="0 0 16 16" fill="currentColor">
717
- <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
718
- </svg>
719
- </span>
720
- </div>
721
- @if (error()) {
722
- <p class="vl-select-error">{{ error() }}</p>
723
- } @else if (hint()) {
724
- <p class="vl-select-hint">{{ hint() }}</p>
725
- }
726
- </div>
706
+ args: [{ selector: 'vl-select', standalone: true, template: `
707
+ <div class="vl-select-root">
708
+ @if (label()) {
709
+ <label class="vl-select-label" [class.vl-select-label-required]="required()">
710
+ {{ label() }}
711
+ </label>
712
+ }
713
+ <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
714
+ <ng-content />
715
+ <span class="vl-select-caret" aria-hidden="true">
716
+ <svg viewBox="0 0 16 16" fill="currentColor">
717
+ <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
718
+ </svg>
719
+ </span>
720
+ </div>
721
+ @if (error()) {
722
+ <p class="vl-select-error">{{ error() }}</p>
723
+ } @else if (hint()) {
724
+ <p class="vl-select-hint">{{ hint() }}</p>
725
+ }
726
+ </div>
727
727
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
728
728
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
729
729
 
@@ -745,46 +745,46 @@ class SkeletonComponent {
745
745
  return Array.from({ length: this.lines() }, (_, i) => i);
746
746
  }
747
747
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
748
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "vl-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
749
- @if (lines() > 1) {
750
- <div class="vl-skeleton-group">
751
- @for (i of lineArr(); track i; let last = $last) {
752
- <div class="vl-skeleton"
753
- [class.vl-skeleton-circle]="shape() === 'circle'"
754
- [style.width]="last ? '60%' : '100%'"
755
- [style.height]="height()">
756
- </div>
757
- }
758
- </div>
759
- } @else {
760
- <div class="vl-skeleton"
761
- [class.vl-skeleton-circle]="shape() === 'circle'"
762
- [style.width]="width()"
763
- [style.height]="height()">
764
- </div>
765
- }
748
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "vl-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
749
+ @if (lines() > 1) {
750
+ <div class="vl-skeleton-group">
751
+ @for (i of lineArr(); track i; let last = $last) {
752
+ <div class="vl-skeleton"
753
+ [class.vl-skeleton-circle]="shape() === 'circle'"
754
+ [style.width]="last ? '60%' : '100%'"
755
+ [style.height]="height()">
756
+ </div>
757
+ }
758
+ </div>
759
+ } @else {
760
+ <div class="vl-skeleton"
761
+ [class.vl-skeleton-circle]="shape() === 'circle'"
762
+ [style.width]="width()"
763
+ [style.height]="height()">
764
+ </div>
765
+ }
766
766
  `, isInline: true, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], encapsulation: i0.ViewEncapsulation.None });
767
767
  }
768
768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, decorators: [{
769
769
  type: Component,
770
- args: [{ selector: 'vl-skeleton', standalone: true, template: `
771
- @if (lines() > 1) {
772
- <div class="vl-skeleton-group">
773
- @for (i of lineArr(); track i; let last = $last) {
774
- <div class="vl-skeleton"
775
- [class.vl-skeleton-circle]="shape() === 'circle'"
776
- [style.width]="last ? '60%' : '100%'"
777
- [style.height]="height()">
778
- </div>
779
- }
780
- </div>
781
- } @else {
782
- <div class="vl-skeleton"
783
- [class.vl-skeleton-circle]="shape() === 'circle'"
784
- [style.width]="width()"
785
- [style.height]="height()">
786
- </div>
787
- }
770
+ args: [{ selector: 'vl-skeleton', standalone: true, template: `
771
+ @if (lines() > 1) {
772
+ <div class="vl-skeleton-group">
773
+ @for (i of lineArr(); track i; let last = $last) {
774
+ <div class="vl-skeleton"
775
+ [class.vl-skeleton-circle]="shape() === 'circle'"
776
+ [style.width]="last ? '60%' : '100%'"
777
+ [style.height]="height()">
778
+ </div>
779
+ }
780
+ </div>
781
+ } @else {
782
+ <div class="vl-skeleton"
783
+ [class.vl-skeleton-circle]="shape() === 'circle'"
784
+ [style.width]="width()"
785
+ [style.height]="height()">
786
+ </div>
787
+ }
788
788
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
789
789
  }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
790
790
 
@@ -801,26 +801,26 @@ class StatCardComponent {
801
801
  subtext = input('', ...(ngDevMode ? [{ debugName: "subtext" }] : /* istanbul ignore next */ []));
802
802
  valueVariant = input('default', ...(ngDevMode ? [{ debugName: "valueVariant" }] : /* istanbul ignore next */ []));
803
803
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
804
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StatCardComponent, isStandalone: true, selector: "vl-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, valueVariant: { classPropertyName: "valueVariant", publicName: "valueVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
805
- <div class="vl-stat-card">
806
- <p class="vl-stat-label">{{ label() }}</p>
807
- <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
808
- @if (subtext()) {
809
- <p class="vl-stat-subtext">{{ subtext() }}</p>
810
- }
811
- </div>
804
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StatCardComponent, isStandalone: true, selector: "vl-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, valueVariant: { classPropertyName: "valueVariant", publicName: "valueVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
805
+ <div class="vl-stat-card">
806
+ <p class="vl-stat-label">{{ label() }}</p>
807
+ <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
808
+ @if (subtext()) {
809
+ <p class="vl-stat-subtext">{{ subtext() }}</p>
810
+ }
811
+ </div>
812
812
  `, isInline: true, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"], encapsulation: i0.ViewEncapsulation.None });
813
813
  }
814
814
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, decorators: [{
815
815
  type: Component,
816
- args: [{ selector: 'vl-stat-card', standalone: true, template: `
817
- <div class="vl-stat-card">
818
- <p class="vl-stat-label">{{ label() }}</p>
819
- <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
820
- @if (subtext()) {
821
- <p class="vl-stat-subtext">{{ subtext() }}</p>
822
- }
823
- </div>
816
+ args: [{ selector: 'vl-stat-card', standalone: true, template: `
817
+ <div class="vl-stat-card">
818
+ <p class="vl-stat-label">{{ label() }}</p>
819
+ <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
820
+ @if (subtext()) {
821
+ <p class="vl-stat-subtext">{{ subtext() }}</p>
822
+ }
823
+ </div>
824
824
  `, encapsulation: ViewEncapsulation.None, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"] }]
825
825
  }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], valueVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueVariant", required: false }] }] } });
826
826
 
@@ -921,31 +921,31 @@ class TooltipDirective {
921
921
  return;
922
922
  const style = document.createElement('style');
923
923
  style.id = STYLE_ID;
924
- style.textContent = `
925
- .vl-tooltip {
926
- position: absolute;
927
- z-index: 10000;
928
- padding: 0.3125rem 0.625rem;
929
- background-color: var(--color-foreground, #1f2937);
930
- color: var(--color-background, #fff);
931
- font-size: 0.75rem;
932
- font-family: var(--font-family-sans, inherit);
933
- line-height: 1.4;
934
- border-radius: calc(var(--radius, 0.5rem) * 0.75);
935
- white-space: nowrap;
936
- pointer-events: none;
937
- max-width: 16rem;
938
- white-space: normal;
939
- text-align: center;
940
- opacity: 0;
941
- transform: scale(0.95);
942
- transition: opacity 0.15s ease, transform 0.15s ease;
943
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
944
- }
945
- .vl-tooltip-visible {
946
- opacity: 1;
947
- transform: scale(1);
948
- }
924
+ style.textContent = `
925
+ .vl-tooltip {
926
+ position: absolute;
927
+ z-index: 10000;
928
+ padding: 0.3125rem 0.625rem;
929
+ background-color: var(--color-foreground, #1f2937);
930
+ color: var(--color-background, #fff);
931
+ font-size: 0.75rem;
932
+ font-family: var(--font-family-sans, inherit);
933
+ line-height: 1.4;
934
+ border-radius: calc(var(--radius, 0.5rem) * 0.75);
935
+ white-space: nowrap;
936
+ pointer-events: none;
937
+ max-width: 16rem;
938
+ white-space: normal;
939
+ text-align: center;
940
+ opacity: 0;
941
+ transform: scale(0.95);
942
+ transition: opacity 0.15s ease, transform 0.15s ease;
943
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
944
+ }
945
+ .vl-tooltip-visible {
946
+ opacity: 1;
947
+ transform: scale(1);
948
+ }
949
949
  `;
950
950
  document.head.appendChild(style);
951
951
  }
@@ -1112,9 +1112,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
1112
1112
  }] });
1113
1113
 
1114
1114
  const TRIP_STATUS_COLORS = {
1115
- planning: { color: '#ff6347', background: 'rgba(255, 99, 71, 0.12)' },
1116
- ongoing: { color: '#228b22', background: 'rgba(34, 139, 34, 0.12)' },
1117
- completed: { color: '#6b7280', background: 'rgba(107, 114, 128, 0.12)' },
1115
+ planning: {
1116
+ color: 'var(--color-secondary, #ff6347)',
1117
+ background: 'color-mix(in srgb, var(--color-secondary, #ff6347) 12%, transparent)',
1118
+ },
1119
+ ongoing: {
1120
+ color: 'var(--color-accent, #228b22)',
1121
+ background: 'color-mix(in srgb, var(--color-accent, #228b22) 12%, transparent)',
1122
+ },
1123
+ completed: {
1124
+ color: 'var(--color-muted-foreground, #6b7280)',
1125
+ background: 'color-mix(in srgb, var(--color-muted-foreground, #6b7280) 12%, transparent)',
1126
+ },
1118
1127
  };
1119
1128
 
1120
1129
  /**