valtech-components 2.0.55 → 2.0.57

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 (6) hide show
  1. package/esm2022/lib/components/organisms/item-list/item-list.component.mjs +271 -275
  2. package/esm2022/lib/components/templates/layout/layout.component.mjs +2 -2
  3. package/fesm2022/valtech-components.mjs +260 -264
  4. package/fesm2022/valtech-components.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/lib/components/styles/variables.scss +1 -1
package/esm2022/lib/components/templates/layout/layout.component.mjs CHANGED
@@ -6,7 +6,7 @@ export class LayoutComponent {
6
6
  <div class="layout-container">
7
7
  <ng-content></ng-content>
8
8
  </div>
9
- `, isInline: true, styles: [".layout-container{margin:0 1rem 1rem;padding:0;width:100%;box-sizing:border-box}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }); }
9
+ `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:68.75rem}}\n"] }); }
10
10
  }
11
11
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
12
12
  type: Component,
@@ -14,6 +14,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
14
14
  <div class="layout-container">
15
15
  <ng-content></ng-content>
16
16
  </div>
17
- `, styles: [".layout-container{margin:0 1rem 1rem;padding:0;width:100%;box-sizing:border-box}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }]
17
+ `, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:68.75rem}}\n"] }]
18
18
  }] });
19
19
  //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZhbHRlY2gtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGVtcGxhdGVzL2xheW91dC9sYXlvdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBYTFDLE1BQU0sT0FBTyxlQUFlOytHQUFmLGVBQWU7bUdBQWYsZUFBZSxzRUFQaEI7Ozs7R0FJVDs7NEZBR1UsZUFBZTtrQkFYM0IsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbC1sYXlvdXQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwibGF5b3V0LWNvbnRhaW5lclwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZVVybDogJy4vbGF5b3V0LmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgTGF5b3V0Q29tcG9uZW50IHt9XG4iXX0=
package/fesm2022/valtech-components.mjs CHANGED
@@ -2937,160 +2937,158 @@ class ItemListComponent {
2937
2937
  }
2938
2938
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
2939
2939
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
2940
- <div>
2941
- <ion-list
2942
- [inset]="props.rounded"
2943
- [class.shadowed]="props.shadowed"
2944
- [class.bordered]="props.bordered"
2945
- [style.borderColor]="this.color()"
2946
- >
2940
+ <ion-list
2941
+ [inset]="props.rounded"
2942
+ [class.shadowed]="props.shadowed"
2943
+ [class.bordered]="props.bordered"
2944
+ [style.borderColor]="this.color()"
2945
+ >
2947
2946
  @if (props.title) {
2948
2947
  <ion-list-header>
2949
2948
  <ion-label>{{ props.title }}</ion-label>
2950
2949
  </ion-list-header>
2951
2950
  }
