@abdelfattahqandil21/ryzen-ui 0.0.2 → 0.0.3
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.
|
@@ -45,7 +45,7 @@ class CheckboxComponent {
|
|
|
45
45
|
this.checked.update(v => !v);
|
|
46
46
|
}
|
|
47
47
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--cb-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CheckboxComponent, isStandalone: true, selector: "app-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--cb-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
49
|
}
|
|
50
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
@@ -55,7 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
55
55
|
'[class.has-error]': 'error()',
|
|
56
56
|
'[style.--cb-accent]': '_rawAccent',
|
|
57
57
|
'[style.width]': '_width',
|
|
58
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
58
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"cb-field\" [class.is-disabled]=\"disabled()\">\n <span\n class=\"cb-box\"\n [class.is-checked]=\"checked()\"\n [class.is-indeterminate]=\"indeterminate() && !checked()\"\n role=\"checkbox\"\n [attr.aria-checked]=\"indeterminate() && !checked() ? 'mixed' : checked()\"\n tabindex=\"0\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n >\n @if (checked()) {\n <i class=\"pi pi-check\" style=\"color:white;font-weight:700\"></i>\n } @else if (indeterminate()) {\n <span class=\"w-2 h-0.5 rounded-full\" style=\"background:white\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"cb-label\">{{ label() }}</span>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--cb-accent: var(--color-primary, oklch(.32 .09 258));--cb-bg: var(--color-surface, oklch(.99 0 0));--cb-border: var(--color-border, oklch(.83 .015 260));--cb-text: var(--color-text, oklch(.14 .01 260));--cb-muted: var(--color-text-muted, oklch(.48 .01 260));position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--cb-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--cb-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--cb-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--cb-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--cb-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--cb-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--cb-accent: var(--color-info, oklch(.55 .15 235))}.cb-field{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.cb-field.is-disabled{opacity:.5;cursor:not-allowed}.cb-box{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);transition:all .15s ease;flex-shrink:0}.cb-box.is-checked,.cb-box.is-indeterminate{background:var(--cb-accent);border-color:var(--cb-accent)}.cb-box:focus-visible{outline:2px solid var(--cb-accent);outline-offset:2px}.cb-label{font-family:var(--font-sans);-webkit-user-select:none;user-select:none;color:var(--cb-text)}:host([data-size=\"sm\"]) .cb-box{width:1rem;height:1rem;font-size:.625rem}:host([data-size=\"sm\"]) .cb-label{font-size:.75rem}:host([data-size=\"md\"]) .cb-box{width:1.25rem;height:1.25rem;font-size:.75rem}:host([data-size=\"md\"]) .cb-label{font-size:.875rem}:host([data-size=\"lg\"]) .cb-box{width:1.5rem;height:1.5rem;font-size:.875rem}:host([data-size=\"lg\"]) .cb-label{font-size:1rem}:host(.has-error) .cb-box{border-color:var(--color-danger, oklch(.55 .25 25))}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
59
59
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
60
60
|
|
|
61
61
|
class DatePickerComponent {
|
|
@@ -349,7 +349,7 @@ class DatePickerComponent {
|
|
|
349
349
|
this._close();
|
|
350
350
|
}
|
|
351
351
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
352
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--date-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dp-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n <!-- top row: nav arrows + month/year title -->\n <div class=\"flex items-center justify-between mb-1.5\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left text-xs\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left text-sm\"></i>\n </button>\n }\n\n <div class=\"flex items-center gap-1 text-sm font-semibold\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right text-sm\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right text-xs\"></i>\n </button>\n }\n </div>\n\n <!-- today button -->\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n <i class=\"pi pi-calendar-plus text-xs\"></i>\n Today\n </button>\n }\n </div>\n\n <!-- ===== DAYS VIEW ===== -->\n @if (_viewMode() === 'days') {\n <div class=\"p-2.5\">\n <div class=\"grid grid-cols-7 mb-0.5\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0.5\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n [class.font-semibold]=\"day.isToday || day.isSelected\"\n [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n [class.text-white]=\"day.isSelected\"\n [class.ring-2]=\"day.isToday && !day.isSelected\"\n [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n [class.opacity-30]=\"day.isDisabled\"\n [class.cursor-not-allowed]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n <!-- ===== MONTHS VIEW ===== -->\n @if (_viewMode() === 'months') {\n <div class=\"grid grid-cols-3 gap-2 p-3\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n [class.text-white]=\"_isCurrentMonth($index)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n <!-- ===== YEARS VIEW ===== -->\n @if (_viewMode() === 'years') {\n <div class=\"p-2.5\">\n <div class=\"flex items-center justify-between mb-2 px-1\">\n <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-left text-xs\"></i>\n </button>\n <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-right text-xs\"></i>\n </button>\n </div>\n <div class=\"grid grid-cols-4 gap-2\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n [class.text-white]=\"_isCurrentYear(year)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--date-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dp-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n <!-- top row: nav arrows + month/year title -->\n <div class=\"flex items-center justify-between mb-1.5\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left text-xs\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left text-sm\"></i>\n </button>\n }\n\n <div class=\"flex items-center gap-1 text-sm font-semibold\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right text-sm\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right text-xs\"></i>\n </button>\n }\n </div>\n\n <!-- today button -->\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n <i class=\"pi pi-calendar-plus text-xs\"></i>\n Today\n </button>\n }\n </div>\n\n <!-- ===== DAYS VIEW ===== -->\n @if (_viewMode() === 'days') {\n <div class=\"p-2.5\">\n <div class=\"grid grid-cols-7 mb-0.5\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0.5\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n [class.font-semibold]=\"day.isToday || day.isSelected\"\n [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n [class.text-white]=\"day.isSelected\"\n [class.ring-2]=\"day.isToday && !day.isSelected\"\n [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n [class.opacity-30]=\"day.isDisabled\"\n [class.cursor-not-allowed]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n <!-- ===== MONTHS VIEW ===== -->\n @if (_viewMode() === 'months') {\n <div class=\"grid grid-cols-3 gap-2 p-3\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n [class.text-white]=\"_isCurrentMonth($index)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n <!-- ===== YEARS VIEW ===== -->\n @if (_viewMode() === 'years') {\n <div class=\"p-2.5\">\n <div class=\"flex items-center justify-between mb-2 px-1\">\n <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-left text-xs\"></i>\n </button>\n <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-right text-xs\"></i>\n </button>\n </div>\n <div class=\"grid grid-cols-4 gap-2\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n [class.text-white]=\"_isCurrentYear(year)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
353
353
|
}
|
|
354
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
355
355
|
type: Component,
|
|
@@ -359,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
359
359
|
'[class.has-error]': 'error()',
|
|
360
360
|
'[style.--date-accent]': '_rawAccent',
|
|
361
361
|
'[style.width]': '_width',
|
|
362
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dp-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n <!-- top row: nav arrows + month/year title -->\n <div class=\"flex items-center justify-between mb-1.5\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left text-xs\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left text-sm\"></i>\n </button>\n }\n\n <div class=\"flex items-center gap-1 text-sm font-semibold\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right text-sm\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right text-xs\"></i>\n </button>\n }\n </div>\n\n <!-- today button -->\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n <i class=\"pi pi-calendar-plus text-xs\"></i>\n Today\n </button>\n }\n </div>\n\n <!-- ===== DAYS VIEW ===== -->\n @if (_viewMode() === 'days') {\n <div class=\"p-2.5\">\n <div class=\"grid grid-cols-7 mb-0.5\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0.5\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n [class.font-semibold]=\"day.isToday || day.isSelected\"\n [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n [class.text-white]=\"day.isSelected\"\n [class.ring-2]=\"day.isToday && !day.isSelected\"\n [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n [class.opacity-30]=\"day.isDisabled\"\n [class.cursor-not-allowed]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n <!-- ===== MONTHS VIEW ===== -->\n @if (_viewMode() === 'months') {\n <div class=\"grid grid-cols-3 gap-2 p-3\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n [class.text-white]=\"_isCurrentMonth($index)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n <!-- ===== YEARS VIEW ===== -->\n @if (_viewMode() === 'years') {\n <div class=\"p-2.5\">\n <div class=\"flex items-center justify-between mb-2 px-1\">\n <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-left text-xs\"></i>\n </button>\n <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-right text-xs\"></i>\n </button>\n </div>\n <div class=\"grid grid-cols-4 gap-2\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n [class.text-white]=\"_isCurrentYear(year)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
362
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dp-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--date-bg)] border border-[var(--date-border)] rounded-[var(--date-radius)] text-[var(--date-text)] font-[var(--font-sans)] placeholder:text-[var(--date-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--date-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--date-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_displayValue()\"\n />\n\n @if (_displayValue() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--date-muted)] hover:text-[var(--date-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear date\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-calendar'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dp-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dp-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dp-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n <div [style.background-color]=\"_accentColorValue()\" class=\"text-white px-3 py-2.5\">\n <!-- top row: nav arrows + month/year title -->\n <div class=\"flex items-center justify-between mb-1.5\">\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_prevYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous year\">\n <i class=\"pi pi-angle-double-left text-xs\"></i>\n </button>\n }\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_prevPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Previous\">\n <i class=\"pi pi-angle-left text-sm\"></i>\n </button>\n }\n\n <div class=\"flex items-center gap-1 text-sm font-semibold\">\n @if (_viewMode() === 'days') {\n <button type=\"button\" (click)=\"_showMonths()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _monthName() }}</button>\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'months') {\n <button type=\"button\" (click)=\"_showYears()\" class=\"px-1.5 py-0.5 border-none rounded bg-transparent text-white hover:bg-white/20 cursor-pointer transition-colors\">{{ _year() }}</button>\n }\n @if (_viewMode() === 'years') {\n <span class=\"px-1.5\">{{ _decadeLabel() }}</span>\n }\n </div>\n\n @if (_viewMode() !== 'years') {\n <button type=\"button\" (click)=\"_nextPeriod()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next\">\n <i class=\"pi pi-angle-right text-sm\"></i>\n </button>\n }\n @if (_viewMode() === 'days' && _showYearNav()) {\n <button type=\"button\" (click)=\"_nextYear()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\" aria-label=\"Next year\">\n <i class=\"pi pi-angle-double-right text-xs\"></i>\n </button>\n }\n </div>\n\n <!-- today button -->\n @if (_showTodayBtn() && _viewMode() === 'days') {\n <button type=\"button\" (click)=\"_goToToday()\" class=\"w-full flex items-center justify-center gap-1.5 py-1 px-2 border-none rounded bg-white/20 hover:bg-white/30 text-white text-xs cursor-pointer transition-colors\">\n <i class=\"pi pi-calendar-plus text-xs\"></i>\n Today\n </button>\n }\n </div>\n\n <!-- ===== DAYS VIEW ===== -->\n @if (_viewMode() === 'days') {\n <div class=\"p-2.5\">\n <div class=\"grid grid-cols-7 mb-0.5\">\n @for (day of _weekDaysOrdered(); track $index) {\n <div class=\"flex items-center justify-center h-7 text-xs font-medium text-[var(--color-text-muted)] font-[var(--font-sans)]\">{{ day }}</div>\n }\n </div>\n <div class=\"grid grid-cols-7 gap-0.5\">\n @for (day of _calendarDays(); track day.date.getTime()) {\n @if (day.date.getMonth() === _viewDate().getMonth() || day.date.getMonth() === _viewDate().getMonth() - 1 || day.date.getMonth() === _viewDate().getMonth() + 1) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-9 h-9 p-0 border-none rounded-full cursor-pointer text-sm font-[var(--font-sans)] transition-all duration-150\"\n [class.text-[var(--color-text-muted)]]=\"!day.isCurrentMonth && !day.isSelected\"\n [class.text-[var(--color-text)]]=\"day.isCurrentMonth && !day.isSelected && !day.isToday\"\n [class.font-semibold]=\"day.isToday || day.isSelected\"\n [class.bg-[var(--date-accent)]]=\"day.isSelected\"\n [class.text-white]=\"day.isSelected\"\n [class.ring-2]=\"day.isToday && !day.isSelected\"\n [class.ring-[var(--date-accent)]]=\"day.isToday && !day.isSelected\"\n [class.bg-[var(--color-surface-alt)]]=\"day.isHighlighted && !day.isSelected\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!day.isSelected && !day.isDisabled\"\n [class.opacity-30]=\"day.isDisabled\"\n [class.cursor-not-allowed]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"_selectDate(day.date)\"\n [attr.aria-label]=\"day.date.toLocaleDateString()\"\n >{{ day.day }}</button>\n }\n }\n </div>\n </div>\n }\n\n <!-- ===== MONTHS VIEW ===== -->\n @if (_viewMode() === 'months') {\n <div class=\"grid grid-cols-3 gap-2 p-3\">\n @for (month of _monthNames; track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentMonth($index)\"\n [class.text-white]=\"_isCurrentMonth($index)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentMonth($index)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentMonth($index)\"\n (click)=\"_selectMonth($index)\"\n >{{ _monthsShort[$index] }}</button>\n }\n </div>\n }\n\n <!-- ===== YEARS VIEW ===== -->\n @if (_viewMode() === 'years') {\n <div class=\"p-2.5\">\n <div class=\"flex items-center justify-between mb-2 px-1\">\n <button type=\"button\" (click)=\"_prevDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-left text-xs\"></i>\n </button>\n <span class=\"text-sm font-semibold text-[var(--color-text)] font-[var(--font-sans)]\">{{ _decadeLabel() }}</span>\n <button type=\"button\" (click)=\"_nextDecade()\" class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-[var(--date-accent)] hover:bg-[var(--color-surface-alt)] cursor-pointer transition-colors\">\n <i class=\"pi pi-chevron-right text-xs\"></i>\n </button>\n </div>\n <div class=\"grid grid-cols-4 gap-2\">\n @for (year of _yearsList(); track $index) {\n <button\n type=\"button\"\n class=\"p-2 rounded-lg text-xs font-[var(--font-sans)] transition-colors cursor-pointer\"\n [class.bg-[var(--date-accent)]]=\"_isCurrentYear(year)\"\n [class.text-white]=\"_isCurrentYear(year)\"\n [class.text-[var(--color-text)]]=\"!_isCurrentYear(year)\"\n [class.hover:bg-[var(--color-surface-alt)]]=\"!_isCurrentYear(year)\"\n (click)=\"_selectYear(year)\"\n >{{ year }}</button>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--date-accent: var(--color-primary, oklch(.32 .09 258));--date-bg: var(--color-surface, oklch(.99 0 0));--date-border: var(--color-border, oklch(.83 .015 260));--date-text: var(--color-text, oklch(.14 .01 260));--date-muted: var(--color-text-muted, oklch(.48 .01 260));--date-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--date-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--date-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--date-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--date-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--date-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--date-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--date-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.dp-fade-in{animation:dpIn .2s ease}.dp-fade-out{animation:dpOut .15s ease forwards}@keyframes dpIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes dpOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
363
363
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
364
364
|
|
|
365
365
|
class DropDownComponent {
|
|
@@ -542,7 +542,7 @@ class DropDownComponent {
|
|
|
542
542
|
}
|
|
543
543
|
}
|
|
544
544
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dd-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-dd-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.font-semibold]=\"option.value === value()\"\n [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DropDownComponent, isStandalone: true, selector: "app-drop-down", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative dd-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-dd-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.font-semibold]=\"option.value === value()\"\n [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
546
546
|
}
|
|
547
547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropDownComponent, decorators: [{
|
|
548
548
|
type: Component,
|
|
@@ -553,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
553
553
|
'[style.--drop-accent]': '_rawAccent',
|
|
554
554
|
'[style.width]': '_width',
|
|
555
555
|
'(window:scroll)': '_onWindowScroll()',
|
|
556
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dd-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-dd-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.font-semibold]=\"option.value === value()\"\n [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
556
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative dd-wrapper\">\n <label class=\"flex items-center w-full\" (click)=\"_onTriggerClick($event)\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] placeholder:text-[var(--drop-muted)] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:border-[var(--drop-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--drop-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n readonly\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"_selectedLabel()\"\n />\n\n @if (_selectedLabel() && !disabled()) {\n <button class=\"absolute top-1/2 -translate-y-1/2 right-8 flex items-center justify-center p-0 border-none bg-transparent cursor-pointer text-[var(--drop-muted)] hover:text-[var(--drop-text)] transition-colors duration-150\" type=\"button\" (click)=\"_clear($event)\" aria-label=\"Clear\">\n <i class=\"pi pi-times text-xs sm:text-sm lg:text-base\"></i>\n </button>\n }\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-dd-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.dd-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.dd-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-dd-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.font-semibold]=\"option.value === value()\"\n [style.background-color]=\"option.value === value() ? 'var(--color-accent)' : null\"\n [style.color]=\"option.value === value() ? 'var(--color-primary-inverse)' : null\"\n (click)=\"_selectOption(option)\"\n >{{ option.label }}</button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.dd-fade-in{animation:ddIn .2s ease}.dd-fade-out{animation:ddOut .15s ease forwards}@keyframes ddIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes ddOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
557
557
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
558
558
|
|
|
559
559
|
class FileUploadComponent {
|
|
@@ -631,13 +631,13 @@ class FileUploadComponent {
|
|
|
631
631
|
return `${(bytes / 1048576).toFixed(1)} MB`;
|
|
632
632
|
}
|
|
633
633
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
634
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "<div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n [class.is-disabled]=\"disabled()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n>\n <input\n #_input\n type=\"file\"\n [attr.accept]=\"accept() || null\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n />\n\n <i class=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n @if (files().length) {\n <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n } @else {\n <span class=\"text-xs\">{{ placeholder() }}</span>\n }\n\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n }\n</div>\n\n@if (files().length) {\n <div class=\"file-list\">\n @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n <div class=\"file-item\">\n <i class=\"pi pi-file file-item-icon\"></i>\n <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">×</button>\n </div>\n }\n </div>\n}\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
634
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "<div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n [class.is-disabled]=\"disabled()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n>\n <input\n #_input\n type=\"file\"\n [attr.accept]=\"accept() || null\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n />\n\n <i class=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n @if (files().length) {\n <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n } @else {\n <span class=\"text-xs\">{{ placeholder() }}</span>\n }\n\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n }\n</div>\n\n@if (files().length) {\n <div class=\"file-list\">\n @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n <div class=\"file-item\">\n <i class=\"pi pi-file file-item-icon\"></i>\n <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">×</button>\n </div>\n }\n </div>\n}\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
635
635
|
}
|
|
636
636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
637
637
|
type: Component,
|
|
638
638
|
args: [{ selector: 'app-file-upload', imports: [], host: {
|
|
639
639
|
'[attr.data-size]': '_size',
|
|
640
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n [class.is-disabled]=\"disabled()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n>\n <input\n #_input\n type=\"file\"\n [attr.accept]=\"accept() || null\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n />\n\n <i class=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n @if (files().length) {\n <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n } @else {\n <span class=\"text-xs\">{{ placeholder() }}</span>\n }\n\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n }\n</div>\n\n@if (files().length) {\n <div class=\"file-list\">\n @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n <div class=\"file-item\">\n <i class=\"pi pi-file file-item-icon\"></i>\n <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">×</button>\n </div>\n }\n </div>\n}\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
640
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n [class.is-disabled]=\"disabled()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n>\n <input\n #_input\n type=\"file\"\n [attr.accept]=\"accept() || null\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n />\n\n <i class=\"pi pi-cloud-upload\" [class.text-2xl]=\"size() !== 'sm'\" [class.text-xl]=\"size() === 'sm'\"></i>\n\n @if (files().length) {\n <span class=\"text-xs font-medium\">{{ files().length }} file{{ files().length !== 1 ? 's' : '' }} selected</span>\n } @else {\n <span class=\"text-xs\">{{ placeholder() }}</span>\n }\n\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} per file</span>\n }\n</div>\n\n@if (files().length) {\n <div class=\"file-list\">\n @for (file of files(); track file.name + file.size + file.lastModified; let i = $index) {\n <div class=\"file-item\">\n <i class=\"pi pi-file file-item-icon\"></i>\n <span class=\"file-item-name\" [title]=\"file.name\">{{ file.name }}</span>\n <span class=\"file-item-size\">{{ _formatSize(file.size) }}</span>\n <button type=\"button\" class=\"file-item-remove\" (click)=\"_removeFile(i)\" aria-label=\"Remove file\">×</button>\n </div>\n }\n </div>\n}\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--fu-accent: var(--color-accent, oklch(.64 .2 50));--fu-bg: var(--color-surface, oklch(.99 0 0));--fu-border: var(--color-border, oklch(.83 .015 260));--fu-text: var(--color-text, oklch(.14 .01 260));--fu-muted: var(--color-text-muted, oklch(.48 .01 260));--fu-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:2rem 1rem;border:2px dashed var(--fu-border);border-radius:var(--fu-radius);background:var(--fu-bg);cursor:pointer;transition:all .2s ease;color:var(--fu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--fu-accent);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));color:var(--fu-text)}.drop-zone.is-disabled{opacity:.5;cursor:not-allowed}.file-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}.file-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:calc(var(--fu-radius) - 2px);background:color-mix(in srgb,var(--fu-accent) 6%,var(--fu-bg));font-size:.8125rem;color:var(--fu-text)}.file-item-icon{flex-shrink:0;font-size:.75rem;color:var(--fu-accent)}.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex-shrink:0;font-size:.6875rem;color:var(--fu-muted)}.file-item-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--fu-muted);font-size:.6875rem;transition:all .15s}.file-item-remove:hover{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
641
641
|
}], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
|
|
642
642
|
|
|
643
643
|
class MultiSelectComponent {
|
|
@@ -858,7 +858,7 @@ class MultiSelectComponent {
|
|
|
858
858
|
}
|
|
859
859
|
}
|
|
860
860
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
861
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative ms-wrapper\">\n <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n [class]=\"_inputSizeCls()\"\n >\n @for (label of chips; track label) {\n <span class=\"ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >×</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() !== 'sm'\"\n [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"chips.length ? '' : ''\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-ms-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n (click)=\"_toggleSelectAll()\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"'var(--drop-border)'\"\n [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n >\n @if (_allFilteredSelected()) { ✓ }\n </span>\n <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n >\n @if (_isSelected(_optVal(option))) { ✓ }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MultiSelectComponent, isStandalone: true, selector: "app-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "window:scroll": "_onWindowScroll()" }, properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--drop-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<div class=\"relative ms-wrapper\">\n <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n [class]=\"_inputSizeCls()\"\n >\n @for (label of chips; track label) {\n <span class=\"ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >×</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() !== 'sm'\"\n [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"chips.length ? '' : ''\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-ms-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n (click)=\"_toggleSelectAll()\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"'var(--drop-border)'\"\n [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n >\n @if (_allFilteredSelected()) { ✓ }\n </span>\n <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n >\n @if (_isSelected(_optVal(option))) { ✓ }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
862
862
|
}
|
|
863
863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
864
864
|
type: Component,
|
|
@@ -869,7 +869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
869
869
|
'[style.--drop-accent]': '_rawAccent',
|
|
870
870
|
'[style.width]': '_width',
|
|
871
871
|
'(window:scroll)': '_onWindowScroll()',
|
|
872
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative ms-wrapper\">\n <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n [class]=\"_inputSizeCls()\"\n >\n @for (label of chips; track label) {\n <span class=\"ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >×</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() !== 'sm'\"\n [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"chips.length ? '' : ''\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-ms-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n (click)=\"_toggleSelectAll()\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"'var(--drop-border)'\"\n [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n >\n @if (_allFilteredSelected()) { ✓ }\n </span>\n <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n >\n @if (_isSelected(_optVal(option))) { ✓ }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\n"] }]
|
|
872
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative ms-wrapper\">\n <label class=\"flex items-center w-full cursor-text\" (click)=\"_onTriggerClick($event)\">\n @let chips = _selectedLabels();\n\n <div class=\"!flex flex-wrap items-center gap-1 min-h-0 h-auto cursor-pointer py-1.5 w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--drop-bg)] border border-[var(--drop-border)] rounded-[var(--drop-radius)] text-[var(--drop-text)] font-[var(--font-sans)] disabled:opacity-50 disabled:cursor-not-allowed\"\n [class]=\"_inputSizeCls()\"\n >\n @for (label of chips; track label) {\n <span class=\"ms-chip\">\n {{ label }}\n <button type=\"button\" class=\"ms-chip-remove\"\n (click)=\"_removeChip(value()[$index], $event)\"\n tabindex=\"-1\"\n aria-label=\"Remove {{ label }}\"\n >×</button>\n </span>\n }\n\n <input\n type=\"text\"\n class=\"flex-1 min-w-[50px] outline-none border-none bg-transparent text-[var(--drop-text)] placeholder:text-[var(--drop-muted)]\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() !== 'sm'\"\n [style.height]=\"size() === 'sm' ? '1.25rem' : '1.5rem'\"\n [attr.placeholder]=\"chips.length ? '' : placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"chips.length ? '' : ''\"\n (input)=\"_onInput($event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n\n <i [class]=\"_iconCls() + ' pi pi-chevron-down'\"></i>\n </label>\n\n @if (_isOpen() || _isClosing()) {\n <div\n data-ms-panel\n class=\"left-0 z-50 w-full min-w-60 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-lg overflow-hidden text-[var(--color-text)]\"\n [class.absolute]=\"!_appendToParent()\"\n [style.position]=\"_panelFixed()\"\n [style.left.px]=\"_appendToParent() ? _panelX() : null\"\n [style.top.px]=\"_appendToParent() ? _panelY() : null\"\n [style.width.px]=\"_appendToParent() ? _panelWidth() : null\"\n [class.top-full]=\"!_appendToParent() && _panelDirection() === 'down'\"\n [class.bottom-full]=\"!_appendToParent() && _panelDirection() === 'up'\"\n [class.ms-fade-in]=\"_isOpen() && !_isClosing()\"\n [class.ms-fade-out]=\"_isClosing()\"\n (click)=\"_onPanelClick($event)\">\n\n @if (searchable()) {\n <div class=\"px-2 pt-2\">\n <input\n data-ms-search\n type=\"text\"\n class=\"w-full px-2 py-1.5 text-sm border border-[var(--color-border)] rounded outline-none bg-[var(--color-surface)] text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-accent)]\"\n placeholder=\"Search...\"\n [value]=\"_searchQuery()\"\n (input)=\"_searchQuery.set($any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n\n <div\n class=\"overflow-y-auto\"\n [style.max-height]=\"_maxHeight()\"\n (scroll)=\"$event.stopPropagation()\">\n\n @if (selectAll() && _filteredOptions().length > 0) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n (click)=\"_toggleSelectAll()\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"'var(--drop-border)'\"\n [style.background-color]=\"_allFilteredSelected() ? 'var(--drop-accent)' : 'transparent'\"\n [style.color]=\"_allFilteredSelected() ? 'white' : 'transparent'\"\n >\n @if (_allFilteredSelected()) { ✓ }\n </span>\n <span class=\"font-medium\">{{ selectAllLabel() }}</span>\n </button>\n <div class=\"h-px mx-2\" [style.background-color]=\"'var(--drop-border)'\"></div>\n }\n\n @for (option of _filteredOptions(); track option.value) {\n <button\n type=\"button\"\n [class]=\"_optionCls()\"\n [class.selected]=\"_isSelected(_optVal(option))\"\n (click)=\"_toggleOption(option)\"\n >\n <span\n class=\"inline-flex items-center justify-center w-4 h-4 rounded border text-[10px] shrink-0 transition-colors\"\n [style.border-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'var(--drop-border)'\"\n [style.background-color]=\"_isSelected(_optVal(option)) ? 'var(--color-accent)' : 'transparent'\"\n [style.color]=\"_isSelected(_optVal(option)) ? 'white' : 'transparent'\"\n >\n @if (_isSelected(_optVal(option))) { ✓ }\n </span>\n <span>{{ option.label }}</span>\n </button>\n }\n\n @if (_filteredOptions().length === 0) {\n <div class=\"px-3 py-4 text-center text-sm text-[var(--drop-muted)]\">No results found</div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--drop-accent: var(--color-accent, oklch(.64 .2 50));--drop-bg: var(--color-surface, oklch(.99 0 0));--drop-border: var(--color-border, oklch(.83 .015 260));--drop-text: var(--color-text, oklch(.14 .01 260));--drop-muted: var(--color-text-muted, oklch(.48 .01 260));--drop-surface: var(--color-surface-alt, oklch(.975 .005 260));--drop-radius: var(--radius-md, .5rem);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--drop-accent: var(--color-primary, oklch(.32 .09 258))}:host([data-accent=\"secondary\"]){--drop-accent: var(--color-secondary, oklch(.55 .12 40))}:host([data-accent=\"accent\"]){--drop-accent: var(--color-accent, oklch(.64 .2 50))}:host([data-accent=\"success\"]){--drop-accent: var(--color-success, oklch(.55 .18 145))}:host([data-accent=\"warning\"]){--drop-accent: var(--color-warning, oklch(.68 .18 75))}:host([data-accent=\"danger\"]){--drop-accent: var(--color-danger, oklch(.55 .22 25))}:host([data-accent=\"info\"]){--drop-accent: var(--color-info, oklch(.55 .15 235))}:host.has-error input{border-color:var(--color-danger, oklch(.55 .25 25))!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger, oklch(.55 .25 25)) 20%,transparent)!important}.ms-fade-in{animation:msIn .2s ease}.ms-fade-out{animation:msOut .15s ease forwards}@keyframes msIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes msOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}.ms-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 8px;font-size:.75rem;border-radius:9999px;white-space:nowrap;background:color-mix(in srgb,var(--drop-accent) 15%,transparent);color:var(--drop-accent);line-height:1.5}.ms-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit;font-size:10px;transition:background .15s}.ms-chip-remove:hover{background:color-mix(in srgb,var(--drop-accent) 20%,transparent)}.ms-option.selected{background-color:var(--color-accent)!important;color:var(--color-primary-inverse, oklch(.99 0 0))!important}\n"] }]
|
|
873
873
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
874
874
|
|
|
875
875
|
class PasswordInputComponent {
|
|
@@ -916,7 +916,7 @@ class PasswordInputComponent {
|
|
|
916
916
|
this._touched.set(true);
|
|
917
917
|
}
|
|
918
918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--password-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n [class]=\"_toggleCls()\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PasswordInputComponent, isStandalone: true, selector: "app-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--password-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n [class]=\"_toggleCls()\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
920
920
|
}
|
|
921
921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
922
922
|
type: Component,
|
|
@@ -926,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
926
926
|
'[class.has-error]': 'error()',
|
|
927
927
|
'[style.--password-accent]': '_rawAccent',
|
|
928
928
|
'[style.width]': '_width',
|
|
929
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n [class]=\"_toggleCls()\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
929
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--password-bg)] border border-[var(--password-border)] rounded-[var(--password-radius)] text-[var(--password-text)] font-[var(--font-sans)] placeholder:text-[var(--password-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--password-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--password-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n [attr.type]=\"_type()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (!hideToggle()) {\n <button\n [class]=\"_toggleCls()\"\n type=\"button\"\n (click)=\"toggleVisibility()\"\n [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n >\n <i [class]=\"visible() ? 'pi pi-eye-slash' : 'pi pi-eye'\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--password-accent: var(--color-primary);--password-bg: var(--color-surface);--password-border: var(--color-border);--password-text: var(--color-text);--password-muted: var(--color-text-muted);--password-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--password-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--password-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--password-accent: var(--color-accent)}:host([data-accent=\"success\"]){--password-accent: var(--color-success)}:host([data-accent=\"warning\"]){--password-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--password-accent: var(--color-danger)}:host([data-accent=\"info\"]){--password-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
930
930
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
931
931
|
|
|
932
932
|
class SearchInputComponent {
|
|
@@ -966,7 +966,7 @@ class SearchInputComponent {
|
|
|
966
966
|
this._touched.set(true);
|
|
967
967
|
}
|
|
968
968
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
969
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--search-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--search-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"relative flex items-center w-full\">\n <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
970
970
|
}
|
|
971
971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
972
972
|
type: Component,
|
|
@@ -976,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
976
976
|
'[class.has-error]': 'error()',
|
|
977
977
|
'[style.--search-accent]': '_rawAccent',
|
|
978
978
|
'[style.width]': '_width',
|
|
979
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
979
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"relative flex items-center w-full\">\n <span [class]=\"_iconCls()\" aria-hidden=\"true\">\n <i class=\"pi pi-search\"></i>\n </span>\n\n <input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--search-bg)] border border-[var(--search-border)] rounded-[var(--search-radius)] text-[var(--search-text)] font-[var(--font-sans)] placeholder:text-[var(--search-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--search-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--search-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"search\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (value() && !disabled()) {\n <button class=\"absolute right-2 flex items-center justify-center w-6 h-6 p-0 border-none rounded-full bg-transparent cursor-pointer text-[var(--search-muted)] transition-[color,background] duration-150 hover:text-[var(--search-text)] hover:bg-[var(--color-surface-alt)]\" type=\"button\" (click)=\"value.set('')\" aria-label=\"Clear search\">\n <i class=\"pi pi-times\"></i>\n </button>\n }\n</label>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--search-accent: var(--color-primary);--search-bg: var(--color-surface);--search-border: var(--color-border);--search-text: var(--color-text);--search-muted: var(--color-text-muted);--search-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--search-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--search-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--search-accent: var(--color-accent)}:host([data-accent=\"success\"]){--search-accent: var(--color-success)}:host([data-accent=\"warning\"]){--search-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--search-accent: var(--color-danger)}:host([data-accent=\"info\"]){--search-accent: var(--color-info)}.search-input::-webkit-search-decoration,.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-results-button,.search-input::-webkit-search-results-decoration{display:none}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
980
980
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
981
981
|
|
|
982
982
|
class TextInputComponent {
|
|
@@ -1010,7 +1010,7 @@ class TextInputComponent {
|
|
|
1010
1010
|
this._touched.set(true);
|
|
1011
1011
|
}
|
|
1012
1012
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1013
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--text-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "style.--text-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1014
1014
|
}
|
|
1015
1015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1016
1016
|
type: Component,
|
|
@@ -1020,7 +1020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1020
1020
|
'[class.has-error]': 'error()',
|
|
1021
1021
|
'[style.--text-accent]': '_rawAccent',
|
|
1022
1022
|
'[style.width]': '_width',
|
|
1023
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [":host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1023
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n class=\"w-full outline-none transition-[border-color,box-shadow] duration-200 ease bg-[var(--text-bg)] border border-[var(--text-border)] rounded-[var(--text-radius)] text-[var(--text-text)] font-[var(--font-sans)] placeholder:text-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed focus:border-[var(--text-accent)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--text-accent)_20%,transparent)]\"\n [class]=\"_inputSizeCls()\"\n type=\"text\"\n [attr.placeholder]=\"placeholder()\"\n [attr.disabled]=\"disabled() ? true : null\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n/>\n\n@if (hint() && !error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-text-muted)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)] whitespace-nowrap overflow-hidden text-ellipsis\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid value' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--text-accent: var(--color-primary);--text-bg: var(--color-surface);--text-border: var(--color-border);--text-text: var(--color-text);--text-muted: var(--color-text-muted);--text-radius: var(--radius-md);position:relative;display:inline-block;padding-bottom:1.375rem}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-accent=\"primary\"]){--text-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--text-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--text-accent: var(--color-accent)}:host([data-accent=\"success\"]){--text-accent: var(--color-success)}:host([data-accent=\"warning\"]){--text-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--text-accent: var(--color-danger)}:host([data-accent=\"info\"]){--text-accent: var(--color-info)}:host.has-error input{border-color:var(--color-danger)!important}:host.has-error input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,transparent)!important}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1024
1024
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1025
1025
|
|
|
1026
1026
|
class ToggleComponent {
|
|
@@ -1049,7 +1049,7 @@ class ToggleComponent {
|
|
|
1049
1049
|
this.checked.update(v => !v);
|
|
1050
1050
|
}
|
|
1051
1051
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1052
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--toggle-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"toggle-field\">\n @if (label()) {\n <span class=\"toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1052
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToggleComponent, isStandalone: true, selector: "app-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "attr.data-size": "_size", "attr.data-accent": "_accentKey", "class.has-error": "error()", "class.is-checked": "checked()", "style.--toggle-accent": "_rawAccent", "style.width": "_width" } }, ngImport: i0, template: "<label class=\"toggle-field\">\n @if (label()) {\n <span class=\"toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1053
1053
|
}
|
|
1054
1054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1055
1055
|
type: Component,
|
|
@@ -1060,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1060
1060
|
'[class.is-checked]': 'checked()',
|
|
1061
1061
|
'[style.--toggle-accent]': '_rawAccent',
|
|
1062
1062
|
'[style.width]': '_width',
|
|
1063
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"toggle-field\">\n @if (label()) {\n <span class=\"toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1063
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"toggle-field\">\n @if (label()) {\n <span class=\"toggle-label\">{{ label() }}</span>\n }\n\n <button\n class=\"toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"toggle-knob\"></span>\n </button>\n</label>\n\n@if (hint() && !error()) {\n <span class=\"field-hint\" animate.enter=\"hint-enter\" animate.leave=\"hint-leave\">{{ hint() }}</span>\n}\n@if (error()) {\n <span class=\"field-error\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--toggle-accent: var(--color-primary);--toggle-bg: var(--color-text-muted);--toggle-knob: var(--color-surface);--toggle-knob-border: var(--color-border-light);--toggle-muted: var(--color-text-muted);--toggle-text: var(--color-text);--toggle-radius: var(--radius-full);position:relative;display:inline-flex;flex-direction:column;padding-bottom:1.375rem}.toggle-field{display:inline-flex;align-items:center;gap:.625rem;cursor:default}.toggle-label{font-family:var(--font-sans);font-size:.875rem;color:var(--toggle-text);-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-flex;align-items:center;padding:3px;border:none;border-radius:var(--toggle-radius);background:var(--toggle-bg);cursor:pointer;transition:background .2s ease}.toggle-track:focus-visible{outline:2px solid var(--toggle-accent);outline-offset:2px}.toggle-track:disabled{opacity:.5;cursor:not-allowed}.toggle-knob{position:absolute;top:3px;left:3px;background:var(--toggle-knob);border:1px solid var(--toggle-knob-border);border-radius:50%;transition:left .25s ease;box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent)}:host(.is-checked) .toggle-track{background:var(--toggle-accent)}:host(.is-checked) .toggle-knob{left:calc(100% - var(--toggle-knob-size) - 3px)}.field-hint,.field-error{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-hint{color:var(--color-text-muted)}.field-error{color:var(--color-danger)}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}:host([data-size=\"sm\"]){--toggle-knob-size: .875rem}:host([data-size=\"sm\"]) .toggle-track{width:2.125rem;height:1.25rem}:host([data-size=\"sm\"]) .toggle-knob{width:.875rem;height:.875rem}:host([data-size=\"sm\"]) .toggle-label{font-size:.75rem}:host([data-size=\"md\"]){--toggle-knob-size: 1.125rem}:host([data-size=\"md\"]) .toggle-track{width:2.75rem;height:1.5rem}:host([data-size=\"md\"]) .toggle-knob{width:1.125rem;height:1.125rem}:host([data-size=\"md\"]) .toggle-label{font-size:.875rem}:host([data-size=\"lg\"]){--toggle-knob-size: 1.375rem}:host([data-size=\"lg\"]) .toggle-track{width:3.25rem;height:1.75rem}:host([data-size=\"lg\"]) .toggle-knob{width:1.375rem;height:1.375rem}:host([data-size=\"lg\"]) .toggle-label{font-size:1rem}:host([data-accent=\"primary\"]){--toggle-accent: var(--color-primary)}:host([data-accent=\"secondary\"]){--toggle-accent: var(--color-secondary)}:host([data-accent=\"accent\"]){--toggle-accent: var(--color-accent)}:host([data-accent=\"success\"]){--toggle-accent: var(--color-success)}:host([data-accent=\"warning\"]){--toggle-accent: var(--color-warning)}:host([data-accent=\"danger\"]){--toggle-accent: var(--color-danger)}:host([data-accent=\"info\"]){--toggle-accent: var(--color-info)}:host(.has-error) .toggle-track{outline:2px solid var(--color-danger)}.hint-enter{animation:hint-in .2s ease-out}.error-enter{animation:error-in .25s ease-out}.hint-leave{animation:hint-out .15s ease-in forwards}.error-leave{animation:error-out .2s ease-in forwards}@keyframes hint-in{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}@keyframes hint-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1064
1064
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1065
1065
|
|
|
1066
1066
|
class BadgeComponent {
|
|
@@ -1106,11 +1106,11 @@ class BadgeComponent {
|
|
|
1106
1106
|
return { backgroundColor: this._subtleBg(), color };
|
|
1107
1107
|
}, ...(ngDevMode ? [{ debugName: "_style" }] : []));
|
|
1108
1108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n @if (dot()) {\n <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n }\n <ng-content />\n</span>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n @if (dot()) {\n <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n }\n <ng-content />\n</span>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1110
1110
|
}
|
|
1111
1111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1112
1112
|
type: Component,
|
|
1113
|
-
args: [{ selector: 'app-badge', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n @if (dot()) {\n <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n }\n <ng-content />\n</span>\n", styles: [":host{display:inline-flex}\n"] }]
|
|
1113
|
+
args: [{ selector: 'app-badge', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"inline-flex items-center gap-1 font-medium rounded-[var(--radius-sm,0.25rem)] whitespace-nowrap\" [style]=\"_style()\" [class]=\"_sizeCls()\">\n @if (dot()) {\n <span class=\"rounded-full shrink-0\" style=\"width:6px;height:6px;background-color:currentColor\"></span>\n }\n <ng-content />\n</span>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:inline-flex}\n"] }]
|
|
1114
1114
|
}], propDecorators: { accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
|
|
1115
1115
|
|
|
1116
1116
|
class BannerSliderComponent {
|
|
@@ -1169,11 +1169,11 @@ class BannerSliderComponent {
|
|
|
1169
1169
|
dx > 0 ? this._prev() : this._next();
|
|
1170
1170
|
}
|
|
1171
1171
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BannerSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1172
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BannerSliderComponent, isStandalone: true, selector: "app-banner-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<div\n class=\"bs-track\"\n [style.transform]=\"_transform()\"\n [style.height]=\"_height()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"bs-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n @if (item.ctaLabel) {\n @if (item.ctaLink) {\n <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </a>\n } @else {\n <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </button>\n }\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"bs-dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"bs-dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [":host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BannerSliderComponent, isStandalone: true, selector: "app-banner-slider", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<div\n class=\"bs-track\"\n [style.transform]=\"_transform()\"\n [style.height]=\"_height()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"bs-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n @if (item.ctaLabel) {\n @if (item.ctaLink) {\n <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </a>\n } @else {\n <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </button>\n }\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"bs-dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"bs-dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1173
1173
|
}
|
|
1174
1174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BannerSliderComponent, decorators: [{
|
|
1175
1175
|
type: Component,
|
|
1176
|
-
args: [{ selector: 'app-banner-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"bs-track\"\n [style.transform]=\"_transform()\"\n [style.height]=\"_height()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"bs-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n @if (item.ctaLabel) {\n @if (item.ctaLink) {\n <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </a>\n } @else {\n <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </button>\n }\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"bs-dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"bs-dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [":host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"] }]
|
|
1176
|
+
args: [{ selector: 'app-banner-slider', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"bs-track\"\n [style.transform]=\"_transform()\"\n [style.height]=\"_height()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"bs-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" style=\"height:100%;width:100%;object-fit:cover\" />\n <div class=\"bs-overlay\" [class]=\"_overlayCls()\" [style.justify-content]=\"overlayMode() === 'center' ? 'center' : overlayMode() === 'right' ? 'flex-end' : 'flex-start'\">\n <div class=\"bs-content\" [style.text-align]=\"overlayMode() === 'center' ? 'center' : 'left'\" [style.max-width]=\"overlayMode() === 'center' ? '80%' : '50%'\">\n @if (item.subtitle) { <span class=\"bs-subtitle\">{{ item.subtitle }}</span> }\n @if (item.title) { <h2 class=\"bs-title\">{{ item.title }}</h2> }\n @if (item.description) { <p class=\"bs-desc\">{{ item.description }}</p> }\n @if (item.ctaLabel) {\n @if (item.ctaLink) {\n <a [href]=\"item.ctaLink\" class=\"bs-cta\" (click)=\"ctaClick.emit(item)\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </a>\n } @else {\n <button type=\"button\" class=\"bs-cta\" (click)=\"_onCtaClick()\">\n {{ item.ctaLabel }}\n <i class=\"pi pi-arrow-right\" style=\"font-size:0.6875rem\"></i>\n </button>\n }\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"bs-arrow bs-arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"bs-arrow bs-arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"bs-dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"bs-dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to banner ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--bs-accent: var(--color-accent, oklch(.64 .2 50));--bs-radius: var(--radius-lg, .75rem);display:block;position:relative;overflow:hidden;border-radius:var(--bs-radius);width:100%;-webkit-user-select:none;user-select:none}.bs-track{display:flex;transition:transform .5s cubic-bezier(.25,.1,.25,1);will-change:transform}.bs-slide{flex:0 0 100%;min-width:0;position:relative}.bs-slide img{display:block;width:100%;height:100%;object-fit:cover}.bs-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:2rem 3rem;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 100%)}.bs-content{max-width:50%;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.bs-subtitle{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;opacity:.8}.bs-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:.5rem}.bs-desc{font-size:.875rem;line-height:1.5;opacity:.85;margin-bottom:1rem}.bs-cta{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1.25rem;border:none;border-radius:var(--bs-radius);background:var(--bs-accent);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s;text-decoration:none}.bs-cta:hover{opacity:.85}.bs-arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;font-size:1.125rem;transition:background .15s}.bs-arrow:hover{background:#ffffff59}.bs-arrow-prev{left:.75rem}.bs-arrow-next{right:.75rem}.bs-dots{position:absolute;bottom:1rem;left:50%;translate:-50% 0;display:flex;gap:.5rem;z-index:2}.bs-dot{width:2rem;height:3px;padding:0;border:none;border-radius:2px;background:#ffffff59;cursor:pointer;transition:all .25s}.bs-dot.is-active{background:#fff;width:3rem}\n"] }]
|
|
1177
1177
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], overlayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayMode", required: false }] }], ctaClick: [{ type: i0.Output, args: ["ctaClick"] }] } });
|
|
1178
1178
|
|
|
1179
1179
|
class CarouselComponent {
|
|
@@ -1230,13 +1230,13 @@ class CarouselComponent {
|
|
|
1230
1230
|
}
|
|
1231
1231
|
}
|
|
1232
1232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselComponent, isStandalone: true, selector: "app-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "_height" } }, ngImport: i0, template: "<div\n class=\"carousel-track\"\n [style.transform]=\"_transform()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"carousel-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n @if (item.title || item.description) {\n <div class=\"ca-caption\">\n @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n </div>\n }\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [":host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;transition:background .15s;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CarouselComponent, isStandalone: true, selector: "app-carousel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "_height" } }, ngImport: i0, template: "<div\n class=\"carousel-track\"\n [style.transform]=\"_transform()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"carousel-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n @if (item.title || item.description) {\n <div class=\"ca-caption\">\n @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n </div>\n }\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;transition:background .15s;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1234
1234
|
}
|
|
1235
1235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
1236
1236
|
type: Component,
|
|
1237
1237
|
args: [{ selector: 'app-carousel', imports: [], host: {
|
|
1238
1238
|
'[style.height]': '_height',
|
|
1239
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"carousel-track\"\n [style.transform]=\"_transform()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"carousel-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n @if (item.title || item.description) {\n <div class=\"ca-caption\">\n @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n </div>\n }\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [":host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;transition:background .15s;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"] }]
|
|
1239
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"carousel-track\"\n [style.transform]=\"_transform()\"\n (touchstart)=\"_onTouchStart($event)\"\n (touchend)=\"_onTouchEnd($event)\"\n>\n @for (item of items(); track $index) {\n <div class=\"carousel-slide\">\n <img [src]=\"item.src\" [alt]=\"item.alt || ''\" />\n @if (item.title || item.description) {\n <div class=\"ca-caption\">\n @if (item.title) { <div class=\"ca-caption-title\">{{ item.title }}</div> }\n @if (item.description) { <div class=\"ca-caption-desc\">{{ item.description }}</div> }\n </div>\n }\n </div>\n }\n</div>\n\n@if (showArrows() && items().length > 1) {\n <button type=\"button\" class=\"arrow arrow-prev\" (click)=\"_prev()\" aria-label=\"Previous\">\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n <button type=\"button\" class=\"arrow arrow-next\" (click)=\"_next()\" aria-label=\"Next\">\n <i class=\"pi pi-chevron-right\"></i>\n </button>\n}\n\n@if (showDots() && items().length > 1) {\n <div class=\"dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n class=\"dot\"\n [class.is-active]=\"$index === _index()\"\n (click)=\"_go($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--ca-accent: var(--color-accent, oklch(.64 .2 50));--ca-bg: var(--color-surface-alt, oklch(.94 .005 260));--ca-text: var(--color-text, oklch(.14 .01 260));--ca-muted: var(--color-text-muted, oklch(.48 .01 260));--ca-radius: var(--radius-md, .5rem);display:block;position:relative;overflow:hidden;border-radius:var(--ca-radius);width:100vw;margin-inline:calc(-50vw + 50%);-webkit-user-select:none;user-select:none}.carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.25,.1,.25,1);will-change:transform}.carousel-slide{flex:0 0 100%;min-width:0;height:100%}.carousel-slide img{display:block;width:100%;height:100%;object-fit:cover}.arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-bg) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:var(--ca-text);font-size:1rem;transition:background .15s;opacity:0;transition:opacity .2s,background .15s}:host:hover .arrow{opacity:1}.arrow:hover{background:var(--ca-bg)}.arrow-prev{left:.75rem}.arrow-next{right:.75rem}.dots{position:absolute;bottom:.75rem;left:50%;translate:-50% 0;display:flex;gap:.375rem;z-index:2}.dot{width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;background:color-mix(in srgb,var(--ca-accent) 30%,var(--ca-bg));cursor:pointer;transition:all .2s}.dot.is-active{background:var(--ca-accent);width:1.25rem;border-radius:.25rem}.ca-caption{position:absolute;bottom:2rem;left:1rem;right:1rem;z-index:1;text-align:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}.ca-caption-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.ca-caption-desc{font-size:.8125rem;opacity:.85}\n"] }]
|
|
1240
1240
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }] } });
|
|
1241
1241
|
|
|
1242
1242
|
class EmptyStateComponent {
|
|
@@ -1245,11 +1245,11 @@ class EmptyStateComponent {
|
|
|
1245
1245
|
message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
|
|
1246
1246
|
width = input('', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
1247
1247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EmptyStateComponent, isStandalone: true, selector: "app-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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n @if (icon()) {\n <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n }\n @if (message()) {\n <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n }\n <ng-content />\n</div>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EmptyStateComponent, isStandalone: true, selector: "app-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 }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n @if (icon()) {\n <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n }\n @if (message()) {\n <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n }\n <ng-content />\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1249
1249
|
}
|
|
1250
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
1251
1251
|
type: Component,
|
|
1252
|
-
args: [{ selector: 'app-empty-state', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n @if (icon()) {\n <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n }\n @if (message()) {\n <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n }\n <ng-content />\n</div>\n", styles: [":host{display:contents}\n"] }]
|
|
1252
|
+
args: [{ selector: 'app-empty-state', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center justify-center gap-3 px-4 py-12 text-center\" [style.width]=\"width() || '100%'\">\n @if (icon()) {\n <div class=\"flex items-center justify-center w-14 h-14 rounded-full bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\">\n <i [class]=\"icon()\" class=\"text-lg text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"></i>\n </div>\n }\n @if (title()) {\n <h3 class=\"text-base font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</h3>\n }\n @if (message()) {\n <p class=\"text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))] max-w-xs\">{{ message() }}</p>\n }\n <ng-content />\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}\n"] }]
|
|
1253
1253
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
1254
1254
|
|
|
1255
1255
|
class ImageUploadComponent {
|
|
@@ -1327,13 +1327,13 @@ class ImageUploadComponent {
|
|
|
1327
1327
|
return `${(bytes / 1048576).toFixed(1)} MB`;
|
|
1328
1328
|
}
|
|
1329
1329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1330
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ImageUploadComponent, isStandalone: true, selector: "app-image-upload", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { images: "imagesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "@if (images().length) {\n <div class=\"preview-grid\">\n @for (img of images(); track img.url; let i = $index) {\n <div class=\"preview-item\">\n <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n <div class=\"preview-item-overlay\">\n <button type=\"button\" class=\"remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">×</button>\n </div>\n </div>\n }\n @if (multiple() && images().length < maxFiles()) {\n <button type=\"button\" class=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n <i class=\"pi pi-plus text-lg\"></i>\n <span>Add</span>\n </button>\n }\n </div>\n} @else {\n <div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n >\n <i class=\"pi pi-image text-2xl\"></i>\n <span class=\"text-xs\">{{ placeholder() }}</span>\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} each</span>\n }\n </div>\n}\n\n<input\n #_input\n type=\"file\"\n accept=\"image/*\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n/>\n\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.preview-item:hover .preview-item-overlay{opacity:1}.remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ImageUploadComponent, isStandalone: true, selector: "app-image-upload", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { images: "imagesChange" }, host: { properties: { "attr.data-size": "_size" } }, ngImport: i0, template: "@if (images().length) {\n <div class=\"preview-grid\">\n @for (img of images(); track img.url; let i = $index) {\n <div class=\"preview-item\">\n <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n <div class=\"preview-item-overlay\">\n <button type=\"button\" class=\"remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">×</button>\n </div>\n </div>\n }\n @if (multiple() && images().length < maxFiles()) {\n <button type=\"button\" class=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n <i class=\"pi pi-plus text-lg\"></i>\n <span>Add</span>\n </button>\n }\n </div>\n} @else {\n <div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n >\n <i class=\"pi pi-image text-2xl\"></i>\n <span class=\"text-xs\">{{ placeholder() }}</span>\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} each</span>\n }\n </div>\n}\n\n<input\n #_input\n type=\"file\"\n accept=\"image/*\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n/>\n\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.preview-item:hover .preview-item-overlay{opacity:1}.remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1331
1331
|
}
|
|
1332
1332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageUploadComponent, decorators: [{
|
|
1333
1333
|
type: Component,
|
|
1334
1334
|
args: [{ selector: 'app-image-upload', imports: [], host: {
|
|
1335
1335
|
'[attr.data-size]': '_size',
|
|
1336
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (images().length) {\n <div class=\"preview-grid\">\n @for (img of images(); track img.url; let i = $index) {\n <div class=\"preview-item\">\n <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n <div class=\"preview-item-overlay\">\n <button type=\"button\" class=\"remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">×</button>\n </div>\n </div>\n }\n @if (multiple() && images().length < maxFiles()) {\n <button type=\"button\" class=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n <i class=\"pi pi-plus text-lg\"></i>\n <span>Add</span>\n </button>\n }\n </div>\n} @else {\n <div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n >\n <i class=\"pi pi-image text-2xl\"></i>\n <span class=\"text-xs\">{{ placeholder() }}</span>\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} each</span>\n }\n </div>\n}\n\n<input\n #_input\n type=\"file\"\n accept=\"image/*\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n/>\n\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [":host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.preview-item:hover .preview-item-overlay{opacity:1}.remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1336
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (images().length) {\n <div class=\"preview-grid\">\n @for (img of images(); track img.url; let i = $index) {\n <div class=\"preview-item\">\n <img [src]=\"img.url\" [alt]=\"img.file.name\" />\n <div class=\"preview-item-overlay\">\n <button type=\"button\" class=\"remove-btn\" (click)=\"_removeFile(i)\" aria-label=\"Remove\" title=\"Remove\">×</button>\n </div>\n </div>\n }\n @if (multiple() && images().length < maxFiles()) {\n <button type=\"button\" class=\"add-btn\" (click)=\"_input.click()\" title=\"Add image\">\n <i class=\"pi pi-plus text-lg\"></i>\n <span>Add</span>\n </button>\n }\n </div>\n} @else {\n <div\n class=\"drop-zone\"\n [class.is-dragover]=\"_isDragOver()\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (click)=\"_input.click()\"\n >\n <i class=\"pi pi-image text-2xl\"></i>\n <span class=\"text-xs\">{{ placeholder() }}</span>\n @if (maxSize()) {\n <span class=\"text-[10px] opacity-60\">Max {{ _formatSize(maxSize()) }} each</span>\n }\n </div>\n}\n\n<input\n #_input\n type=\"file\"\n accept=\"image/*\"\n [attr.multiple]=\"multiple() ? true : null\"\n [attr.disabled]=\"disabled() ? true : null\"\n (change)=\"_onFileSelected($event)\"\n style=\"display:none\"\n/>\n\n@if (error()) {\n <span class=\"absolute left-0 right-0 bottom-0 m-0 text-xs font-[var(--font-sans)] text-[var(--color-danger)]\" animate.enter=\"error-enter\" animate.leave=\"error-leave\">{{ errorMessage() || 'Invalid' }}</span>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{--iu-accent: var(--color-accent, oklch(.64 .2 50));--iu-bg: var(--color-surface, oklch(.99 0 0));--iu-border: var(--color-border, oklch(.83 .015 260));--iu-text: var(--color-text, oklch(.14 .01 260));--iu-muted: var(--color-text-muted, oklch(.48 .01 260));--iu-radius: var(--radius-md, .5rem);position:relative;display:block;padding-bottom:1.375rem;width:100%}:host([data-size=\"sm\"]){padding-bottom:1.25rem}:host([data-size=\"lg\"]){padding-bottom:1.5rem}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8rem;padding:1.5rem 1rem;border:2px dashed var(--iu-border);border-radius:var(--iu-radius);background:var(--iu-bg);cursor:pointer;transition:all .2s ease;color:var(--iu-muted);text-align:center}.drop-zone:hover,.drop-zone.is-dragover{border-color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg));color:var(--iu-text)}.drop-zone.has-preview{border-style:solid;border-color:transparent;background:transparent;min-height:auto;padding:0;cursor:default}.drop-zone.has-preview:hover{border-color:transparent;background:transparent}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.preview-item{position:relative;aspect-ratio:1;border-radius:calc(var(--iu-radius) - 2px);overflow:hidden;border:1px solid var(--iu-border);background:color-mix(in srgb,var(--iu-accent) 4%,var(--iu-bg))}.preview-item img{width:100%;height:100%;object-fit:cover;display:block}.preview-item-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;opacity:0;transition:opacity .15s;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,transparent 60%)}.preview-item:hover .preview-item-overlay{opacity:1}.remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:50%;background:#00000080;cursor:pointer;color:#fff;font-size:.875rem;transition:background .15s}.remove-btn:hover{background:var(--color-danger, oklch(.55 .22 25))}.add-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:2px dashed var(--iu-border);border-radius:calc(var(--iu-radius) - 2px);background:transparent;cursor:pointer;color:var(--iu-muted);font-size:.75rem;gap:.25rem;transition:all .2s}.add-btn:hover{border-color:var(--iu-accent);color:var(--iu-accent);background:color-mix(in srgb,var(--iu-accent) 6%,var(--iu-bg))}.error-enter{animation:error-in .25s ease-out}.error-leave{animation:error-out .2s ease-in forwards}@keyframes error-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}@keyframes error-out{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 -6px}}\n"] }]
|
|
1337
1337
|
}], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }, { type: i0.Output, args: ["imagesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
|
|
1338
1338
|
|
|
1339
1339
|
class SkeletonComponent {
|
|
@@ -1381,11 +1381,11 @@ class SkeletonComponent {
|
|
|
1381
1381
|
return '100%';
|
|
1382
1382
|
}
|
|
1383
1383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SkeletonComponent, isStandalone: true, selector: "app-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n @for (item of _items(); track $index) {\n <div\n class=\"skeleton-pulse\"\n [style.height]=\"_baseHeight()\"\n [style.width]=\"_lineWidth($index)\"\n [style.border-radius]=\"_radius()\"\n [style.background-color]=\"_bg()\"\n ></div>\n }\n</div>\n", styles: [":host{display:contents}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SkeletonComponent, isStandalone: true, selector: "app-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n @for (item of _items(); track $index) {\n <div\n class=\"skeleton-pulse\"\n [style.height]=\"_baseHeight()\"\n [style.width]=\"_lineWidth($index)\"\n [style.border-radius]=\"_radius()\"\n [style.background-color]=\"_bg()\"\n ></div>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1385
1385
|
}
|
|
1386
1386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
1387
1387
|
type: Component,
|
|
1388
|
-
args: [{ selector: 'app-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n @for (item of _items(); track $index) {\n <div\n class=\"skeleton-pulse\"\n [style.height]=\"_baseHeight()\"\n [style.width]=\"_lineWidth($index)\"\n [style.border-radius]=\"_radius()\"\n [style.background-color]=\"_bg()\"\n ></div>\n }\n</div>\n", styles: [":host{display:contents}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
|
|
1388
|
+
args: [{ selector: 'app-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2\" [style.width]=\"_baseWidth()\">\n @for (item of _items(); track $index) {\n <div\n class=\"skeleton-pulse\"\n [style.height]=\"_baseHeight()\"\n [style.width]=\"_lineWidth($index)\"\n [style.border-radius]=\"_radius()\"\n [style.background-color]=\"_bg()\"\n ></div>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.skeleton-pulse{animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
|
|
1389
1389
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }] } });
|
|
1390
1390
|
|
|
1391
1391
|
class TableSkeletonComponent {
|
|
@@ -1425,11 +1425,11 @@ class TableSkeletonComponent {
|
|
|
1425
1425
|
}
|
|
1426
1426
|
}
|
|
1427
1427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableSkeletonComponent, isStandalone: true, selector: "app-table-skeleton", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr>\n @for (col of _cols(); track $index) {\n <th\n class=\"px-3 py-2.5\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.width]=\"_colWidth()[$index]\"\n >\n <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" style=\"height:14px;width:60%\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _rowArr(); track $index) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n @for (col of _cols(); track $index) {\n <td class=\"px-3 py-2.5\">\n <div\n class=\"skeleton-shimmer\"\n [class]=\"_shapeClass(col.shape)\"\n [style]=\"_shapeSize(col.shape)\"\n [class.mx-auto]=\"col.shape === 'circle'\"\n ></div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableSkeletonComponent, isStandalone: true, selector: "app-table-skeleton", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr>\n @for (col of _cols(); track $index) {\n <th\n class=\"px-3 py-2.5\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.width]=\"_colWidth()[$index]\"\n >\n <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" style=\"height:14px;width:60%\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _rowArr(); track $index) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n @for (col of _cols(); track $index) {\n <td class=\"px-3 py-2.5\">\n <div\n class=\"skeleton-shimmer\"\n [class]=\"_shapeClass(col.shape)\"\n [style]=\"_shapeSize(col.shape)\"\n [class.mx-auto]=\"col.shape === 'circle'\"\n ></div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1429
1429
|
}
|
|
1430
1430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableSkeletonComponent, decorators: [{
|
|
1431
1431
|
type: Component,
|
|
1432
|
-
args: [{ selector: 'app-table-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr>\n @for (col of _cols(); track $index) {\n <th\n class=\"px-3 py-2.5\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.width]=\"_colWidth()[$index]\"\n >\n <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" style=\"height:14px;width:60%\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _rowArr(); track $index) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n @for (col of _cols(); track $index) {\n <td class=\"px-3 py-2.5\">\n <div\n class=\"skeleton-shimmer\"\n [class]=\"_shapeClass(col.shape)\"\n [style]=\"_shapeSize(col.shape)\"\n [class.mx-auto]=\"col.shape === 'circle'\"\n ></div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
|
|
1432
|
+
args: [{ selector: 'app-table-skeleton', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overflow-hidden rounded-[var(--radius-lg,0.75rem)] border border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <table class=\"w-full border-collapse\">\n <thead>\n <tr>\n @for (col of _cols(); track $index) {\n <th\n class=\"px-3 py-2.5\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.width]=\"_colWidth()[$index]\"\n >\n <div class=\"skeleton-shimmer rounded-[var(--radius-sm,0.25rem)]\" style=\"height:14px;width:60%\"></div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _rowArr(); track $index) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n @for (col of _cols(); track $index) {\n <td class=\"px-3 py-2.5\">\n <div\n class=\"skeleton-shimmer\"\n [class]=\"_shapeClass(col.shape)\"\n [style]=\"_shapeSize(col.shape)\"\n [class.mx-auto]=\"col.shape === 'circle'\"\n ></div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:block}.skeleton-shimmer{background:var(--color-surface-alt, oklch(.975 .005 260));animation:skeletonPulse 1.5s ease-in-out infinite}thead .skeleton-shimmer{background:#fff3}@keyframes skeletonPulse{0%,to{opacity:1}50%{opacity:.4}}\n"] }]
|
|
1433
1433
|
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
|
|
1434
1434
|
|
|
1435
1435
|
class TooltipComponent {
|
|
@@ -1454,14 +1454,14 @@ class TooltipComponent {
|
|
|
1454
1454
|
this._visible.set(false);
|
|
1455
1455
|
}
|
|
1456
1456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()" } }, ngImport: i0, template: "<div data-tip-content\n class=\"truncate\"\n>\n <ng-content />\n</div>\n@if (_visible()) {\n <div class=\"tooltip-panel tooltip-{{ position() }}\"\n animate.enter=\"tip-enter\"\n animate.leave=\"tip-leave\"\n >\n {{ _tipText() }}\n </div>\n}\n", styles: [":host{position:relative;display:inline-block;max-width:100%}.tooltip-panel{position:absolute;z-index:999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()" } }, ngImport: i0, template: "<div data-tip-content\n class=\"truncate\"\n>\n <ng-content />\n</div>\n@if (_visible()) {\n <div class=\"tooltip-panel tooltip-{{ position() }}\"\n animate.enter=\"tip-enter\"\n animate.leave=\"tip-leave\"\n >\n {{ _tipText() }}\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{position:relative;display:inline-block;max-width:100%}.tooltip-panel{position:absolute;z-index:999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1458
1458
|
}
|
|
1459
1459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1460
1460
|
type: Component,
|
|
1461
1461
|
args: [{ selector: 'app-tooltip', imports: [], host: {
|
|
1462
1462
|
'(mouseenter)': '_onMouseEnter()',
|
|
1463
1463
|
'(mouseleave)': '_onMouseLeave()',
|
|
1464
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div data-tip-content\n class=\"truncate\"\n>\n <ng-content />\n</div>\n@if (_visible()) {\n <div class=\"tooltip-panel tooltip-{{ position() }}\"\n animate.enter=\"tip-enter\"\n animate.leave=\"tip-leave\"\n >\n {{ _tipText() }}\n </div>\n}\n", styles: [":host{position:relative;display:inline-block;max-width:100%}.tooltip-panel{position:absolute;z-index:999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
1464
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div data-tip-content\n class=\"truncate\"\n>\n <ng-content />\n</div>\n@if (_visible()) {\n <div class=\"tooltip-panel tooltip-{{ position() }}\"\n animate.enter=\"tip-enter\"\n animate.leave=\"tip-leave\"\n >\n {{ _tipText() }}\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{position:relative;display:inline-block;max-width:100%}.tooltip-panel{position:absolute;z-index:999;pointer-events:none;padding:4px 8px;font-size:.75rem;line-height:1.25;border-radius:4px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis;background:var(--color-text, oklch(.14 .01 260));color:var(--color-surface, oklch(.99 0 0))}.tooltip-top{bottom:100%;left:50%;translate:-50% 0;margin-bottom:4px}.tooltip-bottom{top:100%;left:50%;translate:-50% 0;margin-top:4px}.tooltip-left{right:100%;top:50%;translate:0 -50%;margin-right:4px}.tooltip-right{left:100%;top:50%;translate:0 -50%;margin-left:4px}.tip-enter{animation:tipIn .12s ease-out}.tip-leave{animation:tipOut .08s ease-in forwards}@keyframes tipIn{0%{opacity:0}to{opacity:1}}@keyframes tipOut{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
1465
1465
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }] } });
|
|
1466
1466
|
|
|
1467
1467
|
class TableComponent {
|
|
@@ -1822,7 +1822,7 @@ class TableComponent {
|
|
|
1822
1822
|
}
|
|
1823
1823
|
_trackByIndex(index) { return index; }
|
|
1824
1824
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"overflow-x-auto relative rounded-md\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"w-full border-collapse\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n class=\"cursor-pointer\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.cursor-pointer]=\"col.sortable && sortable()\"\n [class.select-none]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div\n class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n [style.background-size]=\"'100% 40%'\"\n [style.background-repeat]=\"'no-repeat'\"\n [style.background-position]=\"'center'\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"flex items-center flex-wrap gap-1.5\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"relative ml-auto\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (col of columns(); track col.key) {\n <label\n class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"relative\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n @if (_exportOpen()) {\n <div\n class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n >{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <input type=\"checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n class=\"cursor-pointer\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi text-[10px]\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n >\n @if (col.actions) {\n <div class=\"flex items-center gap-1\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"text-xs\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n @if (col.truncate) {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n } @else {\n {{ _cellLabel(row, col) }}\n }\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <td [attr.colspan]=\"_colCount()\" class=\"p-0\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"border-t-2 font-medium\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"px-3 py-2.5 text-sm\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"flex items-center gap-0.5\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [":host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1825
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionKey: { classPropertyName: "selectionKey", publicName: "selectionKey", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, columnToggle: { classPropertyName: "columnToggle", publicName: "columnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectedRows: "selectedRows" }, host: { listeners: { "document:mousemove": "_onDocMouseMove($event)", "document:mouseup": "_onDocMouseUp()", "document:click": "_onDocClick($event)" } }, queries: [{ propertyName: "rowDetail", first: true, predicate: ["rowDetail"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"overflow-x-auto relative rounded-md\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"w-full border-collapse\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n class=\"cursor-pointer\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.cursor-pointer]=\"col.sortable && sortable()\"\n [class.select-none]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div\n class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n [style.background-size]=\"'100% 40%'\"\n [style.background-repeat]=\"'no-repeat'\"\n [style.background-position]=\"'center'\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"flex items-center flex-wrap gap-1.5\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"relative ml-auto\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (col of columns(); track col.key) {\n <label\n class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"relative\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n @if (_exportOpen()) {\n <div\n class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n >{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <input type=\"checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n class=\"cursor-pointer\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi text-[10px]\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n >\n @if (col.actions) {\n <div class=\"flex items-center gap-1\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"text-xs\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n @if (col.truncate) {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n } @else {\n {{ _cellLabel(row, col) }}\n }\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <td [attr.colspan]=\"_colCount()\" class=\"p-0\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"border-t-2 font-medium\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"px-3 py-2.5 text-sm\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"flex items-center gap-0.5\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\n"], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "app-search-input", inputs: ["value", "placeholder", "size", "disabled", "accentColor", "hint", "errorMessage", "error", "width"], outputs: ["valueChange"] }, { kind: "component", type: DropDownComponent, selector: "app-drop-down", inputs: ["value", "options", "placeholder", "size", "disabled", "accentColor", "searchable", "hint", "errorMessage", "error", "width", "config"], outputs: ["valueChange"] }, { kind: "component", type: TableSkeletonComponent, selector: "app-table-skeleton", inputs: ["rows", "columns"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "app-tooltip", inputs: ["text", "position", "disabled", "alwaysShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1826
1826
|
}
|
|
1827
1827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TableComponent, decorators: [{
|
|
1828
1828
|
type: Component,
|
|
@@ -1830,7 +1830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
1830
1830
|
'(document:mousemove)': '_onDocMouseMove($event)',
|
|
1831
1831
|
'(document:mouseup)': '_onDocMouseUp()',
|
|
1832
1832
|
'(document:click)': '_onDocClick($event)',
|
|
1833
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"overflow-x-auto relative rounded-md\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"w-full border-collapse\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n class=\"cursor-pointer\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.cursor-pointer]=\"col.sortable && sortable()\"\n [class.select-none]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div\n class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n [style.background-size]=\"'100% 40%'\"\n [style.background-repeat]=\"'no-repeat'\"\n [style.background-position]=\"'center'\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"flex items-center flex-wrap gap-1.5\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"relative ml-auto\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (col of columns(); track col.key) {\n <label\n class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"relative\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n @if (_exportOpen()) {\n <div\n class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n >{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <input type=\"checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n class=\"cursor-pointer\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi text-[10px]\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n >\n @if (col.actions) {\n <div class=\"flex items-center gap-1\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"text-xs\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n @if (col.truncate) {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n } @else {\n {{ _cellLabel(row, col) }}\n }\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <td [attr.colspan]=\"_colCount()\" class=\"p-0\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"border-t-2 font-medium\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"px-3 py-2.5 text-sm\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"flex items-center gap-0.5\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [":host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\n"] }]
|
|
1833
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n <app-table-skeleton [rows]=\"skeletonRows()\" [columns]=\"_skeletonCols()\" />\n} @else {\n <div class=\"overflow-x-auto relative rounded-md\"\n [style.width]=\"width() || '100%'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <table class=\"w-full border-collapse\" style=\"table-layout:fixed\">\n <thead\n [style.position]=\"stickyHeader() ? 'sticky' : undefined\"\n [style.top]=\"stickyHeader() ? '0' : undefined\"\n [style.z-index]=\"stickyHeader() ? '2' : undefined\"\n >\n <tr>\n @if (selectable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isAllSelected()\"\n (change)=\"_toggleSelectAll()\"\n class=\"cursor-pointer\"\n />\n </th>\n }\n @if (expandable()) {\n <th class=\"relative px-3 py-2.5 text-xs whitespace-nowrap text-center\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n style=\"width:40px\"\n ></th>\n }\n @for (col of _displayColumns(); track col.key) {\n <th\n class=\"group relative px-3 py-2.5 text-xs font-semibold uppercase tracking-wider whitespace-nowrap\"\n [style.text-align]=\"col.align || 'left'\"\n [style.width]=\"_colWidth(col)\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n [class.cursor-pointer]=\"col.sortable && sortable()\"\n [class.select-none]=\"col.sortable && sortable()\"\n (click)=\"sortable() && col.sortable && _toggleSort(col.key)\"\n >\n {{ col.header }}\n @if (col.sortable && sortable()) {\n <i class=\"pi ml-1.5 text-[10px] align-middle\" [class]=\"_sortIcon(col.key)\"></i>\n }\n @if (resizable()) {\n <div\n class=\"absolute right-0 top-0 bottom-0 w-2 cursor-col-resize z-10 transition-opacity duration-150 opacity-30 hover:opacity-100 group-hover:opacity-80\"\n [style.background]=\"'linear-gradient(90deg,transparent 33%,var(--color-accent,oklch(0.64 0.2 50)) 33%,var(--color-accent,oklch(0.64 0.2 50)) 66%,transparent 66%)'\"\n [style.background-size]=\"'100% 40%'\"\n [style.background-repeat]=\"'no-repeat'\"\n [style.background-position]=\"'center'\"\n (mousedown)=\"_onResizeStart($event,col.key)\"\n ></div>\n }\n </th>\n }\n </tr>\n @if (searchable() || _filterCols().length || exportable()) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n [style.border-bottom]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.padding]=\"'8px 12px'\"\n [style.vertical-align]=\"'middle'\"\n >\n <div class=\"flex items-center flex-wrap gap-1.5\">\n @if (searchable()) {\n <app-search-input\n (valueChange)=\"_onSearch($event)\"\n placeholder=\"Search table...\"\n size=\"sm\"\n style=\"padding-bottom:0\"\n />\n }\n @for (col of _filterCols(); track col.key) {\n <app-drop-down\n [options]=\"col.filterOptions ?? []\"\n [placeholder]=\"'Filter ' + col.header\"\n size=\"sm\"\n [searchable]=\"true\"\n [config]=\"{ appendToParent: true }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_setFilter(col.key, $event)\"\n />\n }\n @if (columnToggle()) {\n <div data-col-toggle class=\"relative ml-auto\">\n <button\n type=\"button\"\n (click)=\"_columnToggleOpen.set(!_columnToggleOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-list text-[10px]\"></i> Columns</button>\n @if (_columnToggleOpen()) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[140px] p-1.5 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (col of columns(); track col.key) {\n <label\n class=\"flex items-center gap-2 px-2 py-1.5 text-xs rounded cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n <input type=\"checkbox\"\n [checked]=\"_isColumnVisible(col.key)\"\n (change)=\"_toggleColumn(col.key)\"\n />\n {{ col.header }}\n </label>\n }\n </div>\n }\n </div>\n }\n @if (exportable()) {\n <div data-export-toggle class=\"relative\">\n <button\n type=\"button\"\n (click)=\"_exportOpen.set(!_exportOpen())\"\n class=\"inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md border cursor-pointer transition-colors hover:opacity-80\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n ><i class=\"pi pi-download text-[10px]\"></i> Export</button>\n @if (_exportOpen()) {\n <div\n class=\"absolute top-full left-0 mt-1 min-w-[100px] p-1 rounded-md shadow-lg z-50 border\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n @for (fmt of ['Excel', 'PDF']; track fmt) {\n <button\n type=\"button\"\n (click)=\"fmt === 'Excel' ? _exportExcel() : _exportPdf(); _exportOpen.set(false)\"\n class=\"export-opt block w-full text-left px-2 py-1.5 text-xs rounded cursor-pointer border-none transition-colors\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"'transparent'\"\n >{{ fmt }}</button>\n }\n </div>\n }\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </thead>\n <tbody>\n @if (_displayRows().length === 0) {\n <tr>\n <td [attr.colspan]=\"_colCount()\"\n class=\"px-3 py-8 text-center text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n >{{ emptyMessage() }}</td>\n </tr>\n } @else {\n @for (row of _displayRows(); track _trackByIndex($index); let rowIndex = $index) {\n <tr\n class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))] transition-colors\"\n [class.hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]]=\"hoverable()\"\n [style.background-color]=\"selectable() && _isSelected(row) ? 'color-mix(in srgb,var(--color-primary,oklch(0.32 0.09 258)) 8%,transparent)' : striped() && rowIndex % 2 === 1 ? 'var(--color-surface-alt,oklch(0.975 0.005 260))' : 'transparent'\"\n >\n @if (selectable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <input type=\"checkbox\"\n [checked]=\"_isSelected(row)\"\n (change)=\"_toggleSelect(row)\"\n class=\"cursor-pointer\"\n />\n </td>\n }\n @if (expandable()) {\n <td class=\"px-3 py-2.5 text-center\">\n <button\n type=\"button\"\n (click)=\"_toggleExpand(rowIndex)\"\n class=\"inline-flex items-center justify-center w-6 h-6 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi text-[10px]\" [class.pi-chevron-down]=\"_isExpanded(rowIndex)\" [class.pi-chevron-right]=\"!_isExpanded(rowIndex)\"></i>\n </button>\n </td>\n }\n @for (col of _displayColumns(); track col.key; let colIndex = $index) {\n @let meta = _rowMeta()[rowIndex][colIndex];\n @if (meta.visible) {\n <td\n [attr.rowspan]=\"meta.rowspan > 1 ? meta.rowspan : null\"\n [style.text-align]=\"col.align || 'left'\"\n class=\"px-3 py-2.5 text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"\n >\n @if (col.actions) {\n <div class=\"flex items-center gap-1\">\n @for (action of col.actions; track $index) {\n @if (!action.visible || action.visible(row)) {\n <button\n type=\"button\"\n class=\"inline-flex items-center justify-center gap-1 px-2 py-1 text-xs rounded-md border-none cursor-pointer transition-opacity disabled:cursor-not-allowed\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"action.accentColor ? 'var(--color-' + action.accentColor + ',oklch(0.32 0.09 258))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n [style.opacity]=\"action.disabled?.(row) ? '0.5' : '1'\"\n [disabled]=\"action.disabled?.(row) ?? false\"\n (click)=\"action.click(row)\"\n [title]=\"action.label || ''\"\n >\n @if (action.icon) { <i [class]=\"action.icon\" class=\"text-xs\"></i> }\n @if (action.label) { <span>{{ action.label }}</span> }\n </button>\n }\n }\n </div>\n } @else {\n @if (col.truncate) {\n <app-tooltip position=\"top\" [text]=\"_cellText(row, col)\">\n {{ _cellLabel(row, col) }}\n </app-tooltip>\n } @else {\n {{ _cellLabel(row, col) }}\n }\n }\n </td>\n }\n }\n </tr>\n @if (expandable() && _isExpanded(rowIndex)) {\n <tr class=\"border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <td [attr.colspan]=\"_colCount()\" class=\"p-0\">\n <div [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\">\n @if (rowDetail) {\n <ng-container *ngTemplateOutlet=\"rowDetail; context: { $implicit: row }\" />\n } @else {\n <div class=\"p-3 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">No detail template</div>\n }\n </div>\n </td>\n </tr>\n }\n }\n @if (_footerCols().length) {\n <tr class=\"border-t-2 font-medium\"\n [style.border-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.background-color]=\"'var(--color-surface-alt,oklch(0.975 0.005 260))'\"\n >\n <td [attr.colspan]=\"_colCount()\" class=\"px-3 py-2.5 text-sm\"\n [style.color]=\"'var(--color-text,oklch(0.14 0.01 260))'\"\n >{{ _footerText() }}</td>\n </tr>\n }\n }\n </tbody>\n </table>\n @if (pageable() && _totalPages() > 1) {\n <div class=\"flex items-center justify-between px-3 py-2 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n >\n <div class=\"flex items-center gap-2 text-xs text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <span>{{ _pageInfo().from }}\u2013{{ _pageInfo().to }} of {{ _pageInfo().total }}</span>\n <app-drop-down\n [options]=\"_pageSizeOptions()\"\n [value]=\"'' + _pageSize()\"\n size=\"sm\"\n [config]=\"{ direction: 'up' }\"\n style=\"padding-bottom:0\"\n (valueChange)=\"_onPageSizeChange($event)\"\n />\n </div>\n <div class=\"flex items-center gap-0.5\">\n <button type=\"button\" (click)=\"_goToPage(1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-left text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_page() - 1)\" [disabled]=\"_page() === 1\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-left text-[10px]\"></i></button>\n @for (p of _visiblePages(); track p) {\n <button type=\"button\" (click)=\"_goToPage(p)\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer transition-colors font-medium\"\n [style.background-color]=\"p === _page() ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"p === _page() ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >{{ p }}</button>\n }\n <button type=\"button\" (click)=\"_goToPage(_page() + 1)\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-right text-[10px]\"></i></button>\n <button type=\"button\" (click)=\"_goToPage(_totalPages())\" [disabled]=\"_page() === _totalPages()\"\n class=\"inline-flex items-center justify-center w-7 h-7 text-xs rounded border-none cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-colors\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\" [style.background-color]=\"'transparent'\"\n ><i class=\"pi pi-angle-double-right text-[10px]\"></i></button>\n </div>\n </div>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}[data-col-toggle] label:hover,[data-export-toggle] .export-opt:hover{background-color:var(--color-surface-alt, oklch(.975 .005 260))}\n"] }]
|
|
1834
1834
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionKey", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], columnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], selectedRows: [{ type: i0.Output, args: ["selectedRows"] }], rowDetail: [{
|
|
1835
1835
|
type: ContentChild,
|
|
1836
1836
|
args: ['rowDetail', { read: TemplateRef, static: false }]
|
|
@@ -1872,11 +1872,11 @@ class AlertComponent {
|
|
|
1872
1872
|
}, 200);
|
|
1873
1873
|
}
|
|
1874
1874
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (_show()) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\n [style.background-color]=\"_bg()\"\n [style.border-color]=\"_border()\"\n [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n [class.opacity-0]=\"_isLeaving()\"\n [class.mb-[-3rem]]=\"_isLeaving()\"\n [style.width]=\"width() || 'auto'\"\n role=\"alert\"\n >\n @if (showIcon()) {\n <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n }\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n }\n <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n (click)=\"_dismiss()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n}\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (_show()) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\n [style.background-color]=\"_bg()\"\n [style.border-color]=\"_border()\"\n [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n [class.opacity-0]=\"_isLeaving()\"\n [class.mb-[-3rem]]=\"_isLeaving()\"\n [style.width]=\"width() || 'auto'\"\n role=\"alert\"\n >\n @if (showIcon()) {\n <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n }\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n }\n <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n (click)=\"_dismiss()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1876
1876
|
}
|
|
1877
1877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AlertComponent, decorators: [{
|
|
1878
1878
|
type: Component,
|
|
1879
|
-
args: [{ selector: 'app-alert', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_show()) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\n [style.background-color]=\"_bg()\"\n [style.border-color]=\"_border()\"\n [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n [class.opacity-0]=\"_isLeaving()\"\n [class.mb-[-3rem]]=\"_isLeaving()\"\n [style.width]=\"width() || 'auto'\"\n role=\"alert\"\n >\n @if (showIcon()) {\n <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n }\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n }\n <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n (click)=\"_dismiss()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n}\n", styles: [":host{display:contents}\n"] }]
|
|
1879
|
+
args: [{ selector: 'app-alert', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_show()) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] border\"\n [style.background-color]=\"_bg()\"\n [style.border-color]=\"_border()\"\n [style.transition]=\"'opacity 0.2s ease-out, margin-bottom 0.2s ease-out'\"\n [class.opacity-0]=\"_isLeaving()\"\n [class.mb-[-3rem]]=\"_isLeaving()\"\n [style.width]=\"width() || 'auto'\"\n role=\"alert\"\n >\n @if (showIcon()) {\n <i class=\"mt-0.5 text-sm\" [class]=\"_icon()\" [style.color]=\"_border()\"></i>\n }\n <div class=\"flex-1 min-w-0\">\n @if (title()) {\n <p class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</p>\n }\n <div class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\"><ng-content /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-6 h-6 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 text-[var(--color-text-muted,oklch(0.48 0.01 260))] shrink-0\"\n (click)=\"_dismiss()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}\n"] }]
|
|
1880
1880
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
1881
1881
|
|
|
1882
1882
|
class SpinnerComponent {
|
|
@@ -1954,11 +1954,11 @@ class SpinnerComponent {
|
|
|
1954
1954
|
backgroundColor: this._color(),
|
|
1955
1955
|
}), ...(ngDevMode ? [{ debugName: "_barStyle" }] : []));
|
|
1956
1956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1957
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n class=\"flex-col items-center justify-center\"\n [class.fixed]=\"overlay()\"\n [class.inset-0]=\"overlay()\"\n [class.z-50]=\"overlay()\"\n [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n @switch (variant()) {\n @case ('circle') {\n <div class=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n }\n @case ('dual-ring') {\n <div class=\"relative flex items-center justify-center\">\n <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n <div\n class=\"absolute rounded-full animate-spin\"\n [style]=\"_dualInnerStyle()\"\n style=\"animation-direction: reverse; animation-duration: 1.5s\"\n ></div>\n @if (imageUrl()) {\n <div class=\"absolute flex items-center justify-center\">\n <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n </div>\n }\n </div>\n }\n @case ('dots') {\n <div class=\"flex items-center gap-1.5\">\n @for (dot of [0,1,2]; track dot) {\n <div\n class=\"rounded-full dot-loader\"\n [style]=\"_dotStyle()\"\n [style.animationDelay]=\"dot * 0.15 + 's'\"\n ></div>\n }\n </div>\n }\n @case ('pulse') {\n <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n }\n @case ('bars') {\n <div class=\"flex items-end gap-[3px]\">\n @for (bar of [0,1,2,3,4]; track bar) {\n <div\n class=\"rounded-t-sm bar-loader\"\n [style]=\"_barStyle()\"\n [style.animationDelay]=\"bar * 0.1 + 's'\"\n ></div>\n }\n </div>\n }\n }\n\n @if (text()) {\n <p\n class=\"mt-2 text-xs\"\n [class.text-white]=\"overlay()\"\n [class.animate-pulse]=\"overlay()\"\n [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n >{{ text() }}</p>\n }\n</div>\n", styles: [":host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n class=\"flex-col items-center justify-center\"\n [class.fixed]=\"overlay()\"\n [class.inset-0]=\"overlay()\"\n [class.z-50]=\"overlay()\"\n [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n @switch (variant()) {\n @case ('circle') {\n <div class=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n }\n @case ('dual-ring') {\n <div class=\"relative flex items-center justify-center\">\n <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n <div\n class=\"absolute rounded-full animate-spin\"\n [style]=\"_dualInnerStyle()\"\n style=\"animation-direction: reverse; animation-duration: 1.5s\"\n ></div>\n @if (imageUrl()) {\n <div class=\"absolute flex items-center justify-center\">\n <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n </div>\n }\n </div>\n }\n @case ('dots') {\n <div class=\"flex items-center gap-1.5\">\n @for (dot of [0,1,2]; track dot) {\n <div\n class=\"rounded-full dot-loader\"\n [style]=\"_dotStyle()\"\n [style.animationDelay]=\"dot * 0.15 + 's'\"\n ></div>\n }\n </div>\n }\n @case ('pulse') {\n <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n }\n @case ('bars') {\n <div class=\"flex items-end gap-[3px]\">\n @for (bar of [0,1,2,3,4]; track bar) {\n <div\n class=\"rounded-t-sm bar-loader\"\n [style]=\"_barStyle()\"\n [style.animationDelay]=\"bar * 0.1 + 's'\"\n ></div>\n }\n </div>\n }\n }\n\n @if (text()) {\n <p\n class=\"mt-2 text-xs\"\n [class.text-white]=\"overlay()\"\n [class.animate-pulse]=\"overlay()\"\n [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n >{{ text() }}</p>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1958
1958
|
}
|
|
1959
1959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
1960
1960
|
type: Component,
|
|
1961
|
-
args: [{ selector: 'app-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n class=\"flex-col items-center justify-center\"\n [class.fixed]=\"overlay()\"\n [class.inset-0]=\"overlay()\"\n [class.z-50]=\"overlay()\"\n [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n @switch (variant()) {\n @case ('circle') {\n <div class=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n }\n @case ('dual-ring') {\n <div class=\"relative flex items-center justify-center\">\n <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n <div\n class=\"absolute rounded-full animate-spin\"\n [style]=\"_dualInnerStyle()\"\n style=\"animation-direction: reverse; animation-duration: 1.5s\"\n ></div>\n @if (imageUrl()) {\n <div class=\"absolute flex items-center justify-center\">\n <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n </div>\n }\n </div>\n }\n @case ('dots') {\n <div class=\"flex items-center gap-1.5\">\n @for (dot of [0,1,2]; track dot) {\n <div\n class=\"rounded-full dot-loader\"\n [style]=\"_dotStyle()\"\n [style.animationDelay]=\"dot * 0.15 + 's'\"\n ></div>\n }\n </div>\n }\n @case ('pulse') {\n <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n }\n @case ('bars') {\n <div class=\"flex items-end gap-[3px]\">\n @for (bar of [0,1,2,3,4]; track bar) {\n <div\n class=\"rounded-t-sm bar-loader\"\n [style]=\"_barStyle()\"\n [style.animationDelay]=\"bar * 0.1 + 's'\"\n ></div>\n }\n </div>\n }\n }\n\n @if (text()) {\n <p\n class=\"mt-2 text-xs\"\n [class.text-white]=\"overlay()\"\n [class.animate-pulse]=\"overlay()\"\n [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n >{{ text() }}</p>\n }\n</div>\n", styles: [":host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"] }]
|
|
1961
|
+
args: [{ selector: 'app-spinner', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.display]=\"overlay() ? 'flex' : 'inline-flex'\"\n class=\"flex-col items-center justify-center\"\n [class.fixed]=\"overlay()\"\n [class.inset-0]=\"overlay()\"\n [class.z-50]=\"overlay()\"\n [style.background-color]=\"overlay() ? 'var(--color-backdrop,oklch(0 0 0/0.3))' : 'transparent'\"\n>\n @switch (variant()) {\n @case ('circle') {\n <div class=\"rounded-full animate-spin\" [style]=\"_circleStyle()\"></div>\n }\n @case ('dual-ring') {\n <div class=\"relative flex items-center justify-center\">\n <div class=\"rounded-full animate-spin\" [style]=\"_dualOuterStyle()\"></div>\n <div\n class=\"absolute rounded-full animate-spin\"\n [style]=\"_dualInnerStyle()\"\n style=\"animation-direction: reverse; animation-duration: 1.5s\"\n ></div>\n @if (imageUrl()) {\n <div class=\"absolute flex items-center justify-center\">\n <img [src]=\"imageUrl()\" [style]=\"_imageStyle()\" class=\"opacity-80\" alt=\"\" />\n </div>\n }\n </div>\n }\n @case ('dots') {\n <div class=\"flex items-center gap-1.5\">\n @for (dot of [0,1,2]; track dot) {\n <div\n class=\"rounded-full dot-loader\"\n [style]=\"_dotStyle()\"\n [style.animationDelay]=\"dot * 0.15 + 's'\"\n ></div>\n }\n </div>\n }\n @case ('pulse') {\n <div class=\"rounded-full pulse-loader\" [style]=\"_pulseStyle()\"></div>\n }\n @case ('bars') {\n <div class=\"flex items-end gap-[3px]\">\n @for (bar of [0,1,2,3,4]; track bar) {\n <div\n class=\"rounded-t-sm bar-loader\"\n [style]=\"_barStyle()\"\n [style.animationDelay]=\"bar * 0.1 + 's'\"\n ></div>\n }\n </div>\n }\n }\n\n @if (text()) {\n <p\n class=\"mt-2 text-xs\"\n [class.text-white]=\"overlay()\"\n [class.animate-pulse]=\"overlay()\"\n [class.text-[var(--color-text-muted,oklch(0.48 0.01 260))]]=\"!overlay()\"\n >{{ text() }}</p>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.dot-loader{animation:dotBounce .6s ease-in-out infinite alternate}.pulse-loader{animation:pulseRing 1.5s ease-in-out infinite}.bar-loader{animation:barWave .8s ease-in-out infinite}@keyframes dotBounce{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes barWave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}\n"] }]
|
|
1962
1962
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
|
|
1963
1963
|
|
|
1964
1964
|
class ToastService {
|
|
@@ -2048,11 +2048,11 @@ class ToastComponent {
|
|
|
2048
2048
|
this._toastService.remove(id);
|
|
2049
2049
|
}
|
|
2050
2050
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2051
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n [class]=\"_positionCls()\"\n>\n @for (toast of _toasts(); track toast.id) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n [style.background-color]=\"_getBg(toast.type)\"\n [style.border-color]=\"_getBorder(toast.type)\"\n >\n <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n </div>\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n (click)=\"_remove(toast.id)\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n </div>\n }\n</div>\n", styles: [":host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2051
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n [class]=\"_positionCls()\"\n>\n @for (toast of _toasts(); track toast.id) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n [style.background-color]=\"_getBg(toast.type)\"\n [style.border-color]=\"_getBorder(toast.type)\"\n >\n <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n </div>\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n (click)=\"_remove(toast.id)\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n </div>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2052
2052
|
}
|
|
2053
2053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2054
2054
|
type: Component,
|
|
2055
|
-
args: [{ selector: 'app-toast', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n [class]=\"_positionCls()\"\n>\n @for (toast of _toasts(); track toast.id) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n [style.background-color]=\"_getBg(toast.type)\"\n [style.border-color]=\"_getBorder(toast.type)\"\n >\n <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n </div>\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n (click)=\"_remove(toast.id)\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n </div>\n }\n</div>\n", styles: [":host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"] }]
|
|
2055
|
+
args: [{ selector: 'app-toast', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fixed z-[9999] flex flex-col gap-2 w-72 max-w-[calc(100vw-2rem)] pointer-events-none\"\n [class]=\"_positionCls()\"\n>\n @for (toast of _toasts(); track toast.id) {\n <div\n class=\"flex items-start gap-3 p-3 rounded-[var(--radius-md,0.5rem)] shadow-lg border pointer-events-auto toast-enter\"\n [style.background-color]=\"_getBg(toast.type)\"\n [style.border-color]=\"_getBorder(toast.type)\"\n >\n <i class=\"mt-0.5 text-sm shrink-0\" [class]=\"_getIcon(toast.type)\" [style.color]=\"_getBorder(toast.type)\"></i>\n <div class=\"flex-1 min-w-0\">\n @if (toast.title) {\n <p class=\"text-xs font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.title }}</p>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ toast.message }}</p>\n </div>\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-5 h-5 p-0 border-none bg-transparent cursor-pointer rounded-full hover:opacity-70 shrink-0 text-[var(--color-text-muted,oklch(0.48 0.01 260))]\"\n (click)=\"_remove(toast.id)\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n </div>\n }\n</div>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.toast-enter{animation:toastSlideIn .3s ease-out}@keyframes toastSlideIn{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}\n"] }]
|
|
2056
2056
|
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }] } });
|
|
2057
2057
|
|
|
2058
2058
|
class AccordionPanelComponent {
|
|
@@ -2091,13 +2091,13 @@ class AccordionPanelComponent {
|
|
|
2091
2091
|
this._open();
|
|
2092
2092
|
}
|
|
2093
2093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2094
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionPanelComponent, isStandalone: true, selector: "app-accordion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "'border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-md,0.5rem)] overflow-hidden'" } }, ngImport: i0, template: "<button\n type=\"button\"\n (click)=\"_toggle()\"\n [disabled]=\"disabled()\"\n class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n <span>{{ title() }}</span>\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n</button>\n@if (_visible()) {\n <div\n class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n [class.acc-leave]=\"_isClosing()\"\n >\n <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AccordionPanelComponent, isStandalone: true, selector: "app-accordion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "'border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-md,0.5rem)] overflow-hidden'" } }, ngImport: i0, template: "<button\n type=\"button\"\n (click)=\"_toggle()\"\n [disabled]=\"disabled()\"\n class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n <span>{{ title() }}</span>\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n</button>\n@if (_visible()) {\n <div\n class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n [class.acc-leave]=\"_isClosing()\"\n >\n <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2095
2095
|
}
|
|
2096
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AccordionPanelComponent, decorators: [{
|
|
2097
2097
|
type: Component,
|
|
2098
2098
|
args: [{ selector: 'app-accordion-panel', imports: [], host: {
|
|
2099
2099
|
'[class]': "'border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-md,0.5rem)] overflow-hidden'",
|
|
2100
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n (click)=\"_toggle()\"\n [disabled]=\"disabled()\"\n class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n <span>{{ title() }}</span>\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n</button>\n@if (_visible()) {\n <div\n class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n [class.acc-leave]=\"_isClosing()\"\n >\n <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"] }]
|
|
2100
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n type=\"button\"\n (click)=\"_toggle()\"\n [disabled]=\"disabled()\"\n class=\"inline-flex items-center justify-between w-full px-3 py-2.5 text-sm font-medium border-none bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text,oklch(0.14 0.01 260))] transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n>\n <span>{{ title() }}</span>\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isOpen() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n</button>\n@if (_visible()) {\n <div\n class=\"origin-top border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\"\n [class.acc-enter]=\"_isOpen() && !_isClosing()\"\n [class.acc-leave]=\"_isClosing()\"\n >\n <div class=\"px-3 py-2.5 text-sm text-[var(--color-text-muted,oklch(0.48 0.01 260))]\">\n <ng-content />\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:block}.acc-enter{animation:accSlideIn .2s ease-out}.acc-leave{animation:accSlideOut .15s ease-in forwards}@keyframes accSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}@keyframes accSlideOut{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}\n"] }]
|
|
2101
2101
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
|
|
2102
2102
|
|
|
2103
2103
|
class AccordionComponent {
|
|
@@ -2153,13 +2153,13 @@ class NavComponent {
|
|
|
2153
2153
|
this._openDropdown.set(null);
|
|
2154
2154
|
}
|
|
2155
2155
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: NavComponent, isStandalone: true, selector: "app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { listeners: { "document:click": "_onDocClick()" } }, ngImport: i0, template: "<nav\n class=\"h-16 z-50 flex items-center px-5 gap-3\"\n [class.fixed]=\"fixed()\"\n [class.top-0]=\"fixed()\"\n [class.left-0]=\"fixed()\"\n [class.right-0]=\"fixed()\"\n [class.relative]=\"!fixed()\"\n [class.rounded-md]=\"!fixed()\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n>\n <div class=\"flex items-center gap-2 shrink-0\">\n <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n </div>\n\n <button\n type=\"button\"\n (click)=\"_toggleMobile()\"\n class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n [style.color]=\"'inherit'\"\n >\n <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n </button>\n\n <!-- Desktop -->\n <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n @for (item of items(); track item.id) {\n <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span>{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n animate.enter=\"nav-dd-in\"\n animate.leave=\"nav-dd-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Mobile -->\n <div\n class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n >\n @for (item of items(); track item.id) {\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span class=\"flex-1\">{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\n animate.enter=\"nav-mob-in\"\n animate.leave=\"nav-mob-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\n [style.color]=\"'rgba(255,255,255,0.85)'\"\n [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n [style.color]=\"'inherit'\"\n [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n >\n <i class=\"pi pi-sign-out text-sm\"></i>\n <span class=\"hidden sm:inline\">Logout</span>\n </button>\n</nav>\n", styles: [":host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: NavComponent, isStandalone: true, selector: "app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, brandText: { classPropertyName: "brandText", publicName: "brandText", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { listeners: { "document:click": "_onDocClick()" } }, ngImport: i0, template: "<nav\n class=\"h-16 z-50 flex items-center px-5 gap-3\"\n [class.fixed]=\"fixed()\"\n [class.top-0]=\"fixed()\"\n [class.left-0]=\"fixed()\"\n [class.right-0]=\"fixed()\"\n [class.relative]=\"!fixed()\"\n [class.rounded-md]=\"!fixed()\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n>\n <div class=\"flex items-center gap-2 shrink-0\">\n <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n </div>\n\n <button\n type=\"button\"\n (click)=\"_toggleMobile()\"\n class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n [style.color]=\"'inherit'\"\n >\n <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n </button>\n\n <!-- Desktop -->\n <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n @for (item of items(); track item.id) {\n <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span>{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n animate.enter=\"nav-dd-in\"\n animate.leave=\"nav-dd-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Mobile -->\n <div\n class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n >\n @for (item of items(); track item.id) {\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span class=\"flex-1\">{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\n animate.enter=\"nav-mob-in\"\n animate.leave=\"nav-mob-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\n [style.color]=\"'rgba(255,255,255,0.85)'\"\n [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n [style.color]=\"'inherit'\"\n [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n >\n <i class=\"pi pi-sign-out text-sm\"></i>\n <span class=\"hidden sm:inline\">Logout</span>\n </button>\n</nav>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2157
2157
|
}
|
|
2158
2158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: NavComponent, decorators: [{
|
|
2159
2159
|
type: Component,
|
|
2160
2160
|
args: [{ selector: 'app-nav', imports: [], host: {
|
|
2161
2161
|
'(document:click)': '_onDocClick()',
|
|
2162
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"h-16 z-50 flex items-center px-5 gap-3\"\n [class.fixed]=\"fixed()\"\n [class.top-0]=\"fixed()\"\n [class.left-0]=\"fixed()\"\n [class.right-0]=\"fixed()\"\n [class.relative]=\"!fixed()\"\n [class.rounded-md]=\"!fixed()\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n>\n <div class=\"flex items-center gap-2 shrink-0\">\n <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n </div>\n\n <button\n type=\"button\"\n (click)=\"_toggleMobile()\"\n class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n [style.color]=\"'inherit'\"\n >\n <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n </button>\n\n <!-- Desktop -->\n <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n @for (item of items(); track item.id) {\n <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span>{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n animate.enter=\"nav-dd-in\"\n animate.leave=\"nav-dd-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Mobile -->\n <div\n class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n >\n @for (item of items(); track item.id) {\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span class=\"flex-1\">{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\n animate.enter=\"nav-mob-in\"\n animate.leave=\"nav-mob-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\n [style.color]=\"'rgba(255,255,255,0.85)'\"\n [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n [style.color]=\"'inherit'\"\n [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n >\n <i class=\"pi pi-sign-out text-sm\"></i>\n <span class=\"hidden sm:inline\">Logout</span>\n </button>\n</nav>\n", styles: [":host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"] }]
|
|
2162
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"h-16 z-50 flex items-center px-5 gap-3\"\n [class.fixed]=\"fixed()\"\n [class.top-0]=\"fixed()\"\n [class.left-0]=\"fixed()\"\n [class.right-0]=\"fixed()\"\n [class.relative]=\"!fixed()\"\n [class.rounded-md]=\"!fixed()\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.color]=\"'var(--color-primary-inverse,oklch(0.99 0 0))'\"\n>\n <div class=\"flex items-center gap-2 shrink-0\">\n <i [class]=\"brandIcon()\" class=\"text-xl\"></i>\n <span class=\"text-sm font-bold hidden sm:inline\">{{ brandText() }}</span>\n </div>\n\n <button\n type=\"button\"\n (click)=\"_toggleMobile()\"\n class=\"inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded lg:hidden\"\n [style.color]=\"'inherit'\"\n >\n <i class=\"pi text-lg\" [class.pi-bars]=\"!_mobileOpen()\" [class.pi-times]=\"_mobileOpen()\"></i>\n </button>\n\n <!-- Desktop -->\n <div class=\"flex-1 hidden lg:flex items-center justify-center gap-1\">\n @for (item of items(); track item.id) {\n <div class=\"relative\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) || _openDropdown() === item.id ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span>{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-[10px] transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div\n class=\"absolute top-full right-0 mt-1 min-w-[180px] flex flex-col gap-0.5 p-2 rounded-xl shadow-lg z-50\"\n [style.background-color]=\"'var(--color-surface,oklch(0.99 0 0))'\"\n [style.border]=\"'1px solid var(--color-border-light,oklch(0.91 0.01 260))'\"\n animate.enter=\"nav-dd-in\"\n animate.leave=\"nav-dd-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer whitespace-nowrap transition-colors\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Mobile -->\n <div\n class=\"fixed left-0 right-0 top-16 flex flex-col gap-1 p-4 shadow-xl lg:hidden z-50\"\n [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\"\n [style.max-height]=\"_mobileOpen() ? 'calc(100vh - 64px)' : '0'\"\n [style.overflow]=\"_mobileOpen() ? 'auto' : 'hidden'\"\n [style.opacity]=\"_mobileOpen() ? '1' : '0'\"\n style=\"transition: max-height 0.3s ease, opacity 0.2s ease\"\n >\n @for (item of items(); track item.id) {\n <button\n type=\"button\"\n (click)=\"item.children ? _toggleDropdown(item.id) : _navigate(item.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.color]=\"'inherit'\"\n [style.background-color]=\"_isActive(item.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (item.icon) { <i [class]=\"'pi ' + item.icon\" class=\"text-sm\"></i> }\n <span class=\"flex-1\">{{ item.label }}</span>\n @if (item.children) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_openDropdown() === item.id ? 'rotate(180deg)' : ''\"\n ></i>\n }\n </button>\n\n @if (item.children && _openDropdown() === item.id) {\n <div class=\"flex flex-col gap-0.5 mt-1 mr-4\"\n animate.enter=\"nav-mob-in\"\n animate.leave=\"nav-mob-out\"\n >\n @for (child of item.children; track child.id) {\n <button\n type=\"button\"\n (click)=\"_navigate(child.route || '')\"\n class=\"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm border-none cursor-pointer transition-colors\"\n [style.color]=\"'rgba(255,255,255,0.85)'\"\n [style.background-color]=\"_isActive(child.id) ? 'rgba(255,255,255,0.15)' : 'transparent'\"\n >\n @if (child.icon) { <i [class]=\"'pi ' + child.icon\" class=\"text-xs\"></i> }\n <span>{{ child.label }}</span>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border whitespace-nowrap cursor-pointer transition-colors shrink-0\"\n [style.color]=\"'inherit'\"\n [style.border-color]=\"'rgba(255,255,255,0.3)'\"\n >\n <i class=\"pi pi-sign-out text-sm\"></i>\n <span class=\"hidden sm:inline\">Logout</span>\n </button>\n</nav>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.nav-dd-in{animation:navDdIn .2s ease-out}.nav-dd-out{animation:navDdOut .15s ease-in forwards}.nav-mob-in{animation:navMobIn .2s ease-out}.nav-mob-out{animation:navMobOut .12s ease-in forwards}@keyframes navDdIn{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}@keyframes navDdOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -6px}}@keyframes navMobIn{0%{opacity:0;translate:0 -4px}to{opacity:1;translate:0}}@keyframes navMobOut{0%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}\n"] }]
|
|
2163
2163
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], brandText: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandText", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
|
|
2164
2164
|
|
|
2165
2165
|
class SidebarComponent {
|
|
@@ -2221,13 +2221,13 @@ class SidebarComponent {
|
|
|
2221
2221
|
}
|
|
2222
2222
|
_onBackdrop() { this.toggleOpen.emit(); }
|
|
2223
2223
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n }\n\n <button\n type=\"button\"\n (click)=\"_onBackdrop()\"\n class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-times text-sm\"></i>\n </button>\n </div>\n\n <nav class=\"flex-1 overflow-y-auto p-3\">\n <ul class=\"flex flex-col gap-1\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\n [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"text-base shrink-0\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"flex-1 text-right\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"mt-1 mr-6 flex flex-col gap-0.5\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <span class=\"w-1.5 h-1.5 rounded-full shrink-0\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n ></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"shrink-0 p-3 border-t flex flex-col gap-2\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n [style.color]=\"'white'\"\n [class.justify-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out text-base shrink-0\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2224
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n }\n\n <button\n type=\"button\"\n (click)=\"_onBackdrop()\"\n class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-times text-sm\"></i>\n </button>\n </div>\n\n <nav class=\"flex-1 overflow-y-auto p-3\">\n <ul class=\"flex flex-col gap-1\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\n [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"text-base shrink-0\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"flex-1 text-right\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"mt-1 mr-6 flex flex-col gap-0.5\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <span class=\"w-1.5 h-1.5 rounded-full shrink-0\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n ></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"shrink-0 p-3 border-t flex flex-col gap-2\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n [style.color]=\"'white'\"\n [class.justify-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out text-base shrink-0\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n</aside>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2225
2225
|
}
|
|
2226
2226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
2227
2227
|
type: Component,
|
|
2228
2228
|
args: [{ selector: 'app-sidebar', imports: [], host: {
|
|
2229
2229
|
'[style.display]': "'contents'",
|
|
2230
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n }\n\n <button\n type=\"button\"\n (click)=\"_onBackdrop()\"\n class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-times text-sm\"></i>\n </button>\n </div>\n\n <nav class=\"flex-1 overflow-y-auto p-3\">\n <ul class=\"flex flex-col gap-1\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\n [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"text-base shrink-0\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"flex-1 text-right\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"mt-1 mr-6 flex flex-col gap-0.5\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <span class=\"w-1.5 h-1.5 rounded-full shrink-0\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n ></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"shrink-0 p-3 border-t flex flex-col gap-2\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n [style.color]=\"'white'\"\n [class.justify-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out text-base shrink-0\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
|
|
2230
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"flex items-center justify-between shrink-0 px-4 h-14 border-b\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"group inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-all duration-200 hover:bg-[var(--color-accent,oklch(0.64 0.2 50))] active:bg-[var(--color-accent,oklch(0.64 0.2 50))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-th-large text-sm transition-transform duration-500 ease-in-out active:scale-90\"\n [style.transform]=\"isCollapsed() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"text-sm font-semibold text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ title() }}</span>\n }\n\n <button\n type=\"button\"\n (click)=\"_onBackdrop()\"\n class=\"sd-close-btn inline-flex items-center justify-center w-8 h-8 border-none bg-transparent cursor-pointer rounded transition-colors hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi pi-times text-sm\"></i>\n </button>\n </div>\n\n <nav class=\"flex-1 overflow-y-auto p-3\">\n <ul class=\"flex flex-col gap-1\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 text-sm font-medium border-none cursor-pointer\"\n [style.background-color]=\"_isActive(item.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(item.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text,oklch(0.14 0.01 260))'\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"text-base shrink-0\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"flex-1 text-right\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down text-xs transition-transform duration-200\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"mt-1 mr-6 flex flex-col gap-0.5\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg transition-all duration-150 text-sm border-none cursor-pointer\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary,oklch(0.32 0.09 258))' : 'transparent'\"\n [style.color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <span class=\"w-1.5 h-1.5 rounded-full shrink-0\"\n [style.background-color]=\"_isActive(child.id) ? 'var(--color-primary-inverse,oklch(0.99 0 0))' : 'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n ></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n <div class=\"shrink-0 p-3 border-t flex flex-col gap-2\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium border-none cursor-pointer transition-colors\"\n [style.background-color]=\"'var(--color-danger,oklch(0.57 0.21 25))'\"\n [style.color]=\"'white'\"\n [class.justify-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out text-base shrink-0\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n</aside>\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-close-btn{display:none}@media(max-width:1023px){.sd-close-btn{display:inline-flex}}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
|
|
2231
2231
|
}], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], toggleOpen: [{ type: i0.Output, args: ["toggleOpen"] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
|
|
2232
2232
|
|
|
2233
2233
|
class ConfirmDialogComponent {
|
|
@@ -2302,13 +2302,13 @@ class ConfirmDialogComponent {
|
|
|
2302
2302
|
}
|
|
2303
2303
|
}
|
|
2304
2304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n <div\n class=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick()\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (_title()) {\n <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n </div>\n }\n\n <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n @if (_icon()) {\n <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n </div>\n\n <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <button\n type=\"button\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n (click)=\"_onCancel()\"\n >{{ _cancelText() }}</button>\n\n <button\n type=\"button\"\n [style.background-color]=\"_confirmBg()\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n (click)=\"_onConfirm()\"\n >{{ _confirmText() }}</button>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n <div\n class=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick()\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (_title()) {\n <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n </div>\n }\n\n <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n @if (_icon()) {\n <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n </div>\n\n <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <button\n type=\"button\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n (click)=\"_onCancel()\"\n >{{ _cancelText() }}</button>\n\n <button\n type=\"button\"\n [style.background-color]=\"_confirmBg()\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n (click)=\"_onConfirm()\"\n >{{ _confirmText() }}</button>\n </div>\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2306
2306
|
}
|
|
2307
2307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
2308
2308
|
type: Component,
|
|
2309
2309
|
args: [{ selector: 'app-confirm-dialog', imports: [], host: {
|
|
2310
2310
|
'(document:keydown.escape)': '_onEscape($event)',
|
|
2311
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n <div\n class=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick()\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (_title()) {\n <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n </div>\n }\n\n <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n @if (_icon()) {\n <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n </div>\n\n <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <button\n type=\"button\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n (click)=\"_onCancel()\"\n >{{ _cancelText() }}</button>\n\n <button\n type=\"button\"\n [style.background-color]=\"_confirmBg()\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n (click)=\"_onConfirm()\"\n >{{ _confirmText() }}</button>\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
|
|
2311
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n <div\n class=\"fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick()\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full max-w-sm mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (_title()) {\n <div class=\"flex items-center justify-between px-4 py-3 border-b border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <h3 class=\"text-sm font-semibold\">{{ _title() }}</h3>\n </div>\n }\n\n <div class=\"flex flex-col items-center gap-3 px-6 py-6 text-center\">\n @if (_icon()) {\n <i class=\"{{ _icon() }} text-2xl text-[var(--color-primary,oklch(0.32 0.09 258))]\"></i>\n }\n <p class=\"text-sm text-[var(--color-text,oklch(0.14 0.01 260))]\">{{ message() }}</p>\n </div>\n\n <div class=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <button\n type=\"button\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border border-[var(--color-border,oklch(0.83 0.015 260))] bg-transparent text-[var(--color-text,oklch(0.14 0.01 260))] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-surface-alt,oklch(0.975 0.005 260))]\"\n (click)=\"_onCancel()\"\n >{{ _cancelText() }}</button>\n\n <button\n type=\"button\"\n [style.background-color]=\"_confirmBg()\"\n class=\"px-3 py-1.5 text-sm rounded-[var(--radius-md,0.5rem)] border-none text-white cursor-pointer transition-opacity duration-150 hover:opacity-90\"\n (click)=\"_onConfirm()\"\n >{{ _confirmText() }}</button>\n </div>\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
|
|
2312
2312
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
|
|
2313
2313
|
|
|
2314
2314
|
class ModalComponent {
|
|
@@ -2370,13 +2370,13 @@ class ModalComponent {
|
|
|
2370
2370
|
}
|
|
2371
2371
|
}
|
|
2372
2372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n <div\n class=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick($event)\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [style.max-width]=\"_width()\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (title() || _showClose()) {\n <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n @if (_showClose()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n }\n\n <div class=\"px-4 py-4\">\n <ng-content />\n </div>\n\n <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <ng-content select=\"[modal-footer]\" />\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "_onEscape($event)" } }, ngImport: i0, template: "@if (_visible()) {\n <div\n class=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick($event)\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [style.max-width]=\"_width()\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (title() || _showClose()) {\n <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n @if (_showClose()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n }\n\n <div class=\"px-4 py-4\">\n <ng-content />\n </div>\n\n <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <ng-content select=\"[modal-footer]\" />\n </div>\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2374
2374
|
}
|
|
2375
2375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2376
2376
|
type: Component,
|
|
2377
2377
|
args: [{ selector: 'app-modal', imports: [], host: {
|
|
2378
2378
|
'(document:keydown.escape)': '_onEscape($event)',
|
|
2379
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n <div\n class=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick($event)\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [style.max-width]=\"_width()\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (title() || _showClose()) {\n <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n @if (_showClose()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n }\n\n <div class=\"px-4 py-4\">\n <ng-content />\n </div>\n\n <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <ng-content select=\"[modal-footer]\" />\n </div>\n </div>\n </div>\n}\n", styles: [":host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
|
|
2379
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_visible()) {\n <div\n class=\"modal-backdrop fixed inset-0 z-50 flex items-center justify-center bg-[var(--modal-backdrop,oklch(0 0 0/0.45))]\"\n [class.backdrop-enter]=\"_isOpen() && !_isClosing()\"\n [class.backdrop-leave]=\"_isClosing()\"\n (click)=\"_onBackdropClick($event)\"\n >\n <div\n class=\"bg-[var(--color-surface,oklch(0.99 0 0))] border border-[var(--color-border,oklch(0.83 0.015 260))] rounded-[var(--radius-lg,0.75rem)] shadow-xl w-full mx-4 overflow-hidden text-[var(--color-text,oklch(0.14 0.01 260))]\"\n [style.max-width]=\"_width()\"\n [class.panel-enter]=\"_isOpen() && !_isClosing()\"\n [class.panel-leave]=\"_isClosing()\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (title() || _showClose()) {\n <div class=\"flex items-center justify-between px-4 py-3\" [style.background-color]=\"'var(--color-primary,oklch(0.32 0.09 258))'\">\n <h3 class=\"text-sm font-semibold text-[var(--color-primary-inverse,oklch(0.99 0 0))]\">{{ title() }}</h3>\n @if (_showClose()) {\n <button\n type=\"button\"\n class=\"flex items-center justify-center w-7 h-7 p-0 border-none rounded-full bg-transparent text-white/80 hover:bg-white/20 cursor-pointer transition-colors\"\n (click)=\"close()\"\n aria-label=\"Close\"\n >\n <i class=\"pi pi-times text-xs\"></i>\n </button>\n }\n </div>\n }\n\n <div class=\"px-4 py-4\">\n <ng-content />\n </div>\n\n <div class=\"modal-footer flex items-center justify-end gap-2 px-4 py-3 border-t border-[var(--color-border-light,oklch(0.91 0.01 260))]\">\n <ng-content select=\"[modal-footer]\" />\n </div>\n </div>\n </div>\n}\n", styles: [".pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-16{top:calc(var(--spacing) * 16)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\\.5{right:calc(var(--spacing) * 2.5)}.right-8{right:calc(var(--spacing) * 8)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mr-4{margin-right:calc(var(--spacing) * 4)}.mr-6{margin-right:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-60{min-width:calc(var(--spacing) * 60)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-sm{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style: none;border-style:none}.bg-transparent{background-color:transparent}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking: var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-white{color:var(--color-white)}.text-white\\/80{color:color-mix(in srgb,#fff 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.text-white\\/80{color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-150{--tw-duration: .15s;transition-duration:.15s}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-500{--tw-duration: .5s;transition-duration:.5s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style: none;outline-style:none}@media(hover:hover){.group-hover\\:opacity-80:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){:scope:is(:where(.group):hover *){opacity:80%}}@media(hover:hover){.hover\\:opacity-70:hover{opacity:70%}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-90:hover{opacity:90%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}.active\\:scale-90:active{--tw-scale-x: 90%;--tw-scale-y: 90%;--tw-scale-z: 90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-30:disabled{opacity:30%}.disabled\\:opacity-50:disabled{opacity:50%}@media(min-width:40rem){.sm\\:inline{display:inline}}@media(min-width:40rem){.sm\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}}@media(min-width:64rem){.lg\\:flex{display:flex}}@media(min-width:64rem){.lg\\:hidden{display:none}}@media(min-width:64rem){.lg\\:text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}:host{display:contents}.modal-backdrop{--modal-backdrop: var(--color-backdrop, oklch(0 0 0 / .45))}.backdrop-enter{animation:backdropIn .2s ease-out}.backdrop-leave{animation:backdropOut .2s ease-in forwards}.panel-enter{animation:panelIn .2s ease-out}.panel-leave{animation:panelOut .18s ease-in forwards}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}.modal-footer:empty{display:none}@keyframes panelIn{0%{opacity:0;scale:.95;translate:0 8px}to{opacity:1;scale:1;translate:0}}@keyframes panelOut{0%{opacity:1;scale:1;translate:0}to{opacity:0;scale:.95;translate:0 8px}}\n"] }]
|
|
2380
2380
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2381
2381
|
|
|
2382
2382
|
// Form
|