Enhancement: open color picker on swatch button click (#10994)

.github/workflows/cleanup-tags.yml

@@ -6,10 +6,9 @@
 # This workflow will not trigger runs on forked repos.
 name: Cleanup Image Tags
 on:
-  delete:
+  workflow_dispatch:
-  push:
+  schedule:
-    paths:
+    - cron: '0 0 * * 0'
-      - ".github/workflows/cleanup-tags.yml"
 concurrency:
   group: registry-tags-cleanup
   cancel-in-progress: false

docs/usage.md

@@ -414,7 +414,7 @@ fields and permissions, which will be merged.
 
 #### Types {#workflow-trigger-types}
 
-Currently, there are three events that correspond to workflow trigger 'types':
+Currently, there are four events that correspond to workflow trigger 'types':
 
 1. **Consumption Started**: _before_ a document is consumed, so events can include filters by source (mail, consumption
    folder or API), file path, file name, mail rule
@@ -427,7 +427,7 @@ Currently, there are three events that correspond to workflow trigger 'types':
    added, created, updated date or you can specify a (date) custom field. You can also specify a day offset from the date (positive
    offsets will trigger after the date, negative offsets will trigger before).
 
-The following flow diagram illustrates the three document trigger types:
+The following flow diagram illustrates the four document trigger types:
 
 ```mermaid
 flowchart TD

src-ui/src/app/components/common/input/color/color.component.html

@@ -1,19 +1,18 @@
 <div class="mb-3">
   @if (title) {
-    <label [for]="inputId">{{title}}</label>
+    <label class="form-label" [for]="inputId">{{title}}</label>
   }
 
   <div class="input-group" [class.is-invalid]="error">
-    <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
+    <button type="button" class="input-group-text" [style.background-color]="value" (click)="colorPicker.toggle()">&nbsp;&nbsp;&nbsp;</button>
 
     <ng-template #popContent>
       <div style="min-width: 200px;" class="pb-3">
         <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
       </div>
-
     </ng-template>
 
-    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
+    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
 
     <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
       <i-bs name="dice5"></i-bs>

src-ui/src/app/components/common/input/color/color.component.spec.ts

@@ -42,8 +42,8 @@ describe('ColorComponent', () => {
   })
 
   it('should set swatch color', () => {
-    const swatch: HTMLSpanElement = fixture.nativeElement.querySelector(
+    const swatch: HTMLButtonElement = fixture.nativeElement.querySelector(
-      'span.input-group-text'
+      'button.input-group-text'
     )
     expect(swatch.style.backgroundColor).toEqual('')
     component.value = '#ff0000'