2952
- @for (item of props.items; track item.text) {
2953
- @if (item.mode == 'justext') {
2954
- <ion-item
2955
- [lines]="item.lines"
2956
- [button]="item.clickable"
2957
- [disabled]="item.disabled"
2958
- (click)="clickHandler(item.token)"
2959
- >
2960
- @if (item.unreadIndicator) {
2961
- <div class="unread-indicator-wrapper" slot="start">
2962
- <div class="unread-indicator"></div>
2963
- </div>
2964
- }
2965
-
2966
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
2967
- <h2>{{ item.text }}</h2>
2951
+ @for (item of props.items; track item.text) {
2952
+ @if (item.mode == 'justext') {
2953
+ <ion-item
2954
+ [lines]="item.lines"
2955
+ [button]="item.clickable"
2956
+ [disabled]="item.disabled"
2957
+ (click)="clickHandler(item.token)"
2958
+ >
2959
+ @if (item.unreadIndicator) {
2960
+ <div class="unread-indicator-wrapper" slot="start">
2961
+ <div class="unread-indicator"></div>
2962
+ </div>
2963
+ }
2968
2964
 
2969
- @if (item.comments) {
2970
- <ion-note color="medium"> {{ item.comments }} </ion-note>
2971
- }
2972
- </ion-label>
2965
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
2966
+ <h2>{{ item.text }}</h2>
2973
2967
 
2974
- @if (item.endNote) {
2975
- <ion-note slot="end">{{ item.endNote }}</ion-note>
2968
+ @if (item.comments) {
2969
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
2976
2970
  }
2977
- </ion-item>
2978
- }
2971
+ </ion-label>
2979
2972
 
2980
- @if (item.mode == 'actionable') {
2981
- <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
2982
- @if (item.unreadIndicator) {
2983
- <div class="unread-indicator-wrapper" slot="start">
2984
- <div class="unread-indicator"></div>
2985
- </div>
2986
- }
2973
+ @if (item.endNote) {
2974
+ <ion-note slot="end">{{ item.endNote }}</ion-note>
2975
+ }
2976
+ </ion-item>
2977
+ }
2987
2978
 
2988
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
2989
- <h2>{{ item.text }}</h2>
2979
+ @if (item.mode == 'actionable') {
2980
+ <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
2981
+ @if (item.unreadIndicator) {
2982
+ <div class="unread-indicator-wrapper" slot="start">
2983
+ <div class="unread-indicator"></div>
2984
+ </div>
2985
+ }
2990
2986
 
2991
- @if (item.comments) {
2992
- <ion-note color="medium"> {{ item.comments }} </ion-note>
2993
- }
2994
- </ion-label>
2995
-
2996
- @if (item.actions) {
2997
- @for (action of item.actions; track action.token) {
2998
- <ion-button
2999
- fill="outline"
3000
- color="dark"
3001
- slot="end"
3002
- [disabled]="action.state === states.WORKING"
3003
- (click)="onActionClickHandler(action.token)"
3004
- >
3005
- @if (action.state !== states.WORKING) {
3006
- @if (action.icon) {
3007
- <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
3008
- }
3009
-
3010
- {{ action.description }}
3011
- }
2987
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
2988
+ <h2>{{ item.text }}</h2>
3012
2989
 
3013
- @if (action.state === states.WORKING) {
3014
- <ion-spinner class="action-spinner" name="circular"></ion-spinner>
3015
- }
3016
- </ion-button>
3017
- }
2990
+ @if (item.comments) {
2991
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
3018
2992
  }
3019
- </ion-item>
3020
- }
2993
+ </ion-label>
2994
+
2995
+ @if (item.actions) {
2996
+ @for (action of item.actions; track action.token) {
2997
+ <ion-button
2998
+ fill="outline"
2999
+ color="dark"
3000
+ slot="end"
3001
+ [disabled]="action.state === states.WORKING"
3002
+ (click)="onActionClickHandler(action.token)"
3003
+ >
3004
+ @if (action.state !== states.WORKING) {
3005
+ @if (action.icon) {
3006
+ <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
3007
+ }
3021
3008
 
3022
- @if (item.mode == 'route') {
3023
- <ion-item
3024
- [lines]="item.lines"
3025
- [button]="item.clickable"
3026
- [disabled]="item.disabled"
3027
- (click)="clickHandler(item.token)"
3028
- [routerLink]="item.routerLink"
3029
- >
3030
- @if (item.unreadIndicator) {
3031
- <div class="unread-indicator-wrapper" slot="start">
3032
- <div class="unread-indicator"></div>
3033
- </div>
3009
+ {{ action.description }}
3010
+ }
3011
+
3012
+ @if (action.state === states.WORKING) {
3013
+ <ion-spinner class="action-spinner" name="circular"></ion-spinner>
3014
+ }
3015
+ </ion-button>
3034
3016
  }
3017
+ }
3018
+ </ion-item>
3019
+ }
3035
3020
 
3036
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3037
- <h2>{{ item.text }}</h2>
3021
+ @if (item.mode == 'route') {
3022
+ <ion-item
3023
+ [lines]="item.lines"
3024
+ [button]="item.clickable"
3025
+ [disabled]="item.disabled"
3026
+ (click)="clickHandler(item.token)"
3027
+ [routerLink]="item.routerLink"
3028
+ >
3029
+ @if (item.unreadIndicator) {
3030
+ <div class="unread-indicator-wrapper" slot="start">
3031
+ <div class="unread-indicator"></div>
3032
+ </div>
3033
+ }
3038
3034
 
3039
- @if (item.comments) {
3040
- <ion-note color="medium"> {{ item.comments }} </ion-note>
3041
- }
3042
- </ion-label>
3043
- </ion-item>
3044
- }
3035
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3036
+ <h2>{{ item.text }}</h2>
3045
3037
 
3046
- @if (item.mode == 'subtitule') {
3047
- <ion-item
3048
- [lines]="item.lines"
3049
- [button]="item.clickable"
3050
- [disabled]="item.disabled"
3051
- (click)="clickHandler(item.token)"
3052
- >
3053
- @if (item.unreadIndicator) {
3054
- <div class="unread-indicator-wrapper" slot="start">
3055
- <div class="unread-indicator"></div>
3056
- </div>
3038
+ @if (item.comments) {
3039
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
3057
3040
  }
3041
+ </ion-label>
3042
+ </ion-item>
3043
+ }
3058
3044
 
3059
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3060
- <h1>{{ item.text }}</h1>
3061
- <p>{{ item.subtitle }}</p>
3062
- </ion-label>
3063
- </ion-item>
3064
- }
3045
+ @if (item.mode == 'subtitule') {
3046
+ <ion-item
3047
+ [lines]="item.lines"
3048
+ [button]="item.clickable"
3049
+ [disabled]="item.disabled"
3050
+ (click)="clickHandler(item.token)"
3051
+ >
3052
+ @if (item.unreadIndicator) {
3053
+ <div class="unread-indicator-wrapper" slot="start">
3054
+ <div class="unread-indicator"></div>
3055
+ </div>
3056
+ }
3065
3057
 
3066
- @if (item.mode == 'avatar') {
3067
- <ion-item
3068
- [lines]="item.lines"
3069
- [button]="item.clickable"
3070
- [disabled]="item.disabled"
3071
- (click)="clickHandler(item.token)"
3072
- >
3073
- <ion-avatar aria-hidden="true" slot="start">
3074
- <img alt="" [src]="item.image" />
3075
- </ion-avatar>
3076
- <ion-label>{{ item.text }}</ion-label>
3077
- </ion-item>
3078
- }
3058
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3059
+ <h1>{{ item.text }}</h1>
3060
+ <p>{{ item.subtitle }}</p>
3061
+ </ion-label>
3062
+ </ion-item>
3063
+ }
3079
3064
 
3080
- @if (item.mode == 'icon') {
3081
- <ion-item
3082
- [lines]="item.lines"
3083
- [button]="item.clickable"
3084
- [disabled]="item.disabled"
3085
- (click)="clickHandler(item.token)"
3086
- >
3087
- <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
3088
- <ion-label>{{ item.text }}</ion-label>
3089
- </ion-item>
3090
- }
3065
+ @if (item.mode == 'avatar') {
3066
+ <ion-item
3067
+ [lines]="item.lines"
3068
+ [button]="item.clickable"
3069
+ [disabled]="item.disabled"
3070
+ (click)="clickHandler(item.token)"
3071
+ >
3072
+ <ion-avatar aria-hidden="true" slot="start">
3073
+ <img alt="" [src]="item.image" />
3074
+ </ion-avatar>
3075
+ <ion-label>{{ item.text }}</ion-label>
3076
+ </ion-item>
3091
3077
  }
3092
- </ion-list>
3093
- </div>
3078
+
3079
+ @if (item.mode == 'icon') {
3080
+ <ion-item
3081
+ [lines]="item.lines"
3082
+ [button]="item.clickable"
3083
+ [disabled]="item.disabled"
3084
+ (click)="clickHandler(item.token)"
3085
+ >
3086
+ <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
3087
+ <ion-label>{{ item.text }}</ion-label>
3088
+ </ion-item>
3089
+ }
3090
+ }
3091
+ </ion-list>
3094
3092
  `, isInline: true, styles: ["ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
3095
3093
  }
3096
3094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemListComponent, decorators: [{
@@ -3109,160 +3107,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3109
3107
  IonButton,
3110
3108
  IonSpinner,
3111
3109
  ], template: `
3112
- <div>
3113
- <ion-list
3114
- [inset]="props.rounded"
3115
- [class.shadowed]="props.shadowed"
3116
- [class.bordered]="props.bordered"
3117
- [style.borderColor]="this.color()"
3118
- >
3110
+ <ion-list
3111
+ [inset]="props.rounded"
3112
+ [class.shadowed]="props.shadowed"
3113
+ [class.bordered]="props.bordered"
3114
+ [style.borderColor]="this.color()"
3115
+ >
3119
3116
  @if (props.title) {
3120
3117
  <ion-list-header>
3121
3118
  <ion-label>{{ props.title }}</ion-label>
3122
3119
  </ion-list-header>
3123
3120
  }
3124
- @for (item of props.items; track item.text) {
3125
- @if (item.mode == 'justext') {
3126
- <ion-item
3127
- [lines]="item.lines"
3128
- [button]="item.clickable"
3129
- [disabled]="item.disabled"
3130
- (click)="clickHandler(item.token)"
3131
- >
3132
- @if (item.unreadIndicator) {
3133
- <div class="unread-indicator-wrapper" slot="start">
3134
- <div class="unread-indicator"></div>
3135
- </div>
3136
- }
3137
-
3138
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3139
- <h2>{{ item.text }}</h2>
3121
+ @for (item of props.items; track item.text) {
3122
+ @if (item.mode == 'justext') {
3123
+ <ion-item
3124
+ [lines]="item.lines"
3125
+ [button]="item.clickable"
3126
+ [disabled]="item.disabled"
3127
+ (click)="clickHandler(item.token)"
3128
+ >
3129
+ @if (item.unreadIndicator) {
3130
+ <div class="unread-indicator-wrapper" slot="start">
3131
+ <div class="unread-indicator"></div>
3132
+ </div>
3133
+ }
3140
3134
 
3141
- @if (item.comments) {
3142
- <ion-note color="medium"> {{ item.comments }} </ion-note>
3143
- }
3144
- </ion-label>
3135
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3136
+ <h2>{{ item.text }}</h2>
3145
3137
 
3146
- @if (item.endNote) {
3147
- <ion-note slot="end">{{ item.endNote }}</ion-note>
3138
+ @if (item.comments) {
3139
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
3148
3140
  }
3149
- </ion-item>
3150
- }
3141
+ </ion-label>
3151
3142
 
3152
- @if (item.mode == 'actionable') {
3153
- <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
3154
- @if (item.unreadIndicator) {
3155
- <div class="unread-indicator-wrapper" slot="start">
3156
- <div class="unread-indicator"></div>
3157
- </div>
3158
- }
3143
+ @if (item.endNote) {
3144
+ <ion-note slot="end">{{ item.endNote }}</ion-note>
3145
+ }
3146
+ </ion-item>
3147
+ }
3159
3148
 
3160
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3161
- <h2>{{ item.text }}</h2>
3149
+ @if (item.mode == 'actionable') {
3150
+ <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
3151
+ @if (item.unreadIndicator) {
3152
+ <div class="unread-indicator-wrapper" slot="start">
3153
+ <div class="unread-indicator"></div>
3154
+ </div>
3155
+ }
3162
3156
 
3163
- @if (item.comments) {
3164
- <ion-note color="medium"> {{ item.comments }} </ion-note>
3165
- }
3166
- </ion-label>
3167
-
3168
- @if (item.actions) {
3169
- @for (action of item.actions; track action.token) {
3170
- <ion-button
3171
- fill="outline"
3172
- color="dark"
3173
- slot="end"
3174
- [disabled]="action.state === states.WORKING"
3175
- (click)="onActionClickHandler(action.token)"
3176
- >
3177
- @if (action.state !== states.WORKING) {
3178
- @if (action.icon) {
3179
- <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
3180
- }
3181
-
3182
- {{ action.description }}
3183
- }
3157
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3158
+ <h2>{{ item.text }}</h2>
3184
3159
 
3185
- @if (action.state === states.WORKING) {
3186
- <ion-spinner class="action-spinner" name="circular"></ion-spinner>
3187
- }
3188
- </ion-button>
3189
- }
3160
+ @if (item.comments) {
3161
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
3190
3162
  }
3191
- </ion-item>
3192
- }
3163
+ </ion-label>
3164
+
3165
+ @if (item.actions) {
3166
+ @for (action of item.actions; track action.token) {
3167
+ <ion-button
3168
+ fill="outline"
3169
+ color="dark"
3170
+ slot="end"
3171
+ [disabled]="action.state === states.WORKING"
3172
+ (click)="onActionClickHandler(action.token)"
3173
+ >
3174
+ @if (action.state !== states.WORKING) {
3175
+ @if (action.icon) {
3176
+ <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
3177
+ }
3193
3178
 
3194
- @if (item.mode == 'route') {
3195
- <ion-item
3196
- [lines]="item.lines"
3197
- [button]="item.clickable"
3198
- [disabled]="item.disabled"
3199
- (click)="clickHandler(item.token)"
3200
- [routerLink]="item.routerLink"
3201
- >
3202
- @if (item.unreadIndicator) {
3203
- <div class="unread-indicator-wrapper" slot="start">
3204
- <div class="unread-indicator"></div>
3205
- </div>
3179
+ {{ action.description }}
3180
+ }
3181
+
3182
+ @if (action.state === states.WORKING) {
3183
+ <ion-spinner class="action-spinner" name="circular"></ion-spinner>
3184
+ }
3185
+ </ion-button>
3206
3186
  }
3187
+ }
3188
+ </ion-item>
3189
+ }
3207
3190
 
3208
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3209
- <h2>{{ item.text }}</h2>
3191
+ @if (item.mode == 'route') {
3192
+ <ion-item
3193
+ [lines]="item.lines"
3194
+ [button]="item.clickable"
3195
+ [disabled]="item.disabled"
3196
+ (click)="clickHandler(item.token)"
3197
+ [routerLink]="item.routerLink"
3198
+ >
3199
+ @if (item.unreadIndicator) {
3200
+ <div class="unread-indicator-wrapper" slot="start">
3201
+ <div class="unread-indicator"></div>
3202
+ </div>
3203
+ }
3210
3204
 
3211
- @if (item.comments) {
3212
- <ion-note color="medium"> {{ item.comments }} </ion-note>
3213
- }
3214
- </ion-label>
3215
- </ion-item>
3216
- }
3205
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3206
+ <h2>{{ item.text }}</h2>
3217
3207
 
3218
- @if (item.mode == 'subtitule') {
3219
- <ion-item
3220
- [lines]="item.lines"
3221
- [button]="item.clickable"
3222
- [disabled]="item.disabled"
3223
- (click)="clickHandler(item.token)"
3224
- >
3225
- @if (item.unreadIndicator) {
3226
- <div class="unread-indicator-wrapper" slot="start">
3227
- <div class="unread-indicator"></div>
3228
- </div>
3208
+ @if (item.comments) {
3209
+ <ion-note color="medium"> {{ item.comments }} </ion-note>
3229
3210
  }
3211
+ </ion-label>
3212
+ </ion-item>
3213
+ }
3230
3214
 
3231
- <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3232
- <h1>{{ item.text }}</h1>
3233
- <p>{{ item.subtitle }}</p>
3234
- </ion-label>
3235
- </ion-item>
3236
- }
3215
+ @if (item.mode == 'subtitule') {
3216
+ <ion-item
3217
+ [lines]="item.lines"
3218
+ [button]="item.clickable"
3219
+ [disabled]="item.disabled"
3220
+ (click)="clickHandler(item.token)"
3221
+ >
3222
+ @if (item.unreadIndicator) {
3223
+ <div class="unread-indicator-wrapper" slot="start">
3224
+ <div class="unread-indicator"></div>
3225
+ </div>
3226
+ }
3237
3227
 
3238
- @if (item.mode == 'avatar') {
3239
- <ion-item
3240
- [lines]="item.lines"
3241
- [button]="item.clickable"
3242
- [disabled]="item.disabled"
3243
- (click)="clickHandler(item.token)"
3244
- >
3245
- <ion-avatar aria-hidden="true" slot="start">
3246
- <img alt="" [src]="item.image" />
3247
- </ion-avatar>
3248
- <ion-label>{{ item.text }}</ion-label>
3249
- </ion-item>
3250
- }
3228
+ <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
3229
+ <h1>{{ item.text }}</h1>
3230
+ <p>{{ item.subtitle }}</p>
3231
+ </ion-label>
3232
+ </ion-item>
3233
+ }
3251
3234
 
3252
- @if (item.mode == 'icon') {
3253
- <ion-item
3254
- [lines]="item.lines"
3255
- [button]="item.clickable"
3256
- [disabled]="item.disabled"
3257
- (click)="clickHandler(item.token)"
3258
- >
3259
- <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
3260
- <ion-label>{{ item.text }}</ion-label>
3261
- </ion-item>
3262
- }
3235
+ @if (item.mode == 'avatar') {
3236
+ <ion-item
3237
+ [lines]="item.lines"
3238
+ [button]="item.clickable"
3239
+ [disabled]="item.disabled"
3240
+ (click)="clickHandler(item.token)"
3241
+ >
3242
+ <ion-avatar aria-hidden="true" slot="start">
3243
+ <img alt="" [src]="item.image" />
3244
+ </ion-avatar>
3245
+ <ion-label>{{ item.text }}</ion-label>
3246
+ </ion-item>
3263
3247
  }
3264
- </ion-list>
3265
- </div>
3248
+
3249
+ @if (item.mode == 'icon') {
3250
+ <ion-item
3251
+ [lines]="item.lines"
3252
+ [button]="item.clickable"
3253
+ [disabled]="item.disabled"
3254
+ (click)="clickHandler(item.token)"
3255
+ >
3256
+ <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
3257
+ <ion-label>{{ item.text }}</ion-label>
3258
+ </ion-item>
3259
+ }
3260
+ }
3261
+ </ion-list>
3266
3262
  `, styles: ["ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"] }]
3267
3263
  }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
3268
3264
  type: Input
@@ -3278,7 +3274,7 @@ class LayoutComponent {
3278
3274
  <div class="layout-container">
3279
3275
  <ng-content></ng-content>
3280
3276
  </div>
3281
- `, isInline: true, styles: [".layout-container{margin:0 1rem 1rem;padding:0;width:100%;box-sizing:border-box}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }); }
3277
+ `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:68.75rem}}\n"] }); }
3282
3278
  }
3283
3279
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
3284
3280
  type: Component,
@@ -3286,7 +3282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3286
3282
  <div class="layout-container">
3287
3283
  <ng-content></ng-content>
3288
3284
  </div>
3289
- `, styles: [".layout-container{margin:0 1rem 1rem;padding:0;width:100%;box-sizing:border-box}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:68.75rem}}\n"] }]
3285
+ `, styles: [".layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:55rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:68.75rem}}\n"] }]
3290
3286
  }] });
3291
3287
 
3292
3288
  class SimpleComponent {