@allsorter/ui-components 0.0.404 → 0.0.408

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/fesm2022/allsorter-ui-components.mjs +81 -8
  2. package/fesm2022/allsorter-ui-components.mjs.map +1 -1
  3. package/lib/input/input.component.d.ts +3 -2
  4. package/lib/newresumeheader/newresumeheader.component.d.ts +2 -1
  5. package/lib/utils/animations.d.ts +22 -0
  6. package/package.json +1 -1
  7. package/src/lib/input/input.component.html +12 -5
  8. package/src/lib/newresumeheader/newresumeheader.component.html +7 -5
package/lib/input/input.component.d.ts CHANGED
@@ -24,12 +24,13 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
24
24
  searchfilter: boolean;
25
25
  multipleSelect: boolean;
26
26
  options: string[];
27
+ showDropdownFooter: boolean;
27
28
  /** Dropdown footer option configuration */
28
29
  dropdownFooterOption: {
29
30
  label: string;
30
31
  value: string;
31
32
  icon?: string;
32
- showFooter?: boolean;
33
+ iconName?: string;
33
34
  onClick?: () => void;
34
35
  dataTestId?: string;
35
36
  } | undefined;
@@ -93,5 +94,5 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
93
94
  getSizeClass(): string;
94
95
  getCategoryClass(): string;
95
96
  static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
96
- static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "al-input", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "hasDropDown": { "alias": "hasDropDown"; "required": false; }; "dropDown": { "alias": "dropDown"; "required": false; }; "searchfilter": { "alias": "searchfilter"; "required": false; }; "multipleSelect": { "alias": "multipleSelect"; "required": false; }; "options": { "alias": "options"; "required": false; }; "dropdownFooterOption": { "alias": "dropdownFooterOption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "types": { "alias": "types"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "matDatepicker": { "alias": "matDatepicker"; "required": false; }; "dateType": { "alias": "dateType"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; "onColorChange": "onColorChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; "footerOptionClick": "footerOptionClick"; }, never, never, true, never>;
97
+ static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "al-input", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "hasDropDown": { "alias": "hasDropDown"; "required": false; }; "dropDown": { "alias": "dropDown"; "required": false; }; "searchfilter": { "alias": "searchfilter"; "required": false; }; "multipleSelect": { "alias": "multipleSelect"; "required": false; }; "options": { "alias": "options"; "required": false; }; "showDropdownFooter": { "alias": "showDropdownFooter"; "required": false; }; "dropdownFooterOption": { "alias": "dropdownFooterOption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "types": { "alias": "types"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "matDatepicker": { "alias": "matDatepicker"; "required": false; }; "dateType": { "alias": "dateType"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; "onColorChange": "onColorChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; "footerOptionClick": "footerOptionClick"; }, never, never, true, never>;
97
98
  }
package/lib/newresumeheader/newresumeheader.component.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
9
9
  private iconRegistry;
10
10
  title: string;
11
11
  showHeaderCheckbox: boolean;
12
+ showEyeIcon: boolean;
12
13
  headerCheckboxChecked: boolean;
13
14
  configEyeToggle: EyeIconConfig[];
