angular-visuals 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/angular-visuals.mjs +3293 -0
- package/fesm2022/angular-visuals.mjs.map +1 -0
- package/package.json +5 -15
- package/types/angular-visuals.d.ts +983 -0
- /package/{src/styles → styles}/angular-visuals.css +0 -0
- /package/{src/styles → styles}/animations.css +0 -0
- /package/{src/styles → styles}/palette.css +0 -0
- /package/{src/styles → styles}/theme.css +0 -0
- /package/{src/styles → styles}/typography.css +0 -0
|
@@ -0,0 +1,3293 @@
|
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
2
|
+
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, Injectable, input, HostBinding, ViewEncapsulation, Component, InjectionToken, makeEnvironmentProviders, signal, computed, effect, booleanAttribute, output, ElementRef, DestroyRef, PLATFORM_ID, Renderer2, contentChild, HostListener, ChangeDetectionStrategy, numberAttribute, Directive, ViewChild, Optional, Self, untracked, forwardRef, model, contentChildren } from '@angular/core';
|
|
5
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
|
+
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
7
|
+
import * as i3 from '@angular/cdk/overlay';
|
|
8
|
+
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
9
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
10
|
+
import * as i1$1 from '@angular/forms';
|
|
11
|
+
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
12
|
+
|
|
13
|
+
const loaderSeed = {
|
|
14
|
+
"wind-toy": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>wind-toy</title><path fill="currentColor" d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
15
|
+
"wifi-fade": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>wifi-fade</title><path fill="currentColor" d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21" opacity="0"><animate id="SVGkbUu7KtW" fill="freeze" attributeName="opacity" begin="0;SVGAiUxzdjl.end+0.2s" dur="0.25s" values="0;1"/><animate id="SVGAiUxzdjl" fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path><path fill="currentColor" d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" opacity="0"><animate id="SVG2sZSgdIQ" fill="freeze" attributeName="opacity" begin="SVGkbUu7KtW.end" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path><path fill="currentColor" d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3" opacity="0"><animate id="SVGV9fG3lbe" fill="freeze" attributeName="opacity" begin="SVG2sZSgdIQ.end" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGV9fG3lbe.end+0.5s" dur="0.1s" values="1;0"/></path></svg>',
|
|
16
|
+
"wify": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>wifi</title><path fill="currentColor" d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21" opacity="0"><animate id="SVGKYQAHd9H" fill="freeze" attributeName="opacity" begin="0;SVGiICzmYiD.end+0.2s" calcMode="discrete" dur="0.25s" values="0;1"/><animate id="SVGiICzmYiD" fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path><path fill="currentColor" d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" opacity="0"><animate id="SVGPRCC2btp" fill="freeze" attributeName="opacity" begin="SVGKYQAHd9H.end" calcMode="discrete" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path><path fill="currentColor" d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3" opacity="0"><animate id="SVGqTmLtDFc" fill="freeze" attributeName="opacity" begin="SVGPRCC2btp.end" calcMode="discrete" dur="0.25s" values="0;1"/><animate fill="freeze" attributeName="opacity" begin="SVGqTmLtDFc.end+0.5s" dur="0.001s" values="1;0"/></path></svg>',
|
|
17
|
+
"tadpole": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>tadpole</title><path fill="currentColor" d="M12,23a9.63,9.63,0,0,1-8-9.5,9.51,9.51,0,0,1,6.79-9.1A1.66,1.66,0,0,0,12,2.81h0a1.67,1.67,0,0,0-1.94-1.64A11,11,0,0,0,12,23Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
18
|
+
"ring-resize": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>ring-resize</title><g stroke="currentColor"><circle cx="12" cy="12" r="9.5" fill="none" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0 150;42 150;42 150;42 150"/><animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0;-16;-59;-59"/></circle><animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>',
|
|
19
|
+
"pulse-rings-multiple": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-rings-multiple</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGBGG9rcpE" attributeName="transform" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVGryjChH5y.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVG0KQtjdtU" attributeName="transform" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGBGG9rcpE.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGryjChH5y" attributeName="transform" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGBGG9rcpE.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>',
|
|
20
|
+
"pulse-rings-3": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-rings-3</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGr0dxBdJO" attributeName="transform" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVG7Xy0ecki.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGp2dhBhxA" attributeName="transform" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGr0dxBdJO.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVG7Xy0ecki" attributeName="transform" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGr0dxBdJO.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>',
|
|
21
|
+
"pulse-rings-2": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-rings-2</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGk7g6Ie5D" attributeName="transform" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="0;SVGADuEYsSK.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform id="SVGADuEYsSK" attributeName="transform" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" type="scale" values="0;1"/><animate attributeName="opacity" begin="SVGk7g6Ie5D.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></path></svg>',
|
|
22
|
+
"pulse-ring": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-ring</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="matrix(0 0 0 0 12 12)"><animateTransform attributeName="transform" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" type="translate" values="12 12;0 0"/><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" type="scale" values="0;1"/><animate attributeName="opacity" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="1;0"/></path></svg>',
|
|
23
|
+
"pulse-multiple": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-multiple</title><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGPW9ARccz" fill="freeze" attributeName="r" begin="0;SVGaeu34cWL.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGaeu34cWL.end" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGODvPjeTJ" fill="freeze" attributeName="r" begin="SVGPW9ARccz.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGPW9ARccz.begin+0.2s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGaeu34cWL" fill="freeze" attributeName="r" begin="SVGPW9ARccz.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGPW9ARccz.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>',
|
|
24
|
+
"pulse-3": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-3</title><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGHRb9bJhy" fill="freeze" attributeName="r" begin="0;SVGUoIUme6Z.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGUoIUme6Z.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGaun8abat" fill="freeze" attributeName="r" begin="SVGHRb9bJhy.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGHRb9bJhy.begin+0.4s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGUoIUme6Z" fill="freeze" attributeName="r" begin="SVGHRb9bJhy.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVGHRb9bJhy.begin+0.8s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>',
|
|
25
|
+
"pulse-2": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse-2</title><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVG0cdVlcnN" fill="freeze" attributeName="r" begin="0;SVGftllRbIv.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="0;SVGftllRbIv.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate id="SVGftllRbIv" fill="freeze" attributeName="r" begin="SVG0cdVlcnN.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="0;11"/><animate fill="freeze" attributeName="opacity" begin="SVG0cdVlcnN.begin+0.6s" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" values="1;0"/></circle></svg>',
|
|
26
|
+
"pulse": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>pulse</title><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="0;11"/><animate attributeName="opacity" calcMode="spline" dur="1.2s" keySplines=".52,.6,.25,.99" repeatCount="indefinite" values="1;0"/></circle></svg>',
|
|
27
|
+
"gooey-balls-2": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>gooey-balls-2</title><defs><filter id="SVGp0LL3caJ"><feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/><feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/><feBlend in="SourceGraphic" in2="z"/></filter></defs><g filter="url(#SVGp0LL3caJ)"><circle cx="5" cy="12" r="4" fill="currentColor"><animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite" values="5;8;5"/></circle><circle cx="19" cy="12" r="4" fill="currentColor"><animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57" repeatCount="indefinite" values="19;16;19"/></circle><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>',
|
|
28
|
+
"gooey-balls-1": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>gooey-balls-1</title><defs><filter id="SVGg4wYRcsm"><feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1.5"/><feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/><feBlend in="SourceGraphic" in2="z"/></filter></defs><g fill="currentColor" filter="url(#SVGg4wYRcsm)"><circle cx="4" cy="12" r="3"><animate attributeName="cx" calcMode="spline" dur="0.75s" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite" values="4;9;4"/><animate attributeName="r" calcMode="spline" dur="0.75s" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite" values="3;8;3"/></circle><circle cx="15" cy="12" r="8"><animate attributeName="cx" calcMode="spline" dur="0.75s" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite" values="15;20;15"/><animate attributeName="r" calcMode="spline" dur="0.75s" keySplines=".56,.52,.17,.98;.56,.52,.17,.98" repeatCount="indefinite" values="8;3;8"/></circle></g></svg>',
|
|
29
|
+
"eclipse-half": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>eclipse-half</title><path fill="currentColor" d="M2,12A10.94,10.94,0,0,1,5,4.65c-.21-.19-.42-.36-.62-.55h0A11,11,0,0,0,12,23c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"><animateTransform attributeName="transform" dur="0.6s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
30
|
+
"eclipse": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>eclipse</title><path fill="currentColor" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"><animateTransform attributeName="transform" dur="0.6s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
31
|
+
"dot-revolve": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>dot-revolve</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><circle cx="12" cy="2.5" r="1.5" fill="currentColor"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></circle></svg>',
|
|
32
|
+
"clock": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>clock</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/><rect width="2" height="7" x="11" y="6" fill="currentColor" rx="1"><animateTransform attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></rect><rect width="2" height="9" x="11" y="11" fill="currentColor" rx="1"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></rect></svg>',
|
|
33
|
+
"bouncing-ball": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bouncing-ball</title><ellipse cx="12" cy="5" fill="currentColor" rx="4" ry="4"><animate id="SVG2g6X4cnm" fill="freeze" attributeName="cy" begin="0;SVGYUW1Wdmy.end" calcMode="spline" dur="0.375s" keySplines=".33,0,.66,.33" values="5;20"/><animate attributeName="rx" begin="SVG2g6X4cnm.end" calcMode="spline" dur="0.05s" keySplines=".33,0,.66,.33;.33,.66,.66,1" values="4;4.8;4"/><animate attributeName="ry" begin="SVG2g6X4cnm.end" calcMode="spline" dur="0.05s" keySplines=".33,0,.66,.33;.33,.66,.66,1" values="4;3;4"/><animate id="SVGb9s1Jd3o" attributeName="cy" begin="SVG2g6X4cnm.end" calcMode="spline" dur="0.025s" keySplines=".33,0,.66,.33" values="20;20.5"/><animate id="SVGYUW1Wdmy" attributeName="cy" begin="SVGb9s1Jd3o.end" calcMode="spline" dur="0.4s" keySplines=".33,.66,.66,1" values="20.5;5"/></ellipse></svg>',
|
|
34
|
+
"blocks-wave": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>blocks-wave</title><rect width="7.33" height="7.33" x="1" y="1" fill="currentColor"><animate id="SVGzjrPLenI" attributeName="x" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="1;4;1"/><animate attributeName="y" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="1;4;1"/><animate attributeName="width" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="0;SVGXAURnSRI.end+0.2s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="8.33" y="1" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="1" y="8.33" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="1;4;1"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.1s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="15.66" y="1" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="8.33" y="8.33" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="1" y="15.66" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="1;4;1"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.2s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="15.66" y="8.33" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="8.33" y="15.66" fill="currentColor"><animate attributeName="x" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="8.33;11.33;8.33"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.3s" dur="0.6s" values="7.33;1.33;7.33"/></rect><rect width="7.33" height="7.33" x="15.66" y="15.66" fill="currentColor"><animate id="SVGXAURnSRI" attributeName="x" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="y" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="15.66;18.66;15.66"/><animate attributeName="width" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33"/><animate attributeName="height" begin="SVGzjrPLenI.begin+0.4s" dur="0.6s" values="7.33;1.33;7.33"/></rect></svg>',
|
|
35
|
+
"blocks-shuffle-3": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>blocks-shuffle-3</title><rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1"><animate id="SVG7WybndBt" fill="freeze" attributeName="x" begin="0;SVGo3aOUHlJ.end" dur="0.2s" values="1;13"/><animate id="SVGVoKldbWM" fill="freeze" attributeName="y" begin="SVGFpk9ncYc.end" dur="0.2s" values="1;13"/><animate id="SVGKsXgPbui" fill="freeze" attributeName="x" begin="SVGaI8owdNK.end" dur="0.2s" values="13;1"/><animate id="SVG7JzAfdGT" fill="freeze" attributeName="y" begin="SVG28A4To9L.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1"><animate id="SVGUiS2jeZq" fill="freeze" attributeName="y" begin="SVG7WybndBt.end" dur="0.2s" values="13;1"/><animate id="SVGU0vu2GEM" fill="freeze" attributeName="x" begin="SVGVoKldbWM.end" dur="0.2s" values="1;13"/><animate id="SVGOIboFeLf" fill="freeze" attributeName="y" begin="SVGKsXgPbui.end" dur="0.2s" values="1;13"/><animate id="SVG14lAaeuv" fill="freeze" attributeName="x" begin="SVG7JzAfdGT.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="13" y="13" fill="currentColor" rx="1"><animate id="SVGFpk9ncYc" fill="freeze" attributeName="x" begin="SVGUiS2jeZq.end" dur="0.2s" values="13;1"/><animate id="SVGaI8owdNK" fill="freeze" attributeName="y" begin="SVGU0vu2GEM.end" dur="0.2s" values="13;1"/><animate id="SVG28A4To9L" fill="freeze" attributeName="x" begin="SVGOIboFeLf.end" dur="0.2s" values="1;13"/><animate id="SVGo3aOUHlJ" fill="freeze" attributeName="y" begin="SVG14lAaeuv.end" dur="0.2s" values="1;13"/></rect></svg>',
|
|
36
|
+
"blocks-shuffle-2": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>blocks-shuffle-2</title><rect width="10" height="10" x="1" y="1" fill="currentColor" rx="1"><animate id="SVG7JagGz2Y" fill="freeze" attributeName="x" begin="0;SVGgDT19bUV.end" dur="0.2s" values="1;13"/><animate id="SVGpS1BddYk" fill="freeze" attributeName="y" begin="SVGc7yq8dne.end" dur="0.2s" values="1;13"/><animate id="SVGboa7EdFl" fill="freeze" attributeName="x" begin="SVG0ZX9C6Fa.end" dur="0.2s" values="13;1"/><animate id="SVG6rrusL2C" fill="freeze" attributeName="y" begin="SVGTOnnO5Dr.end" dur="0.2s" values="13;1"/></rect><rect width="10" height="10" x="1" y="13" fill="currentColor" rx="1"><animate id="SVGc7yq8dne" fill="freeze" attributeName="y" begin="SVG7JagGz2Y.end" dur="0.2s" values="13;1"/><animate id="SVG0ZX9C6Fa" fill="freeze" attributeName="x" begin="SVGpS1BddYk.end" dur="0.2s" values="1;13"/><animate id="SVGTOnnO5Dr" fill="freeze" attributeName="y" begin="SVGboa7EdFl.end" dur="0.2s" values="1;13"/><animate id="SVGgDT19bUV" fill="freeze" attributeName="x" begin="SVG6rrusL2C.end" dur="0.2s" values="13;1"/></rect></svg>',
|
|
37
|
+
"blocks-scale": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>blocks-scale</title><rect width="9" height="9" x="1.5" y="1.5" fill="currentColor" rx="1"><animate id="SVGvBHXGeBR" attributeName="x" begin="0;SVGBBjjneux.end+0.15s" dur="0.6s" keyTimes="0;.2;1" values="1.5;.5;1.5"/><animate attributeName="y" begin="0;SVGBBjjneux.end+0.15s" dur="0.6s" keyTimes="0;.2;1" values="1.5;.5;1.5"/><animate attributeName="width" begin="0;SVGBBjjneux.end+0.15s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/><animate attributeName="height" begin="0;SVGBBjjneux.end+0.15s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/></rect><rect width="9" height="9" x="13.5" y="1.5" fill="currentColor" rx="1"><animate attributeName="x" begin="SVGvBHXGeBR.begin+0.15s" dur="0.6s" keyTimes="0;.2;1" values="13.5;12.5;13.5"/><animate attributeName="y" begin="SVGvBHXGeBR.begin+0.15s" dur="0.6s" keyTimes="0;.2;1" values="1.5;.5;1.5"/><animate attributeName="width" begin="SVGvBHXGeBR.begin+0.15s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/><animate attributeName="height" begin="SVGvBHXGeBR.begin+0.15s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/></rect><rect width="9" height="9" x="13.5" y="13.5" fill="currentColor" rx="1"><animate attributeName="x" begin="SVGvBHXGeBR.begin+0.3s" dur="0.6s" keyTimes="0;.2;1" values="13.5;12.5;13.5"/><animate attributeName="y" begin="SVGvBHXGeBR.begin+0.3s" dur="0.6s" keyTimes="0;.2;1" values="13.5;12.5;13.5"/><animate attributeName="width" begin="SVGvBHXGeBR.begin+0.3s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/><animate attributeName="height" begin="SVGvBHXGeBR.begin+0.3s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/></rect><rect width="9" height="9" x="1.5" y="13.5" fill="currentColor" rx="1"><animate id="SVGBBjjneux" attributeName="x" begin="SVGvBHXGeBR.begin+0.45s" dur="0.6s" keyTimes="0;.2;1" values="1.5;.5;1.5"/><animate attributeName="y" begin="SVGvBHXGeBR.begin+0.45s" dur="0.6s" keyTimes="0;.2;1" values="13.5;12.5;13.5"/><animate attributeName="width" begin="SVGvBHXGeBR.begin+0.45s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/><animate attributeName="height" begin="SVGvBHXGeBR.begin+0.45s" dur="0.6s" keyTimes="0;.2;1" values="9;11;9"/></rect></svg>',
|
|
38
|
+
"bars-scale-middle": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bars-scale-middle</title><rect width="2.8" height="12" x="1" y="6" fill="currentColor"><animate attributeName="y" begin="SVGKWB9Ob0W.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="SVGKWB9Ob0W.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="5.8" y="6" fill="currentColor"><animate attributeName="y" begin="SVGKWB9Ob0W.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="SVGKWB9Ob0W.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="10.6" y="6" fill="currentColor"><animate id="SVGKWB9Ob0W" attributeName="y" begin="0;SVGCkSt6baQ.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="0;SVGCkSt6baQ.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="15.4" y="6" fill="currentColor"><animate attributeName="y" begin="SVGKWB9Ob0W.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="SVGKWB9Ob0W.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="20.2" y="6" fill="currentColor"><animate id="SVGCkSt6baQ" attributeName="y" begin="SVGKWB9Ob0W.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="SVGKWB9Ob0W.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect></svg>',
|
|
39
|
+
"bars-scale-fade": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bars-scale-fade</title><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="SVGBoZ3Ab9F" fill="freeze" attributeName="y" begin="0;SVG0XJl4OCs.end-0.25s" dur="0.75s" values="1;5"/><animate fill="freeze" attributeName="height" begin="0;SVG0XJl4OCs.end-0.25s" dur="0.75s" values="22;14"/><animate fill="freeze" attributeName="opacity" begin="0;SVG0XJl4OCs.end-0.25s" dur="0.75s" values="1;.2"/></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="y" begin="SVGBoZ3Ab9F.begin+0.15s" dur="0.75s" values="1;5"/><animate fill="freeze" attributeName="height" begin="SVGBoZ3Ab9F.begin+0.15s" dur="0.75s" values="22;14"/><animate fill="freeze" attributeName="opacity" begin="SVGBoZ3Ab9F.begin+0.15s" dur="0.75s" values="1;.2"/></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="SVG0XJl4OCs" fill="freeze" attributeName="y" begin="SVGBoZ3Ab9F.begin+0.3s" dur="0.75s" values="1;5"/><animate fill="freeze" attributeName="height" begin="SVGBoZ3Ab9F.begin+0.3s" dur="0.75s" values="22;14"/><animate fill="freeze" attributeName="opacity" begin="SVGBoZ3Ab9F.begin+0.3s" dur="0.75s" values="1;.2"/></rect></svg>',
|
|
40
|
+
"bars-scale": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bars-scale</title><rect width="2.8" height="12" x="1" y="6" fill="currentColor"><animate id="SVGLQdHQe4p" attributeName="y" begin="0;SVGg3vsIeGm.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="6;1;6"/><animate attributeName="height" begin="0;SVGg3vsIeGm.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="12;22;12"/></rect><rect width="2.8" height="12" x="5.8" y="6" fill="currentColor"><animate attributeName="y" begin="SVGLQdHQe4p.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="6;1;6"/><animate attributeName="height" begin="SVGLQdHQe4p.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="12;22;12"/></rect><rect width="2.8" height="12" x="10.6" y="6" fill="currentColor"><animate attributeName="y" begin="SVGLQdHQe4p.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="6;1;6"/><animate attributeName="height" begin="SVGLQdHQe4p.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="12;22;12"/></rect><rect width="2.8" height="12" x="15.4" y="6" fill="currentColor"><animate attributeName="y" begin="SVGLQdHQe4p.begin+0.3s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="6;1;6"/><animate attributeName="height" begin="SVGLQdHQe4p.begin+0.3s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="12;22;12"/></rect><rect width="2.8" height="12" x="20.2" y="6" fill="currentColor"><animate id="SVGg3vsIeGm" attributeName="y" begin="SVGLQdHQe4p.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="6;1;6"/><animate attributeName="height" begin="SVGLQdHQe4p.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".36,.61,.3,.98;.36,.61,.3,.98" values="12;22;12"/></rect></svg>',
|
|
41
|
+
"bars-rotate-fade": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bars-rotate-fade</title><g><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14"/><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)"/><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)"/><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)"/><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)"/><rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)"/><rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)"/><animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"/></g></svg>',
|
|
42
|
+
"bars-fade": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>bars-fade</title><rect width="6" height="14" x="1" y="4" fill="currentColor"><animate id="SVG9ovaHbIP" fill="freeze" attributeName="opacity" begin="0;SVGa89dAd4w.end-0.25s" dur="0.75s" values="1;.2"/></rect><rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="SVG9ovaHbIP.begin+0.15s" dur="0.75s" values="1;.2"/></rect><rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3"><animate id="SVGa89dAd4w" fill="freeze" attributeName="opacity" begin="SVG9ovaHbIP.begin+0.3s" dur="0.75s" values="1;.2"/></rect></svg>',
|
|
43
|
+
"90-ring-with-bg": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>90-ring-with-bg</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
44
|
+
"90-ring": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>90-ring</title><path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
45
|
+
"8-dots-rotate": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>8-dots-rotate</title><g><circle cx="3" cy="12" r="2" fill="currentColor"/><circle cx="21" cy="12" r="2" fill="currentColor"/><circle cx="12" cy="21" r="2" fill="currentColor"/><circle cx="12" cy="3" r="2" fill="currentColor"/><circle cx="5.64" cy="5.64" r="2" fill="currentColor"/><circle cx="18.36" cy="18.36" r="2" fill="currentColor"/><circle cx="5.64" cy="18.36" r="2" fill="currentColor"/><circle cx="18.36" cy="5.64" r="2" fill="currentColor"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>',
|
|
46
|
+
"6-dots-scale-middle": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>6-dots-scale-middle</title><circle cx="12" cy="3" r="0" fill="currentColor"><animate id="SVGoB2HzdBp" attributeName="r" begin="0;SVGhp5IKccd.end-0.5s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="16.5" cy="4.21" r="0" fill="currentColor"><animate id="SVG13I3L3Mo" attributeName="r" begin="SVGoB2HzdBp.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="7.5" cy="4.21" r="0" fill="currentColor"><animate id="SVGhp5IKccd" attributeName="r" begin="SVGZh5n6c6U.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="19.79" cy="7.5" r="0" fill="currentColor"><animate id="SVGwdpSnbWm" attributeName="r" begin="SVG13I3L3Mo.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="4.21" cy="7.5" r="0" fill="currentColor"><animate id="SVGZh5n6c6U" attributeName="r" begin="SVGZlbpteod.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="21" cy="12" r="0" fill="currentColor"><animate id="SVGtZjtgdeT" attributeName="r" begin="SVGwdpSnbWm.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="3" cy="12" r="0" fill="currentColor"><animate id="SVGZlbpteod" attributeName="r" begin="SVGwTNtvelU.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="19.79" cy="16.5" r="0" fill="currentColor"><animate id="SVGtoLBIbcZ" attributeName="r" begin="SVGtZjtgdeT.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="4.21" cy="16.5" r="0" fill="currentColor"><animate id="SVGwTNtvelU" attributeName="r" begin="SVGk1PzexJH.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="16.5" cy="19.79" r="0" fill="currentColor"><animate id="SVGoTyDPewd" attributeName="r" begin="SVGtoLBIbcZ.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="7.5" cy="19.79" r="0" fill="currentColor"><animate id="SVGk1PzexJH" attributeName="r" begin="SVG0DUTaeRN.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle><circle cx="12" cy="21" r="0" fill="currentColor"><animate id="SVG0DUTaeRN" attributeName="r" begin="SVGoTyDPewd.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="0;2;0"/></circle></svg>',
|
|
47
|
+
"6-dots-scale": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>6-dots-scale</title><circle cx="12" cy="3" r="0" fill="currentColor"><animate id="SVG4G6AvsmK" fill="freeze" attributeName="r" begin="0;SVGvWIhNcAr.end-0.5s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="16.5" cy="4.21" r="0" fill="currentColor"><animate id="SVGeE4wqdhI" fill="freeze" attributeName="r" begin="SVG4G6AvsmK.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="7.5" cy="4.21" r="0" fill="currentColor"><animate id="SVGvWIhNcAr" fill="freeze" attributeName="r" begin="SVG7bFLwcpj.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="19.79" cy="7.5" r="0" fill="currentColor"><animate id="SVGEevPNd9f" fill="freeze" attributeName="r" begin="SVGeE4wqdhI.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="4.21" cy="7.5" r="0" fill="currentColor"><animate id="SVG7bFLwcpj" fill="freeze" attributeName="r" begin="SVGQTNUCd1M.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="21" cy="12" r="0" fill="currentColor"><animate id="SVGuBK1DdeV" fill="freeze" attributeName="r" begin="SVGEevPNd9f.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="3" cy="12" r="0" fill="currentColor"><animate id="SVGQTNUCd1M" fill="freeze" attributeName="r" begin="SVGGpgq51kq.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="19.79" cy="16.5" r="0" fill="currentColor"><animate id="SVG0SGXodLb" fill="freeze" attributeName="r" begin="SVGuBK1DdeV.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="4.21" cy="16.5" r="0" fill="currentColor"><animate id="SVGGpgq51kq" fill="freeze" attributeName="r" begin="SVGlDB0aenh.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="16.5" cy="19.79" r="0" fill="currentColor"><animate id="SVGjNSy9c1D" fill="freeze" attributeName="r" begin="SVG0SGXodLb.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="7.5" cy="19.79" r="0" fill="currentColor"><animate id="SVGlDB0aenh" fill="freeze" attributeName="r" begin="SVGq7gqkb6a.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle><circle cx="12" cy="21" r="0" fill="currentColor"><animate id="SVGq7gqkb6a" fill="freeze" attributeName="r" begin="SVGjNSy9c1D.begin+0.1s" calcMode="spline" dur="0.6s" keySplines="0,1,0,1;.53,0,.61,.73" keyTimes="0;.2;1" values="0;2;0"/></circle></svg>',
|
|
48
|
+
"6-dots-rotate": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>6-dots-rotate</title><g><circle cx="12" cy="2.5" r="1.5" fill="currentColor" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" fill="currentColor" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" fill="currentColor" opacity=".43"/><circle cx="21.5" cy="12" r="1.5" fill="currentColor" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" fill="currentColor" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" fill="currentColor" opacity=".86"/><circle cx="12" cy="21.5" r="1.5" fill="currentColor"/><animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"/></g></svg>',
|
|
49
|
+
"3-dots-scale-middle": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-scale-middle</title><circle cx="4" cy="12" r="1.5" fill="currentColor"><animate attributeName="r" dur="0.75s" repeatCount="indefinite" values="1.5;3;1.5"/></circle><circle cx="12" cy="12" r="3" fill="currentColor"><animate attributeName="r" dur="0.75s" repeatCount="indefinite" values="3;1.5;3"/></circle><circle cx="20" cy="12" r="1.5" fill="currentColor"><animate attributeName="r" dur="0.75s" repeatCount="indefinite" values="1.5;3;1.5"/></circle></svg>',
|
|
50
|
+
"3-dots-scale": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-scale</title><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="SVG9IgbRbsl" attributeName="r" begin="0;SVGFUNpCWdG.end-0.25s" dur="0.75s" values="3;.2;3"/></circle><circle cx="12" cy="12" r="3" fill="currentColor"><animate attributeName="r" begin="SVG9IgbRbsl.end-0.6s" dur="0.75s" values="3;.2;3"/></circle><circle cx="20" cy="12" r="3" fill="currentColor"><animate id="SVGFUNpCWdG" attributeName="r" begin="SVG9IgbRbsl.end-0.45s" dur="0.75s" values="3;.2;3"/></circle></svg>',
|
|
51
|
+
"3-dots-rotate": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-rotate</title><circle cx="12" cy="12" r="3" fill="currentColor"/><g><circle cx="4" cy="12" r="3" fill="currentColor"/><circle cx="20" cy="12" r="3" fill="currentColor"/><animateTransform attributeName="transform" calcMode="spline" dur="1s" keySplines=".36,.6,.31,1;.36,.6,.31,1" repeatCount="indefinite" type="rotate" values="0 12 12;180 12 12;360 12 12"/></g></svg>',
|
|
52
|
+
"3-dots-move": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-move</title><circle cx="4" cy="12" r="0" fill="currentColor"><animate fill="freeze" attributeName="r" begin="0;SVGUppsBdVN.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3"/><animate fill="freeze" attributeName="cx" begin="SVGqCgsydxJ.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12"/><animate fill="freeze" attributeName="cx" begin="SVG3PwDNd6F.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20"/><animate id="SVG3V8yEdYE" fill="freeze" attributeName="r" begin="SVG6wCQhd9Q.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"/><animate id="SVGUppsBdVN" fill="freeze" attributeName="cx" begin="SVG3V8yEdYE.end" dur="0.001s" values="20;4"/></circle><circle cx="4" cy="12" r="3" fill="currentColor"><animate fill="freeze" attributeName="cx" begin="0;SVGUppsBdVN.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12"/><animate fill="freeze" attributeName="cx" begin="SVGqCgsydxJ.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20"/><animate id="SVG4PgJdbds" fill="freeze" attributeName="r" begin="SVG3PwDNd6F.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"/><animate id="SVG6wCQhd9Q" fill="freeze" attributeName="cx" begin="SVG4PgJdbds.end" dur="0.001s" values="20;4"/><animate fill="freeze" attributeName="r" begin="SVG6wCQhd9Q.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3"/></circle><circle cx="12" cy="12" r="3" fill="currentColor"><animate fill="freeze" attributeName="cx" begin="0;SVGUppsBdVN.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20"/><animate id="SVG38aCdcdI" fill="freeze" attributeName="r" begin="SVGqCgsydxJ.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"/><animate id="SVG3PwDNd6F" fill="freeze" attributeName="cx" begin="SVG38aCdcdI.end" dur="0.001s" values="20;4"/><animate fill="freeze" attributeName="r" begin="SVG3PwDNd6F.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3"/><animate fill="freeze" attributeName="cx" begin="SVG6wCQhd9Q.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12"/></circle><circle cx="20" cy="12" r="3" fill="currentColor"><animate id="SVGwaWzveSq" fill="freeze" attributeName="r" begin="0;SVGUppsBdVN.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"/><animate id="SVGqCgsydxJ" fill="freeze" attributeName="cx" begin="SVGwaWzveSq.end" dur="0.001s" values="20;4"/><animate fill="freeze" attributeName="r" begin="SVGqCgsydxJ.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3"/><animate fill="freeze" attributeName="cx" begin="SVG3PwDNd6F.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12"/><animate fill="freeze" attributeName="cx" begin="SVG6wCQhd9Q.end" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20"/></circle></svg>',
|
|
53
|
+
"3-dots-fade": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-fade</title><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="SVG7x14Dcom" fill="freeze" attributeName="opacity" begin="0;SVGqSjG0dUp.end-0.25s" dur="0.75s" values="1;.2"/></circle><circle cx="12" cy="12" r="3" fill="currentColor" opacity=".4"><animate fill="freeze" attributeName="opacity" begin="SVG7x14Dcom.begin+0.15s" dur="0.75s" values="1;.2"/></circle><circle cx="20" cy="12" r="3" fill="currentColor" opacity=".3"><animate id="SVGqSjG0dUp" fill="freeze" attributeName="opacity" begin="SVG7x14Dcom.begin+0.3s" dur="0.75s" values="1;.2"/></circle></svg>',
|
|
54
|
+
"3-dots-bounce": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>3-dots-bounce</title><circle cx="4" cy="12" r="3" fill="currentColor"><animate id="SVGKiXXedfO" attributeName="cy" begin="0;SVGgLulOGrw.end+0.25s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle><circle cx="12" cy="12" r="3" fill="currentColor"><animate attributeName="cy" begin="SVGKiXXedfO.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle><circle cx="20" cy="12" r="3" fill="currentColor"><animate id="SVGgLulOGrw" attributeName="cy" begin="SVGKiXXedfO.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".33,.66,.66,1;.33,0,.66,.33" values="12;6;12"/></circle></svg>',
|
|
55
|
+
"270-ring-with-bg": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>270-ring-with-bg</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
56
|
+
"270-ring": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>270-ring</title><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
57
|
+
"180-ring-with-bg": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>180-ring-with-bg</title><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
58
|
+
"180-ring": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>180-ring</title><path fill="currentColor" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>',
|
|
59
|
+
"12-dots-scale-rotate": '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><title>12-dots-scale-rotate</title><g><circle cx="12" cy="3" r="1" fill="currentColor"><animate id="SVGelgoqhuA" attributeName="r" begin="0;SVGSRzJybSJ.end-0.5s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="16.5" cy="4.21" r="1" fill="currentColor"><animate id="SVGBcQu6cCi" attributeName="r" begin="SVGelgoqhuA.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="7.5" cy="4.21" r="1" fill="currentColor"><animate id="SVGSRzJybSJ" attributeName="r" begin="SVGeZGzNdVZ.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="19.79" cy="7.5" r="1" fill="currentColor"><animate id="SVGG5Q0fe0M" attributeName="r" begin="SVGBcQu6cCi.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="4.21" cy="7.5" r="1" fill="currentColor"><animate id="SVGeZGzNdVZ" attributeName="r" begin="SVGUTnihcal.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="21" cy="12" r="1" fill="currentColor"><animate id="SVG8aQG8dpc" attributeName="r" begin="SVGG5Q0fe0M.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="3" cy="12" r="1" fill="currentColor"><animate id="SVGUTnihcal" attributeName="r" begin="SVGHktsvT5Q.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="19.79" cy="16.5" r="1" fill="currentColor"><animate id="SVGqCF3Scrd" attributeName="r" begin="SVG8aQG8dpc.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="4.21" cy="16.5" r="1" fill="currentColor"><animate id="SVGHktsvT5Q" attributeName="r" begin="SVGSFNCBbxb.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="16.5" cy="19.79" r="1" fill="currentColor"><animate id="SVGMFYo1cJN" attributeName="r" begin="SVGqCF3Scrd.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="7.5" cy="19.79" r="1" fill="currentColor"><animate id="SVGSFNCBbxb" attributeName="r" begin="SVGLSoLpdOI.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><circle cx="12" cy="21" r="1" fill="currentColor"><animate id="SVGLSoLpdOI" attributeName="r" begin="SVGMFYo1cJN.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1"/></circle><animateTransform attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="360 12 12;0 12 12"/></g></svg>'
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const iconSeed = {
|
|
63
|
+
"search": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
|
|
64
|
+
"menu": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>',
|
|
65
|
+
"check": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>',
|
|
66
|
+
"expand_more": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg>',
|
|
67
|
+
"arrow_left": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" ><path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" /></svg>',
|
|
68
|
+
"arrow_right": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" ><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" /></svg>',
|
|
69
|
+
"double_arrow_left": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M440-240 200-480l240-240 56 56-183 184 183 184-56 56Zm264 0L464-480l240-240 56 56-183 184 183 184-56 56Z"/></svg>',
|
|
70
|
+
"double_arrow_right": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M383-480 200-664l56-56 240 240-240 240-56-56 183-184Zm264 0L464-664l56-56 240 240-240 240-56-56 183-184Z"/></svg>',
|
|
71
|
+
"close": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>',
|
|
72
|
+
"chevron_left": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>',
|
|
73
|
+
"chevron_right": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>',
|
|
74
|
+
"calendar_today": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Z"/></svg>',
|
|
75
|
+
"schedule": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
|
|
76
|
+
"payments": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM200-320q-33 0-56.5-23.5T120-400v-320q0-33 23.5-56.5T200-800h720v400q0 33-23.5 56.5T840-320H200Zm0-80h640v-320H200v320Zm-80 240q-33 0-56.5-23.5T40-240v-400h80v400h640v80H120Z"/></svg>',
|
|
77
|
+
"copy": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>',
|
|
78
|
+
"code": '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M320-240 80-480l240-240 57 57-184 183 184 183-57 57Zm320 0-57-57 184-183-184-183 57-57 240 240-240 240Z"/></svg>',
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
class AvIconRegistry {
|
|
82
|
+
sanitizer = inject(DomSanitizer);
|
|
83
|
+
registry = new Map();
|
|
84
|
+
constructor() {
|
|
85
|
+
this.registerIcons(loaderSeed);
|
|
86
|
+
this.registerIcons(iconSeed);
|
|
87
|
+
}
|
|
88
|
+
/** Registra um único ícone/loader SVG */
|
|
89
|
+
registerIcon(name, svgContent) {
|
|
90
|
+
const normalizedSvg = this.normalizeSvg(svgContent);
|
|
91
|
+
const safeSvg = this.sanitizer.bypassSecurityTrustHtml(normalizedSvg);
|
|
92
|
+
this.registry.set(name, safeSvg);
|
|
93
|
+
}
|
|
94
|
+
/** Registra vários ícones de uma vez */
|
|
95
|
+
registerIcons(icons) {
|
|
96
|
+
Object.entries(icons).forEach(([name, svg]) => this.registerIcon(name, svg));
|
|
97
|
+
}
|
|
98
|
+
/** Retorna o SVG registrado como conteúdo confiável */
|
|
99
|
+
getIcon(name) {
|
|
100
|
+
return this.registry.get(name);
|
|
101
|
+
}
|
|
102
|
+
/** Retorna os nomes de todos os ícones registrados */
|
|
103
|
+
getIconNames() {
|
|
104
|
+
return Array.from(this.registry.keys()).sort((a, b) => a.localeCompare(b));
|
|
105
|
+
}
|
|
106
|
+
/** Retorna todos os ícones registrados, útil para catálogos e icon pickers */
|
|
107
|
+
getIcons() {
|
|
108
|
+
return this.getIconNames().map((name) => ({
|
|
109
|
+
name,
|
|
110
|
+
svg: this.registry.get(name),
|
|
111
|
+
}));
|
|
112
|
+
}
|
|
113
|
+
normalizeSvg(svgContent) {
|
|
114
|
+
const normalizedSvg = svgContent.trim();
|
|
115
|
+
if (!/^<svg(?:\s|>)/i.test(normalizedSvg)) {
|
|
116
|
+
throw new Error('An icon must be registered as an SVG element.');
|
|
117
|
+
}
|
|
118
|
+
return normalizedSvg;
|
|
119
|
+
}
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
121
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvIconRegistry, providedIn: 'root' });
|
|
122
|
+
}
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvIconRegistry, decorators: [{
|
|
124
|
+
type: Injectable,
|
|
125
|
+
args: [{
|
|
126
|
+
providedIn: 'root'
|
|
127
|
+
}]
|
|
128
|
+
}], ctorParameters: () => [] });
|
|
129
|
+
|
|
130
|
+
class AvIcon {
|
|
131
|
+
iconRegistry;
|
|
132
|
+
/** Nome do ícone (ex: 'search', 'user', 'settings') */
|
|
133
|
+
name = input.required(/* @ts-ignore */
|
|
134
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
135
|
+
/** Tamanho em relação ao font-size herdado ou em pixels. */
|
|
136
|
+
size = input('base', /* @ts-ignore */
|
|
137
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
138
|
+
constructor(iconRegistry) {
|
|
139
|
+
this.iconRegistry = iconRegistry;
|
|
140
|
+
}
|
|
141
|
+
get sizeClass() {
|
|
142
|
+
const size = this.size();
|
|
143
|
+
return typeof size === 'number' ? 'av-icon--custom' : `av-icon--${size}`;
|
|
144
|
+
}
|
|
145
|
+
get elementClasses() {
|
|
146
|
+
return `av-icon ${this.sizeClass}`;
|
|
147
|
+
}
|
|
148
|
+
get fontSize() {
|
|
149
|
+
const size = this.size();
|
|
150
|
+
return typeof size === 'number' ? `${size}px` : null;
|
|
151
|
+
}
|
|
152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvIcon, deps: [{ token: AvIconRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvIcon, isStandalone: true, selector: "span[av-icon], i[av-icon]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.elementClasses", "style.font-size": "this.fontSize" } }, ngImport: i0, template: "<span\n class=\"av-icon__glyph\"\n [ngClass]=\"sizeClass\"\n [innerHTML]=\"iconRegistry.getIcon(name())\"\n></span>\n", styles: [".av-icon{display:inline-flex;width:1em;height:1em;flex-shrink:0;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.av-icon--xs{font-size:.75rem}.av-icon--sm{font-size:.875rem}.av-icon--base,.av-icon--md{font-size:1rem}.av-icon--lg{font-size:1.25rem}.av-icon--xl{font-size:1.5rem}.av-icon__glyph{display:inline-flex;width:100%;height:100%;-webkit-user-select:none;user-select:none}.av-icon__glyph>svg{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
154
|
+
}
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvIcon, decorators: [{
|
|
156
|
+
type: Component,
|
|
157
|
+
args: [{ standalone: true, imports: [CommonModule], selector: 'span[av-icon], i[av-icon]', encapsulation: ViewEncapsulation.None, template: "<span\n class=\"av-icon__glyph\"\n [ngClass]=\"sizeClass\"\n [innerHTML]=\"iconRegistry.getIcon(name())\"\n></span>\n", styles: [".av-icon{display:inline-flex;width:1em;height:1em;flex-shrink:0;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.av-icon--xs{font-size:.75rem}.av-icon--sm{font-size:.875rem}.av-icon--base,.av-icon--md{font-size:1rem}.av-icon--lg{font-size:1.25rem}.av-icon--xl{font-size:1.5rem}.av-icon__glyph{display:inline-flex;width:100%;height:100%;-webkit-user-select:none;user-select:none}.av-icon__glyph>svg{display:block;width:100%;height:100%}\n"] }]
|
|
158
|
+
}], ctorParameters: () => [{ type: AvIconRegistry }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], elementClasses: [{
|
|
159
|
+
type: HostBinding,
|
|
160
|
+
args: ['class']
|
|
161
|
+
}], fontSize: [{
|
|
162
|
+
type: HostBinding,
|
|
163
|
+
args: ['style.font-size']
|
|
164
|
+
}] } });
|
|
165
|
+
|
|
166
|
+
const VISUALS_CONFIG = new InjectionToken('VISUALS_CONFIG');
|
|
167
|
+
function provideAngularVisuals(config) {
|
|
168
|
+
const providers = [
|
|
169
|
+
{
|
|
170
|
+
provide: VISUALS_CONFIG,
|
|
171
|
+
useValue: config
|
|
172
|
+
},
|
|
173
|
+
];
|
|
174
|
+
return makeEnvironmentProviders(providers);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
class ThemeService {
|
|
178
|
+
config = inject(VISUALS_CONFIG);
|
|
179
|
+
colorIntensities = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
|
|
180
|
+
mode = signal(this.config.theme.mode, /* @ts-ignore */
|
|
181
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
182
|
+
systemDark = signal(false, /* @ts-ignore */
|
|
183
|
+
...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
|
|
184
|
+
dark = computed(() => {
|
|
185
|
+
const mode = this.mode();
|
|
186
|
+
if (mode === 'dark')
|
|
187
|
+
return true;
|
|
188
|
+
if (mode === 'light')
|
|
189
|
+
return false;
|
|
190
|
+
return this.systemDark();
|
|
191
|
+
}, /* @ts-ignore */
|
|
192
|
+
...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
|
|
193
|
+
constructor() {
|
|
194
|
+
const media = window.matchMedia('(prefers-color-scheme: dark)');
|
|
195
|
+
this.systemDark.set(media.matches);
|
|
196
|
+
this.setPrimaryColorVariables();
|
|
197
|
+
media.addEventListener('change', event => {
|
|
198
|
+
this.systemDark.set(event.matches);
|
|
199
|
+
});
|
|
200
|
+
effect(() => {
|
|
201
|
+
const isDark = this.dark();
|
|
202
|
+
const root = document.documentElement;
|
|
203
|
+
if (isDark) {
|
|
204
|
+
root.setAttribute('data-av-theme', 'dark');
|
|
205
|
+
}
|
|
206
|
+
else {
|
|
207
|
+
root.setAttribute('data-av-theme', 'light');
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
setMode(mode) {
|
|
212
|
+
this.mode.set(mode);
|
|
213
|
+
}
|
|
214
|
+
setPrimaryColorVariables() {
|
|
215
|
+
const root = document.documentElement;
|
|
216
|
+
const variant = this.config.theme.defaultVariant;
|
|
217
|
+
for (const intensity of this.colorIntensities) {
|
|
218
|
+
root.style.setProperty(`--av-primary-${intensity}`, `var(--av-${variant}-${intensity})`);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
222
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeService, providedIn: 'root' });
|
|
223
|
+
}
|
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ThemeService, decorators: [{
|
|
225
|
+
type: Injectable,
|
|
226
|
+
args: [{
|
|
227
|
+
providedIn: 'root'
|
|
228
|
+
}]
|
|
229
|
+
}], ctorParameters: () => [] });
|
|
230
|
+
|
|
231
|
+
class AvDropdown {
|
|
232
|
+
config = inject(VISUALS_CONFIG);
|
|
233
|
+
themeService = inject(ThemeService);
|
|
234
|
+
badge = input(null, /* @ts-ignore */
|
|
235
|
+
...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
236
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
237
|
+
expanded = input(undefined, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined ? undefined : booleanAttribute(value) });
|
|
238
|
+
icon = input('', /* @ts-ignore */
|
|
239
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
240
|
+
label = input('', /* @ts-ignore */
|
|
241
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
242
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
243
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
244
|
+
expandedChange = output();
|
|
245
|
+
internalExpanded = signal(false, /* @ts-ignore */
|
|
246
|
+
...(ngDevMode ? [{ debugName: "internalExpanded" }] : /* istanbul ignore next */ []));
|
|
247
|
+
panelId = `av-dropdown-${Math.random().toString(36).slice(2, 9)}`;
|
|
248
|
+
isExpanded = computed(() => this.expanded() ?? this.internalExpanded(), /* @ts-ignore */
|
|
249
|
+
...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
|
|
250
|
+
themeVars = computed(() => {
|
|
251
|
+
const variant = this.variant();
|
|
252
|
+
const isDark = this.themeService.dark();
|
|
253
|
+
return {
|
|
254
|
+
'--av-dropdown-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
255
|
+
'--av-dropdown-accent-hover': `var(--av-${variant}-${isDark ? 300 : 700})`,
|
|
256
|
+
'--av-dropdown-accent-soft': isDark
|
|
257
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
258
|
+
: `var(--av-${variant}-50)`,
|
|
259
|
+
'--av-dropdown-text': 'var(--av-color-text-muted)',
|
|
260
|
+
'--av-dropdown-text-active': isDark ? `var(--av-${variant}-100)` : `var(--av-${variant}-800)`,
|
|
261
|
+
};
|
|
262
|
+
}, /* @ts-ignore */
|
|
263
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
264
|
+
constructor() {
|
|
265
|
+
effect(() => {
|
|
266
|
+
const controlledExpanded = this.expanded();
|
|
267
|
+
if (controlledExpanded !== undefined) {
|
|
268
|
+
this.internalExpanded.set(controlledExpanded);
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
toggle() {
|
|
273
|
+
if (this.disabled())
|
|
274
|
+
return;
|
|
275
|
+
const next = !this.isExpanded();
|
|
276
|
+
this.internalExpanded.set(next);
|
|
277
|
+
this.expandedChange.emit(next);
|
|
278
|
+
}
|
|
279
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvDropdown, isStandalone: true, selector: "av-dropdown", inputs: { badge: { classPropertyName: "badge", publicName: "badge", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n <button\n type=\"button\"\n class=\"av-dropdown__trigger\"\n [class.av-dropdown__trigger--active]=\"isExpanded()\"\n [disabled]=\"disabled()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-expanded]=\"isExpanded()\"\n (click)=\"toggle()\"\n >\n @if (icon()) {\n <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-dropdown__label\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content select=\"[av-dropdown-label]\"></ng-content>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n }\n\n <span\n class=\"av-dropdown__chevron\"\n av-icon\n name=\"expand_more\"\n size=\"md\"\n [class.av-dropdown__chevron--open]=\"isExpanded()\"\n ></span>\n </button>\n\n <div\n class=\"av-dropdown__panel\"\n [id]=\"panelId\"\n [class.av-dropdown__panel--open]=\"isExpanded()\"\n [attr.aria-hidden]=\"!isExpanded()\"\n [attr.inert]=\"isExpanded() ? null : ''\"\n >\n <div class=\"av-dropdown__panel-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-dropdown{display:grid;gap:.125rem;min-width:0}.av-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--active{background:var(--av-dropdown-accent-soft);color:var(--av-dropdown-accent-hover)}.av-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);color:var(--av-dropdown-text-active);font-weight:700}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-dropdown__badge{background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
281
|
+
}
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, decorators: [{
|
|
283
|
+
type: Component,
|
|
284
|
+
args: [{ imports: [CommonModule, AvIcon], selector: 'av-dropdown', template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n <button\n type=\"button\"\n class=\"av-dropdown__trigger\"\n [class.av-dropdown__trigger--active]=\"isExpanded()\"\n [disabled]=\"disabled()\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-expanded]=\"isExpanded()\"\n (click)=\"toggle()\"\n >\n @if (icon()) {\n <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-dropdown__label\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content select=\"[av-dropdown-label]\"></ng-content>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n }\n\n <span\n class=\"av-dropdown__chevron\"\n av-icon\n name=\"expand_more\"\n size=\"md\"\n [class.av-dropdown__chevron--open]=\"isExpanded()\"\n ></span>\n </button>\n\n <div\n class=\"av-dropdown__panel\"\n [id]=\"panelId\"\n [class.av-dropdown__panel--open]=\"isExpanded()\"\n [attr.aria-hidden]=\"!isExpanded()\"\n [attr.inert]=\"isExpanded() ? null : ''\"\n >\n <div class=\"av-dropdown__panel-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-dropdown{display:grid;gap:.125rem;min-width:0}.av-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--active{background:var(--av-dropdown-accent-soft);color:var(--av-dropdown-accent-hover)}.av-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);color:var(--av-dropdown-text-active);font-weight:700}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-dropdown__badge{background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"] }]
|
|
285
|
+
}], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
|
|
286
|
+
|
|
287
|
+
class AvNavLink {
|
|
288
|
+
config = inject(VISUALS_CONFIG);
|
|
289
|
+
elementRef = inject((ElementRef));
|
|
290
|
+
themeService = inject(ThemeService);
|
|
291
|
+
active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
292
|
+
badge = input(null, /* @ts-ignore */
|
|
293
|
+
...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
294
|
+
description = input('', /* @ts-ignore */
|
|
295
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
296
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
297
|
+
href = input('', /* @ts-ignore */
|
|
298
|
+
...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
299
|
+
// route can be string or link params array
|
|
300
|
+
route = input(null, /* @ts-ignore */
|
|
301
|
+
...(ngDevMode ? [{ debugName: "route" }] : /* istanbul ignore next */ []));
|
|
302
|
+
icon = input('', /* @ts-ignore */
|
|
303
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
304
|
+
label = input('', /* @ts-ignore */
|
|
305
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
306
|
+
rel = input('', /* @ts-ignore */
|
|
307
|
+
...(ngDevMode ? [{ debugName: "rel" }] : /* istanbul ignore next */ []));
|
|
308
|
+
target = input('', /* @ts-ignore */
|
|
309
|
+
...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
|
|
310
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
311
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
312
|
+
// class to apply when routerLink is active
|
|
313
|
+
routerActiveClass = input('active', /* @ts-ignore */
|
|
314
|
+
...(ngDevMode ? [{ debugName: "routerActiveClass" }] : /* istanbul ignore next */ []));
|
|
315
|
+
// routerLinkActive options (defaults to exact match)
|
|
316
|
+
routerActiveOptions = input({ exact: true }, /* @ts-ignore */
|
|
317
|
+
...(ngDevMode ? [{ debugName: "routerActiveOptions" }] : /* istanbul ignore next */ []));
|
|
318
|
+
selected = output();
|
|
319
|
+
themeVars = computed(() => {
|
|
320
|
+
const variant = this.variant();
|
|
321
|
+
const isDark = this.themeService.dark();
|
|
322
|
+
return {
|
|
323
|
+
'--av-nav-link-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
324
|
+
'--av-nav-link-accent-hover': `var(--av-${variant}-${isDark ? 300 : 700})`,
|
|
325
|
+
'--av-nav-link-accent-soft': isDark
|
|
326
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
327
|
+
: `var(--av-${variant}-50)`,
|
|
328
|
+
'--av-nav-link-text': 'var(--av-color-text-muted)',
|
|
329
|
+
'--av-nav-link-text-active': isDark ? `var(--av-${variant}-100)` : `var(--av-${variant}-800)`,
|
|
330
|
+
};
|
|
331
|
+
}, /* @ts-ignore */
|
|
332
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
333
|
+
relValue = computed(() => {
|
|
334
|
+
if (this.rel())
|
|
335
|
+
return this.rel();
|
|
336
|
+
return this.target() === '_blank' ? 'noopener noreferrer' : null;
|
|
337
|
+
}, /* @ts-ignore */
|
|
338
|
+
...(ngDevMode ? [{ debugName: "relValue" }] : /* istanbul ignore next */ []));
|
|
339
|
+
isExternal = computed(() => {
|
|
340
|
+
const h = this.href();
|
|
341
|
+
if (!h)
|
|
342
|
+
return false;
|
|
343
|
+
return /^(https?:)?\/\//.test(h);
|
|
344
|
+
}, /* @ts-ignore */
|
|
345
|
+
...(ngDevMode ? [{ debugName: "isExternal" }] : /* istanbul ignore next */ []));
|
|
346
|
+
handleClick(event) {
|
|
347
|
+
if (this.disabled()) {
|
|
348
|
+
event.preventDefault();
|
|
349
|
+
event.stopPropagation();
|
|
350
|
+
return;
|
|
351
|
+
}
|
|
352
|
+
this.selected.emit(event);
|
|
353
|
+
this.elementRef.nativeElement.dispatchEvent(new CustomEvent('av-nav-link-select', {
|
|
354
|
+
bubbles: true,
|
|
355
|
+
composed: true,
|
|
356
|
+
detail: { source: this },
|
|
357
|
+
}));
|
|
358
|
+
}
|
|
359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvNavLink, isStandalone: true, selector: "av-nav-link", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, routerActiveClass: { classPropertyName: "routerActiveClass", publicName: "routerActiveClass", isSignal: true, isRequired: false, transformFunction: null }, routerActiveOptions: { classPropertyName: "routerActiveOptions", publicName: "routerActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "@if (!disabled() && (route() || (href() && !isExternal()))) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [routerLink]=\"route() ? route() : href()\"\n [routerLinkActive]=\"routerActiveClass()\"\n [routerLinkActiveOptions]=\"routerActiveOptions()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n} @else {\n @if (href() && !disabled()) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.href]=\"href()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [class.av-nav-link--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n }\n}\n\n<ng-template #content>\n @if (icon()) {\n <span class=\"av-nav-link__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-nav-link__body\">\n @if (label()) {\n <span class=\"av-nav-link__label\">{{ label() }}</span>\n } @else {\n <span class=\"av-nav-link__label\">\n <ng-content></ng-content>\n </span>\n }\n\n @if (description()) {\n <span class=\"av-nav-link__description\">{{ description() }}</span>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-nav-link__badge\">{{ badge() }}</span>\n }\n</ng-template>\n", styles: [":host{display:block;min-width:0}.av-nav-link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-link-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:var(--av-nav-link-padding-y, .625rem) var(--av-nav-link-padding-x, .75rem);padding-left:var(--av-nav-link-padding-left, var(--av-nav-link-padding-x, .75rem));text-align:left;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.av-nav-link:hover:not(.av-nav-link--disabled){background:var(--av-nav-link-accent-soft);color:var(--av-nav-link-accent-hover)}.av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.99)}.av-nav-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-link-accent) 24%,transparent);outline:none}.av-nav-link--active{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}:host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}.av-nav-link--disabled{cursor:not-allowed;opacity:.52}.av-nav-link__icon{color:currentColor;flex:0 0 auto}.av-nav-link__body{display:grid;flex:1;gap:.125rem;min-width:0}.av-nav-link__label,.av-nav-link__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-link__label{font-size:.875rem;line-height:1.25}.av-nav-link__description{color:var(--av-color-text-subtle);font-size:.75rem;line-height:1.2}.av-nav-link__badge{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
361
|
+
}
|
|
362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavLink, decorators: [{
|
|
363
|
+
type: Component,
|
|
364
|
+
args: [{ imports: [CommonModule, AvIcon, RouterLink, RouterLinkActive], selector: 'av-nav-link', template: "@if (!disabled() && (route() || (href() && !isExternal()))) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [routerLink]=\"route() ? route() : href()\"\n [routerLinkActive]=\"routerActiveClass()\"\n [routerLinkActiveOptions]=\"routerActiveOptions()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n} @else {\n @if (href() && !disabled()) {\n <a\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n [attr.href]=\"href()\"\n [attr.rel]=\"relValue()\"\n [attr.target]=\"target() || null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"av-nav-link\"\n [ngStyle]=\"themeVars()\"\n [class.av-nav-link--active]=\"active()\"\n [class.av-nav-link--disabled]=\"disabled()\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"handleClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </button>\n }\n}\n\n<ng-template #content>\n @if (icon()) {\n <span class=\"av-nav-link__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n }\n\n <span class=\"av-nav-link__body\">\n @if (label()) {\n <span class=\"av-nav-link__label\">{{ label() }}</span>\n } @else {\n <span class=\"av-nav-link__label\">\n <ng-content></ng-content>\n </span>\n }\n\n @if (description()) {\n <span class=\"av-nav-link__description\">{{ description() }}</span>\n }\n </span>\n\n @if (badge() !== null && badge() !== undefined) {\n <span class=\"av-nav-link__badge\">{{ badge() }}</span>\n }\n</ng-template>\n", styles: [":host{display:block;min-width:0}.av-nav-link{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-link-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:var(--av-nav-link-padding-y, .625rem) var(--av-nav-link-padding-x, .75rem);padding-left:var(--av-nav-link-padding-left, var(--av-nav-link-padding-x, .75rem));text-align:left;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;width:100%}.av-nav-link:hover:not(.av-nav-link--disabled){background:var(--av-nav-link-accent-soft);color:var(--av-nav-link-accent-hover)}.av-nav-link:active:not(.av-nav-link--disabled){transform:scale(.99)}.av-nav-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-link-accent) 24%,transparent);outline:none}.av-nav-link--active{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}:host(.active) .av-nav-link{background:var(--av-nav-link-accent-soft);border-color:color-mix(in srgb,var(--av-nav-link-accent) 28%,transparent);color:var(--av-nav-link-text-active);font-weight:700}.av-nav-link--disabled{cursor:not-allowed;opacity:.52}.av-nav-link__icon{color:currentColor;flex:0 0 auto}.av-nav-link__body{display:grid;flex:1;gap:.125rem;min-width:0}.av-nav-link__label,.av-nav-link__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-link__label{font-size:.875rem;line-height:1.25}.av-nav-link__description{color:var(--av-color-text-subtle);font-size:.75rem;line-height:1.2}.av-nav-link__badge{background:var(--av-nav-link-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}\n"] }]
|
|
365
|
+
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], routerActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveClass", required: false }] }], routerActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerActiveOptions", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
366
|
+
|
|
367
|
+
class AvSidenav {
|
|
368
|
+
config = inject(VISUALS_CONFIG);
|
|
369
|
+
destroyRef = inject(DestroyRef);
|
|
370
|
+
platformId = inject(PLATFORM_ID);
|
|
371
|
+
renderer = inject(Renderer2);
|
|
372
|
+
themeService = inject(ThemeService);
|
|
373
|
+
isBrowser = isPlatformBrowser(this.platformId);
|
|
374
|
+
projectedToggleTrigger = contentChild('toggleTrigger', /* @ts-ignore */
|
|
375
|
+
...(ngDevMode ? [{ debugName: "projectedToggleTrigger" }] : /* istanbul ignore next */ []));
|
|
376
|
+
drawerModeState = signal(false, /* @ts-ignore */
|
|
377
|
+
...(ngDevMode ? [{ debugName: "drawerModeState" }] : /* istanbul ignore next */ []));
|
|
378
|
+
internalOpened = signal(true, /* @ts-ignore */
|
|
379
|
+
...(ngDevMode ? [{ debugName: "internalOpened" }] : /* istanbul ignore next */ []));
|
|
380
|
+
missingTriggerWarned = false;
|
|
381
|
+
previousBodyOverflow = null;
|
|
382
|
+
lastMode = 'side';
|
|
383
|
+
ariaLabel = input('Navegação principal', /* @ts-ignore */
|
|
384
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
385
|
+
backdropLabel = input('Fechar navegação', /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "backdropLabel" }] : /* istanbul ignore next */ []));
|
|
387
|
+
closeOnBackdrop = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
388
|
+
closeOnNavigation = input(true, { ...(ngDevMode ? { debugName: "closeOnNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
389
|
+
drawerBreakpoint = input(768, /* @ts-ignore */
|
|
390
|
+
...(ngDevMode ? [{ debugName: "drawerBreakpoint" }] : /* istanbul ignore next */ []));
|
|
391
|
+
opened = input(undefined, { ...(ngDevMode ? { debugName: "opened" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined ? undefined : booleanAttribute(value) });
|
|
392
|
+
toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
393
|
+
toggleTrigger = input(null, /* @ts-ignore */
|
|
394
|
+
...(ngDevMode ? [{ debugName: "toggleTrigger" }] : /* istanbul ignore next */ []));
|
|
395
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
396
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
397
|
+
width = input('16rem', /* @ts-ignore */
|
|
398
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
399
|
+
openedChange = output();
|
|
400
|
+
modeChange = output();
|
|
401
|
+
drawerMode = computed(() => this.drawerModeState(), /* @ts-ignore */
|
|
402
|
+
...(ngDevMode ? [{ debugName: "drawerMode" }] : /* istanbul ignore next */ []));
|
|
403
|
+
isOpen = computed(() => {
|
|
404
|
+
if (!this.toggleable())
|
|
405
|
+
return true;
|
|
406
|
+
return this.opened() ?? this.internalOpened();
|
|
407
|
+
}, /* @ts-ignore */
|
|
408
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
409
|
+
themeVars = computed(() => {
|
|
410
|
+
const variant = this.variant();
|
|
411
|
+
const isDark = this.themeService.dark();
|
|
412
|
+
console.log(variant);
|
|
413
|
+
return {
|
|
414
|
+
'--av-sidenav-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
415
|
+
'--av-sidenav-accent-soft': isDark
|
|
416
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
417
|
+
: `var(--av-${variant}-50)`,
|
|
418
|
+
'--av-sidenav-border': 'var(--av-color-border-soft)',
|
|
419
|
+
'--av-sidenav-surface': 'var(--av-color-surface)',
|
|
420
|
+
'--av-sidenav-text': 'var(--av-color-text)',
|
|
421
|
+
'--av-sidenav-muted': 'var(--av-color-text-muted)',
|
|
422
|
+
};
|
|
423
|
+
}, /* @ts-ignore */
|
|
424
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
425
|
+
get drawerClass() {
|
|
426
|
+
return this.drawerMode();
|
|
427
|
+
}
|
|
428
|
+
get closedClass() {
|
|
429
|
+
return !this.isOpen();
|
|
430
|
+
}
|
|
431
|
+
get toggleableClass() {
|
|
432
|
+
return this.toggleable();
|
|
433
|
+
}
|
|
434
|
+
get widthStyle() {
|
|
435
|
+
return this.coerceCssLength(this.width());
|
|
436
|
+
}
|
|
437
|
+
constructor() {
|
|
438
|
+
effect((onCleanup) => {
|
|
439
|
+
if (!this.isBrowser)
|
|
440
|
+
return;
|
|
441
|
+
const mediaQuery = window.matchMedia(this.mediaQuery());
|
|
442
|
+
const updateMode = () => {
|
|
443
|
+
this.setDrawerMode(mediaQuery.matches);
|
|
444
|
+
};
|
|
445
|
+
updateMode();
|
|
446
|
+
mediaQuery.addEventListener('change', updateMode);
|
|
447
|
+
onCleanup(() => mediaQuery.removeEventListener('change', updateMode));
|
|
448
|
+
});
|
|
449
|
+
effect(() => {
|
|
450
|
+
const controlledOpened = this.opened();
|
|
451
|
+
if (controlledOpened !== undefined) {
|
|
452
|
+
this.internalOpened.set(controlledOpened);
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
effect(() => {
|
|
456
|
+
this.drawerMode();
|
|
457
|
+
this.isOpen();
|
|
458
|
+
this.toggleable();
|
|
459
|
+
this.updateBodyScroll();
|
|
460
|
+
});
|
|
461
|
+
effect((onCleanup) => {
|
|
462
|
+
if (!this.toggleable())
|
|
463
|
+
return;
|
|
464
|
+
const trigger = this.resolveToggleTrigger();
|
|
465
|
+
if (!trigger) {
|
|
466
|
+
this.warnMissingTrigger();
|
|
467
|
+
return;
|
|
468
|
+
}
|
|
469
|
+
this.renderer.setAttribute(trigger, 'aria-controls', this.navId);
|
|
470
|
+
this.renderer.setAttribute(trigger, 'aria-haspopup', 'dialog');
|
|
471
|
+
const removeClickListener = this.renderer.listen(trigger, 'click', (event) => {
|
|
472
|
+
event.preventDefault();
|
|
473
|
+
this.toggle();
|
|
474
|
+
});
|
|
475
|
+
onCleanup(() => {
|
|
476
|
+
removeClickListener();
|
|
477
|
+
this.renderer.removeAttribute(trigger, 'aria-controls');
|
|
478
|
+
this.renderer.removeAttribute(trigger, 'aria-expanded');
|
|
479
|
+
this.renderer.removeAttribute(trigger, 'aria-haspopup');
|
|
480
|
+
});
|
|
481
|
+
});
|
|
482
|
+
effect(() => {
|
|
483
|
+
if (!this.toggleable())
|
|
484
|
+
return;
|
|
485
|
+
const trigger = this.resolveToggleTrigger();
|
|
486
|
+
if (!trigger)
|
|
487
|
+
return;
|
|
488
|
+
this.renderer.setAttribute(trigger, 'aria-expanded', String(this.isOpen()));
|
|
489
|
+
});
|
|
490
|
+
this.destroyRef.onDestroy(() => {
|
|
491
|
+
this.restoreBodyScroll();
|
|
492
|
+
});
|
|
493
|
+
}
|
|
494
|
+
navId = `av-sidenav-${Math.random().toString(36).slice(2, 9)}`;
|
|
495
|
+
open() {
|
|
496
|
+
this.setOpenState(true);
|
|
497
|
+
}
|
|
498
|
+
close(options = {}) {
|
|
499
|
+
this.setOpenState(false);
|
|
500
|
+
if (options.restoreFocus) {
|
|
501
|
+
this.resolveToggleTrigger()?.focus();
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
toggle() {
|
|
505
|
+
this.setOpenState(!this.isOpen());
|
|
506
|
+
}
|
|
507
|
+
closeFromBackdrop() {
|
|
508
|
+
if (!this.closeOnBackdrop())
|
|
509
|
+
return;
|
|
510
|
+
this.close({ restoreFocus: true });
|
|
511
|
+
}
|
|
512
|
+
handleNavigation() {
|
|
513
|
+
if (!this.drawerMode() || !this.closeOnNavigation())
|
|
514
|
+
return;
|
|
515
|
+
this.close();
|
|
516
|
+
}
|
|
517
|
+
handleEscape(event) {
|
|
518
|
+
if (!this.drawerMode() || !this.isOpen())
|
|
519
|
+
return;
|
|
520
|
+
event.preventDefault();
|
|
521
|
+
this.close({ restoreFocus: true });
|
|
522
|
+
}
|
|
523
|
+
get mode() {
|
|
524
|
+
return this.drawerMode() ? 'drawer' : 'side';
|
|
525
|
+
}
|
|
526
|
+
mediaQuery() {
|
|
527
|
+
const breakpoint = this.drawerBreakpoint();
|
|
528
|
+
if (typeof breakpoint === 'number') {
|
|
529
|
+
return `(max-width: ${breakpoint}px)`;
|
|
530
|
+
}
|
|
531
|
+
const value = breakpoint.trim();
|
|
532
|
+
if (value.startsWith('('))
|
|
533
|
+
return value;
|
|
534
|
+
return `(max-width: ${value})`;
|
|
535
|
+
}
|
|
536
|
+
setDrawerMode(isDrawer) {
|
|
537
|
+
this.drawerModeState.set(isDrawer);
|
|
538
|
+
if (this.opened() === undefined && this.toggleable()) {
|
|
539
|
+
this.internalOpened.set(!isDrawer);
|
|
540
|
+
}
|
|
541
|
+
if (this.mode !== this.lastMode) {
|
|
542
|
+
this.lastMode = this.mode;
|
|
543
|
+
this.modeChange.emit(this.mode);
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
setOpenState(open) {
|
|
547
|
+
if (!this.toggleable())
|
|
548
|
+
return;
|
|
549
|
+
this.internalOpened.set(open);
|
|
550
|
+
this.openedChange.emit(open);
|
|
551
|
+
this.updateBodyScroll();
|
|
552
|
+
}
|
|
553
|
+
updateBodyScroll() {
|
|
554
|
+
if (!this.isBrowser)
|
|
555
|
+
return;
|
|
556
|
+
const shouldLock = this.drawerMode() && this.isOpen() && this.toggleable();
|
|
557
|
+
if (shouldLock && this.previousBodyOverflow === null) {
|
|
558
|
+
this.previousBodyOverflow = document.body.style.overflow;
|
|
559
|
+
document.body.style.overflow = 'hidden';
|
|
560
|
+
return;
|
|
561
|
+
}
|
|
562
|
+
if (!shouldLock && this.previousBodyOverflow !== null) {
|
|
563
|
+
document.body.style.overflow = this.previousBodyOverflow;
|
|
564
|
+
this.previousBodyOverflow = null;
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
restoreBodyScroll() {
|
|
568
|
+
if (!this.isBrowser)
|
|
569
|
+
return;
|
|
570
|
+
if (this.previousBodyOverflow !== null) {
|
|
571
|
+
document.body.style.overflow = this.previousBodyOverflow;
|
|
572
|
+
this.previousBodyOverflow = null;
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
resolveToggleTrigger() {
|
|
576
|
+
const trigger = this.toggleTrigger();
|
|
577
|
+
const projectedTrigger = this.projectedToggleTrigger();
|
|
578
|
+
if (trigger instanceof ElementRef) {
|
|
579
|
+
return trigger.nativeElement;
|
|
580
|
+
}
|
|
581
|
+
if (typeof HTMLElement !== 'undefined' && trigger instanceof HTMLElement) {
|
|
582
|
+
return trigger;
|
|
583
|
+
}
|
|
584
|
+
return projectedTrigger?.nativeElement ?? null;
|
|
585
|
+
}
|
|
586
|
+
warnMissingTrigger() {
|
|
587
|
+
if (this.missingTriggerWarned)
|
|
588
|
+
return;
|
|
589
|
+
this.missingTriggerWarned = true;
|
|
590
|
+
console.warn('AvSidenav: quando toggleable estiver habilitado, forneça um botão com #toggleTrigger e passe-o em [toggleTrigger].');
|
|
591
|
+
}
|
|
592
|
+
coerceCssLength(value) {
|
|
593
|
+
if (typeof value === 'number') {
|
|
594
|
+
return `${value}px`;
|
|
595
|
+
}
|
|
596
|
+
return value;
|
|
597
|
+
}
|
|
598
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
599
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvSidenav, isStandalone: true, selector: "av-sidenav", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, backdropLabel: { classPropertyName: "backdropLabel", publicName: "backdropLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigation: { classPropertyName: "closeOnNavigation", publicName: "closeOnNavigation", isSignal: true, isRequired: false, transformFunction: null }, drawerBreakpoint: { classPropertyName: "drawerBreakpoint", publicName: "drawerBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, toggleTrigger: { classPropertyName: "toggleTrigger", publicName: "toggleTrigger", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", modeChange: "modeChange" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" }, properties: { "class.av-sidenav-host--drawer": "this.drawerClass", "class.av-sidenav-host--closed": "this.closedClass", "class.av-sidenav-host--toggleable": "this.toggleableClass", "style.--av-sidenav-width": "this.widthStyle" } }, queries: [{ propertyName: "projectedToggleTrigger", first: true, predicate: ["toggleTrigger"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (drawerMode() && isOpen() && toggleable()) {\n <button\n type=\"button\"\n class=\"av-sidenav__backdrop\"\n [attr.aria-label]=\"backdropLabel()\"\n (click)=\"closeFromBackdrop()\"\n ></button>\n}\n\n<nav\n class=\"av-sidenav\"\n [id]=\"navId\"\n [ngStyle]=\"themeVars()\"\n [class.av-sidenav--drawer]=\"drawerMode()\"\n [class.av-sidenav--closed]=\"!isOpen()\"\n [attr.aria-hidden]=\"!isOpen() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.inert]=\"!isOpen() ? '' : null\"\n (av-nav-link-select)=\"handleNavigation()\"\n>\n <div class=\"av-sidenav__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"av-sidenav__content\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"av-sidenav__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%;min-height:0;transition:width .2s ease;width:var(--av-sidenav-width, 16rem)}:host(.av-sidenav-host--closed:not(.av-sidenav-host--drawer)){width:0}:host(.av-sidenav-host--drawer){height:100dvh;inset:0;pointer-events:none;position:fixed;width:auto;z-index:var(--av-sidenav-z-index, 50)}.av-sidenav{background:var(--av-sidenav-surface, var(--av-color-surface));border:1px solid var(--av-sidenav-border, var(--av-color-border-soft));box-shadow:var(--av-shadow-raised);color:var(--av-sidenav-text, var(--av-color-text));display:flex;flex-direction:column;gap:.75rem;height:100%;overflow:hidden;padding:.75rem;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .22s ease;width:100%}.av-sidenav--drawer{max-width:calc(100dvw - 2rem);pointer-events:auto;position:relative;width:var(--av-sidenav-width, 16rem)}.av-sidenav--closed{transform:translate(calc(-100% - 1rem))}.av-sidenav__header,.av-sidenav__footer{flex:0 0 auto}.av-sidenav__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-height:0;overflow:auto}.av-sidenav__backdrop{background:#0f172a6b;border:0;cursor:pointer;inset:0;pointer-events:auto;position:fixed}:host-context([data-av-theme=\"dark\"]) .av-sidenav__backdrop{background:#00000094}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
600
|
+
}
|
|
601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSidenav, decorators: [{
|
|
602
|
+
type: Component,
|
|
603
|
+
args: [{ imports: [CommonModule], selector: 'av-sidenav', template: "@if (drawerMode() && isOpen() && toggleable()) {\n <button\n type=\"button\"\n class=\"av-sidenav__backdrop\"\n [attr.aria-label]=\"backdropLabel()\"\n (click)=\"closeFromBackdrop()\"\n ></button>\n}\n\n<nav\n class=\"av-sidenav\"\n [id]=\"navId\"\n [ngStyle]=\"themeVars()\"\n [class.av-sidenav--drawer]=\"drawerMode()\"\n [class.av-sidenav--closed]=\"!isOpen()\"\n [attr.aria-hidden]=\"!isOpen() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.inert]=\"!isOpen() ? '' : null\"\n (av-nav-link-select)=\"handleNavigation()\"\n>\n <div class=\"av-sidenav__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"av-sidenav__content\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"av-sidenav__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;height:100%;min-height:0;transition:width .2s ease;width:var(--av-sidenav-width, 16rem)}:host(.av-sidenav-host--closed:not(.av-sidenav-host--drawer)){width:0}:host(.av-sidenav-host--drawer){height:100dvh;inset:0;pointer-events:none;position:fixed;width:auto;z-index:var(--av-sidenav-z-index, 50)}.av-sidenav{background:var(--av-sidenav-surface, var(--av-color-surface));border:1px solid var(--av-sidenav-border, var(--av-color-border-soft));box-shadow:var(--av-shadow-raised);color:var(--av-sidenav-text, var(--av-color-text));display:flex;flex-direction:column;gap:.75rem;height:100%;overflow:hidden;padding:.75rem;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .22s ease;width:100%}.av-sidenav--drawer{max-width:calc(100dvw - 2rem);pointer-events:auto;position:relative;width:var(--av-sidenav-width, 16rem)}.av-sidenav--closed{transform:translate(calc(-100% - 1rem))}.av-sidenav__header,.av-sidenav__footer{flex:0 0 auto}.av-sidenav__content{display:flex;flex:1;flex-direction:column;gap:.25rem;min-height:0;overflow:auto}.av-sidenav__backdrop{background:#0f172a6b;border:0;cursor:pointer;inset:0;pointer-events:auto;position:fixed}:host-context([data-av-theme=\"dark\"]) .av-sidenav__backdrop{background:#00000094}\n"] }]
|
|
604
|
+
}], ctorParameters: () => [], propDecorators: { projectedToggleTrigger: [{ type: i0.ContentChild, args: ['toggleTrigger', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], backdropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropLabel", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigation", required: false }] }], drawerBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerBreakpoint", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], toggleTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleTrigger", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], drawerClass: [{
|
|
605
|
+
type: HostBinding,
|
|
606
|
+
args: ['class.av-sidenav-host--drawer']
|
|
607
|
+
}], closedClass: [{
|
|
608
|
+
type: HostBinding,
|
|
609
|
+
args: ['class.av-sidenav-host--closed']
|
|
610
|
+
}], toggleableClass: [{
|
|
611
|
+
type: HostBinding,
|
|
612
|
+
args: ['class.av-sidenav-host--toggleable']
|
|
613
|
+
}], widthStyle: [{
|
|
614
|
+
type: HostBinding,
|
|
615
|
+
args: ['style.--av-sidenav-width']
|
|
616
|
+
}], handleEscape: [{
|
|
617
|
+
type: HostListener,
|
|
618
|
+
args: ['document:keydown.escape', ['$event']]
|
|
619
|
+
}] } });
|
|
620
|
+
|
|
621
|
+
class AvCluster {
|
|
622
|
+
gap = input(1, /* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
624
|
+
get gapValue() {
|
|
625
|
+
return `${4 * this.gap()}px`;
|
|
626
|
+
}
|
|
627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCluster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvCluster, isStandalone: true, selector: "av-cluster", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"av-cluster\" [style.--av-cluster-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-cluster{display:flex;flex-wrap:wrap;overflow-x:auto;align-items:start;flex-direction:row;justify-content:start;gap:var(--av-cluster-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
629
|
+
}
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCluster, decorators: [{
|
|
631
|
+
type: Component,
|
|
632
|
+
args: [{ imports: [CommonModule], selector: 'av-cluster', template: "<div class=\"av-cluster\" [style.--av-cluster-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-cluster{display:flex;flex-wrap:wrap;overflow-x:auto;align-items:start;flex-direction:row;justify-content:start;gap:var(--av-cluster-gap)}\n"] }]
|
|
633
|
+
}], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
634
|
+
|
|
635
|
+
class AvDivider {
|
|
636
|
+
config = inject(VISUALS_CONFIG);
|
|
637
|
+
size = input(1, /* @ts-ignore */
|
|
638
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
639
|
+
direction = input('hori', /* @ts-ignore */
|
|
640
|
+
...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
641
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
642
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
643
|
+
get borderStyle() {
|
|
644
|
+
return `${4 * this.size()}px solid var(--av-${this.variant()}-600)`;
|
|
645
|
+
}
|
|
646
|
+
get isVertical() {
|
|
647
|
+
return this.direction() === 'vert';
|
|
648
|
+
}
|
|
649
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvDivider, isStandalone: true, selector: "lib-av-divider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"av-divider\"\n aria-hidden=\"true\"\n [style.border-left]=\"isVertical ? borderStyle : null\"\n [style.border-top]=\"isVertical ? null : borderStyle\"\n></div>\n", styles: [""] });
|
|
651
|
+
}
|
|
652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDivider, decorators: [{
|
|
653
|
+
type: Component,
|
|
654
|
+
args: [{ imports: [], selector: 'lib-av-divider', template: "<div\n class=\"av-divider\"\n aria-hidden=\"true\"\n [style.border-left]=\"isVertical ? borderStyle : null\"\n [style.border-top]=\"isVertical ? null : borderStyle\"\n></div>\n" }]
|
|
655
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
656
|
+
|
|
657
|
+
class AvInline {
|
|
658
|
+
gap = input(1, /* @ts-ignore */
|
|
659
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
660
|
+
get gapValue() {
|
|
661
|
+
return `${4 * this.gap()}px`;
|
|
662
|
+
}
|
|
663
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvInline, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
664
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvInline, isStandalone: true, selector: "av-inline", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"av-inline\" [style.--av-inline-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-inline{width:100%;height:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:start;flex-direction:row;justify-content:start;gap:var(--av-inline-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
665
|
+
}
|
|
666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvInline, decorators: [{
|
|
667
|
+
type: Component,
|
|
668
|
+
args: [{ imports: [CommonModule], selector: 'av-inline', template: "<div class=\"av-inline\" [style.--av-inline-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-inline{width:100%;height:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:start;flex-direction:row;justify-content:start;gap:var(--av-inline-gap)}\n"] }]
|
|
669
|
+
}], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
670
|
+
|
|
671
|
+
class AvStack {
|
|
672
|
+
gap = input(1, /* @ts-ignore */
|
|
673
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
674
|
+
get gapValue() {
|
|
675
|
+
return `${4 * this.gap()}px`;
|
|
676
|
+
}
|
|
677
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
678
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvStack, isStandalone: true, selector: "av-stack", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"av-stack\" [style.--av-stack-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-stack{display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:start;flex-direction:column;justify-content:start;gap:var(--av-stack-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
679
|
+
}
|
|
680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStack, decorators: [{
|
|
681
|
+
type: Component,
|
|
682
|
+
args: [{ imports: [CommonModule], selector: 'av-stack', template: "<div class=\"av-stack\" [style.--av-stack-gap]=\"gapValue\">\n <ng-content></ng-content>\n</div>\n", styles: [".av-stack{display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:start;flex-direction:column;justify-content:start;gap:var(--av-stack-gap)}\n"] }]
|
|
683
|
+
}], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
684
|
+
|
|
685
|
+
let nextTooltipId = 0;
|
|
686
|
+
class AvTooltipPanel {
|
|
687
|
+
id = signal('', /* @ts-ignore */
|
|
688
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
689
|
+
text = signal('', /* @ts-ignore */
|
|
690
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
691
|
+
position = signal('top', /* @ts-ignore */
|
|
692
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
693
|
+
themeVars = signal({}, /* @ts-ignore */
|
|
694
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
695
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
696
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AvTooltipPanel, isStandalone: true, selector: "av-tooltip-panel", ngImport: i0, template: "<div\n class=\"av-tooltip-panel\"\n role=\"tooltip\"\n [id]=\"id()\"\n [attr.data-position]=\"position()\"\n [ngStyle]=\"themeVars()\"\n>\n <span class=\"av-tooltip-panel__text\">{{ text() }}</span>\n <span class=\"av-tooltip-panel__arrow\" aria-hidden=\"true\"></span>\n</div>\n", styles: [":host{display:block;pointer-events:none}.av-tooltip-panel{--av-tooltip-arrow-size: .48rem;animation:av-tooltip-in .12s cubic-bezier(.2,0,0,1);background:var(--av-tooltip-bg);border:1px solid var(--av-tooltip-border);border-radius:var(--av-radius-md);box-shadow:var(--av-tooltip-shadow);color:var(--av-tooltip-color);font-size:.75rem;font-weight:700;line-height:1.35;max-width:min(18rem,calc(100vw - 2rem));padding:.45rem .6rem;position:relative;white-space:normal;word-break:break-word}.av-tooltip-panel:before{background:var(--av-tooltip-accent);border-radius:var(--av-radius-full);content:\"\";height:2px;inset-inline:.55rem;opacity:.8;position:absolute}.av-tooltip-panel[data-position=top]:before{bottom:0}.av-tooltip-panel[data-position=bottom]:before,.av-tooltip-panel[data-position=left]:before,.av-tooltip-panel[data-position=right]:before{top:0}.av-tooltip-panel__text{display:block}.av-tooltip-panel__arrow{background:var(--av-tooltip-bg);border:solid var(--av-tooltip-border);height:var(--av-tooltip-arrow-size);position:absolute;transform:rotate(45deg);width:var(--av-tooltip-arrow-size)}.av-tooltip-panel[data-position=top] .av-tooltip-panel__arrow{border-width:0 1px 1px 0;bottom:calc(var(--av-tooltip-arrow-size) / -2);left:calc(50% - var(--av-tooltip-arrow-size) / 2)}.av-tooltip-panel[data-position=bottom] .av-tooltip-panel__arrow{border-width:1px 0 0 1px;left:calc(50% - var(--av-tooltip-arrow-size) / 2);top:calc(var(--av-tooltip-arrow-size) / -2)}.av-tooltip-panel[data-position=left] .av-tooltip-panel__arrow{border-width:1px 1px 0 0;right:calc(var(--av-tooltip-arrow-size) / -2);top:calc(50% - var(--av-tooltip-arrow-size) / 2)}.av-tooltip-panel[data-position=right] .av-tooltip-panel__arrow{border-width:0 0 1px 1px;left:calc(var(--av-tooltip-arrow-size) / -2);top:calc(50% - var(--av-tooltip-arrow-size) / 2)}@keyframes av-tooltip-in{0%{opacity:0;transform:translateY(.15rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
697
|
+
}
|
|
698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTooltipPanel, decorators: [{
|
|
699
|
+
type: Component,
|
|
700
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], selector: 'av-tooltip-panel', template: "<div\n class=\"av-tooltip-panel\"\n role=\"tooltip\"\n [id]=\"id()\"\n [attr.data-position]=\"position()\"\n [ngStyle]=\"themeVars()\"\n>\n <span class=\"av-tooltip-panel__text\">{{ text() }}</span>\n <span class=\"av-tooltip-panel__arrow\" aria-hidden=\"true\"></span>\n</div>\n", styles: [":host{display:block;pointer-events:none}.av-tooltip-panel{--av-tooltip-arrow-size: .48rem;animation:av-tooltip-in .12s cubic-bezier(.2,0,0,1);background:var(--av-tooltip-bg);border:1px solid var(--av-tooltip-border);border-radius:var(--av-radius-md);box-shadow:var(--av-tooltip-shadow);color:var(--av-tooltip-color);font-size:.75rem;font-weight:700;line-height:1.35;max-width:min(18rem,calc(100vw - 2rem));padding:.45rem .6rem;position:relative;white-space:normal;word-break:break-word}.av-tooltip-panel:before{background:var(--av-tooltip-accent);border-radius:var(--av-radius-full);content:\"\";height:2px;inset-inline:.55rem;opacity:.8;position:absolute}.av-tooltip-panel[data-position=top]:before{bottom:0}.av-tooltip-panel[data-position=bottom]:before,.av-tooltip-panel[data-position=left]:before,.av-tooltip-panel[data-position=right]:before{top:0}.av-tooltip-panel__text{display:block}.av-tooltip-panel__arrow{background:var(--av-tooltip-bg);border:solid var(--av-tooltip-border);height:var(--av-tooltip-arrow-size);position:absolute;transform:rotate(45deg);width:var(--av-tooltip-arrow-size)}.av-tooltip-panel[data-position=top] .av-tooltip-panel__arrow{border-width:0 1px 1px 0;bottom:calc(var(--av-tooltip-arrow-size) / -2);left:calc(50% - var(--av-tooltip-arrow-size) / 2)}.av-tooltip-panel[data-position=bottom] .av-tooltip-panel__arrow{border-width:1px 0 0 1px;left:calc(50% - var(--av-tooltip-arrow-size) / 2);top:calc(var(--av-tooltip-arrow-size) / -2)}.av-tooltip-panel[data-position=left] .av-tooltip-panel__arrow{border-width:1px 1px 0 0;right:calc(var(--av-tooltip-arrow-size) / -2);top:calc(50% - var(--av-tooltip-arrow-size) / 2)}.av-tooltip-panel[data-position=right] .av-tooltip-panel__arrow{border-width:0 0 1px 1px;left:calc(var(--av-tooltip-arrow-size) / -2);top:calc(50% - var(--av-tooltip-arrow-size) / 2)}@keyframes av-tooltip-in{0%{opacity:0;transform:translateY(.15rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
701
|
+
}] });
|
|
702
|
+
class AvTooltip {
|
|
703
|
+
config = inject(VISUALS_CONFIG);
|
|
704
|
+
elementRef = inject(ElementRef);
|
|
705
|
+
overlay = inject(Overlay);
|
|
706
|
+
renderer = inject(Renderer2);
|
|
707
|
+
themeService = inject(ThemeService);
|
|
708
|
+
text = input('', { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'av-tooltip' });
|
|
709
|
+
textCamel = input('', { ...(ngDevMode ? { debugName: "textCamel" } : /* istanbul ignore next */ {}), alias: 'avTooltip' });
|
|
710
|
+
position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'avTooltipPosition' });
|
|
711
|
+
variant = input(this.config.theme.defaultVariant, { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), alias: 'avTooltipVariant' });
|
|
712
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'avTooltipDisabled',
|
|
713
|
+
transform: booleanAttribute });
|
|
714
|
+
showDelay = input(120, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'avTooltipShowDelay',
|
|
715
|
+
transform: numberAttribute });
|
|
716
|
+
hideDelay = input(60, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'avTooltipHideDelay',
|
|
717
|
+
transform: numberAttribute });
|
|
718
|
+
offset = input(8, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'avTooltipOffset',
|
|
719
|
+
transform: numberAttribute });
|
|
720
|
+
tooltipId = `av-tooltip-${++nextTooltipId}`;
|
|
721
|
+
overlayRef;
|
|
722
|
+
panel;
|
|
723
|
+
positionStrategy;
|
|
724
|
+
positionSubscription;
|
|
725
|
+
showTimeout;
|
|
726
|
+
hideTimeout;
|
|
727
|
+
previousDescribedBy;
|
|
728
|
+
content = computed(() => this.textCamel() || this.text(), /* @ts-ignore */
|
|
729
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
730
|
+
themeVars = computed(() => {
|
|
731
|
+
const variant = this.variant();
|
|
732
|
+
const isDark = this.themeService.dark();
|
|
733
|
+
const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
|
|
734
|
+
return {
|
|
735
|
+
'--av-tooltip-bg': isDark
|
|
736
|
+
? 'var(--av-color-surface-raised)'
|
|
737
|
+
: 'var(--av-slate-950)',
|
|
738
|
+
'--av-tooltip-border': isDark
|
|
739
|
+
? `color-mix(in srgb, ${accent} 34%, var(--av-color-border-soft))`
|
|
740
|
+
: `color-mix(in srgb, ${accent} 44%, var(--av-slate-800))`,
|
|
741
|
+
'--av-tooltip-color': isDark
|
|
742
|
+
? 'var(--av-color-text)'
|
|
743
|
+
: 'var(--av-white)',
|
|
744
|
+
'--av-tooltip-shadow': 'var(--av-shadow-raised)',
|
|
745
|
+
'--av-tooltip-accent': accent,
|
|
746
|
+
};
|
|
747
|
+
}, /* @ts-ignore */
|
|
748
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
749
|
+
show() {
|
|
750
|
+
if (this.disabled() || !this.content().trim())
|
|
751
|
+
return;
|
|
752
|
+
clearTimeout(this.hideTimeout);
|
|
753
|
+
clearTimeout(this.showTimeout);
|
|
754
|
+
this.showTimeout = setTimeout(() => {
|
|
755
|
+
this.open();
|
|
756
|
+
}, Math.max(0, this.showDelay()));
|
|
757
|
+
}
|
|
758
|
+
hide() {
|
|
759
|
+
clearTimeout(this.showTimeout);
|
|
760
|
+
clearTimeout(this.hideTimeout);
|
|
761
|
+
this.hideTimeout = setTimeout(() => {
|
|
762
|
+
this.detach();
|
|
763
|
+
}, Math.max(0, this.hideDelay()));
|
|
764
|
+
}
|
|
765
|
+
hideImmediately() {
|
|
766
|
+
clearTimeout(this.showTimeout);
|
|
767
|
+
clearTimeout(this.hideTimeout);
|
|
768
|
+
this.detach();
|
|
769
|
+
}
|
|
770
|
+
open() {
|
|
771
|
+
if (!this.overlayRef) {
|
|
772
|
+
this.createOverlay();
|
|
773
|
+
}
|
|
774
|
+
this.positionStrategy?.withPositions(this.positionsFor(this.safePosition()));
|
|
775
|
+
if (!this.overlayRef?.hasAttached()) {
|
|
776
|
+
const portal = new ComponentPortal(AvTooltipPanel);
|
|
777
|
+
const ref = this.overlayRef?.attach(portal);
|
|
778
|
+
this.panel = ref?.instance;
|
|
779
|
+
this.setAriaDescription();
|
|
780
|
+
}
|
|
781
|
+
this.updatePanel();
|
|
782
|
+
this.overlayRef?.updatePosition();
|
|
783
|
+
}
|
|
784
|
+
createOverlay() {
|
|
785
|
+
this.positionStrategy = this.overlay
|
|
786
|
+
.position()
|
|
787
|
+
.flexibleConnectedTo(this.elementRef)
|
|
788
|
+
.withFlexibleDimensions(false)
|
|
789
|
+
.withPush(true)
|
|
790
|
+
.withViewportMargin(8)
|
|
791
|
+
.withPositions(this.positionsFor(this.safePosition()));
|
|
792
|
+
this.positionSubscription = this.positionStrategy.positionChanges.subscribe(({ connectionPair }) => {
|
|
793
|
+
this.panel?.position.set(this.positionFromConnection(connectionPair));
|
|
794
|
+
});
|
|
795
|
+
this.overlayRef = this.overlay.create({
|
|
796
|
+
panelClass: 'av-tooltip-overlay',
|
|
797
|
+
positionStrategy: this.positionStrategy,
|
|
798
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
799
|
+
});
|
|
800
|
+
}
|
|
801
|
+
updatePanel() {
|
|
802
|
+
if (!this.panel)
|
|
803
|
+
return;
|
|
804
|
+
this.panel.id.set(this.tooltipId);
|
|
805
|
+
this.panel.text.set(this.content());
|
|
806
|
+
this.panel.position.set(this.safePosition());
|
|
807
|
+
this.panel.themeVars.set(this.themeVars());
|
|
808
|
+
}
|
|
809
|
+
detach() {
|
|
810
|
+
this.overlayRef?.detach();
|
|
811
|
+
this.panel = undefined;
|
|
812
|
+
this.restoreAriaDescription();
|
|
813
|
+
}
|
|
814
|
+
setAriaDescription() {
|
|
815
|
+
const host = this.elementRef.nativeElement;
|
|
816
|
+
if (this.previousDescribedBy === undefined) {
|
|
817
|
+
this.previousDescribedBy = host.getAttribute('aria-describedby');
|
|
818
|
+
}
|
|
819
|
+
const ids = [this.previousDescribedBy, this.tooltipId]
|
|
820
|
+
.filter(Boolean)
|
|
821
|
+
.join(' ');
|
|
822
|
+
this.renderer.setAttribute(host, 'aria-describedby', ids);
|
|
823
|
+
}
|
|
824
|
+
restoreAriaDescription() {
|
|
825
|
+
const host = this.elementRef.nativeElement;
|
|
826
|
+
if (this.previousDescribedBy) {
|
|
827
|
+
this.renderer.setAttribute(host, 'aria-describedby', this.previousDescribedBy);
|
|
828
|
+
return;
|
|
829
|
+
}
|
|
830
|
+
this.renderer.removeAttribute(host, 'aria-describedby');
|
|
831
|
+
}
|
|
832
|
+
safePosition() {
|
|
833
|
+
const position = this.position();
|
|
834
|
+
return ['top', 'right', 'bottom', 'left'].includes(position)
|
|
835
|
+
? position
|
|
836
|
+
: 'top';
|
|
837
|
+
}
|
|
838
|
+
positionsFor(position) {
|
|
839
|
+
const offset = Math.max(0, this.offset());
|
|
840
|
+
const positions = {
|
|
841
|
+
top: [
|
|
842
|
+
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
|
|
843
|
+
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
|
|
844
|
+
],
|
|
845
|
+
right: [
|
|
846
|
+
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
|
|
847
|
+
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
|
|
848
|
+
],
|
|
849
|
+
bottom: [
|
|
850
|
+
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
|
|
851
|
+
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
|
|
852
|
+
],
|
|
853
|
+
left: [
|
|
854
|
+
{ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
|
|
855
|
+
{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
|
|
856
|
+
],
|
|
857
|
+
};
|
|
858
|
+
return positions[position];
|
|
859
|
+
}
|
|
860
|
+
positionFromConnection(position) {
|
|
861
|
+
if (position.overlayY === 'bottom' && position.originY === 'top')
|
|
862
|
+
return 'top';
|
|
863
|
+
if (position.overlayY === 'top' && position.originY === 'bottom')
|
|
864
|
+
return 'bottom';
|
|
865
|
+
if (position.overlayX === 'end' && position.originX === 'start')
|
|
866
|
+
return 'left';
|
|
867
|
+
return 'right';
|
|
868
|
+
}
|
|
869
|
+
ngOnDestroy() {
|
|
870
|
+
clearTimeout(this.showTimeout);
|
|
871
|
+
clearTimeout(this.hideTimeout);
|
|
872
|
+
this.positionSubscription?.unsubscribe();
|
|
873
|
+
this.overlayRef?.dispose();
|
|
874
|
+
this.restoreAriaDescription();
|
|
875
|
+
}
|
|
876
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
877
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AvTooltip, isStandalone: true, selector: "[av-tooltip], [avTooltip]", inputs: { text: { classPropertyName: "text", publicName: "av-tooltip", isSignal: true, isRequired: false, transformFunction: null }, textCamel: { classPropertyName: "textCamel", publicName: "avTooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "avTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "avTooltipVariant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "avTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "avTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "avTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "avTooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "focusout": "hide()", "keydown.escape": "hideImmediately()" } }, exportAs: ["avTooltip"], ngImport: i0 });
|
|
878
|
+
}
|
|
879
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTooltip, decorators: [{
|
|
880
|
+
type: Directive,
|
|
881
|
+
args: [{
|
|
882
|
+
exportAs: 'avTooltip',
|
|
883
|
+
selector: '[av-tooltip], [avTooltip]',
|
|
884
|
+
standalone: true,
|
|
885
|
+
}]
|
|
886
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "av-tooltip", required: false }] }], textCamel: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltip", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipPosition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipVariant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipDisabled", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipHideDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "avTooltipOffset", required: false }] }], show: [{
|
|
887
|
+
type: HostListener,
|
|
888
|
+
args: ['mouseenter']
|
|
889
|
+
}, {
|
|
890
|
+
type: HostListener,
|
|
891
|
+
args: ['focusin']
|
|
892
|
+
}], hide: [{
|
|
893
|
+
type: HostListener,
|
|
894
|
+
args: ['mouseleave']
|
|
895
|
+
}, {
|
|
896
|
+
type: HostListener,
|
|
897
|
+
args: ['focusout']
|
|
898
|
+
}], hideImmediately: [{
|
|
899
|
+
type: HostListener,
|
|
900
|
+
args: ['keydown.escape']
|
|
901
|
+
}] } });
|
|
902
|
+
|
|
903
|
+
class AvTextArea {
|
|
904
|
+
ngControl;
|
|
905
|
+
config = inject(VISUALS_CONFIG);
|
|
906
|
+
placeholder = input('', /* @ts-ignore */
|
|
907
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
908
|
+
type = input('text', /* @ts-ignore */
|
|
909
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
910
|
+
label = input(/* @ts-ignore */
|
|
911
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
912
|
+
icon = input(/* @ts-ignore */
|
|
913
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
914
|
+
loading = input(false, /* @ts-ignore */
|
|
915
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
916
|
+
autoFocus = input(false, /* @ts-ignore */
|
|
917
|
+
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
918
|
+
loadingIcon = input('blocks-shuffle-3', /* @ts-ignore */
|
|
919
|
+
...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
|
|
920
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
921
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
922
|
+
rounded = input("md", /* @ts-ignore */
|
|
923
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
924
|
+
errorMessage = input('', /* @ts-ignore */
|
|
925
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
926
|
+
inputEl;
|
|
927
|
+
value = '';
|
|
928
|
+
disabled = false;
|
|
929
|
+
// Funções de callback registradas pelo Angular Forms
|
|
930
|
+
onChange = () => { };
|
|
931
|
+
onTouched = () => { };
|
|
932
|
+
constructor(ngControl) {
|
|
933
|
+
this.ngControl = ngControl;
|
|
934
|
+
if (this.ngControl) {
|
|
935
|
+
this.ngControl.valueAccessor = this;
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
ngAfterViewInit() {
|
|
939
|
+
if (this.autoFocus() && this.inputEl) {
|
|
940
|
+
setTimeout(() => this.inputEl.nativeElement.focus(), 0);
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
get controlClasses() {
|
|
944
|
+
return [
|
|
945
|
+
this.isInvalid ? 'av-input__control--invalid' : '',
|
|
946
|
+
].filter(Boolean).join(' ');
|
|
947
|
+
}
|
|
948
|
+
get isInvalid() {
|
|
949
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
950
|
+
}
|
|
951
|
+
writeValue(value) {
|
|
952
|
+
this.value = value || '';
|
|
953
|
+
}
|
|
954
|
+
registerOnChange(fn) {
|
|
955
|
+
this.onChange = fn;
|
|
956
|
+
}
|
|
957
|
+
registerOnTouched(fn) {
|
|
958
|
+
this.onTouched = fn;
|
|
959
|
+
}
|
|
960
|
+
setDisabledState(isDisabled) {
|
|
961
|
+
this.disabled = isDisabled;
|
|
962
|
+
}
|
|
963
|
+
onInput(event) {
|
|
964
|
+
const target = event.target;
|
|
965
|
+
this.value = target.value;
|
|
966
|
+
this.onChange(this.value);
|
|
967
|
+
}
|
|
968
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTextArea, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvTextArea, isStandalone: true, selector: "av-text-area", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"av-text-area\"\n[style.--av-text-area-accent]=\"`var(--av-${variant()}-500)`\"\n[style.--av-text-area-accent-dark]=\"`var(--av-${variant()}-400)`\"\n>\n @if (label()) {\n <label class=\"av-text-area__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-text-area__field\">\n @if (icon() || loading()) {\n <div class=\"av-text-area__icon\">\n <span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>\n </div>\n }\n\n <textarea\n #inputRef\n [value]=\"value\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n class=\"av-text-area__control\"\n [class.av-text-area__control--with-icon]=\"icon()\"\n [class.av-text-area__control--without-icon]=\"!icon()\"\n [ngClass]=\"controlClasses\"\n >\n </textarea>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-text-area__error\">\n {{ errorMessage() || 'Campo inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-text-area{--av-text-area-control-bg: var(--av-color-surface);--av-text-area-color: var(--av-color-text);--av-text-area-muted-color: var(--av-color-text-subtle);--av-text-area-border: var(--av-color-border);--av-text-area-hover-border: var(--av-color-border-hover);--av-text-area-focus-color: var(--av-text-area-accent, var(--av-slate-500));--av-text-area-disabled-bg: var(--av-color-surface-muted);--av-text-area-invalid-color: var(--av-color-danger);--av-text-area-invalid-text: var(--av-color-danger-text);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-text-area-color)}.av-text-area__label{color:var(--av-text-area-color);font-size:.875rem;font-weight:700;text-align:start}.av-text-area__field{align-items:center;display:flex;position:relative;width:100%}.av-text-area__icon{color:var(--av-text-area-muted-color);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-text-area__control{background-color:var(--av-text-area-control-bg);border:2px solid var(--av-text-area-border);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-control);color:var(--av-text-area-color);padding:.5rem 1rem;transition:all .2s ease;width:100%}.av-text-area__control::placeholder{color:var(--av-text-area-muted-color)}.av-text-area__control:hover{border-color:var(--av-text-area-hover-border)}.av-text-area__control:focus{outline:none}.av-text-area__control:disabled{background:var(--av-text-area-disabled-bg);color:var(--av-color-text-muted);opacity:.72;cursor:not-allowed}.av-text-area__control--with-icon{padding-left:2.5rem}.av-text-area__control--without-icon{padding-left:1rem}.av-text-area__control:focus{border-color:var(--av-text-area-focus-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-text-area-focus-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-text-area-focus-color) 24%,transparent)}.av-text-area__control--invalid,.av-text-area__control--invalid:focus{border-color:var(--av-text-area-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-text-area-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-text-area-invalid-color) 24%,transparent);color:var(--av-text-area-invalid-text);animation:av-text-area-shake .4s ease-in-out}.av-text-area__error{color:var(--av-text-area-invalid-color);font-size:.75rem;font-weight:500}@keyframes av-text-area-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}:host-context([data-av-theme=\"dark\"]) .av-text-area{--av-text-area-focus-color: var(--av-text-area-accent-dark, var(--av-text-area-accent, var(--av-slate-400)))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
970
|
+
}
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTextArea, decorators: [{
|
|
972
|
+
type: Component,
|
|
973
|
+
args: [{ selector: 'av-text-area', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, AvIcon], template: "<div class=\"av-text-area\"\n[style.--av-text-area-accent]=\"`var(--av-${variant()}-500)`\"\n[style.--av-text-area-accent-dark]=\"`var(--av-${variant()}-400)`\"\n>\n @if (label()) {\n <label class=\"av-text-area__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-text-area__field\">\n @if (icon() || loading()) {\n <div class=\"av-text-area__icon\">\n <span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>\n </div>\n }\n\n <textarea\n #inputRef\n [value]=\"value\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n class=\"av-text-area__control\"\n [class.av-text-area__control--with-icon]=\"icon()\"\n [class.av-text-area__control--without-icon]=\"!icon()\"\n [ngClass]=\"controlClasses\"\n >\n </textarea>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-text-area__error\">\n {{ errorMessage() || 'Campo inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-text-area{--av-text-area-control-bg: var(--av-color-surface);--av-text-area-color: var(--av-color-text);--av-text-area-muted-color: var(--av-color-text-subtle);--av-text-area-border: var(--av-color-border);--av-text-area-hover-border: var(--av-color-border-hover);--av-text-area-focus-color: var(--av-text-area-accent, var(--av-slate-500));--av-text-area-disabled-bg: var(--av-color-surface-muted);--av-text-area-invalid-color: var(--av-color-danger);--av-text-area-invalid-text: var(--av-color-danger-text);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-text-area-color)}.av-text-area__label{color:var(--av-text-area-color);font-size:.875rem;font-weight:700;text-align:start}.av-text-area__field{align-items:center;display:flex;position:relative;width:100%}.av-text-area__icon{color:var(--av-text-area-muted-color);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-text-area__control{background-color:var(--av-text-area-control-bg);border:2px solid var(--av-text-area-border);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-control);color:var(--av-text-area-color);padding:.5rem 1rem;transition:all .2s ease;width:100%}.av-text-area__control::placeholder{color:var(--av-text-area-muted-color)}.av-text-area__control:hover{border-color:var(--av-text-area-hover-border)}.av-text-area__control:focus{outline:none}.av-text-area__control:disabled{background:var(--av-text-area-disabled-bg);color:var(--av-color-text-muted);opacity:.72;cursor:not-allowed}.av-text-area__control--with-icon{padding-left:2.5rem}.av-text-area__control--without-icon{padding-left:1rem}.av-text-area__control:focus{border-color:var(--av-text-area-focus-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-text-area-focus-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-text-area-focus-color) 24%,transparent)}.av-text-area__control--invalid,.av-text-area__control--invalid:focus{border-color:var(--av-text-area-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-text-area-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-text-area-invalid-color) 24%,transparent);color:var(--av-text-area-invalid-text);animation:av-text-area-shake .4s ease-in-out}.av-text-area__error{color:var(--av-text-area-invalid-color);font-size:.75rem;font-weight:500}@keyframes av-text-area-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}:host-context([data-av-theme=\"dark\"]) .av-text-area{--av-text-area-focus-color: var(--av-text-area-accent-dark, var(--av-text-area-accent, var(--av-slate-400)))}\n"] }]
|
|
974
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
975
|
+
type: Optional
|
|
976
|
+
}, {
|
|
977
|
+
type: Self
|
|
978
|
+
}] }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], inputEl: [{
|
|
979
|
+
type: ViewChild,
|
|
980
|
+
args: ['inputRef']
|
|
981
|
+
}] } });
|
|
982
|
+
|
|
983
|
+
class AvText {
|
|
984
|
+
value = input('', /* @ts-ignore */
|
|
985
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
986
|
+
animation = input('none', /* @ts-ignore */
|
|
987
|
+
...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
|
|
988
|
+
duration = input(250, /* @ts-ignore */
|
|
989
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
990
|
+
current = signal('', /* @ts-ignore */
|
|
991
|
+
...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
|
|
992
|
+
previous = signal(null, /* @ts-ignore */
|
|
993
|
+
...(ngDevMode ? [{ debugName: "previous" }] : /* istanbul ignore next */ []));
|
|
994
|
+
animating = signal(false, /* @ts-ignore */
|
|
995
|
+
...(ngDevMode ? [{ debugName: "animating" }] : /* istanbul ignore next */ []));
|
|
996
|
+
timeout;
|
|
997
|
+
constructor() {
|
|
998
|
+
effect(() => {
|
|
999
|
+
const value = this.value();
|
|
1000
|
+
if (value === this.current()) {
|
|
1001
|
+
return;
|
|
1002
|
+
}
|
|
1003
|
+
this.animateTo(value);
|
|
1004
|
+
});
|
|
1005
|
+
}
|
|
1006
|
+
animateTo(value) {
|
|
1007
|
+
clearTimeout(this.timeout);
|
|
1008
|
+
this.previous.set(this.current());
|
|
1009
|
+
this.current.set(value);
|
|
1010
|
+
this.animating.set(true);
|
|
1011
|
+
this.timeout = setTimeout(() => {
|
|
1012
|
+
this.previous.set(null);
|
|
1013
|
+
this.animating.set(false);
|
|
1014
|
+
}, this.duration());
|
|
1015
|
+
}
|
|
1016
|
+
ngOnDestroy() {
|
|
1017
|
+
clearTimeout(this.timeout);
|
|
1018
|
+
}
|
|
1019
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1020
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvText, isStandalone: true, selector: "av-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"av-text\"\n [class.av-text--animating]=\"animating()\"\n [class.av-text--fade]=\"animation() === 'fade'\"\n [class.av-text--slide]=\"animation() === 'slide'\"\n [style.--av-text-duration.ms]=\"duration()\"\n>\n <span\n class=\"av-text__measure\"\n aria-hidden=\"true\"\n >\n {{ current() }}\n </span>\n\n @if (previous() !== null) {\n <span class=\"av-text__value av-text__value--old\">\n {{ previous() }}\n </span>\n }\n\n <span class=\"av-text__value av-text__value--new\">\n {{ current() }}\n </span>\n</span>\n", styles: [".av-text{position:relative;display:inline-grid;overflow:hidden;vertical-align:bottom}.av-text__measure{grid-area:1 / 1;visibility:hidden}.av-text__value{grid-area:1 / 1;display:inline-block;transition:transform var(--av-text-duration) cubic-bezier(.2,0,0,1),opacity var(--av-text-duration) ease}.av-text--fade .av-text__value--old{animation:av-text-fade-out var(--av-text-duration) ease forwards}.av-text--fade .av-text__value--new{animation:av-text-fade-in var(--av-text-duration) ease forwards}@keyframes av-text-fade-out{0%{opacity:1}to{opacity:0}}@keyframes av-text-fade-in{0%{opacity:0}to{opacity:1}}.av-text--slide .av-text__value--old{animation:av-text-slide-out var(--av-text-duration) cubic-bezier(.2,0,0,1) forwards}.av-text--slide .av-text__value--new{animation:av-text-slide-in var(--av-text-duration) cubic-bezier(.2,0,0,1) forwards}@keyframes av-text-slide-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes av-text-slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] });
|
|
1021
|
+
}
|
|
1022
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvText, decorators: [{
|
|
1023
|
+
type: Component,
|
|
1024
|
+
args: [{ imports: [], selector: 'av-text', standalone: true, template: "<span\n class=\"av-text\"\n [class.av-text--animating]=\"animating()\"\n [class.av-text--fade]=\"animation() === 'fade'\"\n [class.av-text--slide]=\"animation() === 'slide'\"\n [style.--av-text-duration.ms]=\"duration()\"\n>\n <span\n class=\"av-text__measure\"\n aria-hidden=\"true\"\n >\n {{ current() }}\n </span>\n\n @if (previous() !== null) {\n <span class=\"av-text__value av-text__value--old\">\n {{ previous() }}\n </span>\n }\n\n <span class=\"av-text__value av-text__value--new\">\n {{ current() }}\n </span>\n</span>\n", styles: [".av-text{position:relative;display:inline-grid;overflow:hidden;vertical-align:bottom}.av-text__measure{grid-area:1 / 1;visibility:hidden}.av-text__value{grid-area:1 / 1;display:inline-block;transition:transform var(--av-text-duration) cubic-bezier(.2,0,0,1),opacity var(--av-text-duration) ease}.av-text--fade .av-text__value--old{animation:av-text-fade-out var(--av-text-duration) ease forwards}.av-text--fade .av-text__value--new{animation:av-text-fade-in var(--av-text-duration) ease forwards}@keyframes av-text-fade-out{0%{opacity:1}to{opacity:0}}@keyframes av-text-fade-in{0%{opacity:0}to{opacity:1}}.av-text--slide .av-text__value--old{animation:av-text-slide-out var(--av-text-duration) cubic-bezier(.2,0,0,1) forwards}.av-text--slide .av-text__value--new{animation:av-text-slide-in var(--av-text-duration) cubic-bezier(.2,0,0,1) forwards}@keyframes av-text-slide-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes av-text-slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
1025
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
|
|
1026
|
+
|
|
1027
|
+
let nextId = 0;
|
|
1028
|
+
class AvFileUpload {
|
|
1029
|
+
config = inject(VISUALS_CONFIG);
|
|
1030
|
+
themeService = inject(ThemeService);
|
|
1031
|
+
fileInput;
|
|
1032
|
+
id = input('', /* @ts-ignore */
|
|
1033
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1034
|
+
name = input('', /* @ts-ignore */
|
|
1035
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1036
|
+
label = input('', /* @ts-ignore */
|
|
1037
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1038
|
+
helper = input('', /* @ts-ignore */
|
|
1039
|
+
...(ngDevMode ? [{ debugName: "helper" }] : /* istanbul ignore next */ []));
|
|
1040
|
+
emptyText = input('Nenhum arquivo selecionado', /* @ts-ignore */
|
|
1041
|
+
...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
1042
|
+
loadingText = input('Carregando...', /* @ts-ignore */
|
|
1043
|
+
...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
1044
|
+
dropText = input('Solte para anexar', /* @ts-ignore */
|
|
1045
|
+
...(ngDevMode ? [{ debugName: "dropText" }] : /* istanbul ignore next */ []));
|
|
1046
|
+
browseText = input('Escolher', /* @ts-ignore */
|
|
1047
|
+
...(ngDevMode ? [{ debugName: "browseText" }] : /* istanbul ignore next */ []));
|
|
1048
|
+
accept = input('', /* @ts-ignore */
|
|
1049
|
+
...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
1050
|
+
capture = input(undefined, /* @ts-ignore */
|
|
1051
|
+
...(ngDevMode ? [{ debugName: "capture" }] : /* istanbul ignore next */ []));
|
|
1052
|
+
value = input(null, /* @ts-ignore */
|
|
1053
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1054
|
+
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1055
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1056
|
+
clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1057
|
+
showList = input(true, { ...(ngDevMode ? { debugName: "showList" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1058
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1059
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1060
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
1061
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
1062
|
+
rounded = input('lg', /* @ts-ignore */
|
|
1063
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1064
|
+
errorMessage = input('', /* @ts-ignore */
|
|
1065
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1066
|
+
valueChange = output();
|
|
1067
|
+
filesChange = output();
|
|
1068
|
+
rejected = output();
|
|
1069
|
+
cleared = output();
|
|
1070
|
+
inputId = `av-file-upload-${++nextId}`;
|
|
1071
|
+
files = signal([], /* @ts-ignore */
|
|
1072
|
+
...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
|
|
1073
|
+
dragging = signal(false, /* @ts-ignore */
|
|
1074
|
+
...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
|
|
1075
|
+
statusOverride = signal(null, /* @ts-ignore */
|
|
1076
|
+
...(ngDevMode ? [{ debugName: "statusOverride" }] : /* istanbul ignore next */ []));
|
|
1077
|
+
rejectionMessage = signal('', /* @ts-ignore */
|
|
1078
|
+
...(ngDevMode ? [{ debugName: "rejectionMessage" }] : /* istanbul ignore next */ []));
|
|
1079
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
1080
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
1081
|
+
statusTimeout;
|
|
1082
|
+
onChange = () => { };
|
|
1083
|
+
onTouched = () => { };
|
|
1084
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
1085
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1086
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
1087
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
1088
|
+
displayText = computed(() => {
|
|
1089
|
+
if (this.dragging())
|
|
1090
|
+
return this.dropText();
|
|
1091
|
+
return this.statusOverride() || this.selectedLabel();
|
|
1092
|
+
}, /* @ts-ignore */
|
|
1093
|
+
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
1094
|
+
supportingText = computed(() => {
|
|
1095
|
+
if (this.helper())
|
|
1096
|
+
return this.helper();
|
|
1097
|
+
if (this.accept())
|
|
1098
|
+
return `Aceita: ${this.accept()}`;
|
|
1099
|
+
return this.multiple()
|
|
1100
|
+
? 'Selecione ou arraste vários arquivos'
|
|
1101
|
+
: 'Selecione ou arraste um arquivo';
|
|
1102
|
+
}, /* @ts-ignore */
|
|
1103
|
+
...(ngDevMode ? [{ debugName: "supportingText" }] : /* istanbul ignore next */ []));
|
|
1104
|
+
hostId = computed(() => this.id() || this.inputId, /* @ts-ignore */
|
|
1105
|
+
...(ngDevMode ? [{ debugName: "hostId" }] : /* istanbul ignore next */ []));
|
|
1106
|
+
themeVars = computed(() => {
|
|
1107
|
+
const variant = this.activeVariant();
|
|
1108
|
+
const isDark = this.themeService.dark();
|
|
1109
|
+
const accentStep = isDark ? 400 : 500;
|
|
1110
|
+
return {
|
|
1111
|
+
'--av-file-upload-accent': `var(--av-${variant}-${accentStep})`,
|
|
1112
|
+
'--av-file-upload-accent-soft': isDark
|
|
1113
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
1114
|
+
: `color-mix(in srgb, var(--av-${variant}-500) 10%, var(--av-color-surface))`,
|
|
1115
|
+
'--av-file-upload-ring': `color-mix(in srgb, var(--av-${variant}-${accentStep}) 24%, transparent)`,
|
|
1116
|
+
'--av-file-upload-rounded': this.roundedValue(),
|
|
1117
|
+
};
|
|
1118
|
+
}, /* @ts-ignore */
|
|
1119
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
1120
|
+
constructor() {
|
|
1121
|
+
effect(() => {
|
|
1122
|
+
const value = this.value();
|
|
1123
|
+
untracked(() => this.setFiles(this.normalizeInputValue(value), false));
|
|
1124
|
+
});
|
|
1125
|
+
}
|
|
1126
|
+
writeValue(value) {
|
|
1127
|
+
this.setFiles(this.normalizeInputValue(value), false);
|
|
1128
|
+
}
|
|
1129
|
+
registerOnChange(fn) {
|
|
1130
|
+
this.onChange = fn;
|
|
1131
|
+
}
|
|
1132
|
+
registerOnTouched(fn) {
|
|
1133
|
+
this.onTouched = fn;
|
|
1134
|
+
}
|
|
1135
|
+
setDisabledState(disabled) {
|
|
1136
|
+
this.formDisabled.set(disabled);
|
|
1137
|
+
}
|
|
1138
|
+
openPicker(event) {
|
|
1139
|
+
event.preventDefault();
|
|
1140
|
+
if (this.isDisabled())
|
|
1141
|
+
return;
|
|
1142
|
+
this.fileInput?.nativeElement.click();
|
|
1143
|
+
}
|
|
1144
|
+
onNativeChange(event) {
|
|
1145
|
+
const input = event.target;
|
|
1146
|
+
this.handleFileList(input.files);
|
|
1147
|
+
input.value = '';
|
|
1148
|
+
}
|
|
1149
|
+
onDragOver(event) {
|
|
1150
|
+
event.preventDefault();
|
|
1151
|
+
if (this.isDisabled())
|
|
1152
|
+
return;
|
|
1153
|
+
this.dragging.set(true);
|
|
1154
|
+
if (event.dataTransfer) {
|
|
1155
|
+
event.dataTransfer.dropEffect = 'copy';
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
onDragLeave() {
|
|
1159
|
+
this.dragging.set(false);
|
|
1160
|
+
}
|
|
1161
|
+
onDrop(event) {
|
|
1162
|
+
event.preventDefault();
|
|
1163
|
+
this.dragging.set(false);
|
|
1164
|
+
if (this.isDisabled())
|
|
1165
|
+
return;
|
|
1166
|
+
this.handleFileList(event.dataTransfer?.files ?? null);
|
|
1167
|
+
}
|
|
1168
|
+
removeFile(fileId) {
|
|
1169
|
+
if (this.isDisabled())
|
|
1170
|
+
return;
|
|
1171
|
+
this.setFiles(this.files().filter((file) => file.id !== fileId), true);
|
|
1172
|
+
this.markTouched();
|
|
1173
|
+
}
|
|
1174
|
+
clear() {
|
|
1175
|
+
if (this.isDisabled())
|
|
1176
|
+
return;
|
|
1177
|
+
this.setFiles([], true);
|
|
1178
|
+
this.cleared.emit();
|
|
1179
|
+
this.markTouched();
|
|
1180
|
+
}
|
|
1181
|
+
markTouched() {
|
|
1182
|
+
this.onTouched();
|
|
1183
|
+
}
|
|
1184
|
+
handleFileList(fileList) {
|
|
1185
|
+
const files = fileList ? Array.from(fileList) : [];
|
|
1186
|
+
this.rejectionMessage.set('');
|
|
1187
|
+
this.statusOverride.set(this.loadingText());
|
|
1188
|
+
clearTimeout(this.statusTimeout);
|
|
1189
|
+
const { accepted, rejections } = this.filterFiles(files);
|
|
1190
|
+
if (rejections.length) {
|
|
1191
|
+
this.rejected.emit(rejections);
|
|
1192
|
+
this.rejectionMessage.set(rejections.length === 1
|
|
1193
|
+
? rejections[0].message
|
|
1194
|
+
: `${rejections.length} arquivos não correspondem ao filtro permitido.`);
|
|
1195
|
+
}
|
|
1196
|
+
if (accepted.length || !rejections.length) {
|
|
1197
|
+
this.setFiles(this.toEntries(accepted), true);
|
|
1198
|
+
}
|
|
1199
|
+
this.markTouched();
|
|
1200
|
+
this.statusTimeout = setTimeout(() => {
|
|
1201
|
+
this.statusOverride.set(null);
|
|
1202
|
+
}, 260);
|
|
1203
|
+
}
|
|
1204
|
+
setFiles(files, emit) {
|
|
1205
|
+
const nextFiles = this.multiple() ? files : files.slice(0, 1);
|
|
1206
|
+
this.files.set(nextFiles);
|
|
1207
|
+
if (!nextFiles.length) {
|
|
1208
|
+
this.rejectionMessage.set('');
|
|
1209
|
+
}
|
|
1210
|
+
if (emit) {
|
|
1211
|
+
this.onChange(nextFiles);
|
|
1212
|
+
this.valueChange.emit(nextFiles);
|
|
1213
|
+
this.filesChange.emit(nextFiles);
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
normalizeInputValue(value) {
|
|
1217
|
+
if (!value)
|
|
1218
|
+
return [];
|
|
1219
|
+
if (this.isFileList(value)) {
|
|
1220
|
+
return this.toEntries(Array.from(value));
|
|
1221
|
+
}
|
|
1222
|
+
if (this.isFile(value)) {
|
|
1223
|
+
return this.toEntries([value]);
|
|
1224
|
+
}
|
|
1225
|
+
if (Array.isArray(value)) {
|
|
1226
|
+
return value.flatMap((item, index) => {
|
|
1227
|
+
if (this.isUploadFile(item))
|
|
1228
|
+
return item;
|
|
1229
|
+
if (this.isFile(item))
|
|
1230
|
+
return [this.toEntry(item, index)];
|
|
1231
|
+
return [];
|
|
1232
|
+
});
|
|
1233
|
+
}
|
|
1234
|
+
if (this.isUploadFile(value)) {
|
|
1235
|
+
return [value];
|
|
1236
|
+
}
|
|
1237
|
+
return [];
|
|
1238
|
+
}
|
|
1239
|
+
filterFiles(files) {
|
|
1240
|
+
const accepted = [];
|
|
1241
|
+
const rejections = [];
|
|
1242
|
+
for (const file of files) {
|
|
1243
|
+
if (this.acceptsFile(file)) {
|
|
1244
|
+
accepted.push(file);
|
|
1245
|
+
}
|
|
1246
|
+
else {
|
|
1247
|
+
rejections.push({
|
|
1248
|
+
file,
|
|
1249
|
+
reason: 'accept',
|
|
1250
|
+
message: `${file.name} não corresponde ao filtro ${this.accept()}.`,
|
|
1251
|
+
});
|
|
1252
|
+
}
|
|
1253
|
+
}
|
|
1254
|
+
return { accepted, rejections };
|
|
1255
|
+
}
|
|
1256
|
+
acceptsFile(file) {
|
|
1257
|
+
const accept = this.accept().trim();
|
|
1258
|
+
if (!accept)
|
|
1259
|
+
return true;
|
|
1260
|
+
return accept.split(',').some((part) => {
|
|
1261
|
+
const rule = part.trim().toLowerCase();
|
|
1262
|
+
const fileName = file.name.toLowerCase();
|
|
1263
|
+
const fileType = file.type.toLowerCase();
|
|
1264
|
+
if (!rule)
|
|
1265
|
+
return true;
|
|
1266
|
+
if (rule.startsWith('.'))
|
|
1267
|
+
return fileName.endsWith(rule);
|
|
1268
|
+
if (rule.endsWith('/*'))
|
|
1269
|
+
return fileType.startsWith(rule.slice(0, -1));
|
|
1270
|
+
return fileType === rule;
|
|
1271
|
+
});
|
|
1272
|
+
}
|
|
1273
|
+
toEntries(files) {
|
|
1274
|
+
return files.map((file, index) => this.toEntry(file, index));
|
|
1275
|
+
}
|
|
1276
|
+
toEntry(file, index) {
|
|
1277
|
+
const extension = file.name.includes('.')
|
|
1278
|
+
? file.name.split('.').pop()?.toLowerCase() ?? ''
|
|
1279
|
+
: '';
|
|
1280
|
+
return {
|
|
1281
|
+
extension,
|
|
1282
|
+
file,
|
|
1283
|
+
id: `${file.name}-${file.size}-${file.lastModified}-${index}`,
|
|
1284
|
+
lastModified: file.lastModified,
|
|
1285
|
+
name: file.name,
|
|
1286
|
+
readableSize: this.formatBytes(file.size),
|
|
1287
|
+
size: file.size,
|
|
1288
|
+
type: file.type || 'application/octet-stream',
|
|
1289
|
+
};
|
|
1290
|
+
}
|
|
1291
|
+
selectedLabel() {
|
|
1292
|
+
const files = this.files();
|
|
1293
|
+
if (!files.length)
|
|
1294
|
+
return this.emptyText();
|
|
1295
|
+
if (files.length === 1)
|
|
1296
|
+
return files[0].name;
|
|
1297
|
+
return `${files.length} arquivos selecionados`;
|
|
1298
|
+
}
|
|
1299
|
+
formatBytes(bytes) {
|
|
1300
|
+
if (bytes === 0)
|
|
1301
|
+
return '0 B';
|
|
1302
|
+
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
1303
|
+
const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
|
|
1304
|
+
const value = bytes / 1024 ** index;
|
|
1305
|
+
return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
|
|
1306
|
+
}
|
|
1307
|
+
roundedValue() {
|
|
1308
|
+
const rounded = this.rounded();
|
|
1309
|
+
return typeof rounded === 'string'
|
|
1310
|
+
? `var(--av-radius-${rounded})`
|
|
1311
|
+
: `${rounded}px`;
|
|
1312
|
+
}
|
|
1313
|
+
isFile(value) {
|
|
1314
|
+
return typeof File !== 'undefined' && value instanceof File;
|
|
1315
|
+
}
|
|
1316
|
+
isFileList(value) {
|
|
1317
|
+
return typeof FileList !== 'undefined' && value instanceof FileList;
|
|
1318
|
+
}
|
|
1319
|
+
isUploadFile(value) {
|
|
1320
|
+
return !!value && typeof value === 'object' && 'file' in value && this.isFile(value.file);
|
|
1321
|
+
}
|
|
1322
|
+
ngOnDestroy() {
|
|
1323
|
+
clearTimeout(this.statusTimeout);
|
|
1324
|
+
}
|
|
1325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1326
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvFileUpload, isStandalone: true, selector: "av-file-upload", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, browseText: { classPropertyName: "browseText", publicName: "browseText", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", filesChange: "filesChange", rejected: "rejected", cleared: "cleared" }, providers: [
|
|
1327
|
+
{
|
|
1328
|
+
multi: true,
|
|
1329
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1330
|
+
useExisting: forwardRef(() => AvFileUpload),
|
|
1331
|
+
},
|
|
1332
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"av-file-upload\"\n [class.av-file-upload--disabled]=\"isDisabled()\"\n [class.av-file-upload--dragging]=\"dragging()\"\n [ngStyle]=\"themeVars()\"\n>\n @if (label()) {\n <label class=\"av-file-upload__label\" [for]=\"hostId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #fileInput\n class=\"av-file-upload__input\"\n type=\"file\"\n [id]=\"hostId()\"\n [attr.name]=\"name() || null\"\n [attr.accept]=\"accept() || null\"\n [attr.capture]=\"capture() || null\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"markTouched()\"\n />\n\n <label\n class=\"av-file-upload__dropzone\"\n [for]=\"hostId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n tabindex=\"0\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n (keydown.enter)=\"openPicker($event)\"\n (keydown.space)=\"openPicker($event)\"\n >\n <span class=\"av-file-upload__mark\" aria-hidden=\"true\">\n <span class=\"av-file-upload__mark-line\"></span>\n </span>\n\n <span class=\"av-file-upload__content\">\n <span class=\"av-file-upload__headline\">\n <av-text [value]=\"displayText()\" animation=\"slide\" />\n </span>\n\n <span class=\"av-file-upload__helper\">\n <av-text [value]=\"supportingText()\" animation=\"slide\" [duration]=\"180\" />\n </span>\n </span>\n\n <span class=\"av-file-upload__action\">\n {{ browseText() }}\n </span>\n </label>\n\n @if (rejectionMessage() || errorMessage()) {\n <span class=\"av-file-upload__error\">\n {{ rejectionMessage() || errorMessage() }}\n </span>\n }\n\n @if (showList() && files().length) {\n <ul class=\"av-file-upload__list\">\n @for (file of files(); track file.id) {\n <li class=\"av-file-upload__item\">\n <span class=\"av-file-upload__file\">\n <span class=\"av-file-upload__file-name\">{{ file.name }}</span>\n <span class=\"av-file-upload__file-meta\">{{ file.readableSize }} \u00B7 {{ file.extension || file.type }}</span>\n </span>\n\n @if (clearable()) {\n <button\n type=\"button\"\n class=\"av-file-upload__remove\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"'Remover ' + file.name\"\n (click)=\"removeFile(file.id)\"\n >\n \u00D7\n </button>\n }\n </li>\n }\n </ul>\n }\n\n @if (clearable() && files().length > 1) {\n <button\n type=\"button\"\n class=\"av-file-upload__clear\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n >\n Limpar arquivos\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%}.av-file-upload{color:var(--av-color-text);display:grid;gap:.35rem;width:100%}.av-file-upload__label{color:var(--av-color-text);font-size:.875rem;font-weight:700}.av-file-upload__input{block-size:1px;inline-size:1px;opacity:0;overflow:hidden;position:absolute}.av-file-upload__dropzone{align-items:center;background:var(--av-color-surface);border:2px dashed var(--av-color-border);border-radius:var(--av-file-upload-rounded);box-shadow:var(--av-shadow-control);cursor:pointer;display:grid;gap:.85rem;grid-template-columns:auto minmax(0,1fr) auto;min-height:5.25rem;padding:1rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.av-file-upload__dropzone:hover,.av-file-upload__dropzone:focus-visible,.av-file-upload--dragging .av-file-upload__dropzone{background:var(--av-file-upload-accent-soft);border-color:var(--av-file-upload-accent);box-shadow:var(--av-shadow-control),0 0 0 4px var(--av-file-upload-ring);outline:none}.av-file-upload__mark{background:var(--av-file-upload-accent-soft);border:1px solid color-mix(in srgb,var(--av-file-upload-accent) 28%,transparent);border-radius:var(--av-radius-lg);display:grid;height:2.65rem;place-items:center;position:relative;width:2.65rem}.av-file-upload__mark:before{border:solid var(--av-file-upload-accent);border-width:2px 2px 0 0;content:\"\";height:.62rem;transform:translateY(.12rem) rotate(-45deg);width:.62rem}.av-file-upload__mark-line{background:var(--av-file-upload-accent);border-radius:var(--av-radius-full);height:1rem;position:absolute;width:2px}.av-file-upload__content,.av-file-upload__file{display:grid;gap:.2rem;min-width:0}.av-file-upload__headline{color:var(--av-color-text);font-size:.95rem;font-weight:800;min-width:0}.av-file-upload__helper,.av-file-upload__file-meta{color:var(--av-color-text-muted);font-size:.78rem}.av-file-upload__action{background:var(--av-file-upload-accent);border-radius:var(--av-radius-md);color:var(--av-color-text);font-size:.8125rem;font-weight:800;padding:.48rem .72rem;white-space:nowrap}.av-file-upload__error{color:var(--av-color-danger);font-size:.75rem;font-weight:700}.av-file-upload__list{display:grid;gap:.45rem;list-style:none;margin:.25rem 0 0;padding:0}.av-file-upload__item{align-items:center;background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-md);display:flex;gap:.75rem;justify-content:space-between;padding:.62rem .72rem}.av-file-upload__file-name{font-size:.875rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-file-upload__remove{background:transparent;border:0;border-radius:var(--av-radius-full);color:var(--av-color-text-muted);cursor:pointer;font-size:1.2rem;height:1.75rem;line-height:1;width:1.75rem}.av-file-upload__remove:hover{background:var(--av-color-danger-soft);color:var(--av-color-danger)}.av-file-upload__clear{justify-self:start;background:transparent;border:0;color:var(--av-file-upload-accent);cursor:pointer;font-weight:800;padding:.2rem 0}.av-file-upload--disabled{opacity:.62}.av-file-upload--disabled .av-file-upload__dropzone,.av-file-upload--disabled .av-file-upload__remove,.av-file-upload--disabled .av-file-upload__clear{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvText, selector: "av-text", inputs: ["value", "animation", "duration"] }] });
|
|
1333
|
+
}
|
|
1334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvFileUpload, decorators: [{
|
|
1335
|
+
type: Component,
|
|
1336
|
+
args: [{ imports: [CommonModule, AvText], providers: [
|
|
1337
|
+
{
|
|
1338
|
+
multi: true,
|
|
1339
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1340
|
+
useExisting: forwardRef(() => AvFileUpload),
|
|
1341
|
+
},
|
|
1342
|
+
], selector: 'av-file-upload', standalone: true, template: "<div\n class=\"av-file-upload\"\n [class.av-file-upload--disabled]=\"isDisabled()\"\n [class.av-file-upload--dragging]=\"dragging()\"\n [ngStyle]=\"themeVars()\"\n>\n @if (label()) {\n <label class=\"av-file-upload__label\" [for]=\"hostId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #fileInput\n class=\"av-file-upload__input\"\n type=\"file\"\n [id]=\"hostId()\"\n [attr.name]=\"name() || null\"\n [attr.accept]=\"accept() || null\"\n [attr.capture]=\"capture() || null\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [disabled]=\"isDisabled()\"\n (change)=\"onNativeChange($event)\"\n (blur)=\"markTouched()\"\n />\n\n <label\n class=\"av-file-upload__dropzone\"\n [for]=\"hostId()\"\n [attr.aria-disabled]=\"isDisabled()\"\n tabindex=\"0\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n (keydown.enter)=\"openPicker($event)\"\n (keydown.space)=\"openPicker($event)\"\n >\n <span class=\"av-file-upload__mark\" aria-hidden=\"true\">\n <span class=\"av-file-upload__mark-line\"></span>\n </span>\n\n <span class=\"av-file-upload__content\">\n <span class=\"av-file-upload__headline\">\n <av-text [value]=\"displayText()\" animation=\"slide\" />\n </span>\n\n <span class=\"av-file-upload__helper\">\n <av-text [value]=\"supportingText()\" animation=\"slide\" [duration]=\"180\" />\n </span>\n </span>\n\n <span class=\"av-file-upload__action\">\n {{ browseText() }}\n </span>\n </label>\n\n @if (rejectionMessage() || errorMessage()) {\n <span class=\"av-file-upload__error\">\n {{ rejectionMessage() || errorMessage() }}\n </span>\n }\n\n @if (showList() && files().length) {\n <ul class=\"av-file-upload__list\">\n @for (file of files(); track file.id) {\n <li class=\"av-file-upload__item\">\n <span class=\"av-file-upload__file\">\n <span class=\"av-file-upload__file-name\">{{ file.name }}</span>\n <span class=\"av-file-upload__file-meta\">{{ file.readableSize }} \u00B7 {{ file.extension || file.type }}</span>\n </span>\n\n @if (clearable()) {\n <button\n type=\"button\"\n class=\"av-file-upload__remove\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"'Remover ' + file.name\"\n (click)=\"removeFile(file.id)\"\n >\n \u00D7\n </button>\n }\n </li>\n }\n </ul>\n }\n\n @if (clearable() && files().length > 1) {\n <button\n type=\"button\"\n class=\"av-file-upload__clear\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n >\n Limpar arquivos\n </button>\n }\n</div>\n", styles: [":host{display:block;width:100%}.av-file-upload{color:var(--av-color-text);display:grid;gap:.35rem;width:100%}.av-file-upload__label{color:var(--av-color-text);font-size:.875rem;font-weight:700}.av-file-upload__input{block-size:1px;inline-size:1px;opacity:0;overflow:hidden;position:absolute}.av-file-upload__dropzone{align-items:center;background:var(--av-color-surface);border:2px dashed var(--av-color-border);border-radius:var(--av-file-upload-rounded);box-shadow:var(--av-shadow-control);cursor:pointer;display:grid;gap:.85rem;grid-template-columns:auto minmax(0,1fr) auto;min-height:5.25rem;padding:1rem;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.av-file-upload__dropzone:hover,.av-file-upload__dropzone:focus-visible,.av-file-upload--dragging .av-file-upload__dropzone{background:var(--av-file-upload-accent-soft);border-color:var(--av-file-upload-accent);box-shadow:var(--av-shadow-control),0 0 0 4px var(--av-file-upload-ring);outline:none}.av-file-upload__mark{background:var(--av-file-upload-accent-soft);border:1px solid color-mix(in srgb,var(--av-file-upload-accent) 28%,transparent);border-radius:var(--av-radius-lg);display:grid;height:2.65rem;place-items:center;position:relative;width:2.65rem}.av-file-upload__mark:before{border:solid var(--av-file-upload-accent);border-width:2px 2px 0 0;content:\"\";height:.62rem;transform:translateY(.12rem) rotate(-45deg);width:.62rem}.av-file-upload__mark-line{background:var(--av-file-upload-accent);border-radius:var(--av-radius-full);height:1rem;position:absolute;width:2px}.av-file-upload__content,.av-file-upload__file{display:grid;gap:.2rem;min-width:0}.av-file-upload__headline{color:var(--av-color-text);font-size:.95rem;font-weight:800;min-width:0}.av-file-upload__helper,.av-file-upload__file-meta{color:var(--av-color-text-muted);font-size:.78rem}.av-file-upload__action{background:var(--av-file-upload-accent);border-radius:var(--av-radius-md);color:var(--av-color-text);font-size:.8125rem;font-weight:800;padding:.48rem .72rem;white-space:nowrap}.av-file-upload__error{color:var(--av-color-danger);font-size:.75rem;font-weight:700}.av-file-upload__list{display:grid;gap:.45rem;list-style:none;margin:.25rem 0 0;padding:0}.av-file-upload__item{align-items:center;background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-md);display:flex;gap:.75rem;justify-content:space-between;padding:.62rem .72rem}.av-file-upload__file-name{font-size:.875rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-file-upload__remove{background:transparent;border:0;border-radius:var(--av-radius-full);color:var(--av-color-text-muted);cursor:pointer;font-size:1.2rem;height:1.75rem;line-height:1;width:1.75rem}.av-file-upload__remove:hover{background:var(--av-color-danger-soft);color:var(--av-color-danger)}.av-file-upload__clear{justify-self:start;background:transparent;border:0;color:var(--av-file-upload-accent);cursor:pointer;font-weight:800;padding:.2rem 0}.av-file-upload--disabled{opacity:.62}.av-file-upload--disabled .av-file-upload__dropzone,.av-file-upload--disabled .av-file-upload__remove,.av-file-upload--disabled .av-file-upload__clear{cursor:not-allowed}\n"] }]
|
|
1343
|
+
}], ctorParameters: () => [], propDecorators: { fileInput: [{
|
|
1344
|
+
type: ViewChild,
|
|
1345
|
+
args: ['fileInput']
|
|
1346
|
+
}], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], browseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseText", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showList", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
|
|
1347
|
+
|
|
1348
|
+
class AvSwitch {
|
|
1349
|
+
config = inject(VISUALS_CONFIG);
|
|
1350
|
+
themeService = inject(ThemeService);
|
|
1351
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1352
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1353
|
+
rounded = input('md', /* @ts-ignore */
|
|
1354
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1355
|
+
checked = model(false, /* @ts-ignore */
|
|
1356
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
1357
|
+
disabled = input(false, /* @ts-ignore */
|
|
1358
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1359
|
+
// Disabled vindo do Angular Forms
|
|
1360
|
+
formDisabled = false;
|
|
1361
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled, /* @ts-ignore */
|
|
1362
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1363
|
+
themeVars = computed(() => {
|
|
1364
|
+
const variant = this.variant();
|
|
1365
|
+
const isDark = this.themeService.dark();
|
|
1366
|
+
return {
|
|
1367
|
+
'--av-switch-active-bg': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
1368
|
+
'--av-switch-rounded': typeof this.rounded() === 'string'
|
|
1369
|
+
? `var(--av-radius-${this.rounded()})`
|
|
1370
|
+
: `${this.rounded()}px`
|
|
1371
|
+
};
|
|
1372
|
+
}, /* @ts-ignore */
|
|
1373
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
1374
|
+
// --------------------------------
|
|
1375
|
+
// ControlValueAccessor
|
|
1376
|
+
// --------------------------------
|
|
1377
|
+
onChange = () => { };
|
|
1378
|
+
onTouched = () => { };
|
|
1379
|
+
writeValue(value) {
|
|
1380
|
+
this.checked.set(value ?? false);
|
|
1381
|
+
}
|
|
1382
|
+
registerOnChange(fn) {
|
|
1383
|
+
this.onChange = fn;
|
|
1384
|
+
}
|
|
1385
|
+
registerOnTouched(fn) {
|
|
1386
|
+
this.onTouched = fn;
|
|
1387
|
+
}
|
|
1388
|
+
setDisabledState(disabled) {
|
|
1389
|
+
this.formDisabled = disabled;
|
|
1390
|
+
}
|
|
1391
|
+
// --------------------------------
|
|
1392
|
+
// Interaction
|
|
1393
|
+
// --------------------------------
|
|
1394
|
+
toggle() {
|
|
1395
|
+
if (this.isDisabled())
|
|
1396
|
+
return;
|
|
1397
|
+
const value = !this.checked();
|
|
1398
|
+
this.checked.set(value);
|
|
1399
|
+
this.onChange(value);
|
|
1400
|
+
this.onTouched();
|
|
1401
|
+
}
|
|
1402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvSwitch, isStandalone: true, selector: "av-switch", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
|
|
1404
|
+
{
|
|
1405
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1406
|
+
useExisting: forwardRef(() => AvSwitch),
|
|
1407
|
+
multi: true
|
|
1408
|
+
}
|
|
1409
|
+
], ngImport: i0, template: "<button\n type=\"button\"\n class=\"av-switch\"\n [ngStyle]=\"themeVars()\"\n [attr.aria-checked]=\"checked()\"\n [attr.data-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n <div class=\"av-switch-thumb\"></div>\n</button>\n", styles: [".av-switch{--av-switch-width: 40px;--av-switch-height: 22px;--av-switch-padding: 2px;--av-switch-thumb-size: 18px;display:inline-flex;position:relative;width:var(--av-switch-width);height:var(--av-switch-height);padding:var(--av-switch-padding);align-items:center;border:none;border-radius:var(--av-switch-rounded);background-color:var(--av-color-surface-muted);cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}.av-switch-thumb{width:var(--av-switch-thumb-size);height:var(--av-switch-thumb-size);border-radius:var(--av-switch-rounded);background-color:var(--av-white);box-shadow:0 1px 3px #00000040;transform:translate(0);transition:transform .18s cubic-bezier(.2,0,0,1),background-color .18s ease}.av-switch[data-checked=true]{background-color:var(--av-switch-active-bg)}.av-switch[data-checked=true] .av-switch-thumb{transform:translate(calc(var(--av-switch-width) - var(--av-switch-thumb-size) - var(--av-switch-padding) * 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1410
|
+
}
|
|
1411
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSwitch, decorators: [{
|
|
1412
|
+
type: Component,
|
|
1413
|
+
args: [{ selector: 'av-switch', imports: [CommonModule], providers: [
|
|
1414
|
+
{
|
|
1415
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1416
|
+
useExisting: forwardRef(() => AvSwitch),
|
|
1417
|
+
multi: true
|
|
1418
|
+
}
|
|
1419
|
+
], template: "<button\n type=\"button\"\n class=\"av-switch\"\n [ngStyle]=\"themeVars()\"\n [attr.aria-checked]=\"checked()\"\n [attr.data-checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n>\n <div class=\"av-switch-thumb\"></div>\n</button>\n", styles: [".av-switch{--av-switch-width: 40px;--av-switch-height: 22px;--av-switch-padding: 2px;--av-switch-thumb-size: 18px;display:inline-flex;position:relative;width:var(--av-switch-width);height:var(--av-switch-height);padding:var(--av-switch-padding);align-items:center;border:none;border-radius:var(--av-switch-rounded);background-color:var(--av-color-surface-muted);cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}.av-switch-thumb{width:var(--av-switch-thumb-size);height:var(--av-switch-thumb-size);border-radius:var(--av-switch-rounded);background-color:var(--av-white);box-shadow:0 1px 3px #00000040;transform:translate(0);transition:transform .18s cubic-bezier(.2,0,0,1),background-color .18s ease}.av-switch[data-checked=true]{background-color:var(--av-switch-active-bg)}.av-switch[data-checked=true] .av-switch-thumb{transform:translate(calc(var(--av-switch-width) - var(--av-switch-thumb-size) - var(--av-switch-padding) * 2))}\n"] }]
|
|
1420
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
1421
|
+
|
|
1422
|
+
class AvSlider {
|
|
1423
|
+
config = inject(VISUALS_CONFIG);
|
|
1424
|
+
themeService = inject(ThemeService);
|
|
1425
|
+
label = input('', /* @ts-ignore */
|
|
1426
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1427
|
+
value = input(null, /* @ts-ignore */
|
|
1428
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
1430
|
+
max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
1431
|
+
step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
1432
|
+
range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1433
|
+
thumbLabel = input(true, { ...(ngDevMode ? { debugName: "thumbLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1434
|
+
showValue = input(false, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1435
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1436
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1437
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1438
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
1439
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
1440
|
+
rounded = input('full', /* @ts-ignore */
|
|
1441
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1442
|
+
valuePrefix = input('', /* @ts-ignore */
|
|
1443
|
+
...(ngDevMode ? [{ debugName: "valuePrefix" }] : /* istanbul ignore next */ []));
|
|
1444
|
+
valueSuffix = input('', /* @ts-ignore */
|
|
1445
|
+
...(ngDevMode ? [{ debugName: "valueSuffix" }] : /* istanbul ignore next */ []));
|
|
1446
|
+
displayWith = input(undefined, /* @ts-ignore */
|
|
1447
|
+
...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
|
|
1448
|
+
ariaLabel = input('Slider', /* @ts-ignore */
|
|
1449
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1450
|
+
lowerAriaLabel = input('Valor inicial', /* @ts-ignore */
|
|
1451
|
+
...(ngDevMode ? [{ debugName: "lowerAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1452
|
+
upperAriaLabel = input('Valor final', /* @ts-ignore */
|
|
1453
|
+
...(ngDevMode ? [{ debugName: "upperAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1454
|
+
valueChange = output();
|
|
1455
|
+
changed = output();
|
|
1456
|
+
lowerValue = signal(50, /* @ts-ignore */
|
|
1457
|
+
...(ngDevMode ? [{ debugName: "lowerValue" }] : /* istanbul ignore next */ []));
|
|
1458
|
+
upperValue = signal(100, /* @ts-ignore */
|
|
1459
|
+
...(ngDevMode ? [{ debugName: "upperValue" }] : /* istanbul ignore next */ []));
|
|
1460
|
+
formDisabled = signal(false, /* @ts-ignore */
|
|
1461
|
+
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
1462
|
+
activeThumb = signal('lower', /* @ts-ignore */
|
|
1463
|
+
...(ngDevMode ? [{ debugName: "activeThumb" }] : /* istanbul ignore next */ []));
|
|
1464
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
1465
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1466
|
+
safeMin = computed(() => this.coerceNumber(this.min(), 0), /* @ts-ignore */
|
|
1467
|
+
...(ngDevMode ? [{ debugName: "safeMin" }] : /* istanbul ignore next */ []));
|
|
1468
|
+
safeMax = computed(() => {
|
|
1469
|
+
const min = this.safeMin();
|
|
1470
|
+
const max = this.coerceNumber(this.max(), min + 100);
|
|
1471
|
+
return max > min ? max : min + 1;
|
|
1472
|
+
}, /* @ts-ignore */
|
|
1473
|
+
...(ngDevMode ? [{ debugName: "safeMax" }] : /* istanbul ignore next */ []));
|
|
1474
|
+
safeStep = computed(() => {
|
|
1475
|
+
const step = this.coerceNumber(this.step(), 1);
|
|
1476
|
+
return step > 0 ? step : 1;
|
|
1477
|
+
}, /* @ts-ignore */
|
|
1478
|
+
...(ngDevMode ? [{ debugName: "safeStep" }] : /* istanbul ignore next */ []));
|
|
1479
|
+
roundedStyle = computed(() => {
|
|
1480
|
+
const rounded = this.rounded();
|
|
1481
|
+
return typeof rounded === 'string'
|
|
1482
|
+
? `var(--av-radius-${rounded})`
|
|
1483
|
+
: `${rounded}px`;
|
|
1484
|
+
}, /* @ts-ignore */
|
|
1485
|
+
...(ngDevMode ? [{ debugName: "roundedStyle" }] : /* istanbul ignore next */ []));
|
|
1486
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
1487
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
1488
|
+
lowerPercent = computed(() => this.toPercent(this.lowerValue()), /* @ts-ignore */
|
|
1489
|
+
...(ngDevMode ? [{ debugName: "lowerPercent" }] : /* istanbul ignore next */ []));
|
|
1490
|
+
upperPercent = computed(() => this.range() ? this.toPercent(this.upperValue()) : this.lowerPercent(), /* @ts-ignore */
|
|
1491
|
+
...(ngDevMode ? [{ debugName: "upperPercent" }] : /* istanbul ignore next */ []));
|
|
1492
|
+
fillLeft = computed(() => this.range() ? Math.min(this.lowerPercent(), this.upperPercent()) : 0, /* @ts-ignore */
|
|
1493
|
+
...(ngDevMode ? [{ debugName: "fillLeft" }] : /* istanbul ignore next */ []));
|
|
1494
|
+
fillWidth = computed(() => this.range()
|
|
1495
|
+
? Math.abs(this.upperPercent() - this.lowerPercent())
|
|
1496
|
+
: this.lowerPercent(), /* @ts-ignore */
|
|
1497
|
+
...(ngDevMode ? [{ debugName: "fillWidth" }] : /* istanbul ignore next */ []));
|
|
1498
|
+
displayValue = computed(() => {
|
|
1499
|
+
if (this.range()) {
|
|
1500
|
+
return `${this.formatValue(this.lowerValue())} - ${this.formatValue(this.upperValue())}`;
|
|
1501
|
+
}
|
|
1502
|
+
return this.formatValue(this.lowerValue());
|
|
1503
|
+
}, /* @ts-ignore */
|
|
1504
|
+
...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
1505
|
+
themeVars = computed(() => {
|
|
1506
|
+
const variant = this.activeVariant();
|
|
1507
|
+
const isDark = this.themeService.dark();
|
|
1508
|
+
const accentStep = isDark ? 400 : 500;
|
|
1509
|
+
const strongStep = isDark ? 300 : 600;
|
|
1510
|
+
return {
|
|
1511
|
+
'--av-slider-accent': `var(--av-${variant}-${accentStep})`,
|
|
1512
|
+
'--av-slider-accent-strong': `var(--av-${variant}-${strongStep})`,
|
|
1513
|
+
'--av-slider-focus-ring': `color-mix(in srgb, var(--av-${variant}-${accentStep}) 26%, transparent)`,
|
|
1514
|
+
'--av-slider-track': isDark
|
|
1515
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 14%, var(--av-color-surface-muted))`
|
|
1516
|
+
: `color-mix(in srgb, var(--av-${variant}-500) 12%, var(--av-color-surface-muted))`,
|
|
1517
|
+
'--av-slider-rounded': this.roundedStyle(),
|
|
1518
|
+
};
|
|
1519
|
+
}, /* @ts-ignore */
|
|
1520
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
1521
|
+
onChange = () => { };
|
|
1522
|
+
onTouched = () => { };
|
|
1523
|
+
constructor() {
|
|
1524
|
+
effect(() => {
|
|
1525
|
+
this.syncExternalValue(this.value(), this.range(), this.safeMin(), this.safeMax(), this.safeStep());
|
|
1526
|
+
});
|
|
1527
|
+
}
|
|
1528
|
+
writeValue(value) {
|
|
1529
|
+
this.syncExternalValue(value, this.range(), this.safeMin(), this.safeMax(), this.safeStep());
|
|
1530
|
+
}
|
|
1531
|
+
registerOnChange(fn) {
|
|
1532
|
+
this.onChange = fn;
|
|
1533
|
+
}
|
|
1534
|
+
registerOnTouched(fn) {
|
|
1535
|
+
this.onTouched = fn;
|
|
1536
|
+
}
|
|
1537
|
+
setDisabledState(disabled) {
|
|
1538
|
+
this.formDisabled.set(disabled);
|
|
1539
|
+
}
|
|
1540
|
+
onInput(thumb, event) {
|
|
1541
|
+
const target = event.target;
|
|
1542
|
+
this.activeThumb.set(thumb);
|
|
1543
|
+
this.setThumbValue(thumb, target.value, true);
|
|
1544
|
+
}
|
|
1545
|
+
onTrackPointerDown(event) {
|
|
1546
|
+
if (this.isDisabled())
|
|
1547
|
+
return;
|
|
1548
|
+
const target = event.currentTarget;
|
|
1549
|
+
const bounds = target.getBoundingClientRect();
|
|
1550
|
+
const ratio = bounds.width <= 0
|
|
1551
|
+
? 0
|
|
1552
|
+
: (event.clientX - bounds.left) / bounds.width;
|
|
1553
|
+
const value = this.safeMin() + this.clamp(ratio, 0, 1) * (this.safeMax() - this.safeMin());
|
|
1554
|
+
const thumb = this.closestThumb(value);
|
|
1555
|
+
this.activeThumb.set(thumb);
|
|
1556
|
+
this.setThumbValue(thumb, value, true);
|
|
1557
|
+
this.markTouched();
|
|
1558
|
+
}
|
|
1559
|
+
markTouched() {
|
|
1560
|
+
this.onTouched();
|
|
1561
|
+
}
|
|
1562
|
+
formatValue(value) {
|
|
1563
|
+
const displayWith = this.displayWith();
|
|
1564
|
+
if (displayWith) {
|
|
1565
|
+
return displayWith(value);
|
|
1566
|
+
}
|
|
1567
|
+
return `${this.valuePrefix()}${this.trimValue(value)}${this.valueSuffix()}`;
|
|
1568
|
+
}
|
|
1569
|
+
syncExternalValue(value, range, min, max, step) {
|
|
1570
|
+
if (range) {
|
|
1571
|
+
const [lower, upper] = this.coerceRangeValue(value, min, max, step);
|
|
1572
|
+
this.lowerValue.set(lower);
|
|
1573
|
+
this.upperValue.set(upper);
|
|
1574
|
+
return;
|
|
1575
|
+
}
|
|
1576
|
+
const nextValue = this.coerceSingleValue(value, min, max, step);
|
|
1577
|
+
this.lowerValue.set(nextValue);
|
|
1578
|
+
this.upperValue.set(nextValue);
|
|
1579
|
+
}
|
|
1580
|
+
setThumbValue(thumb, value, emit) {
|
|
1581
|
+
const nextValue = this.normalizeValue(value);
|
|
1582
|
+
if (this.range()) {
|
|
1583
|
+
if (thumb === 'lower') {
|
|
1584
|
+
this.lowerValue.set(Math.min(nextValue, this.upperValue()));
|
|
1585
|
+
}
|
|
1586
|
+
else {
|
|
1587
|
+
this.upperValue.set(Math.max(nextValue, this.lowerValue()));
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1590
|
+
else {
|
|
1591
|
+
this.lowerValue.set(nextValue);
|
|
1592
|
+
this.upperValue.set(nextValue);
|
|
1593
|
+
}
|
|
1594
|
+
if (emit) {
|
|
1595
|
+
this.emitValue();
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
emitValue() {
|
|
1599
|
+
const value = this.range()
|
|
1600
|
+
? [this.lowerValue(), this.upperValue()]
|
|
1601
|
+
: this.lowerValue();
|
|
1602
|
+
this.onChange(value);
|
|
1603
|
+
this.valueChange.emit(value);
|
|
1604
|
+
this.changed.emit(value);
|
|
1605
|
+
}
|
|
1606
|
+
closestThumb(value) {
|
|
1607
|
+
if (!this.range())
|
|
1608
|
+
return 'lower';
|
|
1609
|
+
const lowerDistance = Math.abs(value - this.lowerValue());
|
|
1610
|
+
const upperDistance = Math.abs(value - this.upperValue());
|
|
1611
|
+
return lowerDistance <= upperDistance ? 'lower' : 'upper';
|
|
1612
|
+
}
|
|
1613
|
+
coerceSingleValue(value, min, max, step) {
|
|
1614
|
+
if (Array.isArray(value)) {
|
|
1615
|
+
return this.normalizeValue(value[0], min, max, step);
|
|
1616
|
+
}
|
|
1617
|
+
if (typeof value === 'string' && value.includes(',')) {
|
|
1618
|
+
return this.normalizeValue(value.split(',')[0], min, max, step);
|
|
1619
|
+
}
|
|
1620
|
+
if (value === null || value === undefined) {
|
|
1621
|
+
return this.normalizeValue(min + (max - min) / 2, min, max, step);
|
|
1622
|
+
}
|
|
1623
|
+
return this.normalizeValue(value, min, max, step);
|
|
1624
|
+
}
|
|
1625
|
+
coerceRangeValue(value, min, max, step) {
|
|
1626
|
+
let lower = min;
|
|
1627
|
+
let upper = max;
|
|
1628
|
+
if (Array.isArray(value)) {
|
|
1629
|
+
[lower, upper] = value;
|
|
1630
|
+
}
|
|
1631
|
+
else if (typeof value === 'string' && value.includes(',')) {
|
|
1632
|
+
[lower, upper] = value.split(',');
|
|
1633
|
+
}
|
|
1634
|
+
else if (value !== null && value !== undefined) {
|
|
1635
|
+
lower = value;
|
|
1636
|
+
}
|
|
1637
|
+
const normalizedLower = this.normalizeValue(lower, min, max, step);
|
|
1638
|
+
const normalizedUpper = this.normalizeValue(upper, min, max, step);
|
|
1639
|
+
return normalizedLower <= normalizedUpper
|
|
1640
|
+
? [normalizedLower, normalizedUpper]
|
|
1641
|
+
: [normalizedUpper, normalizedLower];
|
|
1642
|
+
}
|
|
1643
|
+
normalizeValue(value, min = this.safeMin(), max = this.safeMax(), step = this.safeStep()) {
|
|
1644
|
+
const numeric = this.coerceNumber(value, min);
|
|
1645
|
+
const clamped = this.clamp(numeric, min, max);
|
|
1646
|
+
const steps = Math.round((clamped - min) / step);
|
|
1647
|
+
const stepped = min + steps * step;
|
|
1648
|
+
const precision = this.stepPrecision(step);
|
|
1649
|
+
return this.clamp(Number(stepped.toFixed(precision)), min, max);
|
|
1650
|
+
}
|
|
1651
|
+
toPercent(value) {
|
|
1652
|
+
const min = this.safeMin();
|
|
1653
|
+
const max = this.safeMax();
|
|
1654
|
+
return ((this.clamp(value, min, max) - min) / (max - min)) * 100;
|
|
1655
|
+
}
|
|
1656
|
+
coerceNumber(value, fallback) {
|
|
1657
|
+
const numeric = Number(value);
|
|
1658
|
+
return Number.isFinite(numeric) ? numeric : fallback;
|
|
1659
|
+
}
|
|
1660
|
+
clamp(value, min, max) {
|
|
1661
|
+
return Math.min(max, Math.max(min, value));
|
|
1662
|
+
}
|
|
1663
|
+
stepPrecision(step) {
|
|
1664
|
+
const [, decimals = ''] = String(step).split('.');
|
|
1665
|
+
return decimals.length;
|
|
1666
|
+
}
|
|
1667
|
+
trimValue(value) {
|
|
1668
|
+
return Number.isInteger(value)
|
|
1669
|
+
? String(value)
|
|
1670
|
+
: String(Number(value.toFixed(4)));
|
|
1671
|
+
}
|
|
1672
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvSlider, isStandalone: true, selector: "av-slider, lib-av-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, thumbLabel: { classPropertyName: "thumbLabel", publicName: "thumbLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, valuePrefix: { classPropertyName: "valuePrefix", publicName: "valuePrefix", isSignal: true, isRequired: false, transformFunction: null }, valueSuffix: { classPropertyName: "valueSuffix", publicName: "valueSuffix", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, lowerAriaLabel: { classPropertyName: "lowerAriaLabel", publicName: "lowerAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, upperAriaLabel: { classPropertyName: "upperAriaLabel", publicName: "upperAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changed: "changed" }, providers: [
|
|
1674
|
+
{
|
|
1675
|
+
multi: true,
|
|
1676
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1677
|
+
useExisting: forwardRef(() => AvSlider),
|
|
1678
|
+
},
|
|
1679
|
+
], ngImport: i0, template: "<div\n class=\"av-slider\"\n [class.av-slider--disabled]=\"isDisabled()\"\n [ngStyle]=\"themeVars()\"\n>\n @if (label() || showValue()) {\n <div class=\"av-slider__header\">\n @if (label()) {\n <label class=\"av-slider__label\">{{ label() }}</label>\n }\n\n @if (showValue()) {\n <span class=\"av-slider__value\">{{ displayValue() }}</span>\n }\n </div>\n }\n\n <div class=\"av-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n <span class=\"av-slider__rail\"></span>\n <span\n class=\"av-slider__fill\"\n [style.left.%]=\"fillLeft()\"\n [style.width.%]=\"fillWidth()\"\n ></span>\n\n <input\n class=\"av-slider__native av-slider__native--lower\"\n type=\"range\"\n [attr.aria-label]=\"range() ? lowerAriaLabel() : ariaLabel()\"\n [attr.aria-valuetext]=\"formatValue(lowerValue())\"\n [disabled]=\"isDisabled()\"\n [max]=\"safeMax()\"\n [min]=\"safeMin()\"\n [step]=\"safeStep()\"\n [value]=\"lowerValue()\"\n (blur)=\"markTouched()\"\n (change)=\"markTouched()\"\n (focus)=\"activeThumb.set('lower')\"\n (input)=\"onInput('lower', $event)\"\n />\n\n @if (range()) {\n <input\n class=\"av-slider__native av-slider__native--upper\"\n type=\"range\"\n [attr.aria-label]=\"upperAriaLabel()\"\n [attr.aria-valuetext]=\"formatValue(upperValue())\"\n [disabled]=\"isDisabled()\"\n [max]=\"safeMax()\"\n [min]=\"safeMin()\"\n [step]=\"safeStep()\"\n [value]=\"upperValue()\"\n (blur)=\"markTouched()\"\n (change)=\"markTouched()\"\n (focus)=\"activeThumb.set('upper')\"\n (input)=\"onInput('upper', $event)\"\n />\n }\n\n <span\n class=\"av-slider__thumb av-slider__thumb--lower\"\n [class.av-slider__thumb--active]=\"activeThumb() === 'lower'\"\n [style.left.%]=\"lowerPercent()\"\n >\n @if (thumbLabel()) {\n <span class=\"av-slider__bubble\">{{ formatValue(lowerValue()) }}</span>\n }\n </span>\n\n @if (range()) {\n <span\n class=\"av-slider__thumb av-slider__thumb--upper\"\n [class.av-slider__thumb--active]=\"activeThumb() === 'upper'\"\n [style.left.%]=\"upperPercent()\"\n >\n @if (thumbLabel()) {\n <span class=\"av-slider__bubble\">{{ formatValue(upperValue()) }}</span>\n }\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.av-slider{--av-slider-track-height: 6px;--av-slider-hit-size: 34px;--av-slider-thumb-size: 20px;--av-slider-thumb-border: var(--av-color-surface);--av-slider-bubble-bg: var(--av-color-surface-raised);--av-slider-bubble-border: var(--av-color-border-soft);--av-slider-bubble-color: var(--av-color-text-muted);color:var(--av-color-text);display:flex;flex-direction:column;gap:.65rem;width:100%}.av-slider__header{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.av-slider__label{color:var(--av-color-text);font-size:.875rem;font-weight:700}.av-slider__value{color:var(--av-color-text-muted);font-size:.8125rem;font-weight:700;white-space:nowrap}.av-slider__track{cursor:pointer;height:var(--av-slider-hit-size);margin-top:1.45rem;position:relative;touch-action:none;width:100%}.av-slider__rail,.av-slider__fill{border-radius:var(--av-slider-rounded);height:var(--av-slider-track-height);left:0;position:absolute;top:50%;transform:translateY(-50%)}.av-slider__rail{background:var(--av-slider-track);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av-color-border-soft) 55%,transparent);right:0}.av-slider__fill{background:linear-gradient(90deg,var(--av-slider-accent),var(--av-slider-accent-strong));box-shadow:0 0 0 1px color-mix(in srgb,var(--av-slider-accent) 16%,transparent);transition:left .12s ease,width .12s ease}.av-slider__thumb{background:var(--av-slider-accent);border:3px solid var(--av-slider-thumb-border);border-radius:var(--av-radius-full);box-shadow:var(--av-shadow-control),0 6px 14px color-mix(in srgb,var(--av-slider-accent) 25%,transparent);height:var(--av-slider-thumb-size);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow .16s ease,transform .16s ease;width:var(--av-slider-thumb-size);z-index:3}.av-slider__thumb--active{box-shadow:var(--av-shadow-control),0 0 0 5px var(--av-slider-focus-ring),0 9px 18px color-mix(in srgb,var(--av-slider-accent) 28%,transparent);transform:translate(-50%,-50%) scale(1.04)}.av-slider__bubble{background:var(--av-slider-bubble-bg);border:1px solid var(--av-slider-bubble-border);border-radius:var(--av-radius-md);bottom:calc(100% + .6rem);box-shadow:var(--av-shadow-raised);color:var(--av-slider-bubble-color);font-size:.8125rem;font-weight:800;left:50%;line-height:1;min-width:2.9rem;padding:.48rem .62rem;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.av-slider__bubble:after{background:inherit;border-bottom:1px solid var(--av-slider-bubble-border);border-right:1px solid var(--av-slider-bubble-border);bottom:-.27rem;content:\"\";height:.52rem;left:50%;position:absolute;transform:translate(-50%) rotate(45deg);width:.52rem}.av-slider__native{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:var(--av-slider-hit-size);inset:0;margin:0;opacity:0;pointer-events:none;position:absolute;width:100%;z-index:4}.av-slider__native:focus{outline:none}.av-slider__native::-webkit-slider-runnable-track{background:transparent;border:0;height:var(--av-slider-hit-size)}.av-slider__native::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--av-slider-thumb-size);pointer-events:auto;width:var(--av-slider-thumb-size)}.av-slider__native::-moz-range-track{background:transparent;border:0;height:var(--av-slider-hit-size)}.av-slider__native::-moz-range-thumb{background:transparent;border:0;height:var(--av-slider-thumb-size);pointer-events:auto;width:var(--av-slider-thumb-size)}.av-slider__native--lower:focus-visible~.av-slider__thumb--lower,.av-slider__native--upper:focus-visible~.av-slider__thumb--upper{box-shadow:var(--av-shadow-control),0 0 0 5px var(--av-slider-focus-ring),0 9px 18px color-mix(in srgb,var(--av-slider-accent) 28%,transparent);transform:translate(-50%,-50%) scale(1.04)}.av-slider--disabled{cursor:not-allowed;opacity:.62}.av-slider--disabled .av-slider__track,.av-slider--disabled .av-slider__native{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1680
|
+
}
|
|
1681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSlider, decorators: [{
|
|
1682
|
+
type: Component,
|
|
1683
|
+
args: [{ imports: [CommonModule], providers: [
|
|
1684
|
+
{
|
|
1685
|
+
multi: true,
|
|
1686
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1687
|
+
useExisting: forwardRef(() => AvSlider),
|
|
1688
|
+
},
|
|
1689
|
+
], selector: 'av-slider, lib-av-slider', standalone: true, template: "<div\n class=\"av-slider\"\n [class.av-slider--disabled]=\"isDisabled()\"\n [ngStyle]=\"themeVars()\"\n>\n @if (label() || showValue()) {\n <div class=\"av-slider__header\">\n @if (label()) {\n <label class=\"av-slider__label\">{{ label() }}</label>\n }\n\n @if (showValue()) {\n <span class=\"av-slider__value\">{{ displayValue() }}</span>\n }\n </div>\n }\n\n <div class=\"av-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n <span class=\"av-slider__rail\"></span>\n <span\n class=\"av-slider__fill\"\n [style.left.%]=\"fillLeft()\"\n [style.width.%]=\"fillWidth()\"\n ></span>\n\n <input\n class=\"av-slider__native av-slider__native--lower\"\n type=\"range\"\n [attr.aria-label]=\"range() ? lowerAriaLabel() : ariaLabel()\"\n [attr.aria-valuetext]=\"formatValue(lowerValue())\"\n [disabled]=\"isDisabled()\"\n [max]=\"safeMax()\"\n [min]=\"safeMin()\"\n [step]=\"safeStep()\"\n [value]=\"lowerValue()\"\n (blur)=\"markTouched()\"\n (change)=\"markTouched()\"\n (focus)=\"activeThumb.set('lower')\"\n (input)=\"onInput('lower', $event)\"\n />\n\n @if (range()) {\n <input\n class=\"av-slider__native av-slider__native--upper\"\n type=\"range\"\n [attr.aria-label]=\"upperAriaLabel()\"\n [attr.aria-valuetext]=\"formatValue(upperValue())\"\n [disabled]=\"isDisabled()\"\n [max]=\"safeMax()\"\n [min]=\"safeMin()\"\n [step]=\"safeStep()\"\n [value]=\"upperValue()\"\n (blur)=\"markTouched()\"\n (change)=\"markTouched()\"\n (focus)=\"activeThumb.set('upper')\"\n (input)=\"onInput('upper', $event)\"\n />\n }\n\n <span\n class=\"av-slider__thumb av-slider__thumb--lower\"\n [class.av-slider__thumb--active]=\"activeThumb() === 'lower'\"\n [style.left.%]=\"lowerPercent()\"\n >\n @if (thumbLabel()) {\n <span class=\"av-slider__bubble\">{{ formatValue(lowerValue()) }}</span>\n }\n </span>\n\n @if (range()) {\n <span\n class=\"av-slider__thumb av-slider__thumb--upper\"\n [class.av-slider__thumb--active]=\"activeThumb() === 'upper'\"\n [style.left.%]=\"upperPercent()\"\n >\n @if (thumbLabel()) {\n <span class=\"av-slider__bubble\">{{ formatValue(upperValue()) }}</span>\n }\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.av-slider{--av-slider-track-height: 6px;--av-slider-hit-size: 34px;--av-slider-thumb-size: 20px;--av-slider-thumb-border: var(--av-color-surface);--av-slider-bubble-bg: var(--av-color-surface-raised);--av-slider-bubble-border: var(--av-color-border-soft);--av-slider-bubble-color: var(--av-color-text-muted);color:var(--av-color-text);display:flex;flex-direction:column;gap:.65rem;width:100%}.av-slider__header{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.av-slider__label{color:var(--av-color-text);font-size:.875rem;font-weight:700}.av-slider__value{color:var(--av-color-text-muted);font-size:.8125rem;font-weight:700;white-space:nowrap}.av-slider__track{cursor:pointer;height:var(--av-slider-hit-size);margin-top:1.45rem;position:relative;touch-action:none;width:100%}.av-slider__rail,.av-slider__fill{border-radius:var(--av-slider-rounded);height:var(--av-slider-track-height);left:0;position:absolute;top:50%;transform:translateY(-50%)}.av-slider__rail{background:var(--av-slider-track);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av-color-border-soft) 55%,transparent);right:0}.av-slider__fill{background:linear-gradient(90deg,var(--av-slider-accent),var(--av-slider-accent-strong));box-shadow:0 0 0 1px color-mix(in srgb,var(--av-slider-accent) 16%,transparent);transition:left .12s ease,width .12s ease}.av-slider__thumb{background:var(--av-slider-accent);border:3px solid var(--av-slider-thumb-border);border-radius:var(--av-radius-full);box-shadow:var(--av-shadow-control),0 6px 14px color-mix(in srgb,var(--av-slider-accent) 25%,transparent);height:var(--av-slider-thumb-size);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow .16s ease,transform .16s ease;width:var(--av-slider-thumb-size);z-index:3}.av-slider__thumb--active{box-shadow:var(--av-shadow-control),0 0 0 5px var(--av-slider-focus-ring),0 9px 18px color-mix(in srgb,var(--av-slider-accent) 28%,transparent);transform:translate(-50%,-50%) scale(1.04)}.av-slider__bubble{background:var(--av-slider-bubble-bg);border:1px solid var(--av-slider-bubble-border);border-radius:var(--av-radius-md);bottom:calc(100% + .6rem);box-shadow:var(--av-shadow-raised);color:var(--av-slider-bubble-color);font-size:.8125rem;font-weight:800;left:50%;line-height:1;min-width:2.9rem;padding:.48rem .62rem;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.av-slider__bubble:after{background:inherit;border-bottom:1px solid var(--av-slider-bubble-border);border-right:1px solid var(--av-slider-bubble-border);bottom:-.27rem;content:\"\";height:.52rem;left:50%;position:absolute;transform:translate(-50%) rotate(45deg);width:.52rem}.av-slider__native{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:var(--av-slider-hit-size);inset:0;margin:0;opacity:0;pointer-events:none;position:absolute;width:100%;z-index:4}.av-slider__native:focus{outline:none}.av-slider__native::-webkit-slider-runnable-track{background:transparent;border:0;height:var(--av-slider-hit-size)}.av-slider__native::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--av-slider-thumb-size);pointer-events:auto;width:var(--av-slider-thumb-size)}.av-slider__native::-moz-range-track{background:transparent;border:0;height:var(--av-slider-hit-size)}.av-slider__native::-moz-range-thumb{background:transparent;border:0;height:var(--av-slider-thumb-size);pointer-events:auto;width:var(--av-slider-thumb-size)}.av-slider__native--lower:focus-visible~.av-slider__thumb--lower,.av-slider__native--upper:focus-visible~.av-slider__thumb--upper{box-shadow:var(--av-shadow-control),0 0 0 5px var(--av-slider-focus-ring),0 9px 18px color-mix(in srgb,var(--av-slider-accent) 28%,transparent);transform:translate(-50%,-50%) scale(1.04)}.av-slider--disabled{cursor:not-allowed;opacity:.62}.av-slider--disabled .av-slider__track,.av-slider--disabled .av-slider__native{cursor:not-allowed}\n"] }]
|
|
1690
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], thumbLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], valuePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrefix", required: false }] }], valueSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSuffix", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], lowerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowerAriaLabel", required: false }] }], upperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "upperAriaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
1691
|
+
|
|
1692
|
+
class AvInput {
|
|
1693
|
+
ngControl;
|
|
1694
|
+
config = inject(VISUALS_CONFIG);
|
|
1695
|
+
placeholder = input('', /* @ts-ignore */
|
|
1696
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1697
|
+
type = input('text', /* @ts-ignore */
|
|
1698
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1699
|
+
label = input(/* @ts-ignore */
|
|
1700
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1701
|
+
icon = input(/* @ts-ignore */
|
|
1702
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1703
|
+
loading = input(false, /* @ts-ignore */
|
|
1704
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
1705
|
+
autoFocus = input(false, /* @ts-ignore */
|
|
1706
|
+
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
1707
|
+
loadingIcon = input('blocks-shuffle-3', /* @ts-ignore */
|
|
1708
|
+
...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
|
|
1709
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1710
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1711
|
+
rounded = input("md", /* @ts-ignore */
|
|
1712
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1713
|
+
errorMessage = input('', /* @ts-ignore */
|
|
1714
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1715
|
+
inputEl;
|
|
1716
|
+
value = '';
|
|
1717
|
+
disabled = false;
|
|
1718
|
+
// Funções de callback registradas pelo Angular Forms
|
|
1719
|
+
onChange = () => { };
|
|
1720
|
+
onTouched = () => { };
|
|
1721
|
+
constructor(ngControl) {
|
|
1722
|
+
this.ngControl = ngControl;
|
|
1723
|
+
if (this.ngControl) {
|
|
1724
|
+
this.ngControl.valueAccessor = this;
|
|
1725
|
+
}
|
|
1726
|
+
}
|
|
1727
|
+
ngAfterViewInit() {
|
|
1728
|
+
if (this.autoFocus() && this.inputEl) {
|
|
1729
|
+
setTimeout(() => this.inputEl.nativeElement.focus(), 0);
|
|
1730
|
+
}
|
|
1731
|
+
}
|
|
1732
|
+
get controlClasses() {
|
|
1733
|
+
return [
|
|
1734
|
+
this.isInvalid ? 'av-input__control--invalid' : '',
|
|
1735
|
+
].filter(Boolean).join(' ');
|
|
1736
|
+
}
|
|
1737
|
+
get isInvalid() {
|
|
1738
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
1739
|
+
}
|
|
1740
|
+
writeValue(value) {
|
|
1741
|
+
this.value = value || '';
|
|
1742
|
+
}
|
|
1743
|
+
registerOnChange(fn) {
|
|
1744
|
+
this.onChange = fn;
|
|
1745
|
+
}
|
|
1746
|
+
registerOnTouched(fn) {
|
|
1747
|
+
this.onTouched = fn;
|
|
1748
|
+
}
|
|
1749
|
+
setDisabledState(isDisabled) {
|
|
1750
|
+
this.disabled = isDisabled;
|
|
1751
|
+
}
|
|
1752
|
+
onInput(event) {
|
|
1753
|
+
const target = event.target;
|
|
1754
|
+
this.value = target.value;
|
|
1755
|
+
this.onChange(this.value);
|
|
1756
|
+
}
|
|
1757
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvInput, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvInput, isStandalone: true, selector: "av-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"av-input\"\n[style.--av-input-accent]=\"`var(--av-${variant()}-500)`\"\n[style.--av-input-accent-dark]=\"`var(--av-${variant()}-400)`\"\n>\n @if (label()) {\n <label class=\"av-input__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-input__field\">\n @if (icon() || loading()) {\n <div class=\"av-input__icon\">\n <span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>\n </div>\n }\n\n <input\n #inputRef\n [type]=\"type()\"\n [value]=\"value\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n class=\"av-input__control\"\n [class.av-input__control--with-icon]=\"icon()\"\n [class.av-input__control--without-icon]=\"!icon()\"\n [ngClass]=\"controlClasses\"\n />\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-input__error\">\n {{ errorMessage() || 'Campo inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-input{--av-input-control-bg: var(--av-color-surface);--av-input-color: var(--av-color-text);--av-input-muted-color: var(--av-color-text-subtle);--av-input-border: var(--av-color-border);--av-input-hover-border: var(--av-color-border-hover);--av-input-focus-color: var(--av-input-accent, var(--av-slate-500));--av-input-disabled-bg: var(--av-color-surface-muted);--av-input-invalid-color: var(--av-color-danger);--av-input-invalid-text: var(--av-color-danger-text);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-input-color)}.av-input__label{color:var(--av-input-color);font-size:.875rem;font-weight:700;text-align:start}.av-input__field{align-items:center;display:flex;position:relative;width:100%}.av-input__icon{color:var(--av-input-muted-color);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-input__control{background-color:var(--av-input-control-bg);border:2px solid var(--av-input-border);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-control);color:var(--av-input-color);padding:.5rem 1rem;transition:all .2s ease;width:100%}.av-input__control::placeholder{color:var(--av-input-muted-color)}.av-input__control:hover{border-color:var(--av-input-hover-border)}.av-input__control:focus{outline:none}.av-input__control:disabled{background:var(--av-input-disabled-bg);color:var(--av-color-text-muted);opacity:.72;cursor:not-allowed}.av-input__control--with-icon{padding-left:2.5rem}.av-input__control--without-icon{padding-left:1rem}.av-input__control:focus{border-color:var(--av-input-focus-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-input-focus-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-input-focus-color) 24%,transparent)}.av-input__control--invalid,.av-input__control--invalid:focus{border-color:var(--av-input-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-input-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-input-invalid-color) 24%,transparent);color:var(--av-input-invalid-text);animation:av-input-shake .4s ease-in-out}.av-input__error{color:var(--av-input-invalid-color);font-size:.75rem;font-weight:500}@keyframes av-input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}:host-context([data-av-theme=\"dark\"]) .av-input{--av-input-focus-color: var(--av-input-accent-dark, var(--av-input-accent, var(--av-slate-400)))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
1759
|
+
}
|
|
1760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvInput, decorators: [{
|
|
1761
|
+
type: Component,
|
|
1762
|
+
args: [{ selector: 'av-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, AvIcon], template: "<div class=\"av-input\"\n[style.--av-input-accent]=\"`var(--av-${variant()}-500)`\"\n[style.--av-input-accent-dark]=\"`var(--av-${variant()}-400)`\"\n>\n @if (label()) {\n <label class=\"av-input__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-input__field\">\n @if (icon() || loading()) {\n <div class=\"av-input__icon\">\n <span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>\n </div>\n }\n\n <input\n #inputRef\n [type]=\"type()\"\n [value]=\"value\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n class=\"av-input__control\"\n [class.av-input__control--with-icon]=\"icon()\"\n [class.av-input__control--without-icon]=\"!icon()\"\n [ngClass]=\"controlClasses\"\n />\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-input__error\">\n {{ errorMessage() || 'Campo inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-input{--av-input-control-bg: var(--av-color-surface);--av-input-color: var(--av-color-text);--av-input-muted-color: var(--av-color-text-subtle);--av-input-border: var(--av-color-border);--av-input-hover-border: var(--av-color-border-hover);--av-input-focus-color: var(--av-input-accent, var(--av-slate-500));--av-input-disabled-bg: var(--av-color-surface-muted);--av-input-invalid-color: var(--av-color-danger);--av-input-invalid-text: var(--av-color-danger-text);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-input-color)}.av-input__label{color:var(--av-input-color);font-size:.875rem;font-weight:700;text-align:start}.av-input__field{align-items:center;display:flex;position:relative;width:100%}.av-input__icon{color:var(--av-input-muted-color);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-input__control{background-color:var(--av-input-control-bg);border:2px solid var(--av-input-border);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-control);color:var(--av-input-color);padding:.5rem 1rem;transition:all .2s ease;width:100%}.av-input__control::placeholder{color:var(--av-input-muted-color)}.av-input__control:hover{border-color:var(--av-input-hover-border)}.av-input__control:focus{outline:none}.av-input__control:disabled{background:var(--av-input-disabled-bg);color:var(--av-color-text-muted);opacity:.72;cursor:not-allowed}.av-input__control--with-icon{padding-left:2.5rem}.av-input__control--without-icon{padding-left:1rem}.av-input__control:focus{border-color:var(--av-input-focus-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-input-focus-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-input-focus-color) 24%,transparent)}.av-input__control--invalid,.av-input__control--invalid:focus{border-color:var(--av-input-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-input-invalid-color);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-input-invalid-color) 24%,transparent);color:var(--av-input-invalid-text);animation:av-input-shake .4s ease-in-out}.av-input__error{color:var(--av-input-invalid-color);font-size:.75rem;font-weight:500}@keyframes av-input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}:host-context([data-av-theme=\"dark\"]) .av-input{--av-input-focus-color: var(--av-input-accent-dark, var(--av-input-accent, var(--av-slate-400)))}\n"] }]
|
|
1763
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
1764
|
+
type: Optional
|
|
1765
|
+
}, {
|
|
1766
|
+
type: Self
|
|
1767
|
+
}] }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], inputEl: [{
|
|
1768
|
+
type: ViewChild,
|
|
1769
|
+
args: ['inputRef']
|
|
1770
|
+
}] } });
|
|
1771
|
+
|
|
1772
|
+
class AvSelect {
|
|
1773
|
+
ngControl;
|
|
1774
|
+
config = inject(VISUALS_CONFIG);
|
|
1775
|
+
themeService = inject(ThemeService);
|
|
1776
|
+
data = input.required(/* @ts-ignore */
|
|
1777
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
1778
|
+
placeholder = input('Selecione uma opção', /* @ts-ignore */
|
|
1779
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1780
|
+
labelKey = input('label', /* @ts-ignore */
|
|
1781
|
+
...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
1782
|
+
labelFormat = input('', /* @ts-ignore */
|
|
1783
|
+
...(ngDevMode ? [{ debugName: "labelFormat" }] : /* istanbul ignore next */ []));
|
|
1784
|
+
valueKey = input('value', /* @ts-ignore */
|
|
1785
|
+
...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
|
|
1786
|
+
label = input('', /* @ts-ignore */
|
|
1787
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1788
|
+
icon = input('', /* @ts-ignore */
|
|
1789
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1790
|
+
searchPlaceholder = input('Pesquisar...', /* @ts-ignore */
|
|
1791
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
1792
|
+
searchable = input(true, /* @ts-ignore */
|
|
1793
|
+
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
1794
|
+
loading = input(false, /* @ts-ignore */
|
|
1795
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
1796
|
+
loadingIcon = input('blocks-shuffle-3', /* @ts-ignore */
|
|
1797
|
+
...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
|
|
1798
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1799
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1800
|
+
rounded = input('md', /* @ts-ignore */
|
|
1801
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1802
|
+
errorMessage = input('', /* @ts-ignore */
|
|
1803
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1804
|
+
value = input(null, /* @ts-ignore */
|
|
1805
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1806
|
+
onSearch = input(/* @ts-ignore */
|
|
1807
|
+
...(ngDevMode ? [undefined, { debugName: "onSearch" }] : /* istanbul ignore next */ []));
|
|
1808
|
+
valueChange = output();
|
|
1809
|
+
triggerEl;
|
|
1810
|
+
isOpen = signal(false, /* @ts-ignore */
|
|
1811
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1812
|
+
searchTerm = signal('', /* @ts-ignore */
|
|
1813
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
1814
|
+
_value = signal(null, /* @ts-ignore */
|
|
1815
|
+
...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
1816
|
+
disabled = signal(false, /* @ts-ignore */
|
|
1817
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1818
|
+
onChange = () => { };
|
|
1819
|
+
onTouched = () => { };
|
|
1820
|
+
constructor(ngControl) {
|
|
1821
|
+
this.ngControl = ngControl;
|
|
1822
|
+
if (this.ngControl) {
|
|
1823
|
+
this.ngControl.valueAccessor = this;
|
|
1824
|
+
}
|
|
1825
|
+
effect(() => {
|
|
1826
|
+
this._value.set(this.value());
|
|
1827
|
+
});
|
|
1828
|
+
}
|
|
1829
|
+
get roundedStyle() {
|
|
1830
|
+
if (typeof this.rounded() === 'string') {
|
|
1831
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
1832
|
+
}
|
|
1833
|
+
return `${this.rounded()}px`;
|
|
1834
|
+
}
|
|
1835
|
+
get themeVars() {
|
|
1836
|
+
const isDark = this.themeService.dark();
|
|
1837
|
+
const variant = this.variant();
|
|
1838
|
+
const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
|
|
1839
|
+
return {
|
|
1840
|
+
// Base
|
|
1841
|
+
'--av-select-color': 'var(--av-color-text)',
|
|
1842
|
+
'--av-select-muted-color': 'var(--av-color-text-subtle)',
|
|
1843
|
+
// Trigger
|
|
1844
|
+
'--av-select-trigger-bg': 'var(--av-color-surface)',
|
|
1845
|
+
'--av-select-trigger-border': 'var(--av-color-border)',
|
|
1846
|
+
'--av-select-trigger-hover-border': isDark
|
|
1847
|
+
? `var(--av-${variant}-400)`
|
|
1848
|
+
: `var(--av-${variant}-400)`,
|
|
1849
|
+
'--av-select-trigger-focus-border': accent,
|
|
1850
|
+
// Panel
|
|
1851
|
+
'--av-select-panel-bg': 'var(--av-color-surface-raised)',
|
|
1852
|
+
'--av-select-panel-border': 'var(--av-color-border-soft)',
|
|
1853
|
+
'--av-select-panel-shadow': 'var(--av-shadow-raised)',
|
|
1854
|
+
// Search
|
|
1855
|
+
'--av-select-search-border': 'var(--av-color-border-soft)',
|
|
1856
|
+
'--av-select-search-focus-border': accent,
|
|
1857
|
+
'--av-select-search-color': 'var(--av-color-text)',
|
|
1858
|
+
// Options
|
|
1859
|
+
'--av-select-option-hover-bg': isDark
|
|
1860
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 12%, transparent)`
|
|
1861
|
+
: `var(--av-${variant}-50)`,
|
|
1862
|
+
'--av-select-option-hover-color': isDark
|
|
1863
|
+
? `var(--av-${variant}-100)`
|
|
1864
|
+
: `var(--av-${variant}-800)`,
|
|
1865
|
+
'--av-select-option-selected-bg': isDark
|
|
1866
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 18%, transparent)`
|
|
1867
|
+
: `var(--av-${variant}-100)`,
|
|
1868
|
+
'--av-select-option-selected-color': isDark
|
|
1869
|
+
? `var(--av-${variant}-100)`
|
|
1870
|
+
: `var(--av-${variant}-700)`,
|
|
1871
|
+
'--av-select-option-selected-icon': isDark
|
|
1872
|
+
? `var(--av-${variant}-400)`
|
|
1873
|
+
: `var(--av-${variant}-600)`,
|
|
1874
|
+
// Empty
|
|
1875
|
+
'--av-select-empty-color': 'var(--av-color-text-subtle)',
|
|
1876
|
+
'--av-select-disabled-bg': 'var(--av-color-surface-muted)',
|
|
1877
|
+
'--av-select-accent': accent,
|
|
1878
|
+
'--av-select-soft': isDark
|
|
1879
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 18%, transparent)`
|
|
1880
|
+
: `var(--av-${variant}-100)`,
|
|
1881
|
+
};
|
|
1882
|
+
}
|
|
1883
|
+
filteredData = computed(() => {
|
|
1884
|
+
const query = this.searchTerm().toLowerCase().trim();
|
|
1885
|
+
const items = this.data() || [];
|
|
1886
|
+
if (!query || this.onSearch())
|
|
1887
|
+
return items;
|
|
1888
|
+
return items.filter((item) => {
|
|
1889
|
+
const labelValue = this.getItemLabel(item);
|
|
1890
|
+
return String(labelValue).toLowerCase().includes(query);
|
|
1891
|
+
});
|
|
1892
|
+
}, /* @ts-ignore */
|
|
1893
|
+
...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
|
|
1894
|
+
selectedOption = computed(() => {
|
|
1895
|
+
const items = this.data() || [];
|
|
1896
|
+
return items.find((item) => this.getItemValue(item) === this._value());
|
|
1897
|
+
}, /* @ts-ignore */
|
|
1898
|
+
...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
|
|
1899
|
+
get triggerClasses() {
|
|
1900
|
+
return [
|
|
1901
|
+
this.isOpen() ? 'av-select__trigger--open' : '',
|
|
1902
|
+
this.disabled() ? 'av-select__trigger--disabled' : '',
|
|
1903
|
+
this.isInvalid ? 'av-select__trigger--invalid' : '',
|
|
1904
|
+
].filter(Boolean).join(' ');
|
|
1905
|
+
}
|
|
1906
|
+
get isInvalid() {
|
|
1907
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
1908
|
+
}
|
|
1909
|
+
getItemLabel(item) {
|
|
1910
|
+
if (typeof item === 'object' && item !== null) {
|
|
1911
|
+
if (!this.labelFormat() || this.labelFormat().trim() === '') {
|
|
1912
|
+
return item[this.labelKey()];
|
|
1913
|
+
}
|
|
1914
|
+
let label = this.labelFormat();
|
|
1915
|
+
Object.keys(item).forEach((key) => {
|
|
1916
|
+
label = label.replaceAll(`{${key}}`, item[key] ?? '');
|
|
1917
|
+
});
|
|
1918
|
+
return label;
|
|
1919
|
+
}
|
|
1920
|
+
return item;
|
|
1921
|
+
}
|
|
1922
|
+
getItemValue(item) {
|
|
1923
|
+
return typeof item === 'object' && item !== null ? item[this.valueKey()] : item;
|
|
1924
|
+
}
|
|
1925
|
+
isSelected(item) {
|
|
1926
|
+
return this.getItemValue(item) === this._value();
|
|
1927
|
+
}
|
|
1928
|
+
toggleDropdown() {
|
|
1929
|
+
if (this.disabled())
|
|
1930
|
+
return;
|
|
1931
|
+
this.isOpen.set(!this.isOpen());
|
|
1932
|
+
if (!this.isOpen()) {
|
|
1933
|
+
this.onTouched();
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
closeDropdown() {
|
|
1937
|
+
this.isOpen.set(false);
|
|
1938
|
+
this.searchTerm.set('');
|
|
1939
|
+
this.onTouched();
|
|
1940
|
+
}
|
|
1941
|
+
selectOption(item) {
|
|
1942
|
+
const val = this.getItemValue(item);
|
|
1943
|
+
this._value.set(val);
|
|
1944
|
+
this.onChange(val);
|
|
1945
|
+
this.valueChange.emit(val);
|
|
1946
|
+
this.closeDropdown();
|
|
1947
|
+
}
|
|
1948
|
+
handleSearchInput(event) {
|
|
1949
|
+
const query = event.target.value;
|
|
1950
|
+
this.searchTerm.set(query);
|
|
1951
|
+
if (this.onSearch()) {
|
|
1952
|
+
this.onSearch()(query);
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
writeValue(value) {
|
|
1956
|
+
this._value.set(value);
|
|
1957
|
+
}
|
|
1958
|
+
registerOnChange(fn) {
|
|
1959
|
+
this.onChange = fn;
|
|
1960
|
+
}
|
|
1961
|
+
registerOnTouched(fn) {
|
|
1962
|
+
this.onTouched = fn;
|
|
1963
|
+
}
|
|
1964
|
+
setDisabledState(isDisabled) {
|
|
1965
|
+
this.disabled.set(isDisabled);
|
|
1966
|
+
}
|
|
1967
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSelect, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1968
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvSelect, isStandalone: true, selector: "av-select", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<div\n class=\"av-select\"\n [ngStyle]=\"themeVars\"\n>\n @if (label()) {\n <label class=\"av-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n class=\"av-select__trigger\"\n [style.border-radius]=\"roundedStyle\"\n [class.av-select__trigger--with-icon]=\"icon() || loading()\"\n [class.av-select__trigger--without-icon]=\"!icon() && !loading()\"\n [ngClass]=\"triggerClasses\"\n >\n @if (icon() || loading()) {\n <div class=\"av-select__icon\">\n <span av-icon [name]=\"loading() ? loadingIcon() : icon()!\"></span>\n </div>\n }\n\n <span class=\"av-select__value\" [class.av-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedOption() ? getItemLabel(selectedOption()) : placeholder() }}\n </span>\n\n <div class=\"av-select__chevron\" [class.av-select__chevron--open]=\"isOpen()\">\n <span av-icon name=\"expand_more\"></span>\n </div>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-select__error\">\n {{ errorMessage() || 'Sele\u00E7\u00E3o obrigat\u00F3ria' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-select__panel\"\n [ngStyle]=\"themeVars\"\n [style.width.px]=\"triggerEl.offsetWidth\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (searchable()) {\n <div class=\"av-select__search\">\n <av-input\n [autoFocus]=\"true\"\n icon=\"search\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchTerm()\"\n (input)=\"handleSearchInput($event)\"\n class=\"av-select__search-input\"\n />\n </div>\n }\n\n <ul class=\"av-select__options\">\n @for (item of filteredData(); track getItemValue(item)) {\n <li\n (click)=\"selectOption(item)\"\n class=\"av-select__option\"\n [class.av-select__option--selected]=\"isSelected(item)\"\n >\n <span class=\"av-select__option-label\">{{ getItemLabel(item) }}</span>\n\n @if (isSelected(item)) {\n <span av-icon name=\"check\" class=\"av-select__option-check\"></span>\n }\n </li>\n } @empty {\n <li class=\"av-select__empty\">Nenhuma op\u00E7\u00E3o encontrada</li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".av-select{--av-select-color: var(--av-color-text);--av-select-muted-color: var(--av-color-text-subtle);--av-select-trigger-bg: var(--av-color-surface);--av-select-trigger-border: var(--av-color-border);--av-select-trigger-hover-border: var(--av-color-border-hover);--av-select-trigger-focus-border: var(--av-select-accent, var(--av-slate-500));--av-select-panel-bg: var(--av-color-surface-raised);--av-select-panel-border: var(--av-color-border-soft);--av-select-panel-shadow: var(--av-shadow-raised);--av-select-search-border: var(--av-color-border-soft);--av-select-search-color: var(--av-color-text);--av-select-option-hover-bg: var(--av-color-surface-muted);--av-select-option-hover-color: var(--av-select-color);--av-select-option-selected-bg: var(--av-select-soft, #eff6ff);--av-select-option-selected-color: var(--av-select-color);--av-select-option-selected-icon: var(--av-select-accent, #3b82f6);--av-select-empty-color: var(--av-neutral-400);--av-select-disabled-bg: var(--av-color-surface-muted);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-select-color)}.av-select__label{color:var(--av-select-color);font-size:.875rem;font-weight:700;text-align:start}.av-select__trigger{align-items:center;background:var(--av-select-trigger-bg);border:2px solid var(--av-select-trigger-border);box-shadow:var(--av-shadow-control);color:var(--av-select-color);cursor:pointer;display:flex;font-size:.875rem;padding:.5rem 1rem;position:relative;transition:all .2s ease;width:100%}.av-select__trigger:hover{border-color:var(--av-select-trigger-hover-border)}.av-select__trigger:focus{outline:none}.av-select__trigger:focus,.av-select__trigger--open{border-color:var(--av-select-trigger-focus-border);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-select-trigger-focus-border);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-select-trigger-focus-border) 24%,transparent)}.av-select__trigger--with-icon{padding-left:2.5rem}.av-select__trigger--without-icon{padding-left:1rem}.av-select__trigger--disabled{background:var(--av-select-disabled-bg);cursor:not-allowed;opacity:.72}.av-select__trigger--invalid,.av-select__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text);animation:av-select-shake .4s ease-in-out}.av-select__icon,.av-select__chevron{color:var(--av-neutral-400);display:flex;pointer-events:none;position:absolute}.av-select__icon{left:.75rem}.av-select__chevron{right:.75rem;transition:transform .2s ease}.av-select__chevron--open{transform:rotate(180deg)}.av-select__value,.av-select__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.av-select__value--placeholder,.av-select__empty{color:var(--av-select-muted-color)}.av-select__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-select__panel{background:var(--av-select-panel-bg);border:1px solid var(--av-select-panel-border);box-shadow:var(--av-select-panel-shadow);display:flex;flex-direction:column;max-height:15rem;margin-top:.25rem;overflow:hidden;opacity:0;transform:translateY(-6px) scale(.98);animation:av-select-panel-in .18s ease forwards;transition:opacity .18s ease,transform .18s ease}.av-select__search{align-items:center;border-bottom:1px solid var(--av-select-search-border);display:flex;gap:.5rem;padding:.5rem}.av-select__search-icon{color:var(--av-select-muted-color);font-size:.875rem}.av-select__search-input{background:transparent;border:0;color:var(--av-select-search-color);font-size:.875rem;outline:0;width:100%}.av-select__options{flex:1;list-style:none;margin:0;overflow-y:auto;padding:.25rem 0}.av-select__option{align-items:center;color:var(--av-select-color);cursor:pointer;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem 1rem;transition:background .2s ease}.av-select__option+.av-select__option{border-top:1px solid var(--av-select-panel-border)}.av-select__option:hover{background:var(--av-select-option-hover-bg);color:var(--av-select-option-hover-color)}.av-select__option--selected{background:var(--av-select-option-selected-bg);color:var(--av-select-option-selected-color);font-weight:600}.av-select__option-check{color:var(--av-select-option-selected-icon);font-size:.875rem}.av-select__empty{color:var(--av-select-empty-color);font-size:.875rem;padding:.75rem 1rem;text-align:center}@keyframes av-select-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes av-select-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.av-select__icon,.av-select__chevron{color:var(--av-select-muted-color)}.av-select__search-input,.av-select__value,.av-select__option-label{color:var(--av-select-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }, { kind: "component", type: AvInput, selector: "av-input", inputs: ["placeholder", "type", "label", "icon", "loading", "autoFocus", "loadingIcon", "variant", "rounded", "errorMessage"] }] });
|
|
1969
|
+
}
|
|
1970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvSelect, decorators: [{
|
|
1971
|
+
type: Component,
|
|
1972
|
+
args: [{ selector: 'av-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, OverlayModule, AvIcon, AvInput], template: "<div\n class=\"av-select\"\n [ngStyle]=\"themeVars\"\n>\n @if (label()) {\n <label class=\"av-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n class=\"av-select__trigger\"\n [style.border-radius]=\"roundedStyle\"\n [class.av-select__trigger--with-icon]=\"icon() || loading()\"\n [class.av-select__trigger--without-icon]=\"!icon() && !loading()\"\n [ngClass]=\"triggerClasses\"\n >\n @if (icon() || loading()) {\n <div class=\"av-select__icon\">\n <span av-icon [name]=\"loading() ? loadingIcon() : icon()!\"></span>\n </div>\n }\n\n <span class=\"av-select__value\" [class.av-select__value--placeholder]=\"!selectedOption()\">\n {{ selectedOption() ? getItemLabel(selectedOption()) : placeholder() }}\n </span>\n\n <div class=\"av-select__chevron\" [class.av-select__chevron--open]=\"isOpen()\">\n <span av-icon name=\"expand_more\"></span>\n </div>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-select__error\">\n {{ errorMessage() || 'Sele\u00E7\u00E3o obrigat\u00F3ria' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-select__panel\"\n [ngStyle]=\"themeVars\"\n [style.width.px]=\"triggerEl.offsetWidth\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (searchable()) {\n <div class=\"av-select__search\">\n <av-input\n [autoFocus]=\"true\"\n icon=\"search\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [ngModel]=\"searchTerm()\"\n (input)=\"handleSearchInput($event)\"\n class=\"av-select__search-input\"\n />\n </div>\n }\n\n <ul class=\"av-select__options\">\n @for (item of filteredData(); track getItemValue(item)) {\n <li\n (click)=\"selectOption(item)\"\n class=\"av-select__option\"\n [class.av-select__option--selected]=\"isSelected(item)\"\n >\n <span class=\"av-select__option-label\">{{ getItemLabel(item) }}</span>\n\n @if (isSelected(item)) {\n <span av-icon name=\"check\" class=\"av-select__option-check\"></span>\n }\n </li>\n } @empty {\n <li class=\"av-select__empty\">Nenhuma op\u00E7\u00E3o encontrada</li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".av-select{--av-select-color: var(--av-color-text);--av-select-muted-color: var(--av-color-text-subtle);--av-select-trigger-bg: var(--av-color-surface);--av-select-trigger-border: var(--av-color-border);--av-select-trigger-hover-border: var(--av-color-border-hover);--av-select-trigger-focus-border: var(--av-select-accent, var(--av-slate-500));--av-select-panel-bg: var(--av-color-surface-raised);--av-select-panel-border: var(--av-color-border-soft);--av-select-panel-shadow: var(--av-shadow-raised);--av-select-search-border: var(--av-color-border-soft);--av-select-search-color: var(--av-color-text);--av-select-option-hover-bg: var(--av-color-surface-muted);--av-select-option-hover-color: var(--av-select-color);--av-select-option-selected-bg: var(--av-select-soft, #eff6ff);--av-select-option-selected-color: var(--av-select-color);--av-select-option-selected-icon: var(--av-select-accent, #3b82f6);--av-select-empty-color: var(--av-neutral-400);--av-select-disabled-bg: var(--av-color-surface-muted);display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-select-color)}.av-select__label{color:var(--av-select-color);font-size:.875rem;font-weight:700;text-align:start}.av-select__trigger{align-items:center;background:var(--av-select-trigger-bg);border:2px solid var(--av-select-trigger-border);box-shadow:var(--av-shadow-control);color:var(--av-select-color);cursor:pointer;display:flex;font-size:.875rem;padding:.5rem 1rem;position:relative;transition:all .2s ease;width:100%}.av-select__trigger:hover{border-color:var(--av-select-trigger-hover-border)}.av-select__trigger:focus{outline:none}.av-select__trigger:focus,.av-select__trigger--open{border-color:var(--av-select-trigger-focus-border);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-select-trigger-focus-border);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-select-trigger-focus-border) 24%,transparent)}.av-select__trigger--with-icon{padding-left:2.5rem}.av-select__trigger--without-icon{padding-left:1rem}.av-select__trigger--disabled{background:var(--av-select-disabled-bg);cursor:not-allowed;opacity:.72}.av-select__trigger--invalid,.av-select__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text);animation:av-select-shake .4s ease-in-out}.av-select__icon,.av-select__chevron{color:var(--av-neutral-400);display:flex;pointer-events:none;position:absolute}.av-select__icon{left:.75rem}.av-select__chevron{right:.75rem;transition:transform .2s ease}.av-select__chevron--open{transform:rotate(180deg)}.av-select__value,.av-select__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.av-select__value--placeholder,.av-select__empty{color:var(--av-select-muted-color)}.av-select__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-select__panel{background:var(--av-select-panel-bg);border:1px solid var(--av-select-panel-border);box-shadow:var(--av-select-panel-shadow);display:flex;flex-direction:column;max-height:15rem;margin-top:.25rem;overflow:hidden;opacity:0;transform:translateY(-6px) scale(.98);animation:av-select-panel-in .18s ease forwards;transition:opacity .18s ease,transform .18s ease}.av-select__search{align-items:center;border-bottom:1px solid var(--av-select-search-border);display:flex;gap:.5rem;padding:.5rem}.av-select__search-icon{color:var(--av-select-muted-color);font-size:.875rem}.av-select__search-input{background:transparent;border:0;color:var(--av-select-search-color);font-size:.875rem;outline:0;width:100%}.av-select__options{flex:1;list-style:none;margin:0;overflow-y:auto;padding:.25rem 0}.av-select__option{align-items:center;color:var(--av-select-color);cursor:pointer;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem 1rem;transition:background .2s ease}.av-select__option+.av-select__option{border-top:1px solid var(--av-select-panel-border)}.av-select__option:hover{background:var(--av-select-option-hover-bg);color:var(--av-select-option-hover-color)}.av-select__option--selected{background:var(--av-select-option-selected-bg);color:var(--av-select-option-selected-color);font-weight:600}.av-select__option-check{color:var(--av-select-option-selected-icon);font-size:.875rem}.av-select__empty{color:var(--av-select-empty-color);font-size:.875rem;padding:.75rem 1rem;text-align:center}@keyframes av-select-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes av-select-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.av-select__icon,.av-select__chevron{color:var(--av-select-muted-color)}.av-select__search-input,.av-select__value,.av-select__option-label{color:var(--av-select-color)}\n"] }]
|
|
1973
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
1974
|
+
type: Optional
|
|
1975
|
+
}, {
|
|
1976
|
+
type: Self
|
|
1977
|
+
}] }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], onSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSearch", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerEl: [{
|
|
1978
|
+
type: ViewChild,
|
|
1979
|
+
args: ['triggerEl']
|
|
1980
|
+
}] } });
|
|
1981
|
+
|
|
1982
|
+
class AvCheckbox {
|
|
1983
|
+
ngControl;
|
|
1984
|
+
config = inject(VISUALS_CONFIG);
|
|
1985
|
+
themeService = inject(ThemeService);
|
|
1986
|
+
label = input('', /* @ts-ignore */
|
|
1987
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1988
|
+
icon = input('check', /* @ts-ignore */
|
|
1989
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1990
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
1991
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1992
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
1993
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
1994
|
+
rounded = input('md', /* @ts-ignore */
|
|
1995
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
1996
|
+
errorMessage = input('', /* @ts-ignore */
|
|
1997
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
1998
|
+
changed = output();
|
|
1999
|
+
valueChange = output();
|
|
2000
|
+
value = signal(false, /* @ts-ignore */
|
|
2001
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2002
|
+
disabled = signal(false, /* @ts-ignore */
|
|
2003
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2004
|
+
onChange = () => { };
|
|
2005
|
+
onTouched = () => { };
|
|
2006
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
2007
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
2008
|
+
themeVars = computed(() => {
|
|
2009
|
+
const variant = this.activeVariant();
|
|
2010
|
+
const isDark = this.themeService.dark();
|
|
2011
|
+
return {
|
|
2012
|
+
'--av-checkbox-accent': `var(--av-${variant}-500)`,
|
|
2013
|
+
'--av-checkbox-accent-hover': `var(--av-${variant}-${isDark ? 400 : 600})`,
|
|
2014
|
+
'--av-checkbox-accent-soft': isDark
|
|
2015
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 20%, transparent)`
|
|
2016
|
+
: `var(--av-${variant}-50)`,
|
|
2017
|
+
};
|
|
2018
|
+
}, /* @ts-ignore */
|
|
2019
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2020
|
+
constructor(ngControl) {
|
|
2021
|
+
this.ngControl = ngControl;
|
|
2022
|
+
if (this.ngControl) {
|
|
2023
|
+
this.ngControl.valueAccessor = this;
|
|
2024
|
+
}
|
|
2025
|
+
}
|
|
2026
|
+
get roundedStyle() {
|
|
2027
|
+
if (typeof this.rounded() === 'string') {
|
|
2028
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
2029
|
+
}
|
|
2030
|
+
return `${this.rounded()}px`;
|
|
2031
|
+
}
|
|
2032
|
+
get isInvalid() {
|
|
2033
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
2034
|
+
}
|
|
2035
|
+
handleChange(event) {
|
|
2036
|
+
const checked = event.target.checked;
|
|
2037
|
+
this.value.set(checked);
|
|
2038
|
+
this.onChange(checked);
|
|
2039
|
+
this.changed.emit(checked);
|
|
2040
|
+
this.valueChange.emit(checked);
|
|
2041
|
+
}
|
|
2042
|
+
writeValue(value) {
|
|
2043
|
+
this.value.set(!!value);
|
|
2044
|
+
}
|
|
2045
|
+
registerOnChange(fn) {
|
|
2046
|
+
this.onChange = fn;
|
|
2047
|
+
}
|
|
2048
|
+
registerOnTouched(fn) {
|
|
2049
|
+
this.onTouched = fn;
|
|
2050
|
+
}
|
|
2051
|
+
setDisabledState(isDisabled) {
|
|
2052
|
+
this.disabled.set(isDisabled);
|
|
2053
|
+
}
|
|
2054
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCheckbox, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2055
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvCheckbox, isStandalone: true, selector: "av-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"av-checkbox\" [ngStyle]=\"themeVars()\">\n <label\n class=\"av-checkbox__label\"\n [class.av-checkbox__label--disabled]=\"disabled()\"\n >\n <input\n type=\"checkbox\"\n class=\"av-checkbox__native\"\n [checked]=\"value()\"\n [disabled]=\"disabled()\"\n (change)=\"handleChange($event)\"\n (blur)=\"onTouched()\"\n />\n\n <span\n class=\"av-checkbox__box\"\n [class.av-checkbox__box--checked]=\"value()\"\n [class.av-checkbox__box--invalid]=\"isInvalid\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (value()) {\n <span av-icon [name]=\"icon()\" class=\"av-checkbox__icon\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"av-checkbox__text\">\n {{ label() }}\n </span>\n }\n </label>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-checkbox__error\">\n {{ errorMessage() || 'Campo obrigat\u00F3rio' }}\n </span>\n }\n</div>\n", styles: [".av-checkbox{display:flex;flex-direction:column;gap:.25rem;color:var(--av-color-text)}.av-checkbox__label{align-items:center;cursor:pointer;display:inline-flex;gap:.625rem;-webkit-user-select:none;user-select:none;width:fit-content}.av-checkbox__label--disabled{cursor:not-allowed;opacity:.72}.av-checkbox__native{height:1px;margin:-1px;opacity:0;overflow:hidden;position:absolute;width:1px}.av-checkbox__box{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text-inverse);display:flex;flex-shrink:0;height:1.25rem;justify-content:center;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;width:1.25rem}.av-checkbox__label:hover .av-checkbox__box{border-color:var(--av-color-border-hover)}.av-checkbox__label:focus-within .av-checkbox__box{border-color:var(--av-checkbox-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-checkbox-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-checkbox-accent) 24%,transparent)}.av-checkbox__box--checked{background:var(--av-checkbox-accent);border-color:var(--av-checkbox-accent)}.av-checkbox__label:hover .av-checkbox__box--checked{background:var(--av-checkbox-accent-hover);border-color:var(--av-checkbox-accent-hover)}.av-checkbox__box--invalid{border-color:var(--av-color-danger);animation:av-checkbox-shake .4s ease-in-out}.av-checkbox__icon{color:var(--av-white);font-size:.875rem;line-height:1}.av-checkbox__text{color:var(--av-color-text);font-size:.875rem;font-weight:500;transition:color .2s ease}.av-checkbox__label:hover .av-checkbox__text{color:var(--av-color-text)}.av-checkbox__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}@keyframes av-checkbox-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2056
|
+
}
|
|
2057
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCheckbox, decorators: [{
|
|
2058
|
+
type: Component,
|
|
2059
|
+
args: [{ selector: 'av-checkbox', standalone: true, imports: [CommonModule, AvIcon], template: "<div class=\"av-checkbox\" [ngStyle]=\"themeVars()\">\n <label\n class=\"av-checkbox__label\"\n [class.av-checkbox__label--disabled]=\"disabled()\"\n >\n <input\n type=\"checkbox\"\n class=\"av-checkbox__native\"\n [checked]=\"value()\"\n [disabled]=\"disabled()\"\n (change)=\"handleChange($event)\"\n (blur)=\"onTouched()\"\n />\n\n <span\n class=\"av-checkbox__box\"\n [class.av-checkbox__box--checked]=\"value()\"\n [class.av-checkbox__box--invalid]=\"isInvalid\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (value()) {\n <span av-icon [name]=\"icon()\" class=\"av-checkbox__icon\"></span>\n }\n </span>\n\n @if (label()) {\n <span class=\"av-checkbox__text\">\n {{ label() }}\n </span>\n }\n </label>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-checkbox__error\">\n {{ errorMessage() || 'Campo obrigat\u00F3rio' }}\n </span>\n }\n</div>\n", styles: [".av-checkbox{display:flex;flex-direction:column;gap:.25rem;color:var(--av-color-text)}.av-checkbox__label{align-items:center;cursor:pointer;display:inline-flex;gap:.625rem;-webkit-user-select:none;user-select:none;width:fit-content}.av-checkbox__label--disabled{cursor:not-allowed;opacity:.72}.av-checkbox__native{height:1px;margin:-1px;opacity:0;overflow:hidden;position:absolute;width:1px}.av-checkbox__box{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text-inverse);display:flex;flex-shrink:0;height:1.25rem;justify-content:center;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;width:1.25rem}.av-checkbox__label:hover .av-checkbox__box{border-color:var(--av-color-border-hover)}.av-checkbox__label:focus-within .av-checkbox__box{border-color:var(--av-checkbox-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-checkbox-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-checkbox-accent) 24%,transparent)}.av-checkbox__box--checked{background:var(--av-checkbox-accent);border-color:var(--av-checkbox-accent)}.av-checkbox__label:hover .av-checkbox__box--checked{background:var(--av-checkbox-accent-hover);border-color:var(--av-checkbox-accent-hover)}.av-checkbox__box--invalid{border-color:var(--av-color-danger);animation:av-checkbox-shake .4s ease-in-out}.av-checkbox__icon{color:var(--av-white);font-size:.875rem;line-height:1}.av-checkbox__text{color:var(--av-color-text);font-size:.875rem;font-weight:500;transition:color .2s ease}.av-checkbox__label:hover .av-checkbox__text{color:var(--av-color-text)}.av-checkbox__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}@keyframes av-checkbox-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}\n"] }]
|
|
2060
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2061
|
+
type: Optional
|
|
2062
|
+
}, {
|
|
2063
|
+
type: Self
|
|
2064
|
+
}] }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
2065
|
+
|
|
2066
|
+
class AvCurrencyInput {
|
|
2067
|
+
ngControl;
|
|
2068
|
+
config = inject(VISUALS_CONFIG);
|
|
2069
|
+
themeService = inject(ThemeService);
|
|
2070
|
+
label = input('', /* @ts-ignore */
|
|
2071
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2072
|
+
currencySymbol = input('R$', /* @ts-ignore */
|
|
2073
|
+
...(ngDevMode ? [{ debugName: "currencySymbol" }] : /* istanbul ignore next */ []));
|
|
2074
|
+
locale = input('pt-BR', /* @ts-ignore */
|
|
2075
|
+
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
2076
|
+
currencyCode = input('BRL', /* @ts-ignore */
|
|
2077
|
+
...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
|
|
2078
|
+
placeholder = input('0,00', /* @ts-ignore */
|
|
2079
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2080
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2081
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2082
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
2083
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
2084
|
+
rounded = input('md', /* @ts-ignore */
|
|
2085
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
2086
|
+
autoFocus = input(false, /* @ts-ignore */
|
|
2087
|
+
...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
2088
|
+
errorMessage = input('', /* @ts-ignore */
|
|
2089
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2090
|
+
inputEl;
|
|
2091
|
+
formattedValue = signal('', /* @ts-ignore */
|
|
2092
|
+
...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
|
|
2093
|
+
rawValue = signal(null, /* @ts-ignore */
|
|
2094
|
+
...(ngDevMode ? [{ debugName: "rawValue" }] : /* istanbul ignore next */ []));
|
|
2095
|
+
disabled = signal(false, /* @ts-ignore */
|
|
2096
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2097
|
+
onChange = () => { };
|
|
2098
|
+
onTouched = () => { };
|
|
2099
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
2100
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
2101
|
+
themeVars = computed(() => {
|
|
2102
|
+
const variant = this.activeVariant();
|
|
2103
|
+
const isDark = this.themeService.dark();
|
|
2104
|
+
return {
|
|
2105
|
+
'--av-currency-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
2106
|
+
'--av-currency-symbol-bg': isDark
|
|
2107
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 12%, transparent)`
|
|
2108
|
+
: `var(--av-${variant}-50)`,
|
|
2109
|
+
};
|
|
2110
|
+
}, /* @ts-ignore */
|
|
2111
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2112
|
+
constructor(ngControl) {
|
|
2113
|
+
this.ngControl = ngControl;
|
|
2114
|
+
if (this.ngControl) {
|
|
2115
|
+
this.ngControl.valueAccessor = this;
|
|
2116
|
+
}
|
|
2117
|
+
}
|
|
2118
|
+
ngAfterViewInit() {
|
|
2119
|
+
if (this.autoFocus() && this.inputEl) {
|
|
2120
|
+
setTimeout(() => this.inputEl.nativeElement.focus(), 0);
|
|
2121
|
+
}
|
|
2122
|
+
}
|
|
2123
|
+
get roundedStyle() {
|
|
2124
|
+
if (typeof this.rounded() === 'string') {
|
|
2125
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
2126
|
+
}
|
|
2127
|
+
return `${this.rounded()}px`;
|
|
2128
|
+
}
|
|
2129
|
+
get isInvalid() {
|
|
2130
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
2131
|
+
}
|
|
2132
|
+
formatCurrency(value) {
|
|
2133
|
+
if (value === null || Number.isNaN(value))
|
|
2134
|
+
return '';
|
|
2135
|
+
return new Intl.NumberFormat(this.locale(), {
|
|
2136
|
+
style: 'decimal',
|
|
2137
|
+
minimumFractionDigits: 2,
|
|
2138
|
+
maximumFractionDigits: 2,
|
|
2139
|
+
}).format(value);
|
|
2140
|
+
}
|
|
2141
|
+
onInput(event) {
|
|
2142
|
+
const inputNode = event.target;
|
|
2143
|
+
const digits = inputNode.value.replace(/\D/g, '');
|
|
2144
|
+
if (!digits) {
|
|
2145
|
+
this.rawValue.set(null);
|
|
2146
|
+
this.formattedValue.set('');
|
|
2147
|
+
this.onChange(null);
|
|
2148
|
+
return;
|
|
2149
|
+
}
|
|
2150
|
+
const numericValue = Number(digits) / 100;
|
|
2151
|
+
this.rawValue.set(numericValue);
|
|
2152
|
+
this.formattedValue.set(this.formatCurrency(numericValue));
|
|
2153
|
+
inputNode.value = this.formattedValue();
|
|
2154
|
+
this.onChange(numericValue);
|
|
2155
|
+
}
|
|
2156
|
+
handleBlur() {
|
|
2157
|
+
this.formattedValue.set(this.formatCurrency(this.rawValue()));
|
|
2158
|
+
this.onTouched();
|
|
2159
|
+
}
|
|
2160
|
+
writeValue(value) {
|
|
2161
|
+
const numericValue = typeof value === 'number'
|
|
2162
|
+
? value
|
|
2163
|
+
: typeof value === 'string' && value.trim() !== ''
|
|
2164
|
+
? Number(value)
|
|
2165
|
+
: null;
|
|
2166
|
+
const normalizedValue = numericValue !== null && !Number.isNaN(numericValue)
|
|
2167
|
+
? numericValue
|
|
2168
|
+
: null;
|
|
2169
|
+
this.rawValue.set(normalizedValue);
|
|
2170
|
+
this.formattedValue.set(this.formatCurrency(normalizedValue));
|
|
2171
|
+
}
|
|
2172
|
+
registerOnChange(fn) {
|
|
2173
|
+
this.onChange = fn;
|
|
2174
|
+
}
|
|
2175
|
+
registerOnTouched(fn) {
|
|
2176
|
+
this.onTouched = fn;
|
|
2177
|
+
}
|
|
2178
|
+
setDisabledState(isDisabled) {
|
|
2179
|
+
this.disabled.set(isDisabled);
|
|
2180
|
+
}
|
|
2181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCurrencyInput, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2182
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvCurrencyInput, isStandalone: true, selector: "av-currency-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"av-currency-input\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-currency-input__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-currency-input__field\">\n @if (currencySymbol()) {\n <div class=\"av-currency-input__symbol\">\n {{ currencySymbol() }}\n </div>\n }\n\n <input\n #inputRef\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"formattedValue()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (blur)=\"handleBlur()\"\n class=\"av-currency-input__control\"\n [class.av-currency-input__control--with-symbol]=\"currencySymbol()\"\n [class.av-currency-input__control--without-symbol]=\"!currencySymbol()\"\n [class.av-currency-input__control--invalid]=\"isInvalid\"\n [style.border-radius]=\"roundedStyle\"\n />\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-currency-input__error\">\n {{ errorMessage() || 'Valor inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-currency-input{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-currency-input__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-currency-input__field{align-items:center;display:flex;position:relative;width:100%}.av-currency-input__symbol{align-items:center;background:var(--av-currency-symbol-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-sm);color:var(--av-color-text-muted);display:flex;font-size:.75rem;font-weight:700;left:.625rem;min-width:1.75rem;padding:.125rem .25rem;pointer-events:none;position:absolute;justify-content:center}.av-currency-input__control{background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;padding:.5rem 1rem;text-align:right;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-currency-input__control::placeholder{color:var(--av-color-text-subtle)}.av-currency-input__control:hover{border-color:var(--av-color-border-hover)}.av-currency-input__control:focus{border-color:var(--av-currency-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-currency-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-currency-accent) 24%,transparent);outline:none}.av-currency-input__control:disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-currency-input__control--with-symbol{padding-left:3rem}.av-currency-input__control--without-symbol{padding-left:1rem}.av-currency-input__control--invalid,.av-currency-input__control--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text);animation:av-currency-input-shake .4s ease-in-out}.av-currency-input__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}@keyframes av-currency-input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2183
|
+
}
|
|
2184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCurrencyInput, decorators: [{
|
|
2185
|
+
type: Component,
|
|
2186
|
+
args: [{ selector: 'av-currency-input', standalone: true, imports: [CommonModule], template: "<div class=\"av-currency-input\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-currency-input__label\">\n {{ label() }}\n </label>\n }\n\n <div class=\"av-currency-input__field\">\n @if (currencySymbol()) {\n <div class=\"av-currency-input__symbol\">\n {{ currencySymbol() }}\n </div>\n }\n\n <input\n #inputRef\n type=\"text\"\n inputmode=\"decimal\"\n [value]=\"formattedValue()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (blur)=\"handleBlur()\"\n class=\"av-currency-input__control\"\n [class.av-currency-input__control--with-symbol]=\"currencySymbol()\"\n [class.av-currency-input__control--without-symbol]=\"!currencySymbol()\"\n [class.av-currency-input__control--invalid]=\"isInvalid\"\n [style.border-radius]=\"roundedStyle\"\n />\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-currency-input__error\">\n {{ errorMessage() || 'Valor inv\u00E1lido' }}\n </span>\n }\n</div>\n", styles: [".av-currency-input{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-currency-input__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-currency-input__field{align-items:center;display:flex;position:relative;width:100%}.av-currency-input__symbol{align-items:center;background:var(--av-currency-symbol-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-sm);color:var(--av-color-text-muted);display:flex;font-size:.75rem;font-weight:700;left:.625rem;min-width:1.75rem;padding:.125rem .25rem;pointer-events:none;position:absolute;justify-content:center}.av-currency-input__control{background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:600;padding:.5rem 1rem;text-align:right;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-currency-input__control::placeholder{color:var(--av-color-text-subtle)}.av-currency-input__control:hover{border-color:var(--av-color-border-hover)}.av-currency-input__control:focus{border-color:var(--av-currency-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-currency-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-currency-accent) 24%,transparent);outline:none}.av-currency-input__control:disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-currency-input__control--with-symbol{padding-left:3rem}.av-currency-input__control--without-symbol{padding-left:1rem}.av-currency-input__control--invalid,.av-currency-input__control--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text);animation:av-currency-input-shake .4s ease-in-out}.av-currency-input__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}@keyframes av-currency-input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}\n"] }]
|
|
2187
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2188
|
+
type: Optional
|
|
2189
|
+
}, {
|
|
2190
|
+
type: Self
|
|
2191
|
+
}] }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], inputEl: [{
|
|
2192
|
+
type: ViewChild,
|
|
2193
|
+
args: ['inputRef']
|
|
2194
|
+
}] } });
|
|
2195
|
+
|
|
2196
|
+
class AvDateTimePicker {
|
|
2197
|
+
ngControl;
|
|
2198
|
+
config = inject(VISUALS_CONFIG);
|
|
2199
|
+
themeService = inject(ThemeService);
|
|
2200
|
+
mode = input('datetime', /* @ts-ignore */
|
|
2201
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
2202
|
+
label = input('', /* @ts-ignore */
|
|
2203
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2204
|
+
placeholder = input('Selecione...', /* @ts-ignore */
|
|
2205
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2206
|
+
locale = input('pt-BR', /* @ts-ignore */
|
|
2207
|
+
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
2208
|
+
icon = input('', /* @ts-ignore */
|
|
2209
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2210
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2211
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2212
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
2213
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
2214
|
+
rounded = input('md', /* @ts-ignore */
|
|
2215
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
2216
|
+
errorMessage = input('', /* @ts-ignore */
|
|
2217
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2218
|
+
triggerEl;
|
|
2219
|
+
isOpen = signal(false, /* @ts-ignore */
|
|
2220
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2221
|
+
disabled = signal(false, /* @ts-ignore */
|
|
2222
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2223
|
+
selectedDate = signal(null, /* @ts-ignore */
|
|
2224
|
+
...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
|
|
2225
|
+
viewDate = signal(new Date(), /* @ts-ignore */
|
|
2226
|
+
...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
|
|
2227
|
+
activeTab = signal('date', /* @ts-ignore */
|
|
2228
|
+
...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
2229
|
+
hours = signal(new Date().getHours(), /* @ts-ignore */
|
|
2230
|
+
...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
|
|
2231
|
+
minutes = signal(0, /* @ts-ignore */
|
|
2232
|
+
...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
|
|
2233
|
+
weekDays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
|
|
2234
|
+
hourOptions = Array.from({ length: 24 }, (_, index) => index);
|
|
2235
|
+
minuteOptions = Array.from({ length: 12 }, (_, index) => index * 5);
|
|
2236
|
+
onChange = () => { };
|
|
2237
|
+
onTouched = () => { };
|
|
2238
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
2239
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
2240
|
+
themeVars = computed(() => {
|
|
2241
|
+
const variant = this.activeVariant();
|
|
2242
|
+
const isDark = this.themeService.dark();
|
|
2243
|
+
return {
|
|
2244
|
+
'--av-date-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
2245
|
+
'--av-date-accent-strong': `var(--av-${variant}-${isDark ? 300 : 600})`,
|
|
2246
|
+
'--av-date-accent-soft': isDark
|
|
2247
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
2248
|
+
: `var(--av-${variant}-50)`,
|
|
2249
|
+
};
|
|
2250
|
+
}, /* @ts-ignore */
|
|
2251
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2252
|
+
calendarDays = computed(() => {
|
|
2253
|
+
const year = this.viewDate().getFullYear();
|
|
2254
|
+
const month = this.viewDate().getMonth();
|
|
2255
|
+
const firstDayOfMonth = new Date(year, month, 1).getDay();
|
|
2256
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
2257
|
+
const days = [];
|
|
2258
|
+
for (let i = 0; i < firstDayOfMonth; i++) {
|
|
2259
|
+
days.push(null);
|
|
2260
|
+
}
|
|
2261
|
+
for (let day = 1; day <= daysInMonth; day++) {
|
|
2262
|
+
days.push(new Date(year, month, day));
|
|
2263
|
+
}
|
|
2264
|
+
return days;
|
|
2265
|
+
}, /* @ts-ignore */
|
|
2266
|
+
...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
|
|
2267
|
+
monthLabel = computed(() => {
|
|
2268
|
+
return new Intl.DateTimeFormat(this.locale(), {
|
|
2269
|
+
month: 'long',
|
|
2270
|
+
year: 'numeric',
|
|
2271
|
+
}).format(this.viewDate());
|
|
2272
|
+
}, /* @ts-ignore */
|
|
2273
|
+
...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
|
|
2274
|
+
displayValue = computed(() => {
|
|
2275
|
+
const date = this.selectedDate();
|
|
2276
|
+
if (!date)
|
|
2277
|
+
return '';
|
|
2278
|
+
const time = `${String(this.hours()).padStart(2, '0')}:${String(this.minutes()).padStart(2, '0')}`;
|
|
2279
|
+
if (this.mode() === 'date') {
|
|
2280
|
+
return date.toLocaleDateString(this.locale());
|
|
2281
|
+
}
|
|
2282
|
+
if (this.mode() === 'time') {
|
|
2283
|
+
return time;
|
|
2284
|
+
}
|
|
2285
|
+
return `${date.toLocaleDateString(this.locale())} ${time}`;
|
|
2286
|
+
}, /* @ts-ignore */
|
|
2287
|
+
...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
2288
|
+
constructor(ngControl) {
|
|
2289
|
+
this.ngControl = ngControl;
|
|
2290
|
+
if (this.ngControl) {
|
|
2291
|
+
this.ngControl.valueAccessor = this;
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
get roundedStyle() {
|
|
2295
|
+
if (typeof this.rounded() === 'string') {
|
|
2296
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
2297
|
+
}
|
|
2298
|
+
return `${this.rounded()}px`;
|
|
2299
|
+
}
|
|
2300
|
+
get defaultIcon() {
|
|
2301
|
+
if (this.icon())
|
|
2302
|
+
return this.icon();
|
|
2303
|
+
return this.mode() === 'time' ? 'schedule' : 'calendar_today';
|
|
2304
|
+
}
|
|
2305
|
+
get isInvalid() {
|
|
2306
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
2307
|
+
}
|
|
2308
|
+
toggleDropdown() {
|
|
2309
|
+
if (this.disabled())
|
|
2310
|
+
return;
|
|
2311
|
+
this.isOpen.set(!this.isOpen());
|
|
2312
|
+
if (this.isOpen()) {
|
|
2313
|
+
this.activeTab.set(this.mode() === 'time' ? 'time' : 'date');
|
|
2314
|
+
}
|
|
2315
|
+
else {
|
|
2316
|
+
this.onTouched();
|
|
2317
|
+
}
|
|
2318
|
+
}
|
|
2319
|
+
closeDropdown() {
|
|
2320
|
+
this.isOpen.set(false);
|
|
2321
|
+
this.onTouched();
|
|
2322
|
+
}
|
|
2323
|
+
changeMonth(offset) {
|
|
2324
|
+
const current = this.viewDate();
|
|
2325
|
+
this.viewDate.set(new Date(current.getFullYear(), current.getMonth() + offset, 1));
|
|
2326
|
+
}
|
|
2327
|
+
selectDay(day) {
|
|
2328
|
+
if (!day)
|
|
2329
|
+
return;
|
|
2330
|
+
const updated = new Date(day.getFullYear(), day.getMonth(), day.getDate(), this.hours(), this.minutes());
|
|
2331
|
+
this.selectedDate.set(updated);
|
|
2332
|
+
this.emitValue(updated);
|
|
2333
|
+
if (this.mode() === 'datetime') {
|
|
2334
|
+
this.activeTab.set('time');
|
|
2335
|
+
return;
|
|
2336
|
+
}
|
|
2337
|
+
if (this.mode() === 'date') {
|
|
2338
|
+
this.closeDropdown();
|
|
2339
|
+
}
|
|
2340
|
+
}
|
|
2341
|
+
selectHour(hour) {
|
|
2342
|
+
this.hours.set(hour);
|
|
2343
|
+
this.updateTimeInSelectedDate();
|
|
2344
|
+
}
|
|
2345
|
+
selectMinute(minute) {
|
|
2346
|
+
this.minutes.set(minute);
|
|
2347
|
+
this.updateTimeInSelectedDate();
|
|
2348
|
+
}
|
|
2349
|
+
confirmSelection() {
|
|
2350
|
+
if (!this.selectedDate()) {
|
|
2351
|
+
this.updateTimeInSelectedDate();
|
|
2352
|
+
}
|
|
2353
|
+
this.closeDropdown();
|
|
2354
|
+
}
|
|
2355
|
+
updateTimeInSelectedDate() {
|
|
2356
|
+
const current = this.selectedDate() || new Date();
|
|
2357
|
+
const updated = new Date(current.getFullYear(), current.getMonth(), current.getDate(), this.hours(), this.minutes());
|
|
2358
|
+
this.selectedDate.set(updated);
|
|
2359
|
+
this.viewDate.set(updated);
|
|
2360
|
+
this.emitValue(updated);
|
|
2361
|
+
}
|
|
2362
|
+
isDaySelected(day) {
|
|
2363
|
+
if (!day || !this.selectedDate())
|
|
2364
|
+
return false;
|
|
2365
|
+
const selected = this.selectedDate();
|
|
2366
|
+
return day.getDate() === selected.getDate()
|
|
2367
|
+
&& day.getMonth() === selected.getMonth()
|
|
2368
|
+
&& day.getFullYear() === selected.getFullYear();
|
|
2369
|
+
}
|
|
2370
|
+
emitValue(date) {
|
|
2371
|
+
this.onChange(date.toISOString());
|
|
2372
|
+
}
|
|
2373
|
+
writeValue(value) {
|
|
2374
|
+
if (!value) {
|
|
2375
|
+
this.selectedDate.set(null);
|
|
2376
|
+
return;
|
|
2377
|
+
}
|
|
2378
|
+
const parsedDate = value instanceof Date ? value : new Date(value);
|
|
2379
|
+
if (Number.isNaN(parsedDate.getTime())) {
|
|
2380
|
+
this.selectedDate.set(null);
|
|
2381
|
+
return;
|
|
2382
|
+
}
|
|
2383
|
+
this.selectedDate.set(parsedDate);
|
|
2384
|
+
this.viewDate.set(parsedDate);
|
|
2385
|
+
this.hours.set(parsedDate.getHours());
|
|
2386
|
+
this.minutes.set(parsedDate.getMinutes());
|
|
2387
|
+
}
|
|
2388
|
+
registerOnChange(fn) {
|
|
2389
|
+
this.onChange = fn;
|
|
2390
|
+
}
|
|
2391
|
+
registerOnTouched(fn) {
|
|
2392
|
+
this.onTouched = fn;
|
|
2393
|
+
}
|
|
2394
|
+
setDisabledState(isDisabled) {
|
|
2395
|
+
this.disabled.set(isDisabled);
|
|
2396
|
+
}
|
|
2397
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDateTimePicker, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvDateTimePicker, isStandalone: true, selector: "av-date-time-picker, av-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<div class=\"av-date-picker\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-date-picker__label\">{{ label() }}</label>\n }\n\n <button\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n type=\"button\"\n (click)=\"toggleDropdown()\"\n class=\"av-date-picker__trigger\"\n [class.av-date-picker__trigger--open]=\"isOpen()\"\n [class.av-date-picker__trigger--disabled]=\"disabled()\"\n [class.av-date-picker__trigger--invalid]=\"isInvalid\"\n [disabled]=\"disabled()\"\n [style.border-radius]=\"roundedStyle\"\n >\n <span class=\"av-date-picker__trigger-icon\">\n <span av-icon [name]=\"defaultIcon\"></span>\n </span>\n\n <span class=\"av-date-picker__trigger-value\" [class.av-date-picker__trigger-value--placeholder]=\"!selectedDate()\">\n {{ displayValue() || placeholder() }}\n </span>\n </button>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-date-picker__error\">\n {{ errorMessage() || 'Data/Hora inv\u00E1lida' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-date-picker__panel\"\n [ngStyle]=\"themeVars()\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (mode() === 'datetime') {\n <div class=\"av-date-picker__tabs\">\n <button\n type=\"button\"\n (click)=\"activeTab.set('date')\"\n class=\"av-date-picker__tab\"\n [class.av-date-picker__tab--active]=\"activeTab() === 'date'\"\n >\n Data\n </button>\n <button\n type=\"button\"\n (click)=\"activeTab.set('time')\"\n class=\"av-date-picker__tab\"\n [class.av-date-picker__tab--active]=\"activeTab() === 'time'\"\n >\n Hora\n </button>\n </div>\n }\n\n @if (activeTab() === 'date') {\n <div class=\"av-date-picker__calendar\">\n <div class=\"av-date-picker__month-nav\">\n <button\n type=\"button\"\n (click)=\"changeMonth(-1)\"\n class=\"av-date-picker__nav-button\"\n aria-label=\"M\u00EAs anterior\"\n >\n <span av-icon name=\"chevron_left\"></span>\n </button>\n <span class=\"av-date-picker__month-label\">\n {{ monthLabel() }}\n </span>\n <button\n type=\"button\"\n (click)=\"changeMonth(1)\"\n class=\"av-date-picker__nav-button\"\n aria-label=\"Pr\u00F3ximo m\u00EAs\"\n >\n <span av-icon name=\"chevron_right\"></span>\n </button>\n </div>\n\n <div class=\"av-date-picker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"av-date-picker__weekday\">{{ day }}</span>\n }\n </div>\n\n <div class=\"av-date-picker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day) {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"av-date-picker__day\"\n [class.av-date-picker__day--selected]=\"isDaySelected(day)\"\n >\n {{ day.getDate() }}\n </button>\n } @else {\n <span class=\"av-date-picker__day-spacer\"></span>\n }\n }\n </div>\n </div>\n }\n\n @if (activeTab() === 'time') {\n <div class=\"av-date-picker__time\">\n <div class=\"av-date-picker__digital-time\">\n <span>{{ hours().toString().padStart(2, '0') }}</span>\n <span>:</span>\n <span>{{ minutes().toString().padStart(2, '0') }}</span>\n </div>\n\n <div class=\"av-date-picker__time-section\">\n <span class=\"av-date-picker__time-label\">Horas</span>\n <div class=\"av-date-picker__time-grid av-date-picker__time-grid--hours\">\n @for (hour of hourOptions; track hour) {\n <button\n type=\"button\"\n (click)=\"selectHour(hour)\"\n class=\"av-date-picker__time-option\"\n [class.av-date-picker__time-option--selected]=\"hours() === hour\"\n >\n {{ hour.toString().padStart(2, '0') }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"av-date-picker__time-section\">\n <span class=\"av-date-picker__time-label\">Minutos</span>\n <div class=\"av-date-picker__time-grid\">\n @for (minute of minuteOptions; track minute) {\n <button\n type=\"button\"\n (click)=\"selectMinute(minute)\"\n class=\"av-date-picker__time-option\"\n [class.av-date-picker__time-option--selected]=\"minutes() === minute\"\n >\n {{ minute.toString().padStart(2, '0') }}\n </button>\n }\n </div>\n </div>\n\n <button\n type=\"button\"\n (click)=\"confirmSelection()\"\n class=\"av-date-picker__confirm\"\n >\n Confirmar\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".av-date-picker{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-date-picker__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-date-picker__trigger{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);cursor:pointer;display:flex;font-size:.875rem;padding:.5rem 1rem .5rem 2.5rem;position:relative;text-align:left;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-date-picker__trigger:hover{border-color:var(--av-color-border-hover)}.av-date-picker__trigger:focus{outline:none}.av-date-picker__trigger--open,.av-date-picker__trigger:focus{border-color:var(--av-date-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-date-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-date-accent) 24%,transparent)}.av-date-picker__trigger--disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-date-picker__trigger--invalid,.av-date-picker__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text)}.av-date-picker__trigger-icon{color:var(--av-color-text-subtle);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-date-picker__trigger-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.av-date-picker__trigger-value--placeholder{color:var(--av-color-text-subtle)}.av-date-picker__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-date-picker__panel{background:var(--av-color-surface-raised);border:1px solid var(--av-color-border-soft);box-shadow:var(--av-shadow-raised);color:var(--av-color-text);display:flex;flex-direction:column;margin-top:.25rem;overflow:hidden;width:20rem}.av-date-picker__tabs{background:var(--av-color-surface-muted);border-bottom:1px solid var(--av-color-border-soft);display:flex;gap:.25rem;padding:.25rem}.av-date-picker__tab{border-radius:var(--av-radius-md);color:var(--av-color-text-muted);flex:1;font-size:.75rem;font-weight:600;padding:.375rem 0;transition:background-color .2s ease,color .2s ease}.av-date-picker__tab--active{background:var(--av-color-surface);color:var(--av-date-accent-strong)}.av-date-picker__calendar,.av-date-picker__time{padding:1rem}.av-date-picker__time{display:flex;flex-direction:column;gap:.875rem}.av-date-picker__month-nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.av-date-picker__nav-button{align-items:center;border-radius:var(--av-radius-full);color:var(--av-color-text-muted);display:flex;height:2rem;justify-content:center;transition:background-color .2s ease,color .2s ease;width:2rem}.av-date-picker__nav-button:hover{background:var(--av-date-accent-soft);color:var(--av-date-accent-strong)}.av-date-picker__month-label{color:var(--av-color-text);font-size:.875rem;font-weight:600;text-transform:capitalize}.av-date-picker__weekdays,.av-date-picker__days{display:grid;gap:.25rem;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.av-date-picker__weekdays{margin-bottom:.5rem}.av-date-picker__weekday{color:var(--av-color-text-subtle);font-size:.75rem;font-weight:600}.av-date-picker__day,.av-date-picker__time-option{align-items:center;border-radius:var(--av-radius-md);color:var(--av-color-text);display:flex;font-size:.75rem;font-weight:600;justify-content:center;transition:background-color .2s ease,color .2s ease}.av-date-picker__day,.av-date-picker__day-spacer{height:2rem;width:2rem}.av-date-picker__day:hover,.av-date-picker__time-option:hover{background:var(--av-date-accent-soft);color:var(--av-date-accent-strong)}.av-date-picker__day--selected,.av-date-picker__time-option--selected{background:var(--av-date-accent);color:var(--av-white)}.av-date-picker__digital-time{align-items:center;background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);color:var(--av-color-text);display:flex;font-size:1.5rem;font-weight:700;gap:.25rem;justify-content:center;padding:.5rem 1rem}.av-date-picker__time-section{display:flex;flex-direction:column;gap:.375rem}.av-date-picker__time-label{color:var(--av-color-text-muted);font-size:.75rem;font-weight:700}.av-date-picker__time-grid{display:grid;gap:.375rem;grid-template-columns:repeat(6,minmax(0,1fr))}.av-date-picker__time-grid--hours{grid-template-columns:repeat(6,minmax(0,1fr))}.av-date-picker__time-option{border:1px solid var(--av-color-border-soft);height:2rem}.av-date-picker__confirm{background:var(--av-date-accent);border-radius:var(--av-radius-md);color:var(--av-white);font-size:.875rem;font-weight:600;margin-top:.125rem;padding:.5rem 0;transition:background-color .2s ease;width:100%}.av-date-picker__confirm:hover{background:var(--av-date-accent-strong)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2399
|
+
}
|
|
2400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDateTimePicker, decorators: [{
|
|
2401
|
+
type: Component,
|
|
2402
|
+
args: [{ selector: 'av-date-time-picker, av-date-picker', standalone: true, imports: [CommonModule, OverlayModule, AvIcon], template: "<div class=\"av-date-picker\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-date-picker__label\">{{ label() }}</label>\n }\n\n <button\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n type=\"button\"\n (click)=\"toggleDropdown()\"\n class=\"av-date-picker__trigger\"\n [class.av-date-picker__trigger--open]=\"isOpen()\"\n [class.av-date-picker__trigger--disabled]=\"disabled()\"\n [class.av-date-picker__trigger--invalid]=\"isInvalid\"\n [disabled]=\"disabled()\"\n [style.border-radius]=\"roundedStyle\"\n >\n <span class=\"av-date-picker__trigger-icon\">\n <span av-icon [name]=\"defaultIcon\"></span>\n </span>\n\n <span class=\"av-date-picker__trigger-value\" [class.av-date-picker__trigger-value--placeholder]=\"!selectedDate()\">\n {{ displayValue() || placeholder() }}\n </span>\n </button>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-date-picker__error\">\n {{ errorMessage() || 'Data/Hora inv\u00E1lida' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-date-picker__panel\"\n [ngStyle]=\"themeVars()\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (mode() === 'datetime') {\n <div class=\"av-date-picker__tabs\">\n <button\n type=\"button\"\n (click)=\"activeTab.set('date')\"\n class=\"av-date-picker__tab\"\n [class.av-date-picker__tab--active]=\"activeTab() === 'date'\"\n >\n Data\n </button>\n <button\n type=\"button\"\n (click)=\"activeTab.set('time')\"\n class=\"av-date-picker__tab\"\n [class.av-date-picker__tab--active]=\"activeTab() === 'time'\"\n >\n Hora\n </button>\n </div>\n }\n\n @if (activeTab() === 'date') {\n <div class=\"av-date-picker__calendar\">\n <div class=\"av-date-picker__month-nav\">\n <button\n type=\"button\"\n (click)=\"changeMonth(-1)\"\n class=\"av-date-picker__nav-button\"\n aria-label=\"M\u00EAs anterior\"\n >\n <span av-icon name=\"chevron_left\"></span>\n </button>\n <span class=\"av-date-picker__month-label\">\n {{ monthLabel() }}\n </span>\n <button\n type=\"button\"\n (click)=\"changeMonth(1)\"\n class=\"av-date-picker__nav-button\"\n aria-label=\"Pr\u00F3ximo m\u00EAs\"\n >\n <span av-icon name=\"chevron_right\"></span>\n </button>\n </div>\n\n <div class=\"av-date-picker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"av-date-picker__weekday\">{{ day }}</span>\n }\n </div>\n\n <div class=\"av-date-picker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day) {\n <button\n type=\"button\"\n (click)=\"selectDay(day)\"\n class=\"av-date-picker__day\"\n [class.av-date-picker__day--selected]=\"isDaySelected(day)\"\n >\n {{ day.getDate() }}\n </button>\n } @else {\n <span class=\"av-date-picker__day-spacer\"></span>\n }\n }\n </div>\n </div>\n }\n\n @if (activeTab() === 'time') {\n <div class=\"av-date-picker__time\">\n <div class=\"av-date-picker__digital-time\">\n <span>{{ hours().toString().padStart(2, '0') }}</span>\n <span>:</span>\n <span>{{ minutes().toString().padStart(2, '0') }}</span>\n </div>\n\n <div class=\"av-date-picker__time-section\">\n <span class=\"av-date-picker__time-label\">Horas</span>\n <div class=\"av-date-picker__time-grid av-date-picker__time-grid--hours\">\n @for (hour of hourOptions; track hour) {\n <button\n type=\"button\"\n (click)=\"selectHour(hour)\"\n class=\"av-date-picker__time-option\"\n [class.av-date-picker__time-option--selected]=\"hours() === hour\"\n >\n {{ hour.toString().padStart(2, '0') }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"av-date-picker__time-section\">\n <span class=\"av-date-picker__time-label\">Minutos</span>\n <div class=\"av-date-picker__time-grid\">\n @for (minute of minuteOptions; track minute) {\n <button\n type=\"button\"\n (click)=\"selectMinute(minute)\"\n class=\"av-date-picker__time-option\"\n [class.av-date-picker__time-option--selected]=\"minutes() === minute\"\n >\n {{ minute.toString().padStart(2, '0') }}\n </button>\n }\n </div>\n </div>\n\n <button\n type=\"button\"\n (click)=\"confirmSelection()\"\n class=\"av-date-picker__confirm\"\n >\n Confirmar\n </button>\n </div>\n }\n </div>\n</ng-template>\n", styles: [".av-date-picker{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-date-picker__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-date-picker__trigger{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);cursor:pointer;display:flex;font-size:.875rem;padding:.5rem 1rem .5rem 2.5rem;position:relative;text-align:left;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-date-picker__trigger:hover{border-color:var(--av-color-border-hover)}.av-date-picker__trigger:focus{outline:none}.av-date-picker__trigger--open,.av-date-picker__trigger:focus{border-color:var(--av-date-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-date-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-date-accent) 24%,transparent)}.av-date-picker__trigger--disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-date-picker__trigger--invalid,.av-date-picker__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text)}.av-date-picker__trigger-icon{color:var(--av-color-text-subtle);display:flex;left:.75rem;pointer-events:none;position:absolute}.av-date-picker__trigger-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.av-date-picker__trigger-value--placeholder{color:var(--av-color-text-subtle)}.av-date-picker__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-date-picker__panel{background:var(--av-color-surface-raised);border:1px solid var(--av-color-border-soft);box-shadow:var(--av-shadow-raised);color:var(--av-color-text);display:flex;flex-direction:column;margin-top:.25rem;overflow:hidden;width:20rem}.av-date-picker__tabs{background:var(--av-color-surface-muted);border-bottom:1px solid var(--av-color-border-soft);display:flex;gap:.25rem;padding:.25rem}.av-date-picker__tab{border-radius:var(--av-radius-md);color:var(--av-color-text-muted);flex:1;font-size:.75rem;font-weight:600;padding:.375rem 0;transition:background-color .2s ease,color .2s ease}.av-date-picker__tab--active{background:var(--av-color-surface);color:var(--av-date-accent-strong)}.av-date-picker__calendar,.av-date-picker__time{padding:1rem}.av-date-picker__time{display:flex;flex-direction:column;gap:.875rem}.av-date-picker__month-nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.av-date-picker__nav-button{align-items:center;border-radius:var(--av-radius-full);color:var(--av-color-text-muted);display:flex;height:2rem;justify-content:center;transition:background-color .2s ease,color .2s ease;width:2rem}.av-date-picker__nav-button:hover{background:var(--av-date-accent-soft);color:var(--av-date-accent-strong)}.av-date-picker__month-label{color:var(--av-color-text);font-size:.875rem;font-weight:600;text-transform:capitalize}.av-date-picker__weekdays,.av-date-picker__days{display:grid;gap:.25rem;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.av-date-picker__weekdays{margin-bottom:.5rem}.av-date-picker__weekday{color:var(--av-color-text-subtle);font-size:.75rem;font-weight:600}.av-date-picker__day,.av-date-picker__time-option{align-items:center;border-radius:var(--av-radius-md);color:var(--av-color-text);display:flex;font-size:.75rem;font-weight:600;justify-content:center;transition:background-color .2s ease,color .2s ease}.av-date-picker__day,.av-date-picker__day-spacer{height:2rem;width:2rem}.av-date-picker__day:hover,.av-date-picker__time-option:hover{background:var(--av-date-accent-soft);color:var(--av-date-accent-strong)}.av-date-picker__day--selected,.av-date-picker__time-option--selected{background:var(--av-date-accent);color:var(--av-white)}.av-date-picker__digital-time{align-items:center;background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);color:var(--av-color-text);display:flex;font-size:1.5rem;font-weight:700;gap:.25rem;justify-content:center;padding:.5rem 1rem}.av-date-picker__time-section{display:flex;flex-direction:column;gap:.375rem}.av-date-picker__time-label{color:var(--av-color-text-muted);font-size:.75rem;font-weight:700}.av-date-picker__time-grid{display:grid;gap:.375rem;grid-template-columns:repeat(6,minmax(0,1fr))}.av-date-picker__time-grid--hours{grid-template-columns:repeat(6,minmax(0,1fr))}.av-date-picker__time-option{border:1px solid var(--av-color-border-soft);height:2rem}.av-date-picker__confirm{background:var(--av-date-accent);border-radius:var(--av-radius-md);color:var(--av-white);font-size:.875rem;font-weight:600;margin-top:.125rem;padding:.5rem 0;transition:background-color .2s ease;width:100%}.av-date-picker__confirm:hover{background:var(--av-date-accent-strong)}\n"] }]
|
|
2403
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2404
|
+
type: Optional
|
|
2405
|
+
}, {
|
|
2406
|
+
type: Self
|
|
2407
|
+
}] }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], triggerEl: [{
|
|
2408
|
+
type: ViewChild,
|
|
2409
|
+
args: ['triggerEl']
|
|
2410
|
+
}] } });
|
|
2411
|
+
|
|
2412
|
+
class AvForm {
|
|
2413
|
+
glass = input(false, /* @ts-ignore */
|
|
2414
|
+
...(ngDevMode ? [{ debugName: "glass" }] : /* istanbul ignore next */ []));
|
|
2415
|
+
get elementClasses() {
|
|
2416
|
+
return ['av-form', this.glass() ? 'av-form--glass' : 'av-form--solid'].join(' ');
|
|
2417
|
+
}
|
|
2418
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvForm, isStandalone: true, selector: "form[av-form]", inputs: { glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.elementClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host(.av-form){display:block;padding:1rem}:host(.av-form--solid){background:var(--av-color-surface);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-raised)}:host(.av-form--glass){background:color-mix(in srgb,var(--av-color-surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--av-color-border) 70%,transparent);border-radius:var(--av-radius-xl);box-shadow:var(--av-shadow-raised);-webkit-backdrop-filter:blur(3.3px);backdrop-filter:blur(3.3px)}\n"] });
|
|
2420
|
+
}
|
|
2421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvForm, decorators: [{
|
|
2422
|
+
type: Component,
|
|
2423
|
+
args: [{ selector: 'form[av-form]', standalone: true, template: "<ng-content></ng-content>\n", styles: [":host(.av-form){display:block;padding:1rem}:host(.av-form--solid){background:var(--av-color-surface);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);box-shadow:var(--av-shadow-raised)}:host(.av-form--glass){background:color-mix(in srgb,var(--av-color-surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--av-color-border) 70%,transparent);border-radius:var(--av-radius-xl);box-shadow:var(--av-shadow-raised);-webkit-backdrop-filter:blur(3.3px);backdrop-filter:blur(3.3px)}\n"] }]
|
|
2424
|
+
}], propDecorators: { glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], elementClasses: [{
|
|
2425
|
+
type: HostBinding,
|
|
2426
|
+
args: ['class']
|
|
2427
|
+
}] } });
|
|
2428
|
+
|
|
2429
|
+
class AvMultiSelect {
|
|
2430
|
+
ngControl;
|
|
2431
|
+
config = inject(VISUALS_CONFIG);
|
|
2432
|
+
themeService = inject(ThemeService);
|
|
2433
|
+
data = input.required(/* @ts-ignore */
|
|
2434
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
2435
|
+
placeholder = input('Selecione as opções', /* @ts-ignore */
|
|
2436
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2437
|
+
labelKey = input('label', /* @ts-ignore */
|
|
2438
|
+
...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
|
|
2439
|
+
labelFormat = input('', /* @ts-ignore */
|
|
2440
|
+
...(ngDevMode ? [{ debugName: "labelFormat" }] : /* istanbul ignore next */ []));
|
|
2441
|
+
valueKey = input('value', /* @ts-ignore */
|
|
2442
|
+
...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
|
|
2443
|
+
label = input('', /* @ts-ignore */
|
|
2444
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2445
|
+
icon = input('', /* @ts-ignore */
|
|
2446
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2447
|
+
searchPlaceholder = input('Pesquisar...', /* @ts-ignore */
|
|
2448
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
2449
|
+
searchable = input(true, /* @ts-ignore */
|
|
2450
|
+
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
2451
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2452
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2453
|
+
ringColor = input(undefined, /* @ts-ignore */
|
|
2454
|
+
...(ngDevMode ? [{ debugName: "ringColor" }] : /* istanbul ignore next */ []));
|
|
2455
|
+
rounded = input('md', /* @ts-ignore */
|
|
2456
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
2457
|
+
errorMessage = input('', /* @ts-ignore */
|
|
2458
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
2459
|
+
onSearch = input(/* @ts-ignore */
|
|
2460
|
+
...(ngDevMode ? [undefined, { debugName: "onSearch" }] : /* istanbul ignore next */ []));
|
|
2461
|
+
valueChange = output();
|
|
2462
|
+
triggerEl;
|
|
2463
|
+
isOpen = signal(false, /* @ts-ignore */
|
|
2464
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2465
|
+
searchTerm = signal('', /* @ts-ignore */
|
|
2466
|
+
...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
2467
|
+
value = signal([], /* @ts-ignore */
|
|
2468
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2469
|
+
disabled = signal(false, /* @ts-ignore */
|
|
2470
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2471
|
+
onChange = () => { };
|
|
2472
|
+
onTouched = () => { };
|
|
2473
|
+
activeVariant = computed(() => this.ringColor() || this.variant(), /* @ts-ignore */
|
|
2474
|
+
...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
|
|
2475
|
+
themeVars = computed(() => {
|
|
2476
|
+
const variant = this.activeVariant();
|
|
2477
|
+
const isDark = this.themeService.dark();
|
|
2478
|
+
const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
|
|
2479
|
+
return {
|
|
2480
|
+
'--av-multi-accent': accent,
|
|
2481
|
+
'--av-multi-accent-strong': `var(--av-${variant}-${isDark ? 300 : 600})`,
|
|
2482
|
+
'--av-multi-soft': isDark
|
|
2483
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
2484
|
+
: `var(--av-${variant}-50)`,
|
|
2485
|
+
'--av-multi-selected-bg': isDark
|
|
2486
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 20%, transparent)`
|
|
2487
|
+
: `var(--av-${variant}-100)`,
|
|
2488
|
+
'--av-multi-selected-color': isDark
|
|
2489
|
+
? `var(--av-${variant}-100)`
|
|
2490
|
+
: `var(--av-${variant}-800)`,
|
|
2491
|
+
};
|
|
2492
|
+
}, /* @ts-ignore */
|
|
2493
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2494
|
+
filteredData = computed(() => {
|
|
2495
|
+
const query = this.searchTerm().toLowerCase().trim();
|
|
2496
|
+
const items = this.data() || [];
|
|
2497
|
+
if (!query || this.onSearch())
|
|
2498
|
+
return items;
|
|
2499
|
+
return items.filter((item) => {
|
|
2500
|
+
const labelValue = this.getItemLabel(item);
|
|
2501
|
+
return String(labelValue).toLowerCase().includes(query);
|
|
2502
|
+
});
|
|
2503
|
+
}, /* @ts-ignore */
|
|
2504
|
+
...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
|
|
2505
|
+
selectedOptions = computed(() => {
|
|
2506
|
+
const items = this.data() || [];
|
|
2507
|
+
const currentValues = this.value() || [];
|
|
2508
|
+
return items.filter((item) => currentValues.includes(this.getItemValue(item)));
|
|
2509
|
+
}, /* @ts-ignore */
|
|
2510
|
+
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
2511
|
+
constructor(ngControl) {
|
|
2512
|
+
this.ngControl = ngControl;
|
|
2513
|
+
if (this.ngControl) {
|
|
2514
|
+
this.ngControl.valueAccessor = this;
|
|
2515
|
+
}
|
|
2516
|
+
}
|
|
2517
|
+
get roundedStyle() {
|
|
2518
|
+
if (typeof this.rounded() === 'string') {
|
|
2519
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
2520
|
+
}
|
|
2521
|
+
return `${this.rounded()}px`;
|
|
2522
|
+
}
|
|
2523
|
+
get triggerClasses() {
|
|
2524
|
+
return [
|
|
2525
|
+
this.isOpen() ? 'av-multi-select__trigger--open' : '',
|
|
2526
|
+
this.disabled() ? 'av-multi-select__trigger--disabled' : '',
|
|
2527
|
+
this.isInvalid ? 'av-multi-select__trigger--invalid' : '',
|
|
2528
|
+
].filter(Boolean).join(' ');
|
|
2529
|
+
}
|
|
2530
|
+
get isInvalid() {
|
|
2531
|
+
return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
|
|
2532
|
+
}
|
|
2533
|
+
getItemLabel(item) {
|
|
2534
|
+
if (typeof item === 'object' && item !== null) {
|
|
2535
|
+
if (!this.labelFormat() || this.labelFormat().trim() === '') {
|
|
2536
|
+
return item[this.labelKey()];
|
|
2537
|
+
}
|
|
2538
|
+
let label = this.labelFormat();
|
|
2539
|
+
Object.keys(item).forEach((key) => {
|
|
2540
|
+
label = label.replaceAll(`{${key}}`, item[key] ?? '');
|
|
2541
|
+
});
|
|
2542
|
+
return label;
|
|
2543
|
+
}
|
|
2544
|
+
return item;
|
|
2545
|
+
}
|
|
2546
|
+
getItemValue(item) {
|
|
2547
|
+
return typeof item === 'object' && item !== null ? item[this.valueKey()] : item;
|
|
2548
|
+
}
|
|
2549
|
+
isSelected(item) {
|
|
2550
|
+
return (this.value() || []).includes(this.getItemValue(item));
|
|
2551
|
+
}
|
|
2552
|
+
toggleDropdown() {
|
|
2553
|
+
if (this.disabled())
|
|
2554
|
+
return;
|
|
2555
|
+
this.isOpen.set(!this.isOpen());
|
|
2556
|
+
if (!this.isOpen()) {
|
|
2557
|
+
this.onTouched();
|
|
2558
|
+
}
|
|
2559
|
+
}
|
|
2560
|
+
closeDropdown() {
|
|
2561
|
+
this.isOpen.set(false);
|
|
2562
|
+
this.searchTerm.set('');
|
|
2563
|
+
this.onTouched();
|
|
2564
|
+
}
|
|
2565
|
+
toggleOption(item) {
|
|
2566
|
+
const itemValue = this.getItemValue(item);
|
|
2567
|
+
const currentValues = [...(this.value() || [])];
|
|
2568
|
+
const index = currentValues.indexOf(itemValue);
|
|
2569
|
+
if (index > -1) {
|
|
2570
|
+
currentValues.splice(index, 1);
|
|
2571
|
+
}
|
|
2572
|
+
else {
|
|
2573
|
+
currentValues.push(itemValue);
|
|
2574
|
+
}
|
|
2575
|
+
this.value.set(currentValues);
|
|
2576
|
+
this.onChange(currentValues);
|
|
2577
|
+
this.valueChange.emit(currentValues);
|
|
2578
|
+
}
|
|
2579
|
+
removeOption(event, item) {
|
|
2580
|
+
event.stopPropagation();
|
|
2581
|
+
this.toggleOption(item);
|
|
2582
|
+
}
|
|
2583
|
+
handleSearchInput(event) {
|
|
2584
|
+
const query = event.target.value;
|
|
2585
|
+
this.searchTerm.set(query);
|
|
2586
|
+
if (this.onSearch()) {
|
|
2587
|
+
this.onSearch()(query);
|
|
2588
|
+
}
|
|
2589
|
+
}
|
|
2590
|
+
writeValue(value) {
|
|
2591
|
+
this.value.set(Array.isArray(value) ? value : []);
|
|
2592
|
+
}
|
|
2593
|
+
registerOnChange(fn) {
|
|
2594
|
+
this.onChange = fn;
|
|
2595
|
+
}
|
|
2596
|
+
registerOnTouched(fn) {
|
|
2597
|
+
this.onTouched = fn;
|
|
2598
|
+
}
|
|
2599
|
+
setDisabledState(isDisabled) {
|
|
2600
|
+
this.disabled.set(isDisabled);
|
|
2601
|
+
}
|
|
2602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvMultiSelect, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvMultiSelect, isStandalone: true, selector: "av-multiselect, av-multi-select", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelFormat: { classPropertyName: "labelFormat", publicName: "labelFormat", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ringColor: { classPropertyName: "ringColor", publicName: "ringColor", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<div class=\"av-multi-select\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-multi-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n role=\"combobox\"\n class=\"av-multi-select__trigger\"\n [style.border-radius]=\"roundedStyle\"\n [class.av-multi-select__trigger--with-icon]=\"icon()\"\n [class.av-multi-select__trigger--without-icon]=\"!icon()\"\n [ngClass]=\"triggerClasses\"\n >\n @if (icon()) {\n <div class=\"av-multi-select__icon\">\n <span av-icon [name]=\"icon()\"></span>\n </div>\n }\n\n <div class=\"av-multi-select__chips\">\n @for (item of selectedOptions(); track getItemValue(item)) {\n <span class=\"av-multi-select__chip\">\n {{ getItemLabel(item) }}\n <button\n type=\"button\"\n (click)=\"removeOption($event, item)\"\n class=\"av-multi-select__chip-remove\"\n aria-label=\"Remover op\u00E7\u00E3o\"\n >\n <span av-icon name=\"close\" class=\"av-multi-select__chip-remove-icon\"></span>\n </button>\n </span>\n } @empty {\n <span class=\"av-multi-select__placeholder\">\n {{ placeholder() }}\n </span>\n }\n </div>\n\n <div\n class=\"av-multi-select__chevron\"\n [class.av-multi-select__chevron--open]=\"isOpen()\"\n >\n <span av-icon name=\"expand_more\"></span>\n </div>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-multi-select__error\">\n {{ errorMessage() || 'Selecione ao menos uma op\u00E7\u00E3o' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-multi-select__panel\"\n [ngStyle]=\"themeVars()\"\n [style.width.px]=\"triggerEl.offsetWidth\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (searchable()) {\n <div class=\"av-multi-select__search\">\n <span av-icon name=\"search\" class=\"av-multi-select__search-icon\"></span>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"handleSearchInput($event)\"\n class=\"av-multi-select__search-input\"\n />\n </div>\n }\n\n <ul class=\"av-multi-select__options\">\n @for (item of filteredData(); track getItemValue(item)) {\n <li\n (click)=\"toggleOption(item)\"\n class=\"av-multi-select__option\"\n [class.av-multi-select__option--selected]=\"isSelected(item)\"\n >\n <span class=\"av-multi-select__option-label\" [class.av-multi-select__option-label--selected]=\"isSelected(item)\">\n {{ getItemLabel(item) }}\n </span>\n\n <div\n class=\"av-multi-select__option-check\"\n [class.av-multi-select__option-check--selected]=\"isSelected(item)\"\n >\n @if (isSelected(item)) {\n <span av-icon name=\"check\" class=\"av-multi-select__option-check-icon\"></span>\n }\n </div>\n </li>\n } @empty {\n <li class=\"av-multi-select__empty\">Nenhuma op\u00E7\u00E3o encontrada</li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".av-multi-select{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-multi-select__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-multi-select__trigger{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);cursor:pointer;display:flex;min-height:42px;padding:.375rem 2.5rem .375rem .75rem;position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-multi-select__trigger:hover{border-color:var(--av-color-border-hover)}.av-multi-select__trigger:focus{outline:none}.av-multi-select__trigger--with-icon{padding-left:2.5rem}.av-multi-select__trigger--without-icon{padding-left:.75rem}.av-multi-select__trigger--disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-multi-select__trigger--open,.av-multi-select__trigger:focus{border-color:var(--av-multi-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-multi-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-multi-accent) 24%,transparent)}.av-multi-select__trigger--invalid,.av-multi-select__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text)}.av-multi-select__icon,.av-multi-select__chevron{color:var(--av-color-text-subtle);display:flex;pointer-events:none;position:absolute;top:.625rem}.av-multi-select__icon{left:.75rem}.av-multi-select__chevron{right:.75rem;transition:transform .2s ease}.av-multi-select__chevron--open{transform:rotate(180deg)}.av-multi-select__chips{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem;width:100%}.av-multi-select__chip{align-items:center;background:var(--av-multi-selected-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-md);color:var(--av-multi-selected-color);display:inline-flex;font-size:.75rem;font-weight:600;gap:.25rem;max-width:100%;padding:.125rem .5rem}.av-multi-select__chip-remove{align-items:center;border-radius:var(--av-radius-full);color:inherit;display:inline-flex;justify-content:center;transition:color .2s ease}.av-multi-select__chip-remove:hover{color:var(--av-color-danger)}.av-multi-select__placeholder{color:var(--av-color-text-subtle);font-size:.875rem}.av-multi-select__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-multi-select__panel{background:var(--av-color-surface-raised);border:1px solid var(--av-color-border-soft);box-shadow:var(--av-shadow-raised);color:var(--av-color-text);display:flex;flex-direction:column;margin-top:.25rem;max-height:15rem;overflow:hidden}.av-multi-select__search{align-items:center;background:var(--av-color-surface-muted);border-bottom:1px solid var(--av-color-border-soft);display:flex;gap:.5rem;padding:.5rem}.av-multi-select__search-icon{color:var(--av-color-text-subtle);font-size:.875rem}.av-multi-select__search-input{background:transparent;border:0;color:var(--av-color-text);font-size:.875rem;outline:0;width:100%}.av-multi-select__search-input::placeholder{color:var(--av-color-text-subtle)}.av-multi-select__options{flex:1;list-style:none;margin:0;overflow-y:auto;padding:.25rem 0}.av-multi-select__option{align-items:center;color:var(--av-color-text);cursor:pointer;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem 1rem;transition:background-color .2s ease,color .2s ease;-webkit-user-select:none;user-select:none}.av-multi-select__option:hover{background:var(--av-multi-soft);color:var(--av-multi-selected-color)}.av-multi-select__option--selected{background:var(--av-multi-selected-bg);color:var(--av-multi-selected-color)}.av-multi-select__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-multi-select__option-label--selected{font-weight:600}.av-multi-select__option-check{align-items:center;border:1px solid var(--av-color-border);border-radius:var(--av-radius-sm);display:flex;flex-shrink:0;height:1rem;justify-content:center;width:1rem}.av-multi-select__option-check--selected{background:var(--av-multi-accent);border-color:var(--av-multi-accent);color:var(--av-white)}.av-multi-select__option-check-icon{color:var(--av-white);font-size:.75rem}.av-multi-select__empty{color:var(--av-color-text-subtle);font-size:.875rem;padding:.75rem 1rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2604
|
+
}
|
|
2605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvMultiSelect, decorators: [{
|
|
2606
|
+
type: Component,
|
|
2607
|
+
args: [{ selector: 'av-multiselect, av-multi-select', standalone: true, imports: [CommonModule, OverlayModule, AvIcon], template: "<div class=\"av-multi-select\" [ngStyle]=\"themeVars()\">\n @if (label()) {\n <label class=\"av-multi-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerEl\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n (click)=\"toggleDropdown()\"\n tabindex=\"0\"\n role=\"combobox\"\n class=\"av-multi-select__trigger\"\n [style.border-radius]=\"roundedStyle\"\n [class.av-multi-select__trigger--with-icon]=\"icon()\"\n [class.av-multi-select__trigger--without-icon]=\"!icon()\"\n [ngClass]=\"triggerClasses\"\n >\n @if (icon()) {\n <div class=\"av-multi-select__icon\">\n <span av-icon [name]=\"icon()\"></span>\n </div>\n }\n\n <div class=\"av-multi-select__chips\">\n @for (item of selectedOptions(); track getItemValue(item)) {\n <span class=\"av-multi-select__chip\">\n {{ getItemLabel(item) }}\n <button\n type=\"button\"\n (click)=\"removeOption($event, item)\"\n class=\"av-multi-select__chip-remove\"\n aria-label=\"Remover op\u00E7\u00E3o\"\n >\n <span av-icon name=\"close\" class=\"av-multi-select__chip-remove-icon\"></span>\n </button>\n </span>\n } @empty {\n <span class=\"av-multi-select__placeholder\">\n {{ placeholder() }}\n </span>\n }\n </div>\n\n <div\n class=\"av-multi-select__chevron\"\n [class.av-multi-select__chevron--open]=\"isOpen()\"\n >\n <span av-icon name=\"expand_more\"></span>\n </div>\n </div>\n\n @if (isInvalid || errorMessage()) {\n <span class=\"av-multi-select__error\">\n {{ errorMessage() || 'Selecione ao menos uma op\u00E7\u00E3o' }}\n </span>\n }\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeDropdown()\"\n>\n <div\n class=\"av-multi-select__panel\"\n [ngStyle]=\"themeVars()\"\n [style.width.px]=\"triggerEl.offsetWidth\"\n [style.border-radius]=\"roundedStyle\"\n >\n @if (searchable()) {\n <div class=\"av-multi-select__search\">\n <span av-icon name=\"search\" class=\"av-multi-select__search-icon\"></span>\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"handleSearchInput($event)\"\n class=\"av-multi-select__search-input\"\n />\n </div>\n }\n\n <ul class=\"av-multi-select__options\">\n @for (item of filteredData(); track getItemValue(item)) {\n <li\n (click)=\"toggleOption(item)\"\n class=\"av-multi-select__option\"\n [class.av-multi-select__option--selected]=\"isSelected(item)\"\n >\n <span class=\"av-multi-select__option-label\" [class.av-multi-select__option-label--selected]=\"isSelected(item)\">\n {{ getItemLabel(item) }}\n </span>\n\n <div\n class=\"av-multi-select__option-check\"\n [class.av-multi-select__option-check--selected]=\"isSelected(item)\"\n >\n @if (isSelected(item)) {\n <span av-icon name=\"check\" class=\"av-multi-select__option-check-icon\"></span>\n }\n </div>\n </li>\n } @empty {\n <li class=\"av-multi-select__empty\">Nenhuma op\u00E7\u00E3o encontrada</li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: [".av-multi-select{display:flex;flex-direction:column;gap:.25rem;width:100%;color:var(--av-color-text)}.av-multi-select__label{color:var(--av-color-text);font-size:.875rem;font-weight:700;text-align:start}.av-multi-select__trigger{align-items:center;background:var(--av-color-surface);border:2px solid var(--av-color-border);box-shadow:var(--av-shadow-control);color:var(--av-color-text);cursor:pointer;display:flex;min-height:42px;padding:.375rem 2.5rem .375rem .75rem;position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;width:100%}.av-multi-select__trigger:hover{border-color:var(--av-color-border-hover)}.av-multi-select__trigger:focus{outline:none}.av-multi-select__trigger--with-icon{padding-left:2.5rem}.av-multi-select__trigger--without-icon{padding-left:.75rem}.av-multi-select__trigger--disabled{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);cursor:not-allowed;opacity:.72}.av-multi-select__trigger--open,.av-multi-select__trigger:focus{border-color:var(--av-multi-accent);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-multi-accent);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-multi-accent) 24%,transparent)}.av-multi-select__trigger--invalid,.av-multi-select__trigger--invalid:focus{border-color:var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 2px var(--av-color-danger);box-shadow:var(--av-shadow-control),0 0 0 3px color-mix(in srgb,var(--av-color-danger) 24%,transparent);color:var(--av-color-danger-text)}.av-multi-select__icon,.av-multi-select__chevron{color:var(--av-color-text-subtle);display:flex;pointer-events:none;position:absolute;top:.625rem}.av-multi-select__icon{left:.75rem}.av-multi-select__chevron{right:.75rem;transition:transform .2s ease}.av-multi-select__chevron--open{transform:rotate(180deg)}.av-multi-select__chips{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem;width:100%}.av-multi-select__chip{align-items:center;background:var(--av-multi-selected-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-md);color:var(--av-multi-selected-color);display:inline-flex;font-size:.75rem;font-weight:600;gap:.25rem;max-width:100%;padding:.125rem .5rem}.av-multi-select__chip-remove{align-items:center;border-radius:var(--av-radius-full);color:inherit;display:inline-flex;justify-content:center;transition:color .2s ease}.av-multi-select__chip-remove:hover{color:var(--av-color-danger)}.av-multi-select__placeholder{color:var(--av-color-text-subtle);font-size:.875rem}.av-multi-select__error{color:var(--av-color-danger);font-size:.75rem;font-weight:500}.av-multi-select__panel{background:var(--av-color-surface-raised);border:1px solid var(--av-color-border-soft);box-shadow:var(--av-shadow-raised);color:var(--av-color-text);display:flex;flex-direction:column;margin-top:.25rem;max-height:15rem;overflow:hidden}.av-multi-select__search{align-items:center;background:var(--av-color-surface-muted);border-bottom:1px solid var(--av-color-border-soft);display:flex;gap:.5rem;padding:.5rem}.av-multi-select__search-icon{color:var(--av-color-text-subtle);font-size:.875rem}.av-multi-select__search-input{background:transparent;border:0;color:var(--av-color-text);font-size:.875rem;outline:0;width:100%}.av-multi-select__search-input::placeholder{color:var(--av-color-text-subtle)}.av-multi-select__options{flex:1;list-style:none;margin:0;overflow-y:auto;padding:.25rem 0}.av-multi-select__option{align-items:center;color:var(--av-color-text);cursor:pointer;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem 1rem;transition:background-color .2s ease,color .2s ease;-webkit-user-select:none;user-select:none}.av-multi-select__option:hover{background:var(--av-multi-soft);color:var(--av-multi-selected-color)}.av-multi-select__option--selected{background:var(--av-multi-selected-bg);color:var(--av-multi-selected-color)}.av-multi-select__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-multi-select__option-label--selected{font-weight:600}.av-multi-select__option-check{align-items:center;border:1px solid var(--av-color-border);border-radius:var(--av-radius-sm);display:flex;flex-shrink:0;height:1rem;justify-content:center;width:1rem}.av-multi-select__option-check--selected{background:var(--av-multi-accent);border-color:var(--av-multi-accent);color:var(--av-white)}.av-multi-select__option-check-icon{color:var(--av-white);font-size:.75rem}.av-multi-select__empty{color:var(--av-color-text-subtle);font-size:.875rem;padding:.75rem 1rem;text-align:center}\n"] }]
|
|
2608
|
+
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2609
|
+
type: Optional
|
|
2610
|
+
}, {
|
|
2611
|
+
type: Self
|
|
2612
|
+
}] }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], labelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormat", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ringColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringColor", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], onSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSearch", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerEl: [{
|
|
2613
|
+
type: ViewChild,
|
|
2614
|
+
args: ['triggerEl']
|
|
2615
|
+
}] } });
|
|
2616
|
+
|
|
2617
|
+
class AvGrid {
|
|
2618
|
+
cols = input({
|
|
2619
|
+
xs: 1,
|
|
2620
|
+
sm: 2,
|
|
2621
|
+
md: 3,
|
|
2622
|
+
lg: 4,
|
|
2623
|
+
xl: 5,
|
|
2624
|
+
'2xl': 6,
|
|
2625
|
+
}, /* @ts-ignore */
|
|
2626
|
+
...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
|
|
2627
|
+
empty = input(false, /* @ts-ignore */
|
|
2628
|
+
...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
|
|
2629
|
+
gap = input(.5, /* @ts-ignore */
|
|
2630
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
2631
|
+
gridVars = computed(() => {
|
|
2632
|
+
const cols = this.cols();
|
|
2633
|
+
const xs = this.normalize(cols.xs, 1);
|
|
2634
|
+
const sm = this.normalize(cols.sm, xs);
|
|
2635
|
+
const md = this.normalize(cols.md, sm);
|
|
2636
|
+
const lg = this.normalize(cols.lg, md);
|
|
2637
|
+
const xl = this.normalize(cols.xl, lg);
|
|
2638
|
+
const xxl = this.normalize(cols['2xl'], xl);
|
|
2639
|
+
return {
|
|
2640
|
+
'--av-grid-cols-xs': String(xs),
|
|
2641
|
+
'--av-grid-cols-sm': String(sm),
|
|
2642
|
+
'--av-grid-cols-md': String(md),
|
|
2643
|
+
'--av-grid-cols-lg': String(lg),
|
|
2644
|
+
'--av-grid-cols-xl': String(xl),
|
|
2645
|
+
'--av-grid-cols-2xl': String(xxl),
|
|
2646
|
+
};
|
|
2647
|
+
}, /* @ts-ignore */
|
|
2648
|
+
...(ngDevMode ? [{ debugName: "gridVars" }] : /* istanbul ignore next */ []));
|
|
2649
|
+
normalize(value, fallback) {
|
|
2650
|
+
if (!value || value < 1)
|
|
2651
|
+
return fallback;
|
|
2652
|
+
return Math.floor(value);
|
|
2653
|
+
}
|
|
2654
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvGrid, isStandalone: true, selector: "div[av-grid]", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.av-grid--empty": "empty()", "style.--av-grid-cols-xs": "gridVars()[\"--av-grid-cols-xs\"]", "style.--av-grid-cols-sm": "gridVars()[\"--av-grid-cols-sm\"]", "style.--av-grid-cols-md": "gridVars()[\"--av-grid-cols-md\"]", "style.--av-grid-cols-lg": "gridVars()[\"--av-grid-cols-lg\"]", "style.--av-grid-cols-xl": "gridVars()[\"--av-grid-cols-xl\"]", "style.--av-grid-cols-2xl": "gridVars()[\"--av-grid-cols-2xl\"]", "style.--av-grid-gap": "gap() + \"rem\"" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{align-items:start;display:grid;gap:var(--av-grid-gap, .5rem);grid-template-columns:repeat(var(--av-grid-cols-xs, 1),minmax(0,1fr));justify-content:start;width:100%}:host(.av-grid--empty){align-items:center;display:flex;justify-content:center;min-height:8rem}@media(min-width:640px){:host{grid-template-columns:repeat(var(--av-grid-cols-sm, var(--av-grid-cols-xs, 1)),minmax(0,1fr))}}@media(min-width:768px){:host{grid-template-columns:repeat(var(--av-grid-cols-md, var(--av-grid-cols-sm, 1)),minmax(0,1fr))}}@media(min-width:1024px){:host{grid-template-columns:repeat(var(--av-grid-cols-lg, var(--av-grid-cols-md, 1)),minmax(0,1fr))}}@media(min-width:1280px){:host{grid-template-columns:repeat(var(--av-grid-cols-xl, var(--av-grid-cols-lg, 1)),minmax(0,1fr))}}@media(min-width:1536px){:host{grid-template-columns:repeat(var(--av-grid-cols-2xl, var(--av-grid-cols-xl, 1)),minmax(0,1fr))}}\n"] });
|
|
2656
|
+
}
|
|
2657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvGrid, decorators: [{
|
|
2658
|
+
type: Component,
|
|
2659
|
+
args: [{ selector: 'div[av-grid]', standalone: true, host: {
|
|
2660
|
+
'[class.av-grid--empty]': 'empty()',
|
|
2661
|
+
'[style.--av-grid-cols-xs]': 'gridVars()["--av-grid-cols-xs"]',
|
|
2662
|
+
'[style.--av-grid-cols-sm]': 'gridVars()["--av-grid-cols-sm"]',
|
|
2663
|
+
'[style.--av-grid-cols-md]': 'gridVars()["--av-grid-cols-md"]',
|
|
2664
|
+
'[style.--av-grid-cols-lg]': 'gridVars()["--av-grid-cols-lg"]',
|
|
2665
|
+
'[style.--av-grid-cols-xl]': 'gridVars()["--av-grid-cols-xl"]',
|
|
2666
|
+
'[style.--av-grid-cols-2xl]': 'gridVars()["--av-grid-cols-2xl"]',
|
|
2667
|
+
'[style.--av-grid-gap]': 'gap() + "rem"',
|
|
2668
|
+
}, template: "<ng-content></ng-content>\n", styles: [":host{align-items:start;display:grid;gap:var(--av-grid-gap, .5rem);grid-template-columns:repeat(var(--av-grid-cols-xs, 1),minmax(0,1fr));justify-content:start;width:100%}:host(.av-grid--empty){align-items:center;display:flex;justify-content:center;min-height:8rem}@media(min-width:640px){:host{grid-template-columns:repeat(var(--av-grid-cols-sm, var(--av-grid-cols-xs, 1)),minmax(0,1fr))}}@media(min-width:768px){:host{grid-template-columns:repeat(var(--av-grid-cols-md, var(--av-grid-cols-sm, 1)),minmax(0,1fr))}}@media(min-width:1024px){:host{grid-template-columns:repeat(var(--av-grid-cols-lg, var(--av-grid-cols-md, 1)),minmax(0,1fr))}}@media(min-width:1280px){:host{grid-template-columns:repeat(var(--av-grid-cols-xl, var(--av-grid-cols-lg, 1)),minmax(0,1fr))}}@media(min-width:1536px){:host{grid-template-columns:repeat(var(--av-grid-cols-2xl, var(--av-grid-cols-xl, 1)),minmax(0,1fr))}}\n"] }]
|
|
2669
|
+
}], propDecorators: { cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
2670
|
+
|
|
2671
|
+
class AvButton {
|
|
2672
|
+
config = inject(VISUALS_CONFIG);
|
|
2673
|
+
icon = input(/* @ts-ignore */
|
|
2674
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
2675
|
+
loadingIcon = input('blocks-shuffle-3', /* @ts-ignore */
|
|
2676
|
+
...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
|
|
2677
|
+
loading = input(false, /* @ts-ignore */
|
|
2678
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
2679
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2680
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2681
|
+
rounded = input("md", /* @ts-ignore */
|
|
2682
|
+
...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
|
|
2683
|
+
get roundedClass() {
|
|
2684
|
+
if (typeof this.rounded() === "string") {
|
|
2685
|
+
return `var(--av-radius-${this.rounded()})`;
|
|
2686
|
+
}
|
|
2687
|
+
return `${this.rounded()}px`;
|
|
2688
|
+
}
|
|
2689
|
+
get lightBackground() {
|
|
2690
|
+
return `var(--av-${this.variant()}-500)`;
|
|
2691
|
+
}
|
|
2692
|
+
get lightHoverBackground() {
|
|
2693
|
+
return `var(--av-${this.variant()}-600)`;
|
|
2694
|
+
}
|
|
2695
|
+
get darkBackground() {
|
|
2696
|
+
return `var(--av-${this.variant()}-600)`;
|
|
2697
|
+
}
|
|
2698
|
+
get darkHoverBackground() {
|
|
2699
|
+
return `var(--av-${this.variant()}-500)`;
|
|
2700
|
+
}
|
|
2701
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2702
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvButton, isStandalone: true, selector: "button[av-button], a[av-button]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-radius": "this.roundedClass", "style.--av-button-light-bg": "this.lightBackground", "style.--av-button-light-hover-bg": "this.lightHoverBackground", "style.--av-button-dark-bg": "this.darkBackground", "style.--av-button-dark-hover-bg": "this.darkHoverBackground" } }, ngImport: i0, template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div>\n <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}\n"], dependencies: [{ kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2703
|
+
}
|
|
2704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvButton, decorators: [{
|
|
2705
|
+
type: Component,
|
|
2706
|
+
args: [{ imports: [AvIcon], selector: 'button[av-button], a[av-button]', template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div>\n <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}\n"] }]
|
|
2707
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], roundedClass: [{
|
|
2708
|
+
type: HostBinding,
|
|
2709
|
+
args: ['style.border-radius']
|
|
2710
|
+
}], lightBackground: [{
|
|
2711
|
+
type: HostBinding,
|
|
2712
|
+
args: ['style.--av-button-light-bg']
|
|
2713
|
+
}], lightHoverBackground: [{
|
|
2714
|
+
type: HostBinding,
|
|
2715
|
+
args: ['style.--av-button-light-hover-bg']
|
|
2716
|
+
}], darkBackground: [{
|
|
2717
|
+
type: HostBinding,
|
|
2718
|
+
args: ['style.--av-button-dark-bg']
|
|
2719
|
+
}], darkHoverBackground: [{
|
|
2720
|
+
type: HostBinding,
|
|
2721
|
+
args: ['style.--av-button-dark-hover-bg']
|
|
2722
|
+
}] } });
|
|
2723
|
+
|
|
2724
|
+
class AvPaginator {
|
|
2725
|
+
config = inject(VISUALS_CONFIG);
|
|
2726
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2727
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2728
|
+
pageIndex = input.required(/* @ts-ignore */
|
|
2729
|
+
...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
2730
|
+
totalPages = input.required(/* @ts-ignore */
|
|
2731
|
+
...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
2732
|
+
pageChanged = output();
|
|
2733
|
+
safeTotalPages = computed(() => Math.max(0, this.totalPages()), /* @ts-ignore */
|
|
2734
|
+
...(ngDevMode ? [{ debugName: "safeTotalPages" }] : /* istanbul ignore next */ []));
|
|
2735
|
+
currentPage = computed(() => {
|
|
2736
|
+
if (this.safeTotalPages() <= 0)
|
|
2737
|
+
return 0;
|
|
2738
|
+
return Math.min(Math.max(this.pageIndex(), 0), this.safeTotalPages() - 1);
|
|
2739
|
+
}, /* @ts-ignore */
|
|
2740
|
+
...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
|
|
2741
|
+
canGoBack = computed(() => this.currentPage() > 0, /* @ts-ignore */
|
|
2742
|
+
...(ngDevMode ? [{ debugName: "canGoBack" }] : /* istanbul ignore next */ []));
|
|
2743
|
+
canGoForward = computed(() => this.currentPage() + 1 < this.safeTotalPages(), /* @ts-ignore */
|
|
2744
|
+
...(ngDevMode ? [{ debugName: "canGoForward" }] : /* istanbul ignore next */ []));
|
|
2745
|
+
changePage(page) {
|
|
2746
|
+
if (this.safeTotalPages() <= 0)
|
|
2747
|
+
return;
|
|
2748
|
+
const nextPage = Math.min(Math.max(page, 0), this.safeTotalPages() - 1);
|
|
2749
|
+
if (nextPage === this.currentPage())
|
|
2750
|
+
return;
|
|
2751
|
+
this.pageChanged.emit(nextPage);
|
|
2752
|
+
}
|
|
2753
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvPaginator, isStandalone: true, selector: "av-paginator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<nav class=\"av-paginator\" aria-label=\"Pagina\u00E7\u00E3o\">\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(0)\"\n [disabled]=\"!canGoBack()\"\n aria-label=\"Primeira p\u00E1gina\"\n >\n <span av-icon name=\"double_arrow_left\"></span>\n </button>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(currentPage() - 1)\"\n [disabled]=\"!canGoBack()\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <span av-icon name=\"arrow_left\" size=\"sm\"></span>\n </button>\n\n <span class=\"av-paginator__page\">\n P\u00E1gina {{ safeTotalPages() === 0 ? 0 : currentPage() + 1 }} de {{ safeTotalPages() }}\n </span>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(currentPage() + 1)\"\n [disabled]=\"!canGoForward()\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n >\n <span av-icon name=\"arrow_right\" size=\"sm\"></span>\n </button>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(safeTotalPages() - 1)\"\n [disabled]=\"!canGoForward()\"\n aria-label=\"\u00DAltima p\u00E1gina\"\n >\n <span av-icon name=\"double_arrow_right\"></span>\n </button>\n</nav>\n", styles: [":host{display:block;width:100%}.av-paginator{align-items:stretch;display:grid;gap:.25rem;grid-template-columns:auto auto minmax(8rem,1fr) auto auto;width:100%}.av-paginator [av-button]{min-height:2.25rem;padding-inline:.75rem}.av-paginator [av-button]:disabled{cursor:not-allowed;opacity:.48;transform:none}.av-paginator__page{align-items:center;color:var(--av-color-text-muted);display:flex;font-size:.875rem;font-weight:700;justify-content:center;padding-inline:.75rem;text-align:center}\n"], dependencies: [{ kind: "component", type: AvButton, selector: "button[av-button], a[av-button]", inputs: ["icon", "loadingIcon", "loading", "variant", "rounded"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2755
|
+
}
|
|
2756
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvPaginator, decorators: [{
|
|
2757
|
+
type: Component,
|
|
2758
|
+
args: [{ selector: 'av-paginator', standalone: true, imports: [AvButton, AvIcon], template: "<nav class=\"av-paginator\" aria-label=\"Pagina\u00E7\u00E3o\">\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(0)\"\n [disabled]=\"!canGoBack()\"\n aria-label=\"Primeira p\u00E1gina\"\n >\n <span av-icon name=\"double_arrow_left\"></span>\n </button>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(currentPage() - 1)\"\n [disabled]=\"!canGoBack()\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <span av-icon name=\"arrow_left\" size=\"sm\"></span>\n </button>\n\n <span class=\"av-paginator__page\">\n P\u00E1gina {{ safeTotalPages() === 0 ? 0 : currentPage() + 1 }} de {{ safeTotalPages() }}\n </span>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(currentPage() + 1)\"\n [disabled]=\"!canGoForward()\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n >\n <span av-icon name=\"arrow_right\" size=\"sm\"></span>\n </button>\n\n <button\n av-button\n [variant]=\"variant()\"\n type=\"button\"\n (click)=\"changePage(safeTotalPages() - 1)\"\n [disabled]=\"!canGoForward()\"\n aria-label=\"\u00DAltima p\u00E1gina\"\n >\n <span av-icon name=\"double_arrow_right\"></span>\n </button>\n</nav>\n", styles: [":host{display:block;width:100%}.av-paginator{align-items:stretch;display:grid;gap:.25rem;grid-template-columns:auto auto minmax(8rem,1fr) auto auto;width:100%}.av-paginator [av-button]{min-height:2.25rem;padding-inline:.75rem}.av-paginator [av-button]:disabled{cursor:not-allowed;opacity:.48;transform:none}.av-paginator__page{align-items:center;color:var(--av-color-text-muted);display:flex;font-size:.875rem;font-weight:700;justify-content:center;padding-inline:.75rem;text-align:center}\n"] }]
|
|
2759
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: true }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
|
|
2760
|
+
|
|
2761
|
+
class AvProgressBarCircle {
|
|
2762
|
+
config = inject(VISUALS_CONFIG);
|
|
2763
|
+
themeService = inject(ThemeService);
|
|
2764
|
+
value = input.required(/* @ts-ignore */
|
|
2765
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2766
|
+
max = input.required(/* @ts-ignore */
|
|
2767
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
2768
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2769
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2770
|
+
striped = input(false, /* @ts-ignore */
|
|
2771
|
+
...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
|
|
2772
|
+
showPercent = input(true, /* @ts-ignore */
|
|
2773
|
+
...(ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []));
|
|
2774
|
+
size = input(120, /* @ts-ignore */
|
|
2775
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2776
|
+
strokeWidth = input(12, /* @ts-ignore */
|
|
2777
|
+
...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
|
|
2778
|
+
static nextId = 0;
|
|
2779
|
+
stripeId = `av-progress-circle-stripe-${Math.random()}`;
|
|
2780
|
+
radius = computed(() => 50 - this.strokeWidth() / 2, /* @ts-ignore */
|
|
2781
|
+
...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
2782
|
+
circumference = computed(() => 2 * Math.PI * this.radius(), /* @ts-ignore */
|
|
2783
|
+
...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
|
|
2784
|
+
percentValue = computed(() => {
|
|
2785
|
+
if (this.max() <= 0)
|
|
2786
|
+
return 0;
|
|
2787
|
+
return Math.min(100, Math.max(0, (this.value() / this.max()) * 100));
|
|
2788
|
+
}, /* @ts-ignore */
|
|
2789
|
+
...(ngDevMode ? [{ debugName: "percentValue" }] : /* istanbul ignore next */ []));
|
|
2790
|
+
percentLabel = computed(() => Math.round(this.percentValue()), /* @ts-ignore */
|
|
2791
|
+
...(ngDevMode ? [{ debugName: "percentLabel" }] : /* istanbul ignore next */ []));
|
|
2792
|
+
dashOffset = computed(() => this.circumference() * (1 - this.percentValue() / 100), /* @ts-ignore */
|
|
2793
|
+
...(ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []));
|
|
2794
|
+
themeVars = computed(() => {
|
|
2795
|
+
const variant = this.variant();
|
|
2796
|
+
const isDark = this.themeService.dark();
|
|
2797
|
+
return {
|
|
2798
|
+
'--av-progress-circle-fill': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
2799
|
+
'--av-progress-circle-track': isDark
|
|
2800
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 18%, var(--av-color-surface-muted))`
|
|
2801
|
+
: `var(--av-${variant}-100)`,
|
|
2802
|
+
};
|
|
2803
|
+
}, /* @ts-ignore */
|
|
2804
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2805
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvProgressBarCircle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvProgressBarCircle, isStandalone: true, selector: "av-progress-bar-circle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"av-progress-circle\"\n [ngStyle]=\"themeVars()\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"percentLabel()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <svg class=\"av-progress-circle__svg\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n class=\"av-progress-circle__track\"\n cx=\"50\"\n cy=\"50\"\n fill=\"transparent\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n ></circle>\n <circle\n class=\"av-progress-circle__fill\"\n [class.av-progress-circle__fill--striped]=\"striped()\"\n cx=\"50\"\n cy=\"50\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-dasharray]=\"circumference()\"\n [attr.stroke-dashoffset]=\"dashOffset()\"\n ></circle>\n </svg>\n\n @if (showPercent()) {\n <span class=\"av-progress-circle__label\"> {{ percentLabel() }}% </span>\n }\n</div>\n", styles: [":host{display:inline-block}.av-progress-circle{color:var(--av-color-text);position:relative}.av-progress-circle__svg{display:block;height:100%;transform:rotate(-90deg);width:100%}.av-progress-circle__track{stroke:var(--av-progress-circle-track)}.av-progress-circle__fill{stroke:var(--av-progress-circle-fill);transition:stroke .2s ease,stroke-dashoffset .35s ease}.av-progress-circle__fill--striped{animation:av-progress-circle-pulse 1.2s ease-in-out infinite}.av-progress-circle__label{color:var(--av-progress-circle-fill);font-size:1.25rem;font-weight:700;left:50%;line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%)}@keyframes av-progress-circle-pulse{50%{opacity:.72}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2807
|
+
}
|
|
2808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvProgressBarCircle, decorators: [{
|
|
2809
|
+
type: Component,
|
|
2810
|
+
args: [{ selector: 'av-progress-bar-circle', standalone: true, imports: [CommonModule], template: "<div\n class=\"av-progress-circle\"\n [ngStyle]=\"themeVars()\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"percentLabel()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <svg class=\"av-progress-circle__svg\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n class=\"av-progress-circle__track\"\n cx=\"50\"\n cy=\"50\"\n fill=\"transparent\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n ></circle>\n <circle\n class=\"av-progress-circle__fill\"\n [class.av-progress-circle__fill--striped]=\"striped()\"\n cx=\"50\"\n cy=\"50\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-dasharray]=\"circumference()\"\n [attr.stroke-dashoffset]=\"dashOffset()\"\n ></circle>\n </svg>\n\n @if (showPercent()) {\n <span class=\"av-progress-circle__label\"> {{ percentLabel() }}% </span>\n }\n</div>\n", styles: [":host{display:inline-block}.av-progress-circle{color:var(--av-color-text);position:relative}.av-progress-circle__svg{display:block;height:100%;transform:rotate(-90deg);width:100%}.av-progress-circle__track{stroke:var(--av-progress-circle-track)}.av-progress-circle__fill{stroke:var(--av-progress-circle-fill);transition:stroke .2s ease,stroke-dashoffset .35s ease}.av-progress-circle__fill--striped{animation:av-progress-circle-pulse 1.2s ease-in-out infinite}.av-progress-circle__label{color:var(--av-progress-circle-fill);font-size:1.25rem;font-weight:700;left:50%;line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%)}@keyframes av-progress-circle-pulse{50%{opacity:.72}}\n"] }]
|
|
2811
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], showPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
|
|
2812
|
+
|
|
2813
|
+
class AvProgressBar {
|
|
2814
|
+
config = inject(VISUALS_CONFIG);
|
|
2815
|
+
themeService = inject(ThemeService);
|
|
2816
|
+
value = input.required(/* @ts-ignore */
|
|
2817
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2818
|
+
max = input.required(/* @ts-ignore */
|
|
2819
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
2820
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2821
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2822
|
+
striped = input(false, /* @ts-ignore */
|
|
2823
|
+
...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
|
|
2824
|
+
showPercent = input(true, /* @ts-ignore */
|
|
2825
|
+
...(ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []));
|
|
2826
|
+
percentPos = input('center', /* @ts-ignore */
|
|
2827
|
+
...(ngDevMode ? [{ debugName: "percentPos" }] : /* istanbul ignore next */ []));
|
|
2828
|
+
gradient = input(false, /* @ts-ignore */
|
|
2829
|
+
...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
|
|
2830
|
+
from = input('', /* @ts-ignore */
|
|
2831
|
+
...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
|
|
2832
|
+
to = input('', /* @ts-ignore */
|
|
2833
|
+
...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
|
|
2834
|
+
height = input(20, /* @ts-ignore */
|
|
2835
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
2836
|
+
percentValue = computed(() => {
|
|
2837
|
+
if (this.max() <= 0)
|
|
2838
|
+
return 0;
|
|
2839
|
+
return Math.min(100, Math.max(0, (this.value() / this.max()) * 100));
|
|
2840
|
+
}, /* @ts-ignore */
|
|
2841
|
+
...(ngDevMode ? [{ debugName: "percentValue" }] : /* istanbul ignore next */ []));
|
|
2842
|
+
percentLabel = computed(() => Math.round(this.percentValue()), /* @ts-ignore */
|
|
2843
|
+
...(ngDevMode ? [{ debugName: "percentLabel" }] : /* istanbul ignore next */ []));
|
|
2844
|
+
themeVars = computed(() => {
|
|
2845
|
+
const variant = this.variant();
|
|
2846
|
+
const isDark = this.themeService.dark();
|
|
2847
|
+
const from = this.from() || `var(--av-${variant}-${isDark ? 400 : 500})`;
|
|
2848
|
+
const to = this.to() || `var(--av-${variant}-${isDark ? 500 : 600})`;
|
|
2849
|
+
return {
|
|
2850
|
+
'--av-progress-fill': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
2851
|
+
'--av-progress-fill-strong': `var(--av-${variant}-${isDark ? 300 : 600})`,
|
|
2852
|
+
'--av-progress-gradient-from': from,
|
|
2853
|
+
'--av-progress-gradient-to': to,
|
|
2854
|
+
'--av-progress-track': isDark
|
|
2855
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 18%, var(--av-color-surface-muted))`
|
|
2856
|
+
: `var(--av-${variant}-100)`,
|
|
2857
|
+
};
|
|
2858
|
+
}, /* @ts-ignore */
|
|
2859
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2860
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2861
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvProgressBar, isStandalone: true, selector: "av-progress-bar, av-progress-bard", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null }, percentPos: { classPropertyName: "percentPos", publicName: "percentPos", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"av-progress\"\n [ngStyle]=\"themeVars()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"percentLabel()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <div\n class=\"av-progress__track\"\n [style.height.px]=\"height()\"\n >\n <div\n class=\"av-progress__fill\"\n [class.av-progress__fill--gradient]=\"gradient()\"\n [class.av-progress__fill--striped]=\"striped()\"\n [style.width.%]=\"percentValue()\"\n >\n @if (showPercent() && percentPos() === 'fill') {\n <span class=\"av-progress__text av-progress__text--fill\" [style.font-size.px]=\"height() / 1.5\">\n {{ percentLabel() }}%\n </span>\n }\n </div>\n\n @if (showPercent() && percentPos() === 'center') {\n <span class=\"av-progress__text av-progress__text--center\" [style.font-size.px]=\"height() / 1.5\">\n {{ percentLabel() }}%\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.av-progress__track{background:var(--av-progress-track);border-radius:var(--av-radius-full);overflow:hidden;position:relative;width:100%}.av-progress__fill{background:var(--av-progress-fill);border-radius:inherit;height:100%;overflow:hidden;position:relative;transition:background-color .2s ease,width .35s ease}.av-progress__fill--gradient{background-image:linear-gradient(to right,var(--av-progress-gradient-from),var(--av-progress-gradient-to))}.av-progress__fill--striped:after{animation:av-progress-stripe .7s linear infinite;background:repeating-linear-gradient(-45deg,rgb(255 255 255 / .18) 0,rgb(255 255 255 / .18) 8px,transparent 8px,transparent 16px);background-size:23px 23px;content:\"\";inset:0;position:absolute}.av-progress__text{color:var(--av-white);font-weight:700;line-height:1;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.av-progress__text--fill{right:.35rem}.av-progress__text--center{left:50%;transform:translate(-50%,-50%)}@keyframes av-progress-stripe{to{background-position:23px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2862
|
+
}
|
|
2863
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvProgressBar, decorators: [{
|
|
2864
|
+
type: Component,
|
|
2865
|
+
args: [{ selector: 'av-progress-bar, av-progress-bard', standalone: true, imports: [CommonModule], template: "<div\n class=\"av-progress\"\n [ngStyle]=\"themeVars()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"percentLabel()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <div\n class=\"av-progress__track\"\n [style.height.px]=\"height()\"\n >\n <div\n class=\"av-progress__fill\"\n [class.av-progress__fill--gradient]=\"gradient()\"\n [class.av-progress__fill--striped]=\"striped()\"\n [style.width.%]=\"percentValue()\"\n >\n @if (showPercent() && percentPos() === 'fill') {\n <span class=\"av-progress__text av-progress__text--fill\" [style.font-size.px]=\"height() / 1.5\">\n {{ percentLabel() }}%\n </span>\n }\n </div>\n\n @if (showPercent() && percentPos() === 'center') {\n <span class=\"av-progress__text av-progress__text--center\" [style.font-size.px]=\"height() / 1.5\">\n {{ percentLabel() }}%\n </span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.av-progress__track{background:var(--av-progress-track);border-radius:var(--av-radius-full);overflow:hidden;position:relative;width:100%}.av-progress__fill{background:var(--av-progress-fill);border-radius:inherit;height:100%;overflow:hidden;position:relative;transition:background-color .2s ease,width .35s ease}.av-progress__fill--gradient{background-image:linear-gradient(to right,var(--av-progress-gradient-from),var(--av-progress-gradient-to))}.av-progress__fill--striped:after{animation:av-progress-stripe .7s linear infinite;background:repeating-linear-gradient(-45deg,rgb(255 255 255 / .18) 0,rgb(255 255 255 / .18) 8px,transparent 8px,transparent 16px);background-size:23px 23px;content:\"\";inset:0;position:absolute}.av-progress__text{color:var(--av-white);font-weight:700;line-height:1;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.av-progress__text--fill{right:.35rem}.av-progress__text--center{left:50%;transform:translate(-50%,-50%)}@keyframes av-progress-stripe{to{background-position:23px 0}}\n"] }]
|
|
2866
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], showPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercent", required: false }] }], percentPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentPos", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
2867
|
+
|
|
2868
|
+
class AvCarouselItem {
|
|
2869
|
+
duration = input(undefined, /* @ts-ignore */
|
|
2870
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
2871
|
+
isActive = signal(false, /* @ts-ignore */
|
|
2872
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
2873
|
+
index = signal(0, /* @ts-ignore */
|
|
2874
|
+
...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
2875
|
+
transition = signal('fade', /* @ts-ignore */
|
|
2876
|
+
...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
|
|
2877
|
+
get itemClasses() {
|
|
2878
|
+
return [
|
|
2879
|
+
'av-carousel-item',
|
|
2880
|
+
`av-carousel-item--${this.transition()}`,
|
|
2881
|
+
this.isActive() ? 'av-carousel-item--active' : 'av-carousel-item--inactive',
|
|
2882
|
+
].join(' ');
|
|
2883
|
+
}
|
|
2884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCarouselItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvCarouselItem, isStandalone: true, selector: "av-carousel-item", inputs: { duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"itemClasses\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-carousel-item{height:100%;min-width:100%;width:100%}.av-carousel-item--scroll{flex:0 0 100%}.av-carousel-item--fade{inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .35s ease}.av-carousel-item--fade.av-carousel-item--active{opacity:1;pointer-events:auto;z-index:1}.av-carousel-item--fade.av-carousel-item--inactive{opacity:0;z-index:0}\n"] });
|
|
2886
|
+
}
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCarouselItem, decorators: [{
|
|
2888
|
+
type: Component,
|
|
2889
|
+
args: [{ selector: 'av-carousel-item', standalone: true, template: "<div [class]=\"itemClasses\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-carousel-item{height:100%;min-width:100%;width:100%}.av-carousel-item--scroll{flex:0 0 100%}.av-carousel-item--fade{inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .35s ease}.av-carousel-item--fade.av-carousel-item--active{opacity:1;pointer-events:auto;z-index:1}.av-carousel-item--fade.av-carousel-item--inactive{opacity:0;z-index:0}\n"] }]
|
|
2890
|
+
}], propDecorators: { duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
|
|
2891
|
+
|
|
2892
|
+
class AvCarousel {
|
|
2893
|
+
config = inject(VISUALS_CONFIG);
|
|
2894
|
+
themeService = inject(ThemeService);
|
|
2895
|
+
intervalId = null;
|
|
2896
|
+
contentContainer;
|
|
2897
|
+
auto = input(true, { ...(ngDevMode ? { debugName: "auto" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2898
|
+
controls = input(true, { ...(ngDevMode ? { debugName: "controls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2899
|
+
dots = input(true, { ...(ngDevMode ? { debugName: "dots" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2900
|
+
transition = input('fade', /* @ts-ignore */
|
|
2901
|
+
...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
|
|
2902
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
2903
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2904
|
+
transitionDelay = input(undefined, /* @ts-ignore */
|
|
2905
|
+
...(ngDevMode ? [{ debugName: "transitionDelay" }] : /* istanbul ignore next */ []));
|
|
2906
|
+
indexChange = output();
|
|
2907
|
+
items = contentChildren(AvCarouselItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2908
|
+
currentItem = signal(0, /* @ts-ignore */
|
|
2909
|
+
...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
|
|
2910
|
+
themeVars = computed(() => {
|
|
2911
|
+
const variant = this.variant();
|
|
2912
|
+
const isDark = this.themeService.dark();
|
|
2913
|
+
return {
|
|
2914
|
+
'--av-carousel-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
2915
|
+
'--av-carousel-control-bg': isDark ? 'rgb(15 23 42 / .72)' : 'rgb(255 255 255 / .72)',
|
|
2916
|
+
'--av-carousel-control-color': 'var(--av-color-text)',
|
|
2917
|
+
'--av-carousel-dot-bg': isDark ? 'rgb(148 163 184 / .48)' : 'rgb(15 23 42 / .28)',
|
|
2918
|
+
};
|
|
2919
|
+
}, /* @ts-ignore */
|
|
2920
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
2921
|
+
canNavigate = computed(() => this.items().length > 1, /* @ts-ignore */
|
|
2922
|
+
...(ngDevMode ? [{ debugName: "canNavigate" }] : /* istanbul ignore next */ []));
|
|
2923
|
+
constructor() {
|
|
2924
|
+
effect((onCleanup) => {
|
|
2925
|
+
const itemList = this.items();
|
|
2926
|
+
const currentIndex = this.normalizeIndex(this.currentItem());
|
|
2927
|
+
const transition = this.transition();
|
|
2928
|
+
if (currentIndex !== this.currentItem()) {
|
|
2929
|
+
this.currentItem.set(currentIndex);
|
|
2930
|
+
}
|
|
2931
|
+
itemList.forEach((item, index) => {
|
|
2932
|
+
item.index.set(index);
|
|
2933
|
+
item.transition.set(transition);
|
|
2934
|
+
item.isActive.set(index === currentIndex);
|
|
2935
|
+
});
|
|
2936
|
+
queueMicrotask(() => this.scrollToCurrent());
|
|
2937
|
+
if (this.auto() && itemList.length > 1) {
|
|
2938
|
+
const activeItem = itemList[currentIndex];
|
|
2939
|
+
const delay = activeItem?.duration() ?? this.transitionDelay() ?? 5000;
|
|
2940
|
+
this.intervalId = setInterval(() => this.next(), delay);
|
|
2941
|
+
onCleanup(() => this.clearTimer());
|
|
2942
|
+
}
|
|
2943
|
+
});
|
|
2944
|
+
}
|
|
2945
|
+
ngOnDestroy() {
|
|
2946
|
+
this.clearTimer();
|
|
2947
|
+
}
|
|
2948
|
+
next() {
|
|
2949
|
+
const total = this.items().length;
|
|
2950
|
+
if (total <= 0)
|
|
2951
|
+
return;
|
|
2952
|
+
this.changeTo((this.currentItem() + 1) % total);
|
|
2953
|
+
}
|
|
2954
|
+
previous() {
|
|
2955
|
+
const total = this.items().length;
|
|
2956
|
+
if (total <= 0)
|
|
2957
|
+
return;
|
|
2958
|
+
this.changeTo((this.currentItem() - 1 + total) % total);
|
|
2959
|
+
}
|
|
2960
|
+
changeTo(index) {
|
|
2961
|
+
const nextIndex = this.normalizeIndex(index);
|
|
2962
|
+
this.currentItem.set(nextIndex);
|
|
2963
|
+
this.indexChange.emit(nextIndex);
|
|
2964
|
+
}
|
|
2965
|
+
normalizeIndex(index) {
|
|
2966
|
+
const total = this.items().length;
|
|
2967
|
+
if (total <= 0)
|
|
2968
|
+
return 0;
|
|
2969
|
+
return Math.min(Math.max(index, 0), total - 1);
|
|
2970
|
+
}
|
|
2971
|
+
scrollToCurrent() {
|
|
2972
|
+
if (this.transition() !== 'scroll')
|
|
2973
|
+
return;
|
|
2974
|
+
const container = this.contentContainer?.nativeElement;
|
|
2975
|
+
if (!container)
|
|
2976
|
+
return;
|
|
2977
|
+
container.scrollTo({
|
|
2978
|
+
left: container.clientWidth * this.currentItem(),
|
|
2979
|
+
behavior: 'smooth',
|
|
2980
|
+
});
|
|
2981
|
+
}
|
|
2982
|
+
clearTimer() {
|
|
2983
|
+
if (!this.intervalId)
|
|
2984
|
+
return;
|
|
2985
|
+
clearInterval(this.intervalId);
|
|
2986
|
+
this.intervalId = null;
|
|
2987
|
+
}
|
|
2988
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2989
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvCarousel, isStandalone: true, selector: "av-carousel", inputs: { auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, transitionDelay: { classPropertyName: "transitionDelay", publicName: "transitionDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "items", predicate: AvCarouselItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"av-carousel\" [ngStyle]=\"themeVars()\">\n @if (controls() && canNavigate()) {\n <button\n type=\"button\"\n (click)=\"previous()\"\n class=\"av-carousel__control av-carousel__control--left\"\n aria-label=\"Slide anterior\"\n >\n <span av-icon name=\"chevron_left\" class=\"av-carousel__control-icon\"></span>\n </button>\n\n <button\n type=\"button\"\n (click)=\"next()\"\n class=\"av-carousel__control av-carousel__control--right\"\n aria-label=\"Pr\u00F3ximo slide\"\n >\n <span av-icon name=\"chevron_right\" class=\"av-carousel__control-icon\"></span>\n </button>\n }\n\n <div\n #content\n class=\"av-carousel__content\"\n [class.av-carousel__content--scroll]=\"transition() === 'scroll'\"\n [class.av-carousel__content--fade]=\"transition() === 'fade'\"\n >\n <ng-content></ng-content>\n </div>\n\n @if (dots() && canNavigate()) {\n <div class=\"av-carousel__dots-wrap\">\n <div class=\"av-carousel__dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n (click)=\"changeTo($index)\"\n class=\"av-carousel__dot\"\n [class.av-carousel__dot--active]=\"currentItem() === $index\"\n [attr.aria-label]=\"'Ir para slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;min-height:12rem;width:100%}.av-carousel{width:100%;height:100%;background:var(--av-color-surface-muted);color:var(--av-color-text);display:flex;overflow:hidden;position:relative}.av-carousel__control{align-items:center;background:var(--av-carousel-control-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-full);color:var(--av-carousel-control-color);cursor:pointer;display:flex;height:2.5rem;justify-content:center;opacity:.78;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .2s ease,opacity .2s ease,transform .2s ease;width:2.5rem;z-index:2}.av-carousel__control:hover{opacity:1;transform:translateY(-50%) scale(1.04)}.av-carousel__control--left{left:.75rem}.av-carousel__control--right{right:.75rem}.av-carousel__control-icon{display:flex;font-size:1.25rem}.av-carousel__content{height:100%;position:relative;width:100%}.av-carousel__content--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.av-carousel__content--scroll ::ng-deep .av-carousel-item{scroll-snap-align:start}.av-carousel__content--fade{overflow:hidden}.av-carousel__content::-webkit-scrollbar{display:none}.av-carousel__dots-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;padding:.875rem;position:absolute;right:0;z-index:2}.av-carousel__dots{align-items:center;background:#0000002e;border-radius:var(--av-radius-full);display:flex;gap:.375rem;padding:.375rem}.av-carousel__dot{background:var(--av-carousel-dot-bg);border-radius:var(--av-radius-full);cursor:pointer;height:.625rem;transition:background-color .2s ease,width .2s ease;width:.625rem}.av-carousel__dot--active{background:var(--av-carousel-accent);width:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
2990
|
+
}
|
|
2991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCarousel, decorators: [{
|
|
2992
|
+
type: Component,
|
|
2993
|
+
args: [{ selector: 'av-carousel', standalone: true, imports: [CommonModule, AvIcon], template: "<div class=\"av-carousel\" [ngStyle]=\"themeVars()\">\n @if (controls() && canNavigate()) {\n <button\n type=\"button\"\n (click)=\"previous()\"\n class=\"av-carousel__control av-carousel__control--left\"\n aria-label=\"Slide anterior\"\n >\n <span av-icon name=\"chevron_left\" class=\"av-carousel__control-icon\"></span>\n </button>\n\n <button\n type=\"button\"\n (click)=\"next()\"\n class=\"av-carousel__control av-carousel__control--right\"\n aria-label=\"Pr\u00F3ximo slide\"\n >\n <span av-icon name=\"chevron_right\" class=\"av-carousel__control-icon\"></span>\n </button>\n }\n\n <div\n #content\n class=\"av-carousel__content\"\n [class.av-carousel__content--scroll]=\"transition() === 'scroll'\"\n [class.av-carousel__content--fade]=\"transition() === 'fade'\"\n >\n <ng-content></ng-content>\n </div>\n\n @if (dots() && canNavigate()) {\n <div class=\"av-carousel__dots-wrap\">\n <div class=\"av-carousel__dots\">\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n (click)=\"changeTo($index)\"\n class=\"av-carousel__dot\"\n [class.av-carousel__dot--active]=\"currentItem() === $index\"\n [attr.aria-label]=\"'Ir para slide ' + ($index + 1)\"\n ></button>\n }\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;min-height:12rem;width:100%}.av-carousel{width:100%;height:100%;background:var(--av-color-surface-muted);color:var(--av-color-text);display:flex;overflow:hidden;position:relative}.av-carousel__control{align-items:center;background:var(--av-carousel-control-bg);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-full);color:var(--av-carousel-control-color);cursor:pointer;display:flex;height:2.5rem;justify-content:center;opacity:.78;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .2s ease,opacity .2s ease,transform .2s ease;width:2.5rem;z-index:2}.av-carousel__control:hover{opacity:1;transform:translateY(-50%) scale(1.04)}.av-carousel__control--left{left:.75rem}.av-carousel__control--right{right:.75rem}.av-carousel__control-icon{display:flex;font-size:1.25rem}.av-carousel__content{height:100%;position:relative;width:100%}.av-carousel__content--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.av-carousel__content--scroll ::ng-deep .av-carousel-item{scroll-snap-align:start}.av-carousel__content--fade{overflow:hidden}.av-carousel__content::-webkit-scrollbar{display:none}.av-carousel__dots-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;padding:.875rem;position:absolute;right:0;z-index:2}.av-carousel__dots{align-items:center;background:#0000002e;border-radius:var(--av-radius-full);display:flex;gap:.375rem;padding:.375rem}.av-carousel__dot{background:var(--av-carousel-dot-bg);border-radius:var(--av-radius-full);cursor:pointer;height:.625rem;transition:background-color .2s ease,width .2s ease;width:.625rem}.av-carousel__dot--active{background:var(--av-carousel-accent);width:1.5rem}\n"] }]
|
|
2994
|
+
}], ctorParameters: () => [], propDecorators: { contentContainer: [{
|
|
2995
|
+
type: ViewChild,
|
|
2996
|
+
args: ['content']
|
|
2997
|
+
}], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], transitionDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDelay", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvCarouselItem), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
2998
|
+
|
|
2999
|
+
class AvStep {
|
|
3000
|
+
title = input.required(/* @ts-ignore */
|
|
3001
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3002
|
+
icon = input('', /* @ts-ignore */
|
|
3003
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3004
|
+
hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3005
|
+
isActive = signal(false, /* @ts-ignore */
|
|
3006
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
3007
|
+
index = signal(0, /* @ts-ignore */
|
|
3008
|
+
...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
3009
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3010
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvStep, isStandalone: true, selector: "av-step", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"av-step\" [class.av-step--hidden]=\"!isActive()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-step{height:100%;width:100%}.av-step--hidden{display:none}\n"] });
|
|
3011
|
+
}
|
|
3012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStep, decorators: [{
|
|
3013
|
+
type: Component,
|
|
3014
|
+
args: [{ selector: 'av-step', standalone: true, template: "<div class=\"av-step\" [class.av-step--hidden]=\"!isActive()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-step{height:100%;width:100%}.av-step--hidden{display:none}\n"] }]
|
|
3015
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }] } });
|
|
3016
|
+
|
|
3017
|
+
class AvStepper {
|
|
3018
|
+
config = inject(VISUALS_CONFIG);
|
|
3019
|
+
themeService = inject(ThemeService);
|
|
3020
|
+
canSetStep = input(false, { ...(ngDevMode ? { debugName: "canSetStep" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3021
|
+
noContent = input(false, { ...(ngDevMode ? { debugName: "noContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3022
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
3023
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3024
|
+
currentStep = input(undefined, /* @ts-ignore */
|
|
3025
|
+
...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
|
|
3026
|
+
stepChange = output();
|
|
3027
|
+
items = contentChildren(AvStep, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
|
|
3028
|
+
currentItem = signal(0, /* @ts-ignore */
|
|
3029
|
+
...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
|
|
3030
|
+
themeVars = computed(() => {
|
|
3031
|
+
const variant = this.variant();
|
|
3032
|
+
const isDark = this.themeService.dark();
|
|
3033
|
+
return {
|
|
3034
|
+
'--av-stepper-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
3035
|
+
'--av-stepper-accent-soft': isDark
|
|
3036
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 18%, transparent)`
|
|
3037
|
+
: `var(--av-${variant}-50)`,
|
|
3038
|
+
'--av-stepper-track': 'var(--av-color-border-soft)',
|
|
3039
|
+
};
|
|
3040
|
+
}, /* @ts-ignore */
|
|
3041
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
3042
|
+
constructor() {
|
|
3043
|
+
effect(() => {
|
|
3044
|
+
const selected = this.currentStep();
|
|
3045
|
+
if (selected !== undefined) {
|
|
3046
|
+
this.currentItem.set(this.clampIndex(selected));
|
|
3047
|
+
}
|
|
3048
|
+
});
|
|
3049
|
+
effect(() => {
|
|
3050
|
+
const stepList = this.items();
|
|
3051
|
+
const currentIndex = this.clampIndex(this.currentItem());
|
|
3052
|
+
if (currentIndex !== this.currentItem()) {
|
|
3053
|
+
this.currentItem.set(currentIndex);
|
|
3054
|
+
}
|
|
3055
|
+
stepList.forEach((item, index) => {
|
|
3056
|
+
item.index.set(index);
|
|
3057
|
+
item.isActive.set(index === currentIndex);
|
|
3058
|
+
});
|
|
3059
|
+
});
|
|
3060
|
+
}
|
|
3061
|
+
isDone(index) {
|
|
3062
|
+
return this.currentItem() > index;
|
|
3063
|
+
}
|
|
3064
|
+
isActive(index) {
|
|
3065
|
+
return this.currentItem() === index;
|
|
3066
|
+
}
|
|
3067
|
+
next() {
|
|
3068
|
+
this.changeTo(this.currentItem() + 1);
|
|
3069
|
+
}
|
|
3070
|
+
previous() {
|
|
3071
|
+
this.changeTo(this.currentItem() - 1);
|
|
3072
|
+
}
|
|
3073
|
+
changeTo(index) {
|
|
3074
|
+
if (!this.canSetStep() && index !== this.currentItem() + 1 && index !== this.currentItem() - 1)
|
|
3075
|
+
return;
|
|
3076
|
+
const nextIndex = this.clampIndex(index);
|
|
3077
|
+
if (nextIndex === this.currentItem())
|
|
3078
|
+
return;
|
|
3079
|
+
this.currentItem.set(nextIndex);
|
|
3080
|
+
this.stepChange.emit(nextIndex);
|
|
3081
|
+
}
|
|
3082
|
+
clampIndex(index) {
|
|
3083
|
+
const total = this.items().length;
|
|
3084
|
+
if (total <= 0)
|
|
3085
|
+
return 0;
|
|
3086
|
+
return Math.min(Math.max(index, 0), total - 1);
|
|
3087
|
+
}
|
|
3088
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3089
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvStepper, isStandalone: true, selector: "av-stepper", inputs: { canSetStep: { classPropertyName: "canSetStep", publicName: "canSetStep", isSignal: true, isRequired: false, transformFunction: null }, noContent: { classPropertyName: "noContent", publicName: "noContent", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, queries: [{ propertyName: "items", predicate: AvStep, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"av-stepper\" [ngStyle]=\"themeVars()\">\n <div class=\"av-stepper__header\">\n @for (item of items(); track $index) {\n <div\n class=\"av-stepper__item\"\n [class.av-stepper__item--stretch]=\"$index + 1 < items().length\"\n >\n <div class=\"av-stepper__row\">\n <button\n type=\"button\"\n (click)=\"changeTo($index)\"\n class=\"av-stepper__bullet\"\n [class.av-stepper__bullet--clickable]=\"canSetStep()\"\n [class.av-stepper__bullet--active]=\"isActive($index)\"\n [class.av-stepper__bullet--done]=\"isDone($index)\"\n [class.av-stepper__bullet--error]=\"item.hasError()\"\n [disabled]=\"!canSetStep() && !isActive($index)\"\n [attr.aria-current]=\"isActive($index) ? 'step' : null\"\n >\n @if (item.hasError()) {\n <span av-icon name=\"close\" size=\"sm\"></span>\n } @else if (isDone($index)) {\n <span av-icon name=\"check\" size=\"sm\"></span>\n } @else if (item.icon()) {\n <span av-icon [name]=\"item.icon()\" size=\"sm\"></span>\n } @else {\n {{ $index + 1 }}\n }\n </button>\n\n <div\n class=\"av-stepper__line\"\n [class.av-stepper__line--hidden]=\"$index + 1 >= items().length\"\n >\n <div class=\"av-stepper__line-track\">\n <div\n class=\"av-stepper__line-fill\"\n [class.av-stepper__line-fill--complete]=\"isDone($index)\"\n [class.av-stepper__line-fill--error]=\"item.hasError()\"\n ></div>\n </div>\n </div>\n </div>\n\n <div class=\"av-stepper__caption\">\n <span>{{ item.title() }}</span>\n </div>\n </div>\n }\n </div>\n\n <div class=\"av-stepper__content\" [class.av-stepper__content--hidden]=\"noContent()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.av-stepper{color:var(--av-color-text);display:flex;flex-direction:column;gap:.75rem;height:100%;width:100%}.av-stepper__header,.av-stepper__row{align-items:center;display:flex}.av-stepper__item{display:flex;flex-direction:column;min-width:2.5rem}.av-stepper__item--stretch,.av-stepper__line{flex:1}.av-stepper__bullet{align-items:center;aspect-ratio:1;background:var(--av-color-surface);border:2px solid var(--av-color-border);border-radius:var(--av-radius-full);box-shadow:var(--av-shadow-control);color:var(--av-color-text-muted);display:flex;font-weight:700;height:2.5rem;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;z-index:1}.av-stepper__bullet--clickable{cursor:pointer}.av-stepper__bullet:disabled{cursor:default}.av-stepper__bullet--active{background:var(--av-stepper-accent-soft);border-color:var(--av-stepper-accent);color:var(--av-stepper-accent)}.av-stepper__bullet--done{background:var(--av-stepper-accent);border-color:var(--av-stepper-accent);color:var(--av-white)}.av-stepper__bullet--error{background:var(--av-color-danger-soft);border-color:var(--av-color-danger);color:var(--av-color-danger)}.av-stepper__line{height:.5rem;position:relative}.av-stepper__line--hidden,.av-stepper__content--hidden{display:none}.av-stepper__line-track{background:var(--av-stepper-track);border-radius:var(--av-radius-full);height:100%;overflow:hidden;transform:translate(-5%);width:110%}.av-stepper__line-fill{background:var(--av-stepper-accent);height:100%;transform:translate(-100%);transition:transform .2s ease,background-color .2s ease;width:100%}.av-stepper__line-fill--complete{transform:translate(0)}.av-stepper__line-fill--error{background:var(--av-color-danger)}.av-stepper__caption{color:var(--av-color-text-muted);display:flex;flex-direction:column;font-size:.875rem;font-weight:600;line-height:1.25;margin-top:.375rem}.av-stepper__content{height:100%;min-height:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
3090
|
+
}
|
|
3091
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvStepper, decorators: [{
|
|
3092
|
+
type: Component,
|
|
3093
|
+
args: [{ selector: 'av-stepper', standalone: true, imports: [CommonModule, AvIcon], template: "<div class=\"av-stepper\" [ngStyle]=\"themeVars()\">\n <div class=\"av-stepper__header\">\n @for (item of items(); track $index) {\n <div\n class=\"av-stepper__item\"\n [class.av-stepper__item--stretch]=\"$index + 1 < items().length\"\n >\n <div class=\"av-stepper__row\">\n <button\n type=\"button\"\n (click)=\"changeTo($index)\"\n class=\"av-stepper__bullet\"\n [class.av-stepper__bullet--clickable]=\"canSetStep()\"\n [class.av-stepper__bullet--active]=\"isActive($index)\"\n [class.av-stepper__bullet--done]=\"isDone($index)\"\n [class.av-stepper__bullet--error]=\"item.hasError()\"\n [disabled]=\"!canSetStep() && !isActive($index)\"\n [attr.aria-current]=\"isActive($index) ? 'step' : null\"\n >\n @if (item.hasError()) {\n <span av-icon name=\"close\" size=\"sm\"></span>\n } @else if (isDone($index)) {\n <span av-icon name=\"check\" size=\"sm\"></span>\n } @else if (item.icon()) {\n <span av-icon [name]=\"item.icon()\" size=\"sm\"></span>\n } @else {\n {{ $index + 1 }}\n }\n </button>\n\n <div\n class=\"av-stepper__line\"\n [class.av-stepper__line--hidden]=\"$index + 1 >= items().length\"\n >\n <div class=\"av-stepper__line-track\">\n <div\n class=\"av-stepper__line-fill\"\n [class.av-stepper__line-fill--complete]=\"isDone($index)\"\n [class.av-stepper__line-fill--error]=\"item.hasError()\"\n ></div>\n </div>\n </div>\n </div>\n\n <div class=\"av-stepper__caption\">\n <span>{{ item.title() }}</span>\n </div>\n </div>\n }\n </div>\n\n <div class=\"av-stepper__content\" [class.av-stepper__content--hidden]=\"noContent()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.av-stepper{color:var(--av-color-text);display:flex;flex-direction:column;gap:.75rem;height:100%;width:100%}.av-stepper__header,.av-stepper__row{align-items:center;display:flex}.av-stepper__item{display:flex;flex-direction:column;min-width:2.5rem}.av-stepper__item--stretch,.av-stepper__line{flex:1}.av-stepper__bullet{align-items:center;aspect-ratio:1;background:var(--av-color-surface);border:2px solid var(--av-color-border);border-radius:var(--av-radius-full);box-shadow:var(--av-shadow-control);color:var(--av-color-text-muted);display:flex;font-weight:700;height:2.5rem;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;z-index:1}.av-stepper__bullet--clickable{cursor:pointer}.av-stepper__bullet:disabled{cursor:default}.av-stepper__bullet--active{background:var(--av-stepper-accent-soft);border-color:var(--av-stepper-accent);color:var(--av-stepper-accent)}.av-stepper__bullet--done{background:var(--av-stepper-accent);border-color:var(--av-stepper-accent);color:var(--av-white)}.av-stepper__bullet--error{background:var(--av-color-danger-soft);border-color:var(--av-color-danger);color:var(--av-color-danger)}.av-stepper__line{height:.5rem;position:relative}.av-stepper__line--hidden,.av-stepper__content--hidden{display:none}.av-stepper__line-track{background:var(--av-stepper-track);border-radius:var(--av-radius-full);height:100%;overflow:hidden;transform:translate(-5%);width:110%}.av-stepper__line-fill{background:var(--av-stepper-accent);height:100%;transform:translate(-100%);transition:transform .2s ease,background-color .2s ease;width:100%}.av-stepper__line-fill--complete{transform:translate(0)}.av-stepper__line-fill--error{background:var(--av-color-danger)}.av-stepper__caption{color:var(--av-color-text-muted);display:flex;flex-direction:column;font-size:.875rem;font-weight:600;line-height:1.25;margin-top:.375rem}.av-stepper__content{height:100%;min-height:0;width:100%}\n"] }]
|
|
3094
|
+
}], ctorParameters: () => [], propDecorators: { canSetStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSetStep", required: false }] }], noContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "noContent", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvStep), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
3095
|
+
|
|
3096
|
+
class AvTab {
|
|
3097
|
+
title = input('', /* @ts-ignore */
|
|
3098
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3099
|
+
label = input('', /* @ts-ignore */
|
|
3100
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3101
|
+
icon = input('', /* @ts-ignore */
|
|
3102
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3103
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3104
|
+
isActive = signal(false, /* @ts-ignore */
|
|
3105
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
3106
|
+
index = signal(0, /* @ts-ignore */
|
|
3107
|
+
...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
3108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvTab, isStandalone: true, selector: "av-tab", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"av-tab\" [class.av-tab--hidden]=\"!isActive()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-tab{height:100%;width:100%}.av-tab--hidden{display:none}\n"] });
|
|
3110
|
+
}
|
|
3111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTab, decorators: [{
|
|
3112
|
+
type: Component,
|
|
3113
|
+
args: [{ selector: 'av-tab', standalone: true, template: "<div class=\"av-tab\" [class.av-tab--hidden]=\"!isActive()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:contents}.av-tab{height:100%;width:100%}.av-tab--hidden{display:none}\n"] }]
|
|
3114
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
3115
|
+
|
|
3116
|
+
class AvTabs {
|
|
3117
|
+
config = inject(VISUALS_CONFIG);
|
|
3118
|
+
themeService = inject(ThemeService);
|
|
3119
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
3120
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3121
|
+
activeTab = input(undefined, /* @ts-ignore */
|
|
3122
|
+
...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
3123
|
+
tabChange = output();
|
|
3124
|
+
activeTabChange = output();
|
|
3125
|
+
items = contentChildren(AvTab, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
|
|
3126
|
+
currentItem = signal(0, /* @ts-ignore */
|
|
3127
|
+
...(ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []));
|
|
3128
|
+
themeVars = computed(() => {
|
|
3129
|
+
const variant = this.variant();
|
|
3130
|
+
const isDark = this.themeService.dark();
|
|
3131
|
+
return {
|
|
3132
|
+
'--av-tabs-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
|
|
3133
|
+
'--av-tabs-accent-soft': isDark
|
|
3134
|
+
? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
|
|
3135
|
+
: `var(--av-${variant}-50)`,
|
|
3136
|
+
};
|
|
3137
|
+
}, /* @ts-ignore */
|
|
3138
|
+
...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
|
|
3139
|
+
constructor() {
|
|
3140
|
+
effect(() => {
|
|
3141
|
+
const selected = this.activeTab();
|
|
3142
|
+
if (selected !== undefined) {
|
|
3143
|
+
this.currentItem.set(this.clampIndex(selected));
|
|
3144
|
+
}
|
|
3145
|
+
});
|
|
3146
|
+
effect(() => {
|
|
3147
|
+
const tabList = this.items();
|
|
3148
|
+
const currentIndex = this.clampIndex(this.currentItem());
|
|
3149
|
+
if (currentIndex !== this.currentItem()) {
|
|
3150
|
+
this.currentItem.set(currentIndex);
|
|
3151
|
+
}
|
|
3152
|
+
tabList.forEach((item, index) => {
|
|
3153
|
+
item.index.set(index);
|
|
3154
|
+
item.isActive.set(index === currentIndex);
|
|
3155
|
+
});
|
|
3156
|
+
});
|
|
3157
|
+
}
|
|
3158
|
+
selectTab(index, item) {
|
|
3159
|
+
if (item?.disabled())
|
|
3160
|
+
return;
|
|
3161
|
+
const nextIndex = this.clampIndex(index);
|
|
3162
|
+
this.currentItem.set(nextIndex);
|
|
3163
|
+
this.tabChange.emit(nextIndex);
|
|
3164
|
+
this.activeTabChange.emit(nextIndex);
|
|
3165
|
+
}
|
|
3166
|
+
labelFor(item) {
|
|
3167
|
+
return item.title() || item.label();
|
|
3168
|
+
}
|
|
3169
|
+
clampIndex(index) {
|
|
3170
|
+
const total = this.items().length;
|
|
3171
|
+
if (total <= 0)
|
|
3172
|
+
return 0;
|
|
3173
|
+
return Math.min(Math.max(index, 0), total - 1);
|
|
3174
|
+
}
|
|
3175
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvTabs, isStandalone: true, selector: "av-tabs, av-tab-container", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange", activeTabChange: "activeTabChange" }, queries: [{ propertyName: "items", predicate: AvTab, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"av-tabs\" [ngStyle]=\"themeVars()\">\n <div\n class=\"av-tabs__header\"\n role=\"tablist\"\n [style.grid-template-columns]=\"'repeat(' + (items().length || 1) + ', minmax(0, 1fr))'\"\n >\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"av-tabs__tab\"\n [class.av-tabs__tab--active]=\"currentItem() === $index\"\n [class.av-tabs__tab--inactive]=\"currentItem() !== $index\"\n [class.av-tabs__tab--disabled]=\"item.disabled()\"\n [disabled]=\"item.disabled()\"\n [attr.aria-selected]=\"currentItem() === $index\"\n (click)=\"selectTab($index, item)\"\n >\n @if (item.icon()) {\n <span av-icon [name]=\"item.icon()\" size=\"lg\"></span>\n } @else {\n <span>{{$index}}</span>\n }\n <span class=\"av-tabs__label\">{{ labelFor(item) }}</span>\n </button>\n }\n </div>\n\n <div class=\"av-tabs__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.av-tabs{background:var(--av-color-surface);color:var(--av-color-text);display:flex;flex-direction:column;height:100%;width:100%}.av-tabs__header{background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);display:grid;gap:.25rem;padding:.25rem}.av-tabs__tab{align-items:center;background:transparent;border-radius:var(--av-radius-md);color:var(--av-color-text-muted);cursor:pointer;display:flex;font-weight:600;gap:.5rem;justify-content:center;min-width:0;outline:none;padding:.5rem 1rem;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}.av-tabs__tab--inactive:hover:not(.av-tabs__tab--disabled){background:var(--av-tabs-accent-soft);color:var(--av-tabs-accent)}.av-tabs__tab--active{background:var(--av-tabs-accent);box-shadow:var(--av-shadow-control);color:var(--av-white)}.av-tabs__tab:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-tabs-accent) 24%,transparent)}.av-tabs__tab--disabled{cursor:not-allowed;opacity:.48}.av-tabs__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-tabs__content{flex:1;min-height:0;overflow:auto;padding-top:.75rem;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
|
|
3177
|
+
}
|
|
3178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTabs, decorators: [{
|
|
3179
|
+
type: Component,
|
|
3180
|
+
args: [{ selector: 'av-tabs, av-tab-container', standalone: true, imports: [CommonModule, AvIcon], template: "<div class=\"av-tabs\" [ngStyle]=\"themeVars()\">\n <div\n class=\"av-tabs__header\"\n role=\"tablist\"\n [style.grid-template-columns]=\"'repeat(' + (items().length || 1) + ', minmax(0, 1fr))'\"\n >\n @for (item of items(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"av-tabs__tab\"\n [class.av-tabs__tab--active]=\"currentItem() === $index\"\n [class.av-tabs__tab--inactive]=\"currentItem() !== $index\"\n [class.av-tabs__tab--disabled]=\"item.disabled()\"\n [disabled]=\"item.disabled()\"\n [attr.aria-selected]=\"currentItem() === $index\"\n (click)=\"selectTab($index, item)\"\n >\n @if (item.icon()) {\n <span av-icon [name]=\"item.icon()\" size=\"lg\"></span>\n } @else {\n <span>{{$index}}</span>\n }\n <span class=\"av-tabs__label\">{{ labelFor(item) }}</span>\n </button>\n }\n </div>\n\n <div class=\"av-tabs__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%}.av-tabs{background:var(--av-color-surface);color:var(--av-color-text);display:flex;flex-direction:column;height:100%;width:100%}.av-tabs__header{background:var(--av-color-surface-muted);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-lg);display:grid;gap:.25rem;padding:.25rem}.av-tabs__tab{align-items:center;background:transparent;border-radius:var(--av-radius-md);color:var(--av-color-text-muted);cursor:pointer;display:flex;font-weight:600;gap:.5rem;justify-content:center;min-width:0;outline:none;padding:.5rem 1rem;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}.av-tabs__tab--inactive:hover:not(.av-tabs__tab--disabled){background:var(--av-tabs-accent-soft);color:var(--av-tabs-accent)}.av-tabs__tab--active{background:var(--av-tabs-accent);box-shadow:var(--av-shadow-control);color:var(--av-white)}.av-tabs__tab:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-tabs-accent) 24%,transparent)}.av-tabs__tab--disabled{cursor:not-allowed;opacity:.48}.av-tabs__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-tabs__content{flex:1;min-height:0;overflow:auto;padding-top:.75rem;position:relative}\n"] }]
|
|
3181
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AvTab), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
3182
|
+
|
|
3183
|
+
class AvTable {
|
|
3184
|
+
config = inject(VISUALS_CONFIG);
|
|
3185
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
3186
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3187
|
+
value = input([], /* @ts-ignore */
|
|
3188
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3189
|
+
emptyMessage = input('Nenhum registro encontrado.', /* @ts-ignore */
|
|
3190
|
+
...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
3191
|
+
paginator = input(false, /* @ts-ignore */
|
|
3192
|
+
...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
|
|
3193
|
+
pageSize = input(25, /* @ts-ignore */
|
|
3194
|
+
...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
3195
|
+
pageIndex = input(0, /* @ts-ignore */
|
|
3196
|
+
...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
3197
|
+
totalRecords = input(0, /* @ts-ignore */
|
|
3198
|
+
...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
|
|
3199
|
+
rowsPerPageOptions = input([], /* @ts-ignore */
|
|
3200
|
+
...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
|
|
3201
|
+
currentPageLabel = input('Página {currentPage} de {totalPages} · {totalRecords} itens', /* @ts-ignore */
|
|
3202
|
+
...(ngDevMode ? [{ debugName: "currentPageLabel" }] : /* istanbul ignore next */ []));
|
|
3203
|
+
sortField = input('', /* @ts-ignore */
|
|
3204
|
+
...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
|
|
3205
|
+
sortOrder = input('asc', /* @ts-ignore */
|
|
3206
|
+
...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
|
|
3207
|
+
onSort = output();
|
|
3208
|
+
onPage = output();
|
|
3209
|
+
headerTemplate = contentChild('header', /* @ts-ignore */
|
|
3210
|
+
...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
|
|
3211
|
+
bodyTemplate = contentChild('body', /* @ts-ignore */
|
|
3212
|
+
...(ngDevMode ? [{ debugName: "bodyTemplate" }] : /* istanbul ignore next */ []));
|
|
3213
|
+
totalPages = computed(() => {
|
|
3214
|
+
const size = this.pageSize();
|
|
3215
|
+
const total = this.totalRecords();
|
|
3216
|
+
if (!size || size <= 0 || total <= 0)
|
|
3217
|
+
return 0;
|
|
3218
|
+
return Math.ceil(total / size);
|
|
3219
|
+
}, /* @ts-ignore */
|
|
3220
|
+
...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
3221
|
+
pageSizeOptions = computed(() => {
|
|
3222
|
+
return this.rowsPerPageOptions().map((option) => ({
|
|
3223
|
+
label: String(option),
|
|
3224
|
+
value: option,
|
|
3225
|
+
}));
|
|
3226
|
+
}, /* @ts-ignore */
|
|
3227
|
+
...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
3228
|
+
formattedPageLabel = computed(() => {
|
|
3229
|
+
const totalPages = this.totalPages();
|
|
3230
|
+
const currentPage = totalPages === 0
|
|
3231
|
+
? 0
|
|
3232
|
+
: Math.min(Math.max(this.pageIndex(), 0), totalPages - 1) + 1;
|
|
3233
|
+
return this.currentPageLabel()
|
|
3234
|
+
.replace('{currentPage}', String(currentPage))
|
|
3235
|
+
.replace('{totalPages}', String(totalPages))
|
|
3236
|
+
.replace('{totalRecords}', String(this.totalRecords()));
|
|
3237
|
+
}, /* @ts-ignore */
|
|
3238
|
+
...(ngDevMode ? [{ debugName: "formattedPageLabel" }] : /* istanbul ignore next */ []));
|
|
3239
|
+
sort(field) {
|
|
3240
|
+
const newOrder = this.sortField() === field && this.sortOrder() === 'asc'
|
|
3241
|
+
? 'desc'
|
|
3242
|
+
: 'asc';
|
|
3243
|
+
this.onSort.emit({ field, order: newOrder });
|
|
3244
|
+
}
|
|
3245
|
+
changePage(newPage) {
|
|
3246
|
+
if (newPage < 0 || newPage >= this.totalPages())
|
|
3247
|
+
return;
|
|
3248
|
+
this.onPage.emit({ page: newPage, pageSize: this.pageSize() });
|
|
3249
|
+
}
|
|
3250
|
+
changePageSize(value) {
|
|
3251
|
+
const newSize = Number(value);
|
|
3252
|
+
if (!Number.isFinite(newSize) || newSize <= 0)
|
|
3253
|
+
return;
|
|
3254
|
+
this.onPage.emit({ page: 0, pageSize: newSize });
|
|
3255
|
+
}
|
|
3256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvTable, isStandalone: true, selector: "av-table", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPageLabel: { classPropertyName: "currentPageLabel", publicName: "currentPageLabel", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onPage: "onPage" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"av-table\">\n <div class=\"av-table__scroll\">\n <table class=\"av-table__table\">\n @if (headerTemplate()) {\n <thead class=\"av-table__header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()!\"></ng-container>\n </thead>\n }\n\n <tbody class=\"av-table__body\">\n @if (bodyTemplate()) {\n @for (item of value(); track $index) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate()!; context: { $implicit: item, index: $index }\"></ng-container>\n } @empty {\n <tr>\n <td colspan=\"100%\" class=\"av-table__empty\">\n {{ emptyMessage() }}\n </td>\n </tr>\n }\n } @else {\n <tr>\n <td colspan=\"100%\" class=\"av-table__empty\">\n {{ emptyMessage() }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (paginator()) {\n <div class=\"av-table__pagination\">\n @if (currentPageLabel() !== '') {\n <div class=\"av-table__page-label\">\n <span>{{ formattedPageLabel() }}</span>\n </div>\n }\n\n <div class=\"av-table__pagination-controls\">\n @if (rowsPerPageOptions().length > 0) {\n <div class=\"av-table__page-size\">\n <span>Itens por p\u00E1gina:</span>\n <av-select\n [data]=\"pageSizeOptions()\"\n [searchable]=\"false\"\n [value]=\"pageSize()\"\n [variant]=\"variant()\"\n (valueChange)=\"changePageSize($event)\"\n />\n </div>\n }\n\n <av-paginator\n [variant]=\"variant()\"\n [pageIndex]=\"pageIndex()\"\n [totalPages]=\"totalPages()\"\n (pageChanged)=\"changePage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.av-table{background:var(--av-color-surface);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-xl);box-shadow:var(--av-shadow-control);color:var(--av-color-text);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.av-table__header{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);font-size:.75rem;font-weight:700;text-transform:uppercase}.av-table__header tr{border-bottom:1px solid var(--av-color-border-soft)}.av-table__scroll{flex:1;min-height:0;overflow:auto}.av-table__table{border-collapse:collapse;color:var(--av-color-text);font-size:.875rem;text-align:left;width:100%}.av-table__body tr+tr{border-top:1px solid var(--av-color-border-soft)}.av-table__empty{color:var(--av-color-text-subtle);padding:2rem 1.5rem;text-align:center}.av-table__pagination{align-items:center;background:var(--av-color-surface-muted);border-top:1px solid var(--av-color-border-soft);color:var(--av-color-text-muted);display:flex;flex-wrap:wrap;font-size:.75rem;gap:.75rem;justify-content:space-between;padding:.75rem 1rem}.av-table__pagination-controls,.av-table__page-size{align-items:center;display:flex}.av-table__pagination-controls{flex:1;gap:1rem;justify-content:flex-end;min-width:18rem}.av-table__page-size{gap:.5rem;white-space:nowrap}.av-table__page-size av-select{min-width:5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvSelect, selector: "av-select", inputs: ["data", "placeholder", "labelKey", "labelFormat", "valueKey", "label", "icon", "searchPlaceholder", "searchable", "loading", "loadingIcon", "variant", "rounded", "errorMessage", "value", "onSearch"], outputs: ["valueChange"] }, { kind: "component", type: AvPaginator, selector: "av-paginator", inputs: ["variant", "pageIndex", "totalPages"], outputs: ["pageChanged"] }] });
|
|
3258
|
+
}
|
|
3259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvTable, decorators: [{
|
|
3260
|
+
type: Component,
|
|
3261
|
+
args: [{ selector: 'av-table', standalone: true, imports: [CommonModule, AvSelect, AvPaginator], template: "<div class=\"av-table\">\n <div class=\"av-table__scroll\">\n <table class=\"av-table__table\">\n @if (headerTemplate()) {\n <thead class=\"av-table__header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()!\"></ng-container>\n </thead>\n }\n\n <tbody class=\"av-table__body\">\n @if (bodyTemplate()) {\n @for (item of value(); track $index) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate()!; context: { $implicit: item, index: $index }\"></ng-container>\n } @empty {\n <tr>\n <td colspan=\"100%\" class=\"av-table__empty\">\n {{ emptyMessage() }}\n </td>\n </tr>\n }\n } @else {\n <tr>\n <td colspan=\"100%\" class=\"av-table__empty\">\n {{ emptyMessage() }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n @if (paginator()) {\n <div class=\"av-table__pagination\">\n @if (currentPageLabel() !== '') {\n <div class=\"av-table__page-label\">\n <span>{{ formattedPageLabel() }}</span>\n </div>\n }\n\n <div class=\"av-table__pagination-controls\">\n @if (rowsPerPageOptions().length > 0) {\n <div class=\"av-table__page-size\">\n <span>Itens por p\u00E1gina:</span>\n <av-select\n [data]=\"pageSizeOptions()\"\n [searchable]=\"false\"\n [value]=\"pageSize()\"\n [variant]=\"variant()\"\n (valueChange)=\"changePageSize($event)\"\n />\n </div>\n }\n\n <av-paginator\n [variant]=\"variant()\"\n [pageIndex]=\"pageIndex()\"\n [totalPages]=\"totalPages()\"\n (pageChanged)=\"changePage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.av-table{background:var(--av-color-surface);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-xl);box-shadow:var(--av-shadow-control);color:var(--av-color-text);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.av-table__header{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);font-size:.75rem;font-weight:700;text-transform:uppercase}.av-table__header tr{border-bottom:1px solid var(--av-color-border-soft)}.av-table__scroll{flex:1;min-height:0;overflow:auto}.av-table__table{border-collapse:collapse;color:var(--av-color-text);font-size:.875rem;text-align:left;width:100%}.av-table__body tr+tr{border-top:1px solid var(--av-color-border-soft)}.av-table__empty{color:var(--av-color-text-subtle);padding:2rem 1.5rem;text-align:center}.av-table__pagination{align-items:center;background:var(--av-color-surface-muted);border-top:1px solid var(--av-color-border-soft);color:var(--av-color-text-muted);display:flex;flex-wrap:wrap;font-size:.75rem;gap:.75rem;justify-content:space-between;padding:.75rem 1rem}.av-table__pagination-controls,.av-table__page-size{align-items:center;display:flex}.av-table__pagination-controls{flex:1;gap:1rem;justify-content:flex-end;min-width:18rem}.av-table__page-size{gap:.5rem;white-space:nowrap}.av-table__page-size av-select{min-width:5rem}\n"] }]
|
|
3262
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], currentPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageLabel", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onPage: [{ type: i0.Output, args: ["onPage"] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }] } });
|
|
3263
|
+
|
|
3264
|
+
class AvBadge {
|
|
3265
|
+
config = inject(VISUALS_CONFIG);
|
|
3266
|
+
variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
|
|
3267
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3268
|
+
get lightBackground() {
|
|
3269
|
+
return `var(--av-${this.variant()}-500)`;
|
|
3270
|
+
}
|
|
3271
|
+
get darkBackground() {
|
|
3272
|
+
return `var(--av-${this.variant()}-600)`;
|
|
3273
|
+
}
|
|
3274
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3275
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvBadge, isStandalone: true, selector: "span[av-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--av-badge-light-bg": "this.lightBackground", "style.--av-badge-dark-bg": "this.darkBackground" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;overflow:hidden;border-radius:9999px;min-height:1.25rem;min-width:1.25rem;padding:2px 8px;font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;background-color:var(--av-badge-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease}:host-context([data-av-theme=\"dark\"]){background-color:var(--av-badge-dark-bg)}\n"] });
|
|
3276
|
+
}
|
|
3277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvBadge, decorators: [{
|
|
3278
|
+
type: Component,
|
|
3279
|
+
args: [{ selector: 'span[av-badge]', template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;overflow:hidden;border-radius:9999px;min-height:1.25rem;min-width:1.25rem;padding:2px 8px;font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap;background-color:var(--av-badge-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease}:host-context([data-av-theme=\"dark\"]){background-color:var(--av-badge-dark-bg)}\n"] }]
|
|
3280
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], lightBackground: [{
|
|
3281
|
+
type: HostBinding,
|
|
3282
|
+
args: ['style.--av-badge-light-bg']
|
|
3283
|
+
}], darkBackground: [{
|
|
3284
|
+
type: HostBinding,
|
|
3285
|
+
args: ['style.--av-badge-dark-bg']
|
|
3286
|
+
}] } });
|
|
3287
|
+
|
|
3288
|
+
/**
|
|
3289
|
+
* Generated bundle index. Do not edit.
|
|
3290
|
+
*/
|
|
3291
|
+
|
|
3292
|
+
export { AvBadge, AvButton, AvCarousel, AvCarouselItem, AvCheckbox, AvCluster, AvCurrencyInput, AvDateTimePicker, AvDivider, AvDropdown, AvFileUpload, AvForm, AvGrid, AvIcon, AvIconRegistry, AvInline, AvInput, AvMultiSelect, AvNavLink, AvPaginator, AvProgressBar, AvProgressBarCircle, AvSelect, AvSidenav, AvSlider, AvStack, AvStep, AvStepper, AvSwitch, AvTab, AvTable, AvTabs, AvText, AvTextArea, AvTooltip, ThemeService, VISUALS_CONFIG, provideAngularVisuals };
|
|
3293
|
+
//# sourceMappingURL=angular-visuals.mjs.map
|