@fylib/adapter-angular 0.1.0 → 0.2.0

package/dist/components/select.component.js

@@ -264,129 +264,129 @@ FySelectComponent = __decorate([
         selector: 'fy-select',
         standalone: true,
         imports: [CommonModule, FyIconComponent],
-        template: `
-    <div
-      class="fy-select"
-      [class.fy-select--open]="open"
-      [class.fy-select--sm]="size === 'sm'"
-      [class.fy-select--lg]="size === 'lg'"
-      [class.fy-select--status-success]="status === 'success'"
-      [class.fy-select--status-error]="status === 'error'"
-      [class]="animationClassSuffix"
-    >
-      <div
-        class="fy-select__control"
-        tabindex="0"
-        (click)="toggleOpen()"
-        (focus)="onFocusHandler()"
-        (blur)="onBlurHandler()"
-      >
-        <span class="fy-select__value">
-          {{ displayValue || placeholder }}
-        </span>
-
-        @if (iconRightName) {
-          <fy-icon class="fy-select__icon" [name]="iconRightName"></fy-icon>
-        }
-      </div>
-
-      @if (open) {
-        <div class="fy-select__dropdown" [class]="dropdownAnimClass">
-          @if (searchable) {
-            <input
-              class="fy-select__search"
-              type="text"
-              placeholder="Buscar..."
-              (input)="onSearch($event)"
-            />
-          }
-
-          @for (opt of filteredOptions; track opt.value) {
-            <div
-              class="fy-select__option"
-              [class.fy-select__option--selected]="isSelected(opt.value)"
-              (click)="selectOption(opt.value)"
-            >
-              @if (showCheckbox) {
-                <input
-                  type="checkbox"
-                  [checked]="isSelected(opt.value)"
-                  (click)="$event.stopPropagation()"
-                  (change)="onCheckboxChange($event, opt.value)"
-                />
-              }
-              {{ opt.label }}
-            </div>
-          }
-        </div>
-      }
-    </div>
+        template: `
+    <div
+      class="fy-select"
+      [class.fy-select--open]="open"
+      [class.fy-select--sm]="size === 'sm'"
+      [class.fy-select--lg]="size === 'lg'"
+      [class.fy-select--status-success]="status === 'success'"
+      [class.fy-select--status-error]="status === 'error'"
+      [class]="animationClassSuffix"
+    >
+      <div
+        class="fy-select__control"
+        tabindex="0"
+        (click)="toggleOpen()"
+        (focus)="onFocusHandler()"
+        (blur)="onBlurHandler()"
+      >
+        <span class="fy-select__value">
+          {{ displayValue || placeholder }}
+        </span>
+
+        @if (iconRightName) {
+          <fy-icon class="fy-select__icon" [name]="iconRightName"></fy-icon>
+        }
+      </div>
+
+      @if (open) {
+        <div class="fy-select__dropdown" [class]="dropdownAnimClass">
+          @if (searchable) {
+            <input
+              class="fy-select__search"
+              type="text"
+              placeholder="Buscar..."
+              (input)="onSearch($event)"
+            />
+          }
+
+          @for (opt of filteredOptions; track opt.value) {
+            <div
+              class="fy-select__option"
+              [class.fy-select__option--selected]="isSelected(opt.value)"
+              (click)="selectOption(opt.value)"
+            >
+              @if (showCheckbox) {
+                <input
+                  type="checkbox"
+                  [checked]="isSelected(opt.value)"
+                  (click)="$event.stopPropagation()"
+                  (change)="onCheckboxChange($event, opt.value)"
+                />
+              }
+              {{ opt.label }}
+            </div>
+          }
+        </div>
+      }
+    </div>
   `,
-        styles: [`
-    .fy-select {
-      position: relative;
-      width: 100%;
-      font: inherit;
-      display: inline-flex;
-      align-items: center;
-      border: var(--fy-effects-select-borderWidth, 1px) solid var(--fy-effects-select-borderColor, rgba(0,0,0,.15));
-      background: var(--fy-effects-select-background, #fff);
-      border-radius: var(--fy-effects-select-borderRadius, var(--fy-borderRadius-md));
-      box-shadow: var(--fy-effects-select-shadow, none);
-      min-height: 36px;
-      padding: 0 10px;
-      gap: 6px;
-      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
-    }
-
-    .fy-select__control {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      cursor: pointer;
-    }
-
-    .fy-select__dropdown {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: calc(100% + 4px);
-      background: var(--fy-effects-select-background, #fff);
-      border: 1px solid var(--fy-effects-select-borderColor, rgba(0,0,0,.1));
-      border-radius: var(--fy-borderRadius-md);
-      box-shadow: var(--fy-effects-select-shadow, none);
-      max-height: 240px;
-      overflow-y: auto;
-      z-index: 1000;
-    }
-
-    .fy-select__option {
-      padding: 6px 10px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .fy-select__option--selected {
-      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
-    }
-
-    .fy-select__search {
-      width: 100%;
-      padding: 6px;
-      border: none;
-      outline: none;
-      border-bottom: 1px solid rgba(0,0,0,.1);
-      background-color: transparent;
-    }
-    .fy-select__icon {
-      transition: transform .2s ease;
-    }
-    .fy-select.fy-select--open .fy-select__icon {
-      transform: rotate(180deg);
-    }
+        styles: [`
+    .fy-select {
+      position: relative;
+      width: 100%;
+      font: inherit;
+      display: inline-flex;
+      align-items: center;
+      border: var(--fy-effects-select-borderWidth, 1px) solid var(--fy-effects-select-borderColor, rgba(0,0,0,.15));
+      background: var(--fy-effects-select-background, #fff);
+      border-radius: var(--fy-effects-select-borderRadius, var(--fy-borderRadius-md));
+      box-shadow: var(--fy-effects-select-shadow, none);
+      min-height: 36px;
+      padding: 0 10px;
+      gap: 6px;
+      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
+    }
+
+    .fy-select__control {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .fy-select__dropdown {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(100% + 4px);
+      background: var(--fy-effects-select-background, #fff);
+      border: 1px solid var(--fy-effects-select-borderColor, rgba(0,0,0,.1));
+      border-radius: var(--fy-borderRadius-md);
+      box-shadow: var(--fy-effects-select-shadow, none);
+      max-height: 240px;
+      overflow-y: auto;
+      z-index: 1000;
+    }
+
+    .fy-select__option {
+      padding: 6px 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .fy-select__option--selected {
+      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
+    }
+
+    .fy-select__search {
+      width: 100%;
+      padding: 6px;
+      border: none;
+      outline: none;
+      border-bottom: 1px solid rgba(0,0,0,.1);
+      background-color: transparent;
+    }
+    .fy-select__icon {
+      transition: transform .2s ease;
+    }
+    .fy-select.fy-select--open .fy-select__icon {
+      transform: rotate(180deg);
+    }
   `],
         encapsulation: ViewEncapsulation.None
     }),