@jooler/jooler-websites-shared 0.0.151 → 0.0.152
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/custom-tooltip/custom-tooltip.component.mjs +6 -3
- package/fesm2015/jooler-websites-shared.mjs +5 -2
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +5 -2
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/custom-tooltip/custom-tooltip.component.d.ts +1 -0
- package/package.json +10 -10
|
@@ -6,14 +6,17 @@ export class CustomTooltipComponent {
|
|
|
6
6
|
onMouseEnter() {
|
|
7
7
|
this.showDetails = true;
|
|
8
8
|
}
|
|
9
|
+
onMouseClick() {
|
|
10
|
+
this.showDetails = !this.showDetails;
|
|
11
|
+
}
|
|
9
12
|
onMouseLeave() {
|
|
10
13
|
this.showDetails = false;
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div
|
|
17
|
+
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: ["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}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
15
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
16
19
|
type: Component,
|
|
17
|
-
args: [{ selector: 'custom-tooltip', template: "<div
|
|
20
|
+
args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: ["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}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
|
|
18
21
|
}] });
|
|
19
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLXRvb2x0aXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvam9vbGVyLXdlYnNpdGVzLXNoYXJlZC9zcmMvbGliL2N1c3RvbS10b29sdGlwL2N1c3RvbS10b29sdGlwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9jdXN0b20tdG9vbHRpcC9jdXN0b20tdG9vbHRpcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBTzFDLE1BQU0sT0FBTyxzQkFBc0I7SUFHakMsWUFBWTtRQUNWLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQzFCLENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDdkMsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUUzQixDQUFDOzttSEFkVSxzQkFBc0I7dUdBQXRCLHNCQUFzQixzRENQbkMsOGlCQVlNOzJGRExPLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDRSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3VzdG9tLXRvb2x0aXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLXRvb2x0aXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsgJy4vY3VzdG9tLXRvb2x0aXAuY29tcG9uZW50LnNjc3MnIF1cbn0pXG5leHBvcnQgY2xhc3MgQ3VzdG9tVG9vbHRpcENvbXBvbmVudCB7XG4gIHNob3dEZXRhaWxzOiBib29sZWFuO1xuXG4gIG9uTW91c2VFbnRlcigpIHtcbiAgICB0aGlzLnNob3dEZXRhaWxzID0gdHJ1ZTtcbiAgfVxuXG4gIG9uTW91c2VDbGljaygpIHtcbiAgICB0aGlzLnNob3dEZXRhaWxzID0gIXRoaXMuc2hvd0RldGFpbHM7XG4gIH1cblxuICBvbk1vdXNlTGVhdmUoKSB7XG4gICAgdGhpcy5zaG93RGV0YWlscyA9IGZhbHNlO1xuXG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJpY29uXCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIiAobW91c2VsZWF2ZSk9XCJvbk1vdXNlTGVhdmUoKVwiPlxuICAgICAgICA8ZGl2IChjbGljayk9XCJvbk1vdXNlQ2xpY2soKVwiIGNsYXNzPVwiaWNvbi1jb250YWluZXJcIiAobW91c2VlbnRlcik9XCJvbk1vdXNlRW50ZXIoKVwiPlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBpY29uPVwiaW5mby1jaXJjbGVcIiBjbGFzcz1cImljb24tc2hhcGVcIj48L2ZhLWljb24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0b29sdGlwLW1lc3NhZ2UtYm94XCIgW25nQ2xhc3NdPVwieyduby1kZXRhaWxzJyA6ICFzaG93RGV0YWlscyAsICdkZXRhaWxzJzogc2hvd0RldGFpbHN9XCI+XG4gICAgICAgICAgICA8ZmEtaWNvbiBpY29uPVwiY2FyZXQtbGVmdFwiPjwvZmEtaWNvbj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -874,15 +874,18 @@ class CustomTooltipComponent {
|
|
|
874
874
|
onMouseEnter() {
|
|
875
875
|
this.showDetails = true;
|
|
876
876
|
}
|
|
877
|
+
onMouseClick() {
|
|
878
|
+
this.showDetails = !this.showDetails;
|
|
879
|
+
}
|
|
877
880
|
onMouseLeave() {
|
|
878
881
|
this.showDetails = false;
|
|
879
882
|
}
|
|
880
883
|
}
|
|
881
884
|
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
882
|
-
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div
|
|
885
|
+
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: ["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}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
883
886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
884
887
|
type: Component,
|
|
885
|
-
args: [{ selector: 'custom-tooltip', template: "<div
|
|
888
|
+
args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: ["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}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
|
|
886
889
|
}] });
|
|
887
890
|
|
|
888
891
|
class FeatureSectionOneComponent {
|