14
15
  hiddenSection: {
@@ -162,5 +163,5 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
162
163
  ngAfterViewInit(): void;
163
164
  ngOnDestroy(): void;
164
165
  static ɵfac: i0.ɵɵFactoryDeclaration<NewResumeHeaderComponent, never>;
165
- static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "required": false; }; "showBottomBorder": { "alias": "showBottomBorder"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
166
+ static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "showEyeIcon": { "alias": "showEyeIcon"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "required": false; }; "showBottomBorder": { "alias": "showBottomBorder"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
166
167
  }
package/lib/utils/animations.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { AnimationTriggerMetadata } from '@angular/animations';
2
+ /**
3
+ * Expand and collapse animation for accordion content
4
+ * Animates height from 0 to auto with overflow handling
5
+ * Similar to jQuery animate({ height: auto }) behavior
6
+ */
7
+ export declare const expandCollapse: AnimationTriggerMetadata;
8
+ /**
9
+ * Fade animation for showing/hiding content with opacity changes
10
+ * Used when toggling visibility via eye icon
11
+ */
12
+ export declare const fadeInOut: AnimationTriggerMetadata;
13
+ /**
14
+ * Simple slide down animation (height only, no opacity)
15
+ * Alternative animation for simpler expand/collapse
16
+ */
17
+ export declare const slideDown: AnimationTriggerMetadata;
18
+ /**
19
+ * Fade only animation (opacity only, no height changes)
20
+ * Used for subtle show/hide effects
21
+ */
22
+ export declare const fadeOnly: AnimationTriggerMetadata;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@allsorter/ui-components",
3
- "version": "0.0.404",
3
+ "version": "0.0.408",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^18.0.0",
6
6
  "@angular/core": "^18.0.0",
package/src/lib/input/input.component.html CHANGED
@@ -44,15 +44,22 @@
44
44
  <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
45
45
 
46
46
  <!-- Footer option -->
47
- <span *ngIf="dropdownFooterOption?.showFooter">
47
+ <span *ngIf="showDropdownFooter">
48
48
  <hr class="dropdown-footer-separator m-0">
49
49
  <mat-option [value]="dropdownFooterOption.value" (click)="onFooterOptionClick($event)"
50
50
  (keydown)="onFooterOptionClick($event)"
51
- [attr.data-test-id]="dropdownFooterOption.dataTestId || 'option-dropdown-footer'">
51
+ [attr.data-test-id]="dropdownFooterOption.dataTestId || 'option-dropdown-footer'"
52
+ class="dropdown-footer-option">
52
53
  <span style="display: flex; align-items: center; gap: 8px;">
53
- <img *ngIf="dropdownFooterOption.icon" [src]="dropdownFooterOption.icon"
54
+ <!-- Image icon -->
55
+ <img *ngIf="dropdownFooterOption.icon && !dropdownFooterOption.iconName" [src]="dropdownFooterOption.icon"
54
56
  style="width: 20px; height: 20px;" [alt]="dropdownFooterOption.label" />
55
- <span>{{ dropdownFooterOption.label }}</span>
57
+ <!-- Material icon -->
58
+ <mat-icon *ngIf="dropdownFooterOption.iconName"
59
+ style="font-size: 20px; width: 20px; height: 20px; color: #5473E8; margin-right: 0;">
60
+ {{ dropdownFooterOption.iconName }}
61
+ </mat-icon>
62
+ <span style="color: #5473E8;">{{ dropdownFooterOption.label }}</span>
56
63
  </span>
57
64
  </mat-option>
58
65
  </span>
@@ -97,4 +104,4 @@
97
104
 
98
105
  <mat-error *ngIf="false && helperText">{{ helperText }}</mat-error>
99
106
  <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
100
- </mat-form-field>
107
+ </mat-form-field>
package/src/lib/newresumeheader/newresumeheader.component.html CHANGED
@@ -61,8 +61,8 @@
61
61
  </div>
62
62
  </div>
63
63
  <div right><ng-content select="[header-center-right]"></ng-content>
64
- <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
65
- *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
64
+ <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container
65
+ *ngIf="showEyeIcon && configEyeToggle && configEyeToggle.length > 0"><ng-container
66
66
  *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
67
67
  *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
68
68
  </div>
@@ -90,8 +90,8 @@
90
90
  <div class="hidden-write-sb" [ngClass]="{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }">Section hidden</div>
91
91
  </div>
92
92
  <div right><ng-content select="[header-center-right]"></ng-content>
93
- <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
94
- *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
93
+ <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container
94
+ *ngIf="showEyeIcon && configEyeToggle && configEyeToggle.length > 0"><ng-container
95
95
  *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
96
96
  *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
97
97
  </div>
@@ -103,7 +103,9 @@
103
103
  </div>
104
104
  <!-- Accordion body with expand/collapse animation -->
105
105
  <div class="example-accordion-item-body-wrapper">
106
- <div class="example-accordion-item-body" *ngIf="accordionItem.expanded && !isSectionHidden">
106
+ <div class="example-accordion-item-body"
107
+ *ngIf="accordionItem.expanded && !isSectionHidden"
108
+ [@expandCollapse]>
107
109
  <!-- Pop-out Panel -->
108
110
  <div *ngIf="shouldShowPopOut" #popOutPanel class="pop-out-panel"
109
111
  [ngClass]="{'pop-out-narrow': isPopOutNarrow}">