valtech-components 2.0.24 → 2.0.26

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 (11) hide show
  1. package/esm2022/lib/components/molecules/card/card.component.mjs +79 -79
  2. package/esm2022/lib/components/molecules/card/types.mjs +1 -1
  3. package/esm2022/lib/components/templates/layout/layout.component.mjs +2 -2
  4. package/esm2022/lib/components/templates/simple/simple.component.mjs +6 -2
  5. package/esm2022/lib/components/templates/simple/types.mjs +1 -1
  6. package/fesm2022/valtech-components.mjs +84 -81
  7. package/fesm2022/valtech-components.mjs.map +1 -1
  8. package/lib/components/molecules/card/card.component.d.ts +3 -3
  9. package/lib/components/molecules/card/types.d.ts +2 -3
  10. package/lib/components/templates/simple/types.d.ts +2 -0
  11. package/package.json +1 -1
package/fesm2022/valtech-components.mjs CHANGED
@@ -777,59 +777,59 @@ class CardComponent {
777
777
  this.onClick.emit({ section, token });
778
778
  }
779
779
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
780
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { metadata: "metadata" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
781
- <ion-card *ngIf="metadata.type === types.native">
782
- <img alt="image" [src]="metadata.image" />
783
- <ion-card-header *ngIf="metadata.title || metadata.overtitle">
784
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
785
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
780
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
781
+ <ion-card *ngIf="props.type === types.native">
782
+ <img alt="image" [src]="props.image" />
783
+ <ion-card-header *ngIf="props.title || props.overtitle">
784
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
785
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
786
786
  </ion-card-header>
787
787
 
788
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
788
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
789
789
 
790
790
  <val-button
791
- *ngFor="let b of metadata.footerActions"
791
+ *ngFor="let b of props.footerActions"
792
792
  [props]="b"
793
793
  (click)="clickHandler(sections.footer, b.token)"
794
794
  ></val-button>
795
795
  </ion-card>
796
796
 
797
797
  <ion-card
798
- *ngIf="metadata.type === types.tappable"
799
- (click)="clickHandler(sections.content, metadata.token)"
798
+ *ngIf="props.type === types.tappable"
799
+ (click)="clickHandler(sections.content, props.token)"
800
800
  class="tapable"
801
801
  >
802
- <img alt="image" [src]="metadata.image" />
803
- <ion-card-header *ngIf="metadata.title || metadata.overtitle">
804
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
805
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
802
+ <img alt="image" [src]="props.image" />
803
+ <ion-card-header *ngIf="props.title || props.overtitle">
804
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
805
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
806
806
  </ion-card-header>
807
807
 
808
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
808
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
809
809
  </ion-card>
810
810
 
811
811
  <ion-card
812
- *ngIf="metadata.type === types.checker"
813
- (click)="clickHandler(sections.content, metadata.token)"
812
+ *ngIf="props.type === types.checker"
813
+ (click)="clickHandler(sections.content, props.token)"
814
814
  class="tapable"
815
815
  >
816
- <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="checker">
816
+ <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
817
817
  <div>
818
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
819
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
818
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
819
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
820
820
  </div>
821
821
  <div>
822
- <ion-checkbox [checked]="metadata.selected"></ion-checkbox>
822
+ <ion-checkbox [checked]="props.selected"></ion-checkbox>
823
823
  </div>
824
824
  </ion-card-header>
825
825
 
826
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
826
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
827
827
  </ion-card>
828
828
 
829
- <ion-card *ngIf="metadata.type === types.complex" class="complex">
829
+ <ion-card *ngIf="props.type === types.complex" class="complex">
830
830
  <ion-card-header class="complex-header">
831
- <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.leftActions.length > 0">
832
- <ng-container *ngFor="let action of metadata.leftActions">
831
+ <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
832
+ <ng-container *ngFor="let action of props.leftActions">
833
833
  <ion-button
834
834
  *ngIf="action.type === actionTypes.ICON"
835
835
  (click)="clickHandler(sections.headerLeft, action.token)"
@@ -853,15 +853,15 @@ class CardComponent {
853
853
  >
854
854
  {{ action.description }}
855
855
  </ion-button>
856
- <div *ngIf="metadata.headerText">
856
+ <div *ngIf="props.headerText">
857
857
  <val-text
858
- [props]="{ content: metadata.headerText, color: 'dark', bold: true, size: 'medium' }"
858
+ [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }"
859
859
  ></val-text>
860
860
  </div>
861
861
  </ng-container>
862
862
  </ion-buttons>
863
- <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.rightActions.length > 0">
864
- <ng-container *ngFor="let action of metadata.rightActions">
863
+ <ion-buttons style="display: flex; align-items: center" *ngIf="props.rightActions.length > 0">
864
+ <ng-container *ngFor="let action of props.rightActions">
865
865
  <ion-button
866
866
  *ngIf="action.type === actionTypes.ICON"
867
867
  (click)="clickHandler(sections.headerRight, action.token)"
@@ -889,27 +889,27 @@ class CardComponent {
889
889
  </ion-buttons>
890
890
  </ion-card-header>
891
891
 
892
- <div class="tapable" (click)="clickHandler(sections.content, metadata.token)">
893
- <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="complex-header">
892
+ <div class="tapable" (click)="clickHandler(sections.content, props.token)">
893
+ <ion-card-header *ngIf="props.title || props.overtitle" class="complex-header">
894
894
  <div>
895
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
896
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
895
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
896
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
897
897
  </div>
898
898
  </ion-card-header>
899
899
 
900
- <img alt="image" [src]="metadata.image" />
901
- <ion-card-content *ngIf="metadata.content" class="complex-content">{{ metadata.content }}</ion-card-content>
900
+ <img alt="image" [src]="props.image" />
901
+ <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
902
902
  </div>
903
903
  <val-button
904
- *ngFor="let b of metadata.footerActions"
904
+ *ngFor="let b of props.footerActions"
905
905
  [props]="b"
906
906
  (click)="clickHandler(sections.footer, b.token)"
907
907
  ></val-button>
908
908
  <ion-buttons
909
909
  style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
910
- *ngIf="metadata.footerComplexActions.length > 0"
910
+ *ngIf="props.footerComplexActions.length > 0"
911
911
  >
912
- <ng-container *ngFor="let action of metadata.footerComplexActions">
912
+ <ng-container *ngFor="let action of props.footerComplexActions">
913
913
  <ion-button
914
914
  *ngIf="action.type === actionTypes.ICON"
915
915
  (click)="clickHandler(sections.footerExtra, action.token)"
@@ -937,7 +937,7 @@ class CardComponent {
937
937
  </ng-container>
938
938
  </ion-buttons>
939
939
  </ion-card>
940
- `, isInline: true, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.02);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
940
+ `, isInline: true, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
941
941
  }
942
942
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
943
943
  type: Component,
@@ -957,58 +957,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
957
957
  IonButton,
958
958
  IonIcon,
959
959
  ], template: `
960
- <ion-card *ngIf="metadata.type === types.native">
961
- <img alt="image" [src]="metadata.image" />
962
- <ion-card-header *ngIf="metadata.title || metadata.overtitle">
963
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
964
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
960
+ <ion-card *ngIf="props.type === types.native">
961
+ <img alt="image" [src]="props.image" />
962
+ <ion-card-header *ngIf="props.title || props.overtitle">
963
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
964
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
965
965
  </ion-card-header>
966
966
 
967
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
967
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
968
968
 
969
969
  <val-button
970
- *ngFor="let b of metadata.footerActions"
970
+ *ngFor="let b of props.footerActions"
971
971
  [props]="b"
972
972
  (click)="clickHandler(sections.footer, b.token)"
973
973
  ></val-button>
974
974
  </ion-card>
975
975
 
976
976
  <ion-card
977
- *ngIf="metadata.type === types.tappable"
978
- (click)="clickHandler(sections.content, metadata.token)"
977
+ *ngIf="props.type === types.tappable"
978
+ (click)="clickHandler(sections.content, props.token)"
979
979
  class="tapable"
980
980
  >
981
- <img alt="image" [src]="metadata.image" />
982
- <ion-card-header *ngIf="metadata.title || metadata.overtitle">
983
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
984
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
981
+ <img alt="image" [src]="props.image" />
982
+ <ion-card-header *ngIf="props.title || props.overtitle">
983
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
984
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
985
985
  </ion-card-header>
986
986
 
987
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
987
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
988
988
  </ion-card>
989
989
 
990
990
  <ion-card
991
- *ngIf="metadata.type === types.checker"
992
- (click)="clickHandler(sections.content, metadata.token)"
991
+ *ngIf="props.type === types.checker"
992
+ (click)="clickHandler(sections.content, props.token)"
993
993
  class="tapable"
994
994
  >
995
- <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="checker">
995
+ <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
996
996
  <div>
997
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
998
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
997
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
998
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
999
999
  </div>
1000
1000
  <div>
1001
- <ion-checkbox [checked]="metadata.selected"></ion-checkbox>
1001
+ <ion-checkbox [checked]="props.selected"></ion-checkbox>
1002
1002
  </div>
1003
1003
  </ion-card-header>
1004
1004
 
1005
- <ion-card-content *ngIf="metadata.content">{{ metadata.content }}</ion-card-content>
1005
+ <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
1006
1006
  </ion-card>
1007
1007
 
1008
- <ion-card *ngIf="metadata.type === types.complex" class="complex">
1008
+ <ion-card *ngIf="props.type === types.complex" class="complex">
1009
1009
  <ion-card-header class="complex-header">
1010
- <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.leftActions.length > 0">
1011
- <ng-container *ngFor="let action of metadata.leftActions">
1010
+ <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
1011
+ <ng-container *ngFor="let action of props.leftActions">
1012
1012
  <ion-button
1013
1013
  *ngIf="action.type === actionTypes.ICON"
1014
1014
  (click)="clickHandler(sections.headerLeft, action.token)"
@@ -1032,15 +1032,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1032
1032
  >
1033
1033
  {{ action.description }}
1034
1034
  </ion-button>
1035
- <div *ngIf="metadata.headerText">
1035
+ <div *ngIf="props.headerText">
1036
1036
  <val-text
1037
- [props]="{ content: metadata.headerText, color: 'dark', bold: true, size: 'medium' }"
1037
+ [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }"
1038
1038
  ></val-text>
1039
1039
  </div>
1040
1040
  </ng-container>
1041
1041
  </ion-buttons>
1042
- <ion-buttons style="display: flex; align-items: center" *ngIf="metadata.rightActions.length > 0">
1043
- <ng-container *ngFor="let action of metadata.rightActions">
1042
+ <ion-buttons style="display: flex; align-items: center" *ngIf="props.rightActions.length > 0">
1043
+ <ng-container *ngFor="let action of props.rightActions">
1044
1044
  <ion-button
1045
1045
  *ngIf="action.type === actionTypes.ICON"
1046
1046
  (click)="clickHandler(sections.headerRight, action.token)"
@@ -1068,27 +1068,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1068
1068
  </ion-buttons>
1069
1069
  </ion-card-header>
1070
1070
 
1071
- <div class="tapable" (click)="clickHandler(sections.content, metadata.token)">
1072
- <ion-card-header *ngIf="metadata.title || metadata.overtitle" class="complex-header">
1071
+ <div class="tapable" (click)="clickHandler(sections.content, props.token)">
1072
+ <ion-card-header *ngIf="props.title || props.overtitle" class="complex-header">
1073
1073
  <div>
1074
- <ion-card-subtitle *ngIf="metadata.overtitle">{{ metadata.overtitle }}</ion-card-subtitle>
1075
- <ion-card-title *ngIf="metadata.title">{{ metadata.title }}</ion-card-title>
1074
+ <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
1075
+ <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
1076
1076
  </div>
1077
1077
  </ion-card-header>
1078
1078
 
1079
- <img alt="image" [src]="metadata.image" />
1080
- <ion-card-content *ngIf="metadata.content" class="complex-content">{{ metadata.content }}</ion-card-content>
1079
+ <img alt="image" [src]="props.image" />
1080
+ <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
1081
1081
  </div>
1082
1082
  <val-button
1083
- *ngFor="let b of metadata.footerActions"
1083
+ *ngFor="let b of props.footerActions"
1084
1084
  [props]="b"
1085
1085
  (click)="clickHandler(sections.footer, b.token)"
1086
1086
  ></val-button>
1087
1087
  <ion-buttons
1088
1088
  style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
1089
- *ngIf="metadata.footerComplexActions.length > 0"
1089
+ *ngIf="props.footerComplexActions.length > 0"
1090
1090
  >
1091
- <ng-container *ngFor="let action of metadata.footerComplexActions">
1091
+ <ng-container *ngFor="let action of props.footerComplexActions">
1092
1092
  <ion-button
1093
1093
  *ngIf="action.type === actionTypes.ICON"
1094
1094
  (click)="clickHandler(sections.footerExtra, action.token)"
@@ -1116,8 +1116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1116
1116
  </ng-container>
1117
1117
  </ion-buttons>
1118
1118
  </ion-card>
1119
- `, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.02);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"] }]
1120
- }], ctorParameters: () => [], propDecorators: { metadata: [{
1119
+ `, styles: ["ion-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}\n"] }]
1120
+ }], ctorParameters: () => [], propDecorators: { props: [{
1121
1121
  type: Input
1122
1122
  }], onClick: [{
1123
1123
  type: Output
@@ -2739,7 +2739,7 @@ class LayoutComponent {
2739
2739
  <div class="layout-container">
2740
2740
  <ng-content></ng-content>
2741
2741
  </div>
2742
- `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:60rem}}\n"] }); }
2742
+ `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }); }
2743
2743
  }
2744
2744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
2745
2745
  type: Component,
@@ -2747,7 +2747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2747
2747
  <div class="layout-container">
2748
2748
  <ng-content></ng-content>
2749
2749
  </div>
2750
- `, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:60rem}}\n"] }]
2750
+ `, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}\n"] }]
2751
2751
  }] });
2752
2752
 
2753
2753
  class SimpleComponent {
@@ -2765,13 +2765,14 @@ class SimpleComponent {
2765
2765
  <ion-text>
2766
2766
  <p class="description">{{ props.pageDescription }}</p>
2767
2767
  </ion-text>
2768
+ <val-link *ngIf="props.link" [props]="props.link"></val-link>
2768
2769
  </div>
2769
2770
  <val-divider *ngIf="props.withDivider" [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
2770
2771
  <val-layout>
2771
2772
  <ng-content></ng-content>
2772
2773
  </val-layout>
2773
2774
  </ion-content>
2774
- `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}.description-container{padding-left:.5rem}.description{padding-left:1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }] }); }
2775
+ `, isInline: true, styles: [".layout-container{margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box;margin-bottom:1rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{max-width:60rem;margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{max-width:75rem}}.description-container{padding-left:.5rem}.description{padding-left:1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: LayoutComponent, selector: "val-layout" }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }] }); }
2775
2776
  }
2776
2777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleComponent, decorators: [{
2777
2778
  type: Component,
@@ -2786,6 +2787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2786
2787
  HeaderComponent,
2787
2788
  LayoutComponent,
2788
2789
  DividerComponent,
2790
+ LinkComponent,
2789
2791
  ], template: `
2790
2792
  <val-header [props]="props.header" />
2791
2793
 
@@ -2799,6 +2801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2799
2801
  <ion-text>
2800
2802
  <p class="description">{{ props.pageDescription }}</p>
2801
2803
  </ion-text>
2804
+ <val-link *ngIf="props.link" [props]="props.link"></val-link>
2802
2805
  </div>
2803
2806
  <val-divider *ngIf="props.withDivider" [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
2804
2807
  <val-layout>