@crowdfarming/oliva-ds 1.85.0 → 1.86.0-rc.1

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.
@@ -6423,6 +6423,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
6423
6423
  type: Output
6424
6424
  }] } });
6425
6425
 
6426
+ class ProgressBarComponent {
6427
+ progress = input.required();
6428
+ size = input('md');
6429
+ ariaLabel = input('');
6430
+ clampedProgress = computed(() => Math.max(0, Math.min(100, this.progress() ?? 0)));
6431
+ get classes() {
6432
+ return `c-progress-bar c-progress-bar--${this.size()}`;
6433
+ }
6434
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6435
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ProgressBarComponent, isStandalone: true, selector: "lib-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"classes\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-valuenow]=\"clampedProgress()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <div class=\"c-progress-bar__fill\" [style.width.%]=\"clampedProgress()\"></div>\n</div>\n", styles: [".c-progress-bar{position:relative;width:100%;background-color:var(--color-core-background-brand-soft);border-radius:var(--size-border-radius-full);overflow:hidden}.c-progress-bar--xs{height:.5rem}.c-progress-bar--sm{height:.75rem}.c-progress-bar--md{height:1rem}.c-progress-bar__fill{height:100%;background-color:var(--color-action-primary-content-default);border-radius:var(--size-border-radius-full);transition:width .3s ease-in-out}\n"] });
6436
+ }
6437
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
6438
+ type: Component,
6439
+ args: [{ selector: 'lib-progress-bar', template: "<div\n [class]=\"classes\"\n role=\"progressbar\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-valuenow]=\"clampedProgress()\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n>\n <div class=\"c-progress-bar__fill\" [style.width.%]=\"clampedProgress()\"></div>\n</div>\n", styles: [".c-progress-bar{position:relative;width:100%;background-color:var(--color-core-background-brand-soft);border-radius:var(--size-border-radius-full);overflow:hidden}.c-progress-bar--xs{height:.5rem}.c-progress-bar--sm{height:.75rem}.c-progress-bar--md{height:1rem}.c-progress-bar__fill{height:100%;background-color:var(--color-action-primary-content-default);border-radius:var(--size-border-radius-full);transition:width .3s ease-in-out}\n"] }]
6440
+ }] });
6441
+
6442
+ class TooltipComponent {
6443
+ text = '';
6444
+ position = TooltipPosition.TOP;
6445
+ get positionClass() {
6446
+ return `position-${this.position}`;
6447
+ }
6448
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6449
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, host: { properties: { "class": "this.positionClass" } }, ngImport: i0, template: "<div class=\"c-tooltip\">\n <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] });
6450
+ }
6451
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
6452
+ type: Component,
6453
+ args: [{ selector: 'lib-tooltip', template: "<div class=\"c-tooltip\">\n <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
6454
+ }], propDecorators: { text: [{
6455
+ type: Input
6456
+ }], position: [{
6457
+ type: Input
6458
+ }], positionClass: [{
6459
+ type: HostBinding,
6460
+ args: ['class']
6461
+ }] } });
6462
+
6463
+ var TooltipPosition;
6464
+ (function (TooltipPosition) {
6465
+ TooltipPosition["TOP"] = "top";
6466
+ TooltipPosition["BOTTOM"] = "bottom";
6467
+ TooltipPosition["LEFT"] = "left";
6468
+ TooltipPosition["RIGHT"] = "right";
6469
+ })(TooltipPosition || (TooltipPosition = {}));
6470
+ class TooltipDirective {
6471
+ elementRef;
6472
+ overlay;
6473
+ positionBuilder;
6474
+ libTooltip = '';
6475
+ tooltipPosition = TooltipPosition.TOP;
6476
+ tooltipForceOpen = false; // Development flag to force tooltip open. To delete when we have the final version of the tooltip.
6477
+ overlayRef = null;
6478
+ constructor(elementRef, overlay, positionBuilder) {
6479
+ this.elementRef = elementRef;
6480
+ this.overlay = overlay;
6481
+ this.positionBuilder = positionBuilder;
6482
+ }
6483
+ show() {
6484
+ if (this.overlayRef) {
6485
+ return;
6486
+ }
6487
+ // 1. Create the position strategy based on the Input 'tooltipPosition'
6488
+ const positionStrategy = this.positionBuilder
6489
+ .flexibleConnectedTo(this.elementRef)
6490
+ .withPositions([this.getPosition()]);
6491
+ // 2. Create the overlay
6492
+ this.overlayRef = this.overlay.create({ positionStrategy });
6493
+ // 3. Create and attach the component portal
6494
+ const tooltipPortal = new ComponentPortal(TooltipComponent);
6495
+ const componentRef = this.overlayRef.attach(tooltipPortal);
6496
+ // 4. Pass the text to the component
6497
+ componentRef.instance.text = this.libTooltip;
6498
+ componentRef.instance.position = this.tooltipPosition;
6499
+ }
6500
+ hide() {
6501
+ // Don't hide if forceOpen is true. Useful to test the tooltip.
6502
+ if (this.tooltipForceOpen) {
6503
+ return;
6504
+ }
6505
+ if (this.overlayRef) {
6506
+ this.overlayRef.dispose();
6507
+ this.overlayRef = null;
6508
+ }
6509
+ }
6510
+ // Clean up when the component that is launching the tooltip is destroyed
6511
+ ngOnDestroy() {
6512
+ this.hide();
6513
+ }
6514
+ /**
6515
+ * Manually hide the tooltip. Useful to test the tooltip.
6516
+ */
6517
+ forceHide() {
6518
+ if (this.overlayRef) {
6519
+ this.overlayRef.dispose();
6520
+ this.overlayRef = null;
6521
+ }
6522
+ }
6523
+ /**
6524
+ * Returns the CDK position configuration based on the 'tooltipPosition' value.
6525
+ */
6526
+ getPosition() {
6527
+ const offset = 2; // Space between the element and the tooltip
6528
+ switch (this.tooltipPosition) {
6529
+ case 'bottom':
6530
+ return {
6531
+ originX: 'center',
6532
+ originY: 'bottom',
6533
+ overlayX: 'center',
6534
+ overlayY: 'top',
6535
+ offsetY: offset,
6536
+ };
6537
+ case 'left':
6538
+ return {
6539
+ originX: 'start',
6540
+ originY: 'center',
6541
+ overlayX: 'end',
6542
+ overlayY: 'center',
6543
+ offsetX: -offset,
6544
+ };
6545
+ case 'right':
6546
+ return {
6547
+ originX: 'end',
6548
+ originY: 'center',
6549
+ overlayX: 'start',
6550
+ overlayY: 'center',
6551
+ offsetX: offset,
6552
+ };
6553
+ default: // 'top'
6554
+ return {
6555
+ originX: 'center',
6556
+ originY: 'top',
6557
+ overlayX: 'center',
6558
+ overlayY: 'bottom',
6559
+ offsetY: -offset,
6560
+ };
6561
+ }
6562
+ }
6563
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Directive });
6564
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: "libTooltip", tooltipPosition: "tooltipPosition", tooltipForceOpen: "tooltipForceOpen" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
6565
+ }
6566
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
6567
+ type: Directive,
6568
+ args: [{
6569
+ selector: '[libTooltip]',
6570
+ }]
6571
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.Overlay }, { type: i1$4.OverlayPositionBuilder }], propDecorators: { libTooltip: [{
6572
+ type: Input
6573
+ }], tooltipPosition: [{
6574
+ type: Input
6575
+ }], tooltipForceOpen: [{
6576
+ type: Input
6577
+ }], show: [{
6578
+ type: HostListener,
6579
+ args: ['mouseenter']
6580
+ }], hide: [{
6581
+ type: HostListener,
6582
+ args: ['mouseleave']
6583
+ }] } });
6584
+
6585
+ class ProgressBarItemComponent {
6586
+ value = input('');
6587
+ text = input('');
6588
+ tooltip = input('');
6589
+ progress = input.required();
6590
+ size = input('md');
6591
+ align = input('horizontal');
6592
+ ariaLabel = input('');
6593
+ showIcon = computed(() => !!this.tooltip());
6594
+ TooltipPosition = TooltipPosition;
6595
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ProgressBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6596
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ProgressBarItemComponent, isStandalone: true, selector: "lib-progress-bar-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"c-progress-bar-item\"\n [class.c-progress-bar-item--vertical]=\"align() === 'vertical'\"\n>\n @if (value() || text() || tooltip()) {\n <div class=\"c-progress-bar-item__title\">\n @if (value()) {\n <p class=\"c-progress-bar-item__value\">{{ value() }}</p>\n } @if (text() || tooltip()) {\n <div class=\"c-progress-bar-item__caption\">\n @if (text()) {\n <span class=\"c-progress-bar-item__text\">{{ text() }}</span>\n } @if (showIcon()) {\n <span\n class=\"c-progress-bar-item__info\"\n [libTooltip]=\"tooltip()\"\n [tooltipPosition]=\"TooltipPosition.TOP\"\n >\n <lib-icon name=\"info-regular\" size=\"sm\" color=\"core-content-soft\" />\n </span>\n }\n </div>\n }\n </div>\n }\n\n <lib-progress-bar\n [progress]=\"progress()\"\n [size]=\"size()\"\n [ariaLabel]=\"ariaLabel() || value()\"\n />\n</div>\n", styles: [".c-progress-bar-item{display:flex;flex-direction:column;gap:var(--space-container-gap-xs);width:100%}.c-progress-bar-item__title{display:flex;align-items:flex-end;gap:var(--space-container-gap-sm);width:100%;flex-wrap:wrap}.c-progress-bar-item__caption{display:flex;align-items:center;gap:var(--space-container-gap-xs);padding-bottom:var(--space-component-gap-xs);flex:1 0 0;min-width:0}.c-progress-bar-item__value{margin:0;white-space:nowrap;color:var(--color-core-content-default);font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-progress-bar-item__text{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-progress-bar-item__info{display:inline-flex;align-items:center;cursor:help}.c-progress-bar-item--vertical .c-progress-bar-item__title{flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-none, 0)}.c-progress-bar-item--vertical .c-progress-bar-item__caption{width:100%;flex:none}\n"], dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["progress", "size", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "directive", type: TooltipDirective, selector: "[libTooltip]", inputs: ["libTooltip", "tooltipPosition", "tooltipForceOpen"] }] });
6597
+ }
6598
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ProgressBarItemComponent, decorators: [{
6599
+ type: Component,
6600
+ args: [{ selector: 'lib-progress-bar-item', imports: [ProgressBarComponent, IconComponent, TooltipDirective], template: "<div\n class=\"c-progress-bar-item\"\n [class.c-progress-bar-item--vertical]=\"align() === 'vertical'\"\n>\n @if (value() || text() || tooltip()) {\n <div class=\"c-progress-bar-item__title\">\n @if (value()) {\n <p class=\"c-progress-bar-item__value\">{{ value() }}</p>\n } @if (text() || tooltip()) {\n <div class=\"c-progress-bar-item__caption\">\n @if (text()) {\n <span class=\"c-progress-bar-item__text\">{{ text() }}</span>\n } @if (showIcon()) {\n <span\n class=\"c-progress-bar-item__info\"\n [libTooltip]=\"tooltip()\"\n [tooltipPosition]=\"TooltipPosition.TOP\"\n >\n <lib-icon name=\"info-regular\" size=\"sm\" color=\"core-content-soft\" />\n </span>\n }\n </div>\n }\n </div>\n }\n\n <lib-progress-bar\n [progress]=\"progress()\"\n [size]=\"size()\"\n [ariaLabel]=\"ariaLabel() || value()\"\n />\n</div>\n", styles: [".c-progress-bar-item{display:flex;flex-direction:column;gap:var(--space-container-gap-xs);width:100%}.c-progress-bar-item__title{display:flex;align-items:flex-end;gap:var(--space-container-gap-sm);width:100%;flex-wrap:wrap}.c-progress-bar-item__caption{display:flex;align-items:center;gap:var(--space-container-gap-xs);padding-bottom:var(--space-component-gap-xs);flex:1 0 0;min-width:0}.c-progress-bar-item__value{margin:0;white-space:nowrap;color:var(--color-core-content-default);font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-progress-bar-item__text{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-progress-bar-item__info{display:inline-flex;align-items:center;cursor:help}.c-progress-bar-item--vertical .c-progress-bar-item__title{flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-none, 0)}.c-progress-bar-item--vertical .c-progress-bar-item__caption{width:100%;flex:none}\n"] }]
6601
+ }] });
6602
+
6426
6603
  class RadioComponent {
6427
6604
  name;
6428
6605
  label;
@@ -7906,152 +8083,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
7906
8083
  type: Output
7907
8084
  }] } });
