@jooler/jooler-websites-shared 0.0.143 → 0.0.145
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.
- package/esm2020/lib/feature-section-four/feature-section-four.component.mjs +20 -4
- package/fesm2015/jooler-websites-shared.mjs +23 -7
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +23 -7
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/feature-section-four/feature-section-four.component.d.ts +6 -2
- package/package.json +1 -4
|
@@ -23,10 +23,10 @@ import * as i3$3 from '@angular/forms';
|
|
|
23
23
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
24
24
|
import * as i3$4 from '@ng-select/ng-select';
|
|
25
25
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i2$1 from '@angular/material/icon';
|
|
27
27
|
import { map } from 'rxjs';
|
|
28
28
|
import * as i3$5 from '@angular/material/card';
|
|
29
|
-
import * as i2$
|
|
29
|
+
import * as i2$2 from '@angular/material/tabs';
|
|
30
30
|
|
|
31
31
|
class SectionTitleComponent {
|
|
32
32
|
}
|
|
@@ -561,7 +561,7 @@ ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
561
561
|
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
562
562
|
multi: true
|
|
563
563
|
}
|
|
564
|
-
], ngImport: i0, template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type:
|
|
564
|
+
], ngImport: i0, template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] });
|
|
565
565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
|
|
566
566
|
type: Component,
|
|
567
567
|
args: [{ selector: 'choose-country-with-flag', providers: [
|
|
@@ -796,7 +796,7 @@ class FaqListingComponent {
|
|
|
796
796
|
}
|
|
797
797
|
}
|
|
798
798
|
FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
799
|
-
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
799
|
+
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
800
800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
801
801
|
type: Component,
|
|
802
802
|
args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
|
|
@@ -952,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
952
952
|
class FeatureSectionThreeComponent {
|
|
953
953
|
}
|
|
954
954
|
FeatureSectionThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
955
|
-
FeatureSectionThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionThreeComponent, selector: "feature-section-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$
|
|
955
|
+
FeatureSectionThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionThreeComponent, selector: "feature-section-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: ["sectionContent"] }] });
|
|
956
956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, decorators: [{
|
|
957
957
|
type: Component,
|
|
958
958
|
args: [{ selector: 'feature-section-three', template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"] }]
|
|
@@ -961,12 +961,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
961
961
|
}] } });
|
|
962
962
|
|
|
963
963
|
class FeatureSectionFourComponent {
|
|
964
|
+
ngOnInit() {
|
|
965
|
+
this.title = this.sectionContent.defaultTitle;
|
|
966
|
+
}
|
|
967
|
+
showDescription(index) {
|
|
968
|
+
if (this.sectionContent.panels[index].isOpened) {
|
|
969
|
+
this.sectionContent.panels[index].isOpened = false;
|
|
970
|
+
this.title = this.sectionContent.defaultTitle;
|
|
971
|
+
}
|
|
972
|
+
else {
|
|
973
|
+
for (let panel of this.sectionContent.panels) {
|
|
974
|
+
panel.isOpened = false;
|
|
975
|
+
}
|
|
976
|
+
this.sectionContent.panels[index].isOpened = true;
|
|
977
|
+
this.title = this.sectionContent.panels[index].title;
|
|
978
|
+
}
|
|
979
|
+
}
|
|
964
980
|
}
|
|
965
981
|
FeatureSectionFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
966
|
-
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <
|
|
982
|
+
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
967
983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, decorators: [{
|
|
968
984
|
type: Component,
|
|
969
|
-
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <
|
|
985
|
+
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"] }]
|
|
970
986
|
}], propDecorators: { sectionContent: [{
|
|
971
987
|
type: Input
|
|
972
988
|
}] } });
|