@onemrvapublic/design-system-demos 20.7.0-develop.2 → 20.7.0-develop.20

package/assets/json/tooltip.json

@@ -1 +1 @@
-{"demo-tooltip.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"right\"\n          matTooltip=\"Here you can write some information on the right\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Right\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"above\"\n          matTooltip=\"Here you can write some information above\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Above\n      </p>\n      <p class=\"text-center\" style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"below\"\n          matTooltip=\"Here you can write some information below\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Below\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p class=\"text-right\" style=\"display: flex\">\n        Left\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"left\"\n          matTooltip=\"Here you can write some information on the left\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n      </p>\n    </div>\n  </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"right\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent>\n      I am a custom content with html (position: <b>right</b>) but there are 3\n      other positions\n      <ul>\n        <li>left</li>\n        <li>top</li>\n        <li>bottom</li>\n      </ul>\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"left\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent2\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent2>\n      I am a custom content (position: <b>left</b>)\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"above\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent3\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent3>\n      <div style=\"color: pink\">\n        I am a custom content with html (position: <b>top</b>)\n      </div></ng-template\n    >\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"below\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent4\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent4>\n      I am a custom content (position: <b>bottom</b>)\n    </ng-template>\n  </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}
+{"demo-tooltip.component.html":"@if (html()) {\n  <mat-icon\n    OnemrvaMatTooltip\n    [position]=\"position()\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [contentTemplate]=\"tooltipContent\"\n    [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n    [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n  >\n    info\n  </mat-icon>\n  <ng-template #tooltipContent>\n    I am a custom content with html (position: <b>right</b>) but there are 3\n    other positions\n    <ul>\n      <li>left</li>\n      <li>top</li>\n      <li>bottom</li>\n    </ul>\n  </ng-template>\n} @else {\n  <mat-icon\n    matTooltipHideDelay=\"500000000\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [matTooltipPosition]=\"position()\"\n    matTooltip=\"Here you can write some information on the right\"\n    aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n  >\n    info\n  </mat-icon>\n}\n","demo-tooltip.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {\n  position = input<TooltipPosition>('above');\n  filled = input<boolean>(false);\n  html = input<boolean>(false);\n}\n"}