7908
8085
 
7909
- var TooltipPosition;
7910
- (function (TooltipPosition) {
7911
- TooltipPosition["TOP"] = "top";
7912
- TooltipPosition["BOTTOM"] = "bottom";
7913
- TooltipPosition["LEFT"] = "left";
7914
- TooltipPosition["RIGHT"] = "right";
7915
- })(TooltipPosition || (TooltipPosition = {}));
7916
- class TooltipDirective {
7917
- elementRef;
7918
- overlay;
7919
- positionBuilder;
7920
- libTooltip = '';
7921
- tooltipPosition = TooltipPosition.TOP;
7922
- tooltipForceOpen = false; // Development flag to force tooltip open. To delete when we have the final version of the tooltip.
7923
- overlayRef = null;
7924
- constructor(elementRef, overlay, positionBuilder) {
7925
- this.elementRef = elementRef;
7926
- this.overlay = overlay;
7927
- this.positionBuilder = positionBuilder;
7928
- }
7929
- show() {
7930
- if (this.overlayRef) {
7931
- return;
7932
- }
7933
- // 1. Create the position strategy based on the Input 'tooltipPosition'
7934
- const positionStrategy = this.positionBuilder
7935
- .flexibleConnectedTo(this.elementRef)
7936
- .withPositions([this.getPosition()]);
7937
- // 2. Create the overlay
7938
- this.overlayRef = this.overlay.create({ positionStrategy });
7939
- // 3. Create and attach the component portal
7940
- const tooltipPortal = new ComponentPortal(TooltipComponent);
7941
- const componentRef = this.overlayRef.attach(tooltipPortal);
7942
- // 4. Pass the text to the component
7943
- componentRef.instance.text = this.libTooltip;
7944
- componentRef.instance.position = this.tooltipPosition;
7945
- }
7946
- hide() {
7947
- // Don't hide if forceOpen is true. Useful to test the tooltip.
7948
- if (this.tooltipForceOpen) {
7949
- return;
7950
- }
7951
- if (this.overlayRef) {
7952
- this.overlayRef.dispose();
7953
- this.overlayRef = null;
7954
- }
7955
- }
7956
- // Clean up when the component that is launching the tooltip is destroyed
7957
- ngOnDestroy() {
7958
- this.hide();
7959
- }
7960
- /**
7961
- * Manually hide the tooltip. Useful to test the tooltip.
7962
- */
7963
- forceHide() {
7964
- if (this.overlayRef) {
7965
- this.overlayRef.dispose();
7966
- this.overlayRef = null;
7967
- }
7968
- }
7969
- /**
7970
- * Returns the CDK position configuration based on the 'tooltipPosition' value.
7971
- */
7972
- getPosition() {
7973
- const offset = 2; // Space between the element and the tooltip
7974
- switch (this.tooltipPosition) {
7975
- case 'bottom':
7976
- return {
7977
- originX: 'center',
7978
- originY: 'bottom',
7979
- overlayX: 'center',
7980
- overlayY: 'top',
7981
- offsetY: offset,
7982
- };
7983
- case 'left':
7984
- return {
7985
- originX: 'start',
7986
- originY: 'center',
7987
- overlayX: 'end',
7988
- overlayY: 'center',
7989
- offsetX: -offset,
7990
- };
7991
- case 'right':
7992
- return {
7993
- originX: 'end',
7994
- originY: 'center',
7995
- overlayX: 'start',
7996
- overlayY: 'center',
7997
- offsetX: offset,
7998
- };
7999
- default: // 'top'
8000
- return {
8001
- originX: 'center',
8002
- originY: 'top',
8003
- overlayX: 'center',
8004
- overlayY: 'bottom',
8005
- offsetY: -offset,
8006
- };
8007
- }
8008
- }
8009
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Directive });
8010
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: TooltipDirective, isStandalone: true, selector: "[libTooltip]", inputs: { libTooltip: "libTooltip", tooltipPosition: "tooltipPosition", tooltipForceOpen: "tooltipForceOpen" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
8011
- }
8012
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipDirective, decorators: [{
8013
- type: Directive,
8014
- args: [{
8015
- selector: '[libTooltip]',
8016
- }]
8017
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.Overlay }, { type: i1$4.OverlayPositionBuilder }], propDecorators: { libTooltip: [{
8018
- type: Input
8019
- }], tooltipPosition: [{
8020
- type: Input
8021
- }], tooltipForceOpen: [{
8022
- type: Input
8023
- }], show: [{
8024
- type: HostListener,
8025
- args: ['mouseenter']
8026
- }], hide: [{
8027
- type: HostListener,
8028
- args: ['mouseleave']
8029
- }] } });
8030
-
8031
- class TooltipComponent {
8032
- text = '';
8033
- position = TooltipPosition.TOP;
8034
- get positionClass() {
8035
- return `position-${this.position}`;
8036
- }
8037
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8038
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, host: { properties: { "class": "this.positionClass" } }, ngImport: i0, template: "<div class=\"c-tooltip\">\n <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] });
8039
- }
8040
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
8041
- type: Component,
8042
- args: [{ selector: 'lib-tooltip', template: "<div class=\"c-tooltip\">\n <span class=\"c-tooltip__text\">{{ text }}</span>\n</div>\n", styles: [":host{display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.c-tooltip{position:relative;border-radius:var(--size-border-radius-sm);background:var(--color-core-background-surface-floating);display:flex;max-width:9rem;padding:var(--space-component-padding-md);flex-direction:column;justify-content:center;align-items:flex-start;color:var(--color-core-content-soft);font-family:var(--typography-body-xs-family);font-size:var(--typography-body-xs-size);font-style:normal;font-weight:var(--typography-body-xs-weight);line-height:var(--typography-body-xs-line-height);letter-spacing:var(--typography-body-xs-letter-spacing);animation:fadeIn .2s ease-in-out}.c-tooltip__text{max-width:280px}:host.position-top .c-tooltip{left:50%;transform:translate(-50%) translateY(-.5rem)}:host.position-top .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--color-core-background-surface-floating);bottom:-.5rem;left:50%;transform:translate(-50%)}:host.position-bottom .c-tooltip{left:50%;transform:translate(-50%) translateY(.5rem)}:host.position-bottom .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--color-core-background-surface-floating);top:-.5rem;left:50%;transform:translate(-50%)}:host.position-left .c-tooltip{top:50%;transform:translate(-.5rem) translateY(-50%)}:host.position-left .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid var(--color-core-background-surface-floating);right:-.5rem;top:50%;transform:translateY(-50%)}:host.position-right .c-tooltip{top:50%;transform:translate(.5rem) translateY(-50%)}:host.position-right .c-tooltip:before{content:\"\";position:absolute;width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid var(--color-core-background-surface-floating);left:-.5rem;top:50%;transform:translateY(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
8043
- }], propDecorators: { text: [{
8044
- type: Input
8045
- }], position: [{
8046
- type: Input
8047
- }], positionClass: [{
8048
- type: HostBinding,
8049
- args: ['class']
8050
- }] } });
8051
-
8052
8086
  /**
8053
8087
  * Generated bundle index. Do not edit.
8054
8088
  */
8055
8089
 
8056
- export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, BasicSidebarMenuComponent, BreadcrumbComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownActionComponent, DropdownActionTriggerDirective, DropdownSelectComponent, DropdownSelectTriggerDirective, HelperTextComponent, IconComponent, InputCounterComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, MenuItemSectionComponent, ModalComponent, ModalService, OverlayComponent, OverlayTriggerDirective, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarProgrammaticComponent, SidebarProgrammaticExamplesComponent, SidebarService, SidebarWithFooterComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
8090
+ export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, BasicSidebarMenuComponent, BreadcrumbComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, DropdownActionComponent, DropdownActionTriggerDirective, DropdownSelectComponent, DropdownSelectTriggerDirective, HelperTextComponent, IconComponent, InputCounterComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkActionComponent, LinkComponent, MenuChildItemComponent, MenuItemComponent, MenuItemSectionComponent, ModalComponent, ModalService, OverlayComponent, OverlayTriggerDirective, PaginationComponent, PasswordInputComponent, ProgressBarComponent, ProgressBarItemComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SidebarComponent, SidebarProgrammaticComponent, SidebarProgrammaticExamplesComponent, SidebarService, SidebarWithFooterComponent, SocialLoginComponent, SpinnerComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent, TooltipDirective, TooltipPosition };
8057
8091
  //# sourceMappingURL=crowdfarming-oliva-ds.mjs.map