@allsorter/ui-components 0.0.396 → 0.0.398

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 (7) hide show
  1. package/fesm2022/allsorter-ui-components.mjs +11 -6
  2. package/fesm2022/allsorter-ui-components.mjs.map +1 -1
  3. package/lib/ai-apply-bar/ai-apply-bar.component.d.ts +2 -1
  4. package/package.json +1 -1
  5. package/src/lib/ai-apply-bar/ai-apply-bar.component.html +10 -6
  6. package/src/lib/ai-wrapper/ai-wrapper.component.scss +12 -0
  7. package/src/lib/custom-editor/custom-editor.component.scss +6 -6
package/lib/ai-apply-bar/ai-apply-bar.component.d.ts CHANGED
@@ -30,9 +30,10 @@ export declare class AiApplyBarComponent {
30
30
  /** Emitted when the chevron icon button is clicked */
31
31
  chevronClick: EventEmitter<void>;
32
32
  isVisible: boolean;
33
+ toggled: boolean;
33
34
  onValueChange(v: string): void;
34
35
  toggleBar(): void;
35
36
  onClose(): void;
36
37
  static ɵfac: i0.ɵɵFactoryDeclaration<AiApplyBarComponent, never>;
37
- static ɵcmp: i0.ɵɵComponentDeclaration<AiApplyBarComponent, "al-ai-apply-bar", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "showChevronButton": { "alias": "showChevronButton"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "iconOutlined": { "alias": "iconOutlined"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "closeButtonTooltipPosition": { "alias": "closeButtonTooltipPosition"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; }, { "valueChange": "valueChange"; "applyClick": "applyClick"; "closeClick": "closeClick"; "chevronClick": "chevronClick"; }, never, never, true, never>;
38
+ static ɵcmp: i0.ɵɵComponentDeclaration<AiApplyBarComponent, "al-ai-apply-bar", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "showChevronButton": { "alias": "showChevronButton"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "iconOutlined": { "alias": "iconOutlined"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "closeButtonTooltipPosition": { "alias": "closeButtonTooltipPosition"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "toggled": { "alias": "toggled"; "required": false; }; }, { "valueChange": "valueChange"; "applyClick": "applyClick"; "closeClick": "closeClick"; "chevronClick": "chevronClick"; }, never, never, true, never>;
38
39
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@allsorter/ui-components",
3
- "version": "0.0.396",
3
+ "version": "0.0.398",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^18.0.0",
6
6
  "@angular/core": "^18.0.0",
package/src/lib/ai-apply-bar/ai-apply-bar.component.html CHANGED
@@ -3,18 +3,22 @@
3
3
  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->
4
4
  <div class="ai-toggle-button">
5
5
  <!-- AI Trigger Button - Show when bar is hidden -->
6
- <al-button *ngIf="!isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'" [iconOutlined]="true"
7
- [color]="'gradient'" [size]="'base'" aria-label="AI Trigger" (onClick)="toggleBar()">
6
+ <al-button *ngIf="toggled && !isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'"
7
+ [iconOutlined]="true" [color]="'gradient'" [size]="'base'" aria-label="AI Trigger" (onClick)="toggleBar()">
8
8
  </al-button>
9
9
 
10
10
  <!-- Close Button - Show when bar is visible -->
11
- <al-button *ngIf="isVisible && showClose" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
11
+ <al-button *ngIf="toggled && isVisible && showClose" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
12
12
  [color]="'grey'" [size]="'base'" aria-label="Close" (onClick)="toggleBar()">
13
13
  </al-button>
14
+
15
+ <al-button *ngIf="!toggled" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
16
+ [color]="'grey'" [size]="'base'" aria-label="Close" (onClick)="onClose()">
17
+ </al-button>
14
18
  </div>
15
19
 
16
20
  <!-- AI Apply Bar - Expands to the LEFT of button -->
17
- <div class="ai-apply-wrap" [class.visible]="isVisible" [class.hidden]="!isVisible">
21
+ <div class="ai-apply-wrap" [class.visible]="isVisible || !toggled" [class.hidden]="!isVisible && toggled">
18
22
  <div class="ai-apply-rail">
19
23
  <div class="ai-apply-row">
20
24
  <div class="ai-apply-input">
@@ -26,8 +30,8 @@
26
30
  </div>
27
31
 
28
32
  <div class="ai-apply-button">
29
- <al-button *ngIf="showApplyButton" [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'base'"
30
- [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
33
+ <al-button *ngIf="showApplyButton" [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'"
34
+ [size]="'base'" [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
31
35
  </al-button>
32
36
  <al-icon-button *ngIf="showChevronButton" icon="chevron_right" [iconOutlined]="true"
33
37
  [customColour]="'#ffffff'" [size]="'l'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
package/src/lib/ai-wrapper/ai-wrapper.component.scss CHANGED
@@ -370,3 +370,15 @@
370
370
  :host ::ng-deep .mat-mdc-select-arrow {
371
371
  display: none !important;
372
372
  }
373
+
374
+ /* AI wrapper dropdown overlay pane width - target autocomplete panels */
375
+ :host ::ng-deep .mat-mdc-autocomplete-panel {
376
+ width: 253px !important;
377
+ min-width: 253px !important;
378
+ }
379
+
380
+ /* Also target the overlay pane for autocomplete dropdowns */
381
+ ::ng-deep .cdk-overlay-pane:has(.mat-mdc-autocomplete-panel) {
382
+ width: 253px !important;
383
+ min-width: 253px !important;
384
+ }
package/src/lib/custom-editor/custom-editor.component.scss CHANGED
@@ -448,13 +448,13 @@
448
448
  border: 1px solid #ccc;
449
449
  }
450
450
 
451
- .cdk-overlay-pane {
452
- width: fit-content !important;
453
- min-width: fit-content !important;
454
- transform: translate(0px) !important;
455
- }
451
+ // .cdk-overlay-pane {
452
+ // width: fit-content !important;
453
+ // min-width: fit-content !important;
454
+ // transform: translate(0px) !important;
455
+ // }
456
456
 
457
457
  .mat-select-panel {
458
458
  width: fit-content !important;
459
459
  min-width: fit-content !important;
460
- }
460
